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

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

目前创新互联已为上1000+的企业提供了网站建设、域名、雅安服务器托管、成都网站托管、企业网站设计、山亭网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

【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。我相信每个团队能够出一套自己的框架或者库都是不容易的，都是需要时间积累的，所以我从不轻易地评论别人的成果。

【主流的思路】

由于不是简单的把页面上加载的 

  •          
  •             JS.add(...)  
  •             JS.use(...)  
  •          
  •      
  •     ... 
  •  

    •  具体的使用方式可以如下：

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

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

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

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

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

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

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

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

     
 
 
 
      
  
  
  
  
    1.   
      2.

     

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

    以非阻塞方式载入时： 

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2. JS.add('jq', 'http://common.cnblogs.com/script/jquery.js?111');  
      3. 
  
  
  
  
    3. JS.use('jq', function () {  
      4. 
  
  
  
  
    4.     alert($)  
      5. 
  
  
  
  
    5. })  
      6. 
  
  
  
  
    6.   
      7.

     

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

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

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

    当前题目：前端基础框架的思考和尝试
    网站URL：http://www.shufengxianlan.com/qtweb/news3/500553.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站维护知识

    同城分类信息

    时嘉做网站　　 　达州托管服务器　　 　成都网站安全运维　　 　背发光字　　 　Android开发　　 　成都网站建设　　 　成都网站建设　　 　温江网站制作　　 　专业网站设计　　 　成都西云机房　　 　网络营销　　 　全网营销　　 　广汉锦华　　 　新华建筑装饰　　 　成都圣月服饰　　 　云虚拟主机　　 　研学实践　　 　草坪音箱　　 　快照排名　　 　乐山网站建设