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
模块与模块之间的通信接口
module.exports={add:function(x,y){return parseFloat(x)+parseFloat(y);},sub:function(x,y){return parseFloat(x)-parseFloat(y);}}
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 是一个函数时
define(function(require,exports,module){//...js代码...});
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文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><input type="text" id="inputX"><select name="" id="selMethed"><option value="0">+</option><option value="1">-</option></select><input type="text" id="inputY"><button id="btn">=</button><input type="text" id="outPut"><!--1.引入seajs包--><script src="lib/sea.js"></script><script>/*2.设置主入口文件*/seajs.use('./js/main')</script></body></html>
4.2main.js文件 主模块入口文件
define(function(require,exports,module){/*引入addSub模块*/var addSub = require('./addSub');var inputX = document.querySelector('#inputX');var inputY = document.querySelector('#inputY');var selMethed = document.querySelector('#selMethed');var outPut = document.querySelector('#outPut');var addSubClick = document.querySelector('#btn');var selMethedValue = selMethed.value;var outPutValue='';//存储计算的结果addSubClick.onclick=function(){var xValue = inputX.value;var yValue = inputY.value;console.log(xValue);/*使用addSub中暴露的方法*/switch(selMethedValue){case '0':outPutValue = addSub.add(xValue,yValue);break;case '1':outPutValue = addSub.sub(xValue,yValue);}console.log(outPutValue);//把结果放在输出的input的中outPut.value=outPutValue;}});
4.3addSub.js被引用的模块文件
define(function(require,exports,module){module.exports={add:function(x,y){return parseFloat(x)+parseFloat(y);},sub:function(x,y){return parseFloat(x)-parseFloat(y);}}});