Javascript 模块化概述

模块化的目的

当网站开发得越来越复杂，会经常遇到以下问题：

• 命名冲突
• 文件依赖

Sea.js

一个适合web前端的模块加载器，遵守 CMD （Common Module Definition）模块定义规范

• 解决上面两个问题
• http://seajs.org
• 模块化的概念

Sea.js的使用方法

1. 引入Sea.js库

2. 定义模块

define(function(require,exports,module){//参数名写法不变
    function tab(){
        alert('hi');
    }
    //exports：对外的接口
    exports.tab=tab;
});

3. 调用模块

//参数：模块的地址(相对seajs的地址)，回调函数
seajs.use('path.js',function(ex){//回调函数的参数就是模块中的exports

    ex.tab();//很好的解决了命名冲突的问题
    
});

4. 依赖模块

define(function(require,exports,module){
    //require：依赖的接口
    var dep = require('path.js')；//如果地址指向模块，返回模块中的exports
    dep.tab();
    function tab(){
        alert('hi');
    }
    //exports：对外的接口
    exports.tab=tab;
});

进阶

1. 参数module

与 exports 类似，用来在模块内部对外提供接口。

define(function(require, exports, module) {

  // 对外提供接口
  module.exports = {
    name: 'a',
    doSomething: function() {};
  };

});

2. 异步接口

require.async();

好处：无需等待,按需加载

require.async('./scale.js',function(ex){
    ex.scale(a,b);
});

3. 调用多个模块

seajs.use(['main.js','main2.js'],function(ex,ex2){
    //do something...
});

4. seajs.config

• alias:模块别名
• preload：预加载
• debug：调试

5. 插件

• 文本插件
• shim插件：js框架转模块化。

模块化的历史

• ECMAScript 6 将正式支持模块语法。
• 因nodeJS发展起来，服务器端需要模块化。
• commonJS规范，针对服务器端js开发，请求文件在本地，所以请求速度快，而浏览器端需要向服务器请求文件，会有所延迟，所以跟适合异步加载。
• AMD(Asynchromous Module Definition) 异步模块加载规范和CMD （Common Module Definition）通用模块定义，适合前端js开发。
• requireJS
  • 和seaJS类似，模块化插件。
  • requireJS采用AMD((Asynchromous Module Definition)规范，seaJS采用CMD规范。AMD与CMD的区别
  • seaJS与requireJS的区别

转载于:https://www.cnblogs.com/emilyzhou/p/4635252.html