|
|
51CTO旗下网站
|
|
移动端

前端基础框架的思考和尝试

前端基础框架是一直在思考类似的关于js模块和文件管理的方式,于是,经历了好几天的苦思冥想,稍微做了些尝试。下面会细细道来前端基础框架的详细内容。

作者:佚名来源:博客园|2010-12-29 09:51

近日我一直在思考类似的关于js模块和文件管理的方式。正好团队里也正有这样的需求,于是,经历了好几天的苦思冥想,稍微做了些尝试。下面会细细道来。

【js模块和文件的管理】

基于这个title,前提是我们已经明确了我们有了一个组件或者js methods 的lib,我们暂且把它叫做库,库里面存储了很多我们常用的东西,比如js插件,封装好的methods 
以及其他的一些lib组件。为了更好的管理我们这些颗粒化的js文件,我们的库通常都是呈颗粒化的。基于这种情况,我们可以说一个js文件就对应一个模块module,他有他相对独立的功能。这种管理模式是目前大多数主流框架的文件和模块管理模式,如YUI,EXT等,这样的好处是,可以按需调用。并且调用的模块一目了然。但是这样也有一个弊端,就是如果一个页面需要多个模块的支持,那么自然就需要加载对应的多个模块的js文件,http连接数自然会增加。这对网站的性能来说当然是不好的。所以,YUI等成熟的框架自然不会遗漏这个问题,他们也有一套自己注册和管理模块的机制(可以参考YUI的register和loader模块)

当然,jQuery凭借他易用的api风格和强大的选择器也赢得了很大的市场,但是我们通常喜欢把jQuery叫做一个方法库,而不是框架的原因是它相对于其他框架而言的话,对模块和文件的管理就稍逊一筹。虽然他后来的新版本也提供了自己的模块管理机制...

但是,这并不存在谁对谁错,谁好谁坏的问题,只是各自的侧重点不同而已。建站者选择谁只是看谁更适合自己而已。有些企业觉得YUI的架构模式更适合自己,于是选择了跟他相似的模式,于是有了百度的Tangram,淘宝的kissy,有的企业觉得jQuery更适合现在的自己,于是选择的jQuery,比如豆瓣,于是也有了克军的轻量级前端框架Do。我相信每个团队能够出一套自己的框架或者库都是不容易的,都是需要时间积累的,所以我从不轻易地评论别人的成果。

【主流的思路】

由于不是简单的把页面上加载的<script>转变成动态scriptNode添加,所以需要考虑的问题其实并不少。
比如我们要加载一个新模块a,对应的颗粒化文件为a.js,那么我们大概可以表示为

start loading -- a.js

这当然是最简单的一种情况,复杂的情况通常都发生在存在模块依赖的时候,假如我们引用了jQuery,然后用jq写了一个插件a,那么我们加载顺序就得是:

start loading jQuery.js --> a.js

如果模块依赖进一步复杂,比如:

  1. a : require [b, c] //a 模块需要b,c模块  
  2. b : require [c, d] //b模块需要c, d模块  
  3. c : require [f]    //c模块需要f模块  
  4. d : no-require  
  5. f : no-require 

那么我们的加载顺序应该是怎么样的呢,就应该是:

Start loading: f.js --> d.js --> c.js --> b.js --> a.js
或者:         d.js 
--> f.js --> c.js --> b.js --> a.js

有人会想会不会存在循环依赖的问题,比如 a依赖b, b依赖a,这在理论上是不可能的,因为js是顺序执行的,如果出现循环依赖的情况的话就永远不知道谁在前谁在后...
基于这种思路,我们需要在调用的时候告知程序,a模块需要b模块和c模块,同时b模块又需要c和d模块,如果想复杂一点,这种循环的递归和排序以及判断重复加载的问题就很头疼。

另:由于js是单线程的,一个模块的加载是需要时间的,而且没有编译过程,只有在运行到加载函数的时候再去找它所依赖的代码片段,有可能新模块还没加载完全,js仍在继续执行调用新模块中的方法,就会报错。解决的办法由两个,一个是创建一个阻塞的环境,让每次的加载函数的执行时间和加载时间一样长,不过如果这样的话其实就和在head里直接引用js文件的方式一样了。当所需加载模块过多时,性能永远是个大问题。
另外一个方法就是创建一个非阻塞的环境,通过回调函数来执行接下来的代码,这样在加载多模块时对性能有很大提升,就是函数体中的代码逻辑显得稍微乱一点。可以看到,YUI就是用的这种方式,另外豆瓣的Do也是这种方式。毕竟,性能为王。

【script的插入方式】

1.动态创建scriptNode,设置其src,插入到head中;

2.xmlHttp同步载入js,解析请求回来的reponseText,一是存在兼容性问题,还有跨域问题,以及对客户端网络高依赖的问题。

综上,相比较而言,采用的模式为***种。

【目的】

