JavaScript模块化开发笔记

Posted 2020-06-12

1.Seajs库

   解决开发中的冲突依赖等问题，提供代码可维护性。

  SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架，可用来轻松愉悦地加载任意 javascript 模块和css模块样式。

  SeaJS 就两个核心：模块定义和 模块的加载及依赖关系。

  官方网站 http://seajs.org

2.seajs如何解决?

  有以下四个步骤：

   ①通过script引入sea.js的库

   ②变成模块  –define

   ③调用模块  –exports

   ④加载模块  –seajs.use

      依赖模块   –require

例如：用define把普通模块变成sea的模块

function show(){
        alert(1);
    }

//使用define改写model1.js

  define(function(require,exports,module){ 
        //sea下的参数 : 不允许修改的 三个参数可以都写，可以都不写或者只写前两个或者只写前一个，只能省略后面的参数，不能省略前面的参数
        //exports : 对外提供接口的对象
        function show(){
        alert(1);
    }
        exports.show = show;
    
});

seajs.use两个参数 : 第一个参数 : 模块的地址--相对于sea.js的相对路径,后面的“.js”后缀可以省略  第二个参数 :callback回调函数 say.sayHello()就是调用sayHello模块的exports.sayHello方法，当然这callback函数中有个say参数。

seajs.use("sayHello/sayHello",function(say){
 say.sayHello("out","Hello SeaJS!");
});

seajs.use(‘./js/module1.js‘,function(ex){
    ex.show();  //1    
});

模块的依赖关系

  模块的依赖其实在模块定义的时候就应该存在了。

  例如在model2.js里面如果要弹出model3.js模块里面的一个参数

//model2.js
define(function(require,exports,module){  
        //require : 模块之间依赖的接口
    var a = require(‘./module3.js‘).a;   //当引入的是sea下面的模块的时候，那么require执行完的结果就是exports
        function show(){
        alert(a);
    }
        exports.show = show;
    
});

//model3.js
define(function(require,exports,module){
    var a = 100;
    exports.a=a;
});

页面中调用

seajs.use(‘./js/module2.js‘,function(ex){ 
    ex.show();  //100     
});

3.构建部署

对于正式项目，在发布上线前，还需要对源码进行压缩、合并等操作。
这可以通过 spm 或 Grunt 等工具来实现。