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; })