1.让js模块和html文档分离开来,让程序自动去探寻模块依赖的层级顺序,而不是编码者。
2.让js模块的调用和管理尽可能的容易,各取所需。
3.创建非阻塞的loading模式,提高页面性能。

【使用】
由于篇幅所限,具体代码说明我就不细说了,这里放出源码,有兴趣的朋友可以看看:

  1. /**  
  2.  * Author : hongru.chen  
  3.  * version : 0.1  
  4.  * name : Module_v0.1.js  
  5. **/ 
  6.  
  7. (function () {  
  8.     if (typeof JS === 'undefined') arguments[0].JS = this.JS = {  
  9.         scriptQueue:[] //用来加载的队列  
  10.     };  
  11.       
  12.     var extend = function (destination, source, override) {  
  13.         if (!override) override = true;  
  14.         for (var property in source) {  
  15.             if (override && !(property in destination)) destination[property] = source[property];  
  16.         }  
  17.         return destination;  
  18.     };  
  19.     var createScriptNode = function(url) {  
  20.         var script = document.createElement("script");  
  21.         script.type = "text/javascript";  
  22.         script.charset = "utf-8";  
  23.         script.src = url;  
  24.         return script;  
  25.     };  
  26.     var head = function () {  
  27.         return document.getElementsByTagName("head")[0]  
  28.     }();  
  29.       
  30.     //递归遍历依赖模块,输出loading队列  
  31.     var _queue = function (name) {  
  32.         !JS._regedModules[name]['inQueue'] && JS.scriptQueue.push(name);  
  33.         JS._regedModules[name]['inQueue'] = true;  
  34.           
  35.         if (JS._regedModules[name]['require']) {  
  36.             var reqL = JS._regedModules[name]['require'];  
  37.             for (var i=0; i < reqL.length; i++) {  
  38.                 if (JS._regedModules[reqL[i]]['inQueue']) return JS.scriptQueue;  
  39.                 JS._regedModules[reqL[i]]['inQueue'] = true;  
  40.                 JS.scriptQueue.push(reqL[i]);  
  41.                   
  42.                 arguments.callee(reqL[i]);  
  43.             }  
  44.         } else {  
  45.             return JS.scriptQueue;  
  46.         }  
  47.     };  
  48.  
  49.     // 添加入模块队列  
  50.     JS.add = function (name, options, r) {  
  51.         return new JS.add.prototype.register(name, options, r);  
  52.     }  
  53.       
  54.     JS.add.prototype.register = function (name, options, r) {  
  55.         if (!JS._regedModules) JS._regedModules = {};  
  56.         if (JS._regedModules[name]) throw new Error('warning: module "'+name+'" is already added!');  
  57.         JS._regedModules[name] = {};  
  58.           
  59.         if (typeof options == 'object') {  
  60.             extend(JS._regedModules[name], options)  
  61.         }  
  62.         else {  
  63.             var arg = arguments;  
  64.             JS._regedModules[name]['url'] = arg[1];  
  65.             if (!!arg[2]) JS._regedModules[name]['require'] = arg[2];              
  66.             if (!!arg[3]) {  
  67.                 for (var i=3; i<arg.length; i++) {  
  68.                     JS._regedModules[name][arg[i]] = arg[i];  
  69.                 }  
  70.             }  
  71.         }  
  72.               
  73.         this.add = function (n, p, r) {  
  74.             return JS.add(n, p, r);  
  75.         }  
  76.           
  77.         return this;  
  78.     }  
  79.       
  80.     // 加载模块  
  81.     JS.use = function (n, callback, logId) {  
  82.         var _q = _queue(n) || this.scriptQueue;  
  83.         this.load(_q, callback, logId);  
  84.     }  
  85.       
  86.     JS.load = function (arr, callback, logId) {  
  87.         var i = 0;   
  88.         if (arr.length === 0) {   
  89.             !!callback && callback();  
  90.             return;  
  91.         }  
  92.         var curModule = arr.pop();  
  93.           
  94.         if (!!logId && typeof logId == 'string') {  
  95.             var log = document.createElement('p');  
  96.             log.innerHTML = 'module "' + curModule + '" is loaded';  
  97.             document.getElementById(logId).appendChild(log);  
  98.         }  
  99.  
  100.         __load(curModule, function () {  
  101.             JS.load(arr, callback, logId);  
  102.         });  
  103.           
  104.     }  
  105.       
  106.     __load  = function (name, cb) {  
  107.         if (JS._regedModules[name]['isLoaded']) return;  
  108.         var path = JS._regedModules[name]['url'];  
  109.         var _s = createScriptNode(path);  
  110.         head.appendChild(_s);  
  111.           
  112.         _s.onload = _s.onreadystatechange = function () {  
  113.             if ((!this.readyState) || this.readyState === "loaded" || this.readyState === "complete" ) {  
  114.                 JS._regedModules[name]['isLoaded'] = true;  
  115.                 !!cb && cb();  
  116.                 _s.onload = _s.onreadystatechange = null;  
  117.             }  
  118.         }  
  119.         _s.onerror = function () {  
  120.             _s.onload = _s.onerror = undefined;  
  121.             throw new Error (_s.src + ' loaded failed!');  
  122.             head.removeChild(_s);  
  123.         }  
  124.     }  
  125. })(window);  

