前端基础框架的思考和尝试
创始人
2024-07-19 14:41:17
0

近日我一直在思考类似的关于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。我相信每个团队能够出一套自己的框架或者库都是不容易的,都是需要时间积累的,所以我从不轻易地评论别人的成果。

【主流的思路】

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

  •          
  •             JS.add(...)  
  •             JS.use(...)  
  •          
  •      
  •     ... 
  •  
  •  具体的使用方式可以如下:

    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方法调用的时候,写上第三个参数,如:

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

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

    1.  
     

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

    以非阻塞方式载入时: 

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

     

    为了保证每次载入不会从缓存中读取,我加了个版本号?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. 私有云部署实战:制定框架并建立配置数据库

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
    《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
    2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...