前端模块规范

1、为何要使用模块?
(1)将代码作为模块,方便他人使用;想加载什么模块就加载什么;
(2)管理模块之间的依赖性,便于代码编写和维护;
2、CommonJs
它的最好实现是NodeJS,运行在服务器端(好像也是可以在浏览器端),同步加载模块。

var math = require('./math');
math.add(2, 3);

问题:这在服务器端不是问题,加载文件都放在本地硬盘中,等待时间就是读取硬盘的时间; 但对于浏览器而言,所有的文件存在于服务前端,等待时间取决于网速,可能会等很久。

3、AMD 异步模块定义
它的最好实现是RequireJs,由于一般在浏览器端的代码,同时加载会产生阻塞,影响性能、可用性、调试和跨域访问等,所以提出了这种异步加载模块。
模块引用方式:

define(ids? dependencies? factory);

例子:

//ex.js
define(function() {
  var exports = {};
  exports.say = function() {
    console.log('hello');
  }
  return exports;
//加载模块
  require(['ex'], function(ex) {
    console.log(ex.say);
  });
});

如果在定义模块的时候,还有依赖别的模块,写在参数数组中

define(['myLib'], function(mylib) {})

4、CMD 通用模块定义
它的最爱好实现是SeaJs。
模块引入方式

define(factory);

依赖部分,CMD支持动态引入

define(function(require, exports, module) {
});

5、AMD和CMD不同点
(1)对于依赖的模块,AMD是提前执行,CMD是延后执行。
(2)对于依赖,AMD推崇依赖前置,CMD推崇依赖就近。
(3)API的不同
6、相同点
都有difine和require,而且调用方式实际都可以添加依赖参数,也就是说都可以用提供依赖参数的方式来实现预加载依赖模块(但是不推荐)
AMD也可以在factory中使用require来现加载用到的模块,但是这个模块就不会预先加载,属于用到才加载的同步加载了。
var a = require('a'); //加载模块a

你可能感兴趣的:(前端模块规范)