正文

sea.js模块化编程

IP云
IP云V管理员/6 阅读
06/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

* JS中模块的定义

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

  1. 立即执行函数，闭包
  2. var myModule = (function(){
  3. var var1 = 1;
  4. var var2 = 2;
  5. function fn1(){
  6. }
  7. function fn2(){
  8. }
  9. return {
  10. fn1: fn1,
  11. fn2: fn2
  12. };
  13. })();

node.js中的模块化

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

sea.js

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

sea.js写法

  1. define(function(require,exports,module){
  2. var a = require('./a')
  3. a.todo()
  4. //***省略100行
  5. var b = require('./b') //依赖就近书写
  6. b.todo()
  7. //.....
  8. })

define定义模块

    define函数用来定义模块
        define(factory)  factory为模块的构造方法

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

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

修改jquery为CMD模块

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

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

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

 暴露接口

exports
module.exports
return

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

  1. define(function(require,exports){
  2.  // 第一种
  3. exports.foo = 'bar';
  4. exports.do = function(){}
  5. //第二种
  6. return {
  7. foo : 'bar',
  8. do : function(){}
  9. };
  10. //第三种
  11.    module.exports = {
  12.        foo : 'bar',
  13.        do : function(){};
  14. }
  16. });

启动

  1. <script type="text/javascript" src="sea.js"></script>
  2. <script>
  3. seajs.use('main/main') //这个文件会第一个被sea.js加载
  4. </script>

来自为知笔记(Wiz)