javascript框架设计读书笔记之模块加载系统
模块加载,其实就是把js分成很多个模块,便于开发和维护。因此加载很多js模块的时候,需要动态的加载,以便提高用户体验。
在介绍模块加载库之前,先介绍一个方法。
动态加载js方法:
functionloadJs(url,callback){
varnode=document.createElement("script");
node[window.addEventListener?"onload":"onreadystatechange"]=function(){
if(window.addEventListener||/loaded|complete/i.test(node.readyState)){
callback();
node.onreadystatechange=null;
}
}
node.onerror=function(){};
node.src=url;
varhead=document.getElementsByTagName("head")[0];
head.insertBefore(node,head.firstChild); //插入到head的第一个节点前,防止ie6下head标签没闭合前,使用appendChild报错。
}
由于司徒正美使用了它写的mass框架来介绍模块加载,而业界用的最多的是require.js和sea.js。因此,我觉得他个性有点强。
我来讲下sea.js的模块加载过程吧:
页面chaojidan.jsp,在head标签中,引入sea.js,这时就会得到seajs对象。
同时引入index.js。
index.js的代码如下:
seajs.use(['./a','jquery'],function(a,$){
varnum=a.a;
$('#J_A').text(num);
})
a.js:
define(function(require,exports,module){
varb=require('./b');
vara=function(){
return1+parseInt(b.b());
}
exports.a=a;
})
b.js:
define(function(require,exports,module){
varc=require('./c');
varb=function(){ return2+parseInt(c.c()); } exports.b=b; })
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短