sea.js模块加载工具

seajs的使用

seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js')

1.安装

npm install --save seajs

2.API

2.1 require

在一个模块中引入其它模块
var addSub = require('./addSub');

2.2 seajs.use()

  • 加载模块，启动模块系统。

    • 加载一个模块 seajs.use('id')
    • 加载一个模块，在加载完成时，执行回调 seajs.use('id', callback)
    • 加载多个模块，加载完成时，执行回调 seajs.use(['id1','id2',…],callback)
  • 注意：
    • 在调用 seajs.use 之前，需要先引入 sea.js 文件
    • seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行，需要使用 jquery 等类库来保证
      +　seajs.use 理论上只用于加载启动，不应该出现在 define 中的模块代码里

2.3 module

module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

  • module.id
    模块的唯一标识，可以通过 define 方法的第一个参数来指定，默认为该模块文件的绝对路径
  • module.uri
    模块的绝对路径
  • module.dependencies
    dependencies 是一个数组，表示当前模块的依赖
  • module.exports
    当前模块对外提供的接口对象
    相当于每个模块内部最终都执行了这么一句话：return module.exports
    模块与模块之间的通信接口
  1. module.exports={
  2.         add:function(x,y){
  3.             return parseFloat(x)+parseFloat(y);
  4.         },
  5.         sub:function(x,y){
  6.             return parseFloat(x)-parseFloat(y);
  7.         }
  8.     }

2.4 exports

每个文件模块中默认的对外接口对象是module.exports,另外seajs还提供了一个接口对象exports
注意:exports是module.exports接口对象的一个引用,也就是说修改了exports就相当于修改了module.exports
将模块中定义的数据接口暴露出去(变量,方法),供其它模块使用.
但是如果要向外暴露一个单独的变量,函数等成员,那就必须通过给module.exports赋值才可以

2.5 define(factory)

  • define 是一个全局函数，用来定义模块。

  • define 接受 factory 参数，factory 可以是一个函数，也可以是一个对象或字符串。

  • factory 为对象、字符串时，表示模块的接口就是该对象、字符串。

  • factory 是一个对象时

  • define({})

  • factory 是一个字符串时

  • define('hello')

  • factory 是一个函数时
  1. define(function(require,exports,module){
  2.     //...js代码...
  3. });

3.使用步骤

  • 模块系统:
    • 1.定义模块成员
    • 2.设定交互规则
  • 3.1 引包
  • 3.2 使用define定义一个模块,所有代码写到define回调函数中
  • 3.3 使用module.exports作为模块与模块之间的通信接口对象
  • 3.4 使用require函数加载模块,执行模块中的代码得到模块中的module.exports接口对象
  • 3.5 使用seajs.use方法,启动模块系统.

4.小案例

4.1html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <input type="text" id="inputX">
  9. <select name="" id="selMethed">
  10.     <option value="0">+</option>
  11.     <option value="1">-</option>
  12. </select>
  13. <input type="text" id="inputY">
  14. <button id="btn">=</button>
  15. <input type="text" id="outPut">
  17. <!--1.引入seajs包-->
  18. <script src="lib/sea.js"></script>
  19. <script>
  20.     /*2.设置主入口文件*/
  21.     seajs.use('./js/main')
  22. </script>
  23. </body>
  24. </html>

4.2main.js文件 主模块入口文件

  1. define(function(require,exports,module){
  2.     /*引入addSub模块*/
  3.     var addSub = require('./addSub');
  5.     var inputX = document.querySelector('#inputX');
  6.     var inputY = document.querySelector('#inputY');
  7.     var selMethed = document.querySelector('#selMethed');
  8.     var outPut = document.querySelector('#outPut');
  9.     var addSubClick = document.querySelector('#btn');
  10.     var selMethedValue = selMethed.value;
  12.     var outPutValue='';//存储计算的结果
  13.     addSubClick.onclick=function(){
  15.         var xValue = inputX.value;
  16.         var yValue = inputY.value;
  17.         console.log(xValue);
  18.         /*使用addSub中暴露的方法*/
  19.         switch(selMethedValue){
  20.             case '0':
  21.                 outPutValue = addSub.add(xValue,yValue);
  22.                 break;
  23.             case '1':
  24.                 outPutValue = addSub.sub(xValue,yValue);
  25.         }
  26.     console.log(outPutValue);
  27.         //把结果放在输出的input的中
  28.         outPut.value=outPutValue;
  29.     }
  31. });

4.3addSub.js被引用的模块文件

  1. define(function(require,exports,module){
  3.     module.exports={
  4.         add:function(x,y){
  5.             return parseFloat(x)+parseFloat(y);
  6.         },
  7.         sub:function(x,y){
  8.             return parseFloat(x)-parseFloat(y);
  9.         }
  10.     }
  12. });




posted @ 2016-11-02 20:48  itly  阅读(488)  评论(0)    收藏  举报