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 新年祝福语大全简短老师