zoukankan      html  css  js  c++  java
  • 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">
    16. <!--1.引入seajs包-->
    17. <script src="lib/sea.js"></script>
    18. <script>
    19. /*2.设置主入口文件*/
    20. seajs.use('./js/main')
    21. </script>
    22. </body>
    23. </html>

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

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

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

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




  • 相关阅读:
    android 多线程
    Uva 10881 Piotr’s Ants 蚂蚁
    LA 3708 Graveyard 墓地雕塑 NEERC 2006
    UVa 11300 Spreading the Wealth 分金币
    UVa 11729 Commando War 突击战
    UVa 11292 The Dragon of Loowater 勇者斗恶龙
    HDU 4162 Shape Number
    HDU 1869 六度分离
    HDU 1041 Computer Transformation
    利用可变参数函数清空多个数组
  • 原文地址:https://www.cnblogs.com/itlyh/p/6024457.html
Copyright © 2011-2022 走看看