sea.js模块化编程

2022-06-11 00:54:20

* 为什么要模块化？

解决文件依赖

解决命名冲突

* JS中模块的定义

通常，我们可以这样定义一个模块。

利用闭包特性定义一个模块，对全局暴露一个变量，外部不能访问模块内部定义的变量和方法。


立即执行函数，闭包
var myModule = (function(){
    var var1 = 1;
    var var2 = 2;
    function fn1(){
    }
    function fn2(){
    }
    return {
        fn1: fn1,
        fn2: fn2
    };
})();

node.js中的模块化

node中模块的引入是同步的，遵循CommonJS规范。

sea.js

遵循CMD （通用模块定义），对于依赖的模块，就近依赖，延迟执行。

sea.js写法


define(function(require,exports,module){
  var a = require('./a')
  a.todo()
  //***省略100行
  var b = require('./b')  //依赖就近书写
  b.todo()
  //.....
})

define定义模块

define函数用来定义模块

define(factory) factory为模块的构造方法


define(function(require,exports,module){
  // 模块代码
});

define(id?,deps?,factiory)

id表示模块标识，数组deps是模块依赖，两个参数都可以省略，可以通过构建工具自动生成。

修改jquery为CMD模块

define.cmd Object 一个空对象，可用来判定当前页面是否有 CMD 模块加载器：

对于非seajs模块化的类库，我们可以手动定义它，通过define的cmd规范定义就可以正常使用了


if (typeof define === 'function' && define.cmd) {
	define(function (require, exports, module) {
		module.exports = jQuery;
	})

暴露接口

exports

module.exports

return

一定不能为exports赋值对象，因为exports仅仅是module.exports的一个引用


define(function(require,exports){
  // 第一种
  exports.foo = 'bar';
  exports.do = function(){}
  //第二种
  return {
    foo : 'bar',
    do : function(){}
  };
  //第三种
    module.exports = {
        foo : 'bar',

        do : function(){};

   }


});

启动


<script type="text/javascript" src="sea.js"></script>

<script>
  seajs.use('main/main')  //这个文件会第一个被sea.js加载
</script>

来自为知笔记(Wiz)

码农公寓

* 为什么要模块化？ 解决文件依赖 解决命名冲突