1.模块化有助于生产效率,方便以后维护的
2.非模块化带来的问题在于命名冲突和文件依赖,不能设置似有成员
3.seajs(懒加载)
- 导入seajs
- define() 定义一个模块,define的回调的三个参数名字不可更改
define(function (require, exports, module) {});
- exports或者module.exports将模块中的成员暴露出来
- seajs.use 使用一个模块
- config() 配置一些基本信息(别名、路径)
define(function (require, exports, module) { module.exports={ add:function(a,b){ return parseInt(a) + parseInt(b) }, mul:function(a,b){ return parseInt(a) - parseInt(b) } } }); <script src="scripts/sea-debug.js"></script> <script> seajs.use("seajs.js", function (obj) { console.log(obj.add(5,6)); console.log(obj.mul(5,6)); }); </script>
require引入另一个模块(基于seajs.js的位置)exports输出单个module.exports输出时对象 HTML页面中的config作用是为了简化调用模块
seajs.config({ //设置路径 base: "modules/demo4", //设置别名 alias: { c: "calc", p: "power" } });
-
seajs原理
function loadJS(path, callback) { var head = document.getElementsByTagName("head")[0]; var node = document.createElement("script"); node.src = path; head.appendChild(node); //浏览器兼容处理 var supportOnload = "onload" in node; if(supportOnload) { node.onload = function () { callback(); } }else{ node.onreadystatechange = function () { if(node.readyState == "loaded" || node.readyState == "complete") { callback(); } } } } //调用 loadJS("js/test.js", function () { test(); })
-
模块化框架requireJS(预加载)
- seajs遵守CMD规范
- CMD规范的地址 https://github.com/seajs/seajs
- CMD规范的特点 所有的require()都是懒加载模式,用到的时候才去加载,提升初始化时加载的性能
- requirejs遵守AMD规范 requirejs官网 http://www.requirejs.org/
- AMD规范的地址
- AMD规范的特点 所有的require()都是一个预加载模式
时间: 2024-10-20 01:47:16