引入了这样的模块管理机制后,所有的页面都只需要加载一个文件,就是上面的Module_v0.1.js;里面提供了一个命名空间JS,提供了两个主要的方法JS.add和JS.use.你可以这样使用它:

  1. <html> 
  2.     <head> 
  3.         <script type="text/javascript" src="Module_v.01.js"></script> 
  4.         <script type="text/javascript"> 
  5.             JS.add(...)  
  6.             JS.use(...)  
  7.         </script> 
  8.     </head> 
  9.     <body>...</body> 
  10. </html> 

具体的使用方式可以如下:

  1. JS.add('a', {  
  2.     url : 'http://www.cnblogs.com/1293183133/js/***.js',  
  3.     require : ['b','c']  
  4. })  
  5. JS.add('b', {  
  6.     url : 'http://www.cnblogs.com/1293183133/js/***.js' 
  7. })  
  8. JS.add('c', {  
  9.     url : 'http://www.cnblogs.com/1293183133/js/***.js' 
  10. })  
  11.  
  12. JS.use('a'function () {  
  13.     //you code  
  14. })  

如果你觉得这样的调用方式太麻烦,可以写成方法链式的调用: add的***个参数是自定义的模块名,第二个参数可以是对象{},里面包含,对应模块的js文件的url,和此模块的依赖模块,如果没有就不写。
第二个参数也可以不是对象,比如上面例子里后面几个add,就直接是***个为模块名,第二个为对应模块的js文件url,第三个参数可选,为所依赖的模块名,是一个Array.

use 的***个参数为调用模块名,第二个参数为回调函数。

【关注的几个问题】
1。模块会不会重复加载?
-- 不会,当判断此模块之前已加载过,就会直接执行回调。不会重复加载。

2。add的模块有重名时怎么处理?
--如果add的模块有重名,理论上是不允许,如果发现,会报错提醒。

3。add模块的时候需不需要考虑add的顺序?
--不需要,会自动甄别所依赖的模块,按依赖优先级载入。如果不放心,还提供了一个log日志功能,监测是否按正确顺序载入。只需在use方法调用的时候,写上第三个参数,如:

  1. <div id="log"></div>  
  2. <script>  
  3. JS.use('a'function () {  
  4.     //todo  
  5. },'log')  
  6. </script>  

第三个参数为所要显示载入信息的dom元素id。结果会如下显示:

4。这样的方式对性能到底有没有好处?
--答案,有的,下面上普通的阻塞和非阻塞方式载入jQuery源码的对比图:
直接页面上载入js的方式

  1. <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js?99"></script>  
 

***一条长长的载入时间就是jq的载入时间,故用户看到完整页面的时间为整个文件全部载入完成后的时间,大概为500ms左右(这单单是一个空文档载入jquery文件的时间)。

以非阻塞方式载入时:

  1. <script type="text/javascript">  
  2. JS.add('jq''http://common.cnblogs.com/script/jquery.js?111');  
  3. JS.use('jq'function () {  
  4.     alert($)  
  5. })  
  6. </script>  

为了保证每次载入不会从缓存中读取,我加了个版本号?111;可以发现,上面的蓝线为用户感知到的页面download时间,在20ms左右,而jq文件的加载在蓝线后面,所以说这部分时间是用户感知不到的。对用户体验的提升应该是大有帮助的。就是给服务器增加了并发连接数。

好的,文章大概到这里,可能有人会说,基本上同样的事情Do.js,using.js,require.js等小众型框架已经都有了 ,为什么要自己再写?恩...别人的东西始终是别人的,自己做过的东西才真正是自己的。

我当然不敢说比别的大牛们考虑的更周到,效率更高,但是希望能在自己的编码中得到一点提高吧。

【编辑推荐】

  1. 前端之王能否续写辉煌 JavaScript服务器端开发现状
  2. Web开发有多难?前端后端都很烦
  3. 2010 Web前端技术趋势及总结 Facebook摘全明星MVP
  4. 基础知识:UPS电源系统防雷措施概述
  5. 亡羊补牢行不通 基础设施安全要与私有云建设动态适应
  6. 分布式Java应用:基础与实践
  7. PHP框架发展存四误区 死穴不除难成大器
  8. 小试一下微软开发框架LightSwitch
  9. 私有云部署实战:制定框架并建立配置数据库
【责任编辑:陈勇 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

276人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

643人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

网管员必读—服务器与数据存储

《网管员必读—服务器与数据存储》全面、系统地介绍了在中、高级网络管理和网络工程实施中两个重要方面的主流技术和应用:硬件服务器和数据...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客