Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JavaScript模块是什么? #24

Open
zhouzhongyuan opened this issue Mar 2, 2017 · 4 comments
Open

JavaScript模块是什么? #24

zhouzhongyuan opened this issue Mar 2, 2017 · 4 comments

Comments

@zhouzhongyuan
Copy link
Owner

zhouzhongyuan commented Mar 2, 2017

@zhouzhongyuan
Copy link
Owner Author

zhouzhongyuan commented Mar 11, 2017

模块化规范:即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初的 JavaScript 是那么的裸奔呢——全局变量就是它的模块化规范。

野生规范

是 JavaScript 社区中的开发者自己草拟的规则,得到了大家的承认或者广泛的应用。

AMD

定义: 异步模块定义规范(AMD)制定了定义模块的规则,这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应(浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。

CMD

不用管CMD了。

CommonJS

阮一峰CommonJS规范

@zhouzhongyuan
Copy link
Owner Author

es6 {

  export   :      '可以输出多个,输出方式为 {}' ,

  export  default : ' 只能输出一个 ,可以与export 同时输出,但是不建议这么做',

  解析阶段确定对外输出的接口,解析阶段生成接口,

  模块不是对象,加载的不是对象,

  可以单独加载其中的某个接口(方法),

  静态分析,动态引用,输出的是值的引用,值改变,引用也改变,即原来模块中的值改变则该加载的值也改变,

  this 指向undefined

}

commonJS {

  module.exports =  ...   :      '只能输出一个,且后面的会覆盖上面的' ,

  exports. ...  : ' 可以输出多个',

  运行阶段确定接口,运行时才会加载模块,

  模块是对象,加载的是该对象,

  加载的是整个模块,即将所有的接口全部加载进来,

  输出是值的拷贝,即原来模块中的值改变不会影响已经加载的该值,

  this 指向当前模块

}

form http://www.cnblogs.com/weblinda/p/6740833.html

@zhouzhongyuan
Copy link
Owner Author

CommonJS specification

没想到CommonJS规范如此简单,以前干嘛去了?

CommonJS对模块的定义十分简单,主要分为模块引用、模块定义和模块标识3个部分。

  1. 模块引用
    模块引用的示例代码如下:
var math = require('math');

在CommonJS规范中,存在require()方法,这个方法接受模块标识,以此引入一个模块的API到当前上下文中。

  1. 模块定义
    在模块中,上下文提供require()方法来引入外部模块。对应引入的功能,上下文提供了exports对象用于导出当前模块的方法或者变量,并且它是唯一导出的出口。在模块中,还存在一个module对象,它代表模块自身,而exports是module的属性。在Node中,一个文件就是一个模块,将方法挂载在exports对象上作为属性即可定义导出的方式:
// math.js
exports.add = function () {
  var sum = 0,
    i = 0,
    args = arguments,
    l = args.length;
  while (i < l) {
    sum += args[i++];
  }
  return sum;
};

在另一个文件中,我们通过require()方法引入模块后,就能调用定义的属性或方法了:

// program.js
var math = require('math');
exports.increment = function (val) {
  return math.add(val, 1);
};
  1. 模块标识
    模块标识其实就是传递给require()方法的参数,它必须是符合小驼峰命名的字符串,或者以.、..开头的相对路径,或者绝对路径。它可以没有文件名后缀.js。
    模块的定义十分简单,接口也十分简洁。它的意义在于将类聚的方法和变量等限定在私有的作用域中,同时支持引入和导出功能以顺畅地连接上下游依赖。如图2-3所示,每个模块具有独立的空间,它们互不干扰,在引用时也显得干净利落。

图2-3 模块定义
CommonJS构建的这套模块导出和引入机制使得用户完全不必考虑变量污染,命名空间等方案与之相比相形见绌。

1 similar comment
@zhouzhongyuan
Copy link
Owner Author

CommonJS specification

没想到CommonJS规范如此简单,以前干嘛去了?

CommonJS对模块的定义十分简单,主要分为模块引用、模块定义和模块标识3个部分。

  1. 模块引用
    模块引用的示例代码如下:
var math = require('math');

在CommonJS规范中,存在require()方法,这个方法接受模块标识,以此引入一个模块的API到当前上下文中。

  1. 模块定义
    在模块中,上下文提供require()方法来引入外部模块。对应引入的功能,上下文提供了exports对象用于导出当前模块的方法或者变量,并且它是唯一导出的出口。在模块中,还存在一个module对象,它代表模块自身,而exports是module的属性。在Node中,一个文件就是一个模块,将方法挂载在exports对象上作为属性即可定义导出的方式:
// math.js
exports.add = function () {
  var sum = 0,
    i = 0,
    args = arguments,
    l = args.length;
  while (i < l) {
    sum += args[i++];
  }
  return sum;
};

在另一个文件中,我们通过require()方法引入模块后,就能调用定义的属性或方法了:

// program.js
var math = require('math');
exports.increment = function (val) {
  return math.add(val, 1);
};
  1. 模块标识
    模块标识其实就是传递给require()方法的参数,它必须是符合小驼峰命名的字符串,或者以.、..开头的相对路径,或者绝对路径。它可以没有文件名后缀.js。
    模块的定义十分简单,接口也十分简洁。它的意义在于将类聚的方法和变量等限定在私有的作用域中,同时支持引入和导出功能以顺畅地连接上下游依赖。如图2-3所示,每个模块具有独立的空间,它们互不干扰,在引用时也显得干净利落。

图2-3 模块定义
CommonJS构建的这套模块导出和引入机制使得用户完全不必考虑变量污染,命名空间等方案与之相比相形见绌。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant