码迷,mamicode.com
首页 > Web开发 > 详细

模块化理解 CommonJS AMD CMD ES6模块

时间:2020-05-28 16:33:50      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:mod   strong   example   代码   方法   格式   func   同步   其他   

模块化就是将系统分解成一个一个独立的功能模块,模块是独立的,可复用的,模块之间是解耦的。

 

CommonJS

Commonjs模块是一个可复用的js块,通过exports输出这个特定对象,其他模块通过require()引用此对象;

CommonJS支持无封装的模块(即没有定义的相关语句),把我们从AMD的define()封装中解放出来;

CommonJS只支持对象作为模块;

 1 //package/lib is a dependency we require
 2 var lib = require("package/lib");
 3 
 4 //behaviour for our module
 5 function foo(){
 6    lib.log("hello world!")
 7 }
 8 
 9 //export (expose) foo to other modules
10 exports.foo = foo

 Node应用由模块组成,采用commonjs模块规范,每个文件是一个模块,有自己的作用域。

commonjs规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的

exports属性(module.exports)是对外的接口。require方法用于加载模块

 1 //example.js
 2 var x=5;
 3 var foo = function(v){
 4   return v + x;
 5 };
 6 module.exports.x = x;
 7 module.exports.foo = foo;
 8 
 9 //test.js
10 var example = require(‘./example.js‘);
11 console.log(example.x);//5
12 console.log(example.foo(1))//6

commonJs模块特点:

1.所有代码都运行在模块作用域,不会污染全局作用域

2.模块可多次加载,但只在第一次加载运行,运行结果会存储在缓存,后面加载直接读取缓存,必须清除缓存才能让模块再次运行;

3.模块采用同步运行方式,按照在代码中出现但顺序进行加载

module.exports属性

module.exports属性表示当前模块对外输出但接口,其他文件加载该模块就是读取module.exports变量;

exports变量

为了方便,Node为每个模块提供一个exports变量,指向module.exports;这等同于在每个模块的头部都有一行一下命令:

 1 var exports = module.exports 

 即,在对外输出模块接口时,可以向exports对象添加方法

1 exports.area = function (r) {
2   return Math.PI * r * r;
3 };

注意,不能直接将exports变量指向一个值,因为这样等于切断了exportsmodule.exports的联系。

即 exports = function(r){return Math.PI*r*r;}是无效的。

1 exports.hello = function(){
2     return ‘hele‘;
3 }
4 module.exports = ‘Hello world‘;

上面代码中,hello函数是无法输出的,因为下面module.exports被重新赋值了。

 

AMD(Asynchronous Module Defination)

异步模块定义规范,使用异步方式加载模块,通过define方法定义模块,require方法加载模块。

也可以说AMD是专门为浏览器中JavaScript环境设计的规范。它吸取了CommonJS的一些优点,但又不照搬它的格式;

 

模块化理解 CommonJS AMD CMD ES6模块

标签:mod   strong   example   代码   方法   格式   func   同步   其他   

原文地址:https://www.cnblogs.com/Janejxt/p/12981223.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!