关于javascript模块加载技术的一些思考


Posted in Javascript onNovember 28, 2014

前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requirejs和seajs是新东西新技术,很有价值所以想用它。

这位网友的问题引起了我对javascript模块加载技术的思考,上篇文章我给出了自己写的一个javascript库的基本结构,其实写这篇文章的一个起因就是因为我想使用requirejs或者seajs这样的技术来重新设计我写javascript库的基本模型,当我深入了解这个技术后,我发现使用模块加载系统来解决把javascript库里通用代码和业务代码解耦的问题,是不正确的,模块加载系统的作用范围是解决不同javascript库之间的依赖问题,而不是帮助你去如何开发一个javascript库。

那么什么是javascript的模块加载系统呢?

模块系统主要为了解决不同javascript库里操作对象的命名冲突问题以及不同javascript库之间依赖的问题,模块加载系统是针对大型web前端应用或者说是巨型的web前端应用。

一般巨型的web前端应用页面里,该页面的功能非常丰富,业务非常庞杂,而且随着时间推移,页面的功能经常会发生变迁,所以导致前端开发人员经常要开发出针对新功能的功能模块,但是实际业务里各个功能模块之间的功能还有可能相互渗透,相互依赖的,关系错综复杂,当页面复杂后,各个前端库之间的关系就出现很难管理和控制的问题,这个时候模块加载系统才会派上用场。

对于大多数程序员而言,能独立承担这么大web前端应用的机会并不是太多,而开发中小型web前端应用的机会会多的多,例如企业级的web项目,这样的项目使用到的javascript库的种类很少,各个库的依赖关系很好控制,是没有必要引入什么模块管理系统的必要,就算很多中小型互联网公司的网页,估计也不会比企业级web应用前端那么复杂,所以它的模块之间或者说javascript库之间的关系很好管理的。其实像上面这些中小应用都是针对某些或某一个具体场景进行的,因此我个人觉得面对这样的web前端项目我们最后能自己形成一个独立的javascript库,这个库的特点应该和jQuery这种类型的库类似:一个主库加上若干个插件库的模式,主库的目的是解决通用性的问题,它应该是可以进行复用和迁移的,而插件库的目的往往和业务代码相关的,不过为了区别主库和插件库的作用域问题,所以我在库里加上了命名空间的功能。

Javascript模块加载技术和hadoop的技术有些相同点,那就是它们都是针对超大型系统的技术,它们只有在一定条件下才能发挥它们的作用,所以这些技术都是从大型互联网公司推出出来,因为大型互联网公司随着应用变大变复杂后必须要去解决的问题,当你系统还是处于起步阶段,这些技术的运用往往要谨慎,我们应该找出最简单最有效的方法解决我们实际问题,如果你觉得这个系统以后会越来越大,那么你应该保留以后使用这些技术的接口,如果使用太早了,很有可能当系统规模扩大后,你重构代码的代价会更高。

对于模块加载系统,它最适合的场景是解决大型web前端应用模块之间的解耦的问题,如果我们只要新写一个javascript文件就马上使用模块加载技术,这个不是有点滥用技术的嫌疑了,我们运用某个技术之前不应该只是考虑它怎么用,如何用,应该还要想想使用它有没有价值的问题。

最后我想说的是,我觉得中小型web前端应用到了生产部署,因为javascript并非最复杂,所以所有外部javascript文件都打包成一个javascript外部文件最好,这样的好处就是减少了http请求个数,使用模块加载技术会让你打包文件操作很麻烦,甚至无法做到(像requirejs和seajs的模块都是以文件为单位的,每个模块就是一个独立文件),这和解决减少http目的是相悖的。

Javascript 相关文章推荐
Javascript 错误处理的几种方法
Jun 13 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 #Javascript
关于编写性能高效的javascript事件的技术
Nov 28 #Javascript
推荐25个超炫的jQuery网格插件
Nov 28 #Javascript
实例分析javascript中的call()和apply()方法
Nov 28 #Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 #Javascript
jquery+php实现搜索框自动提示
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 #Javascript
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
php计算十二星座的函数代码
2012/08/21 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的zipfile模块使用详解
2015/06/25 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
《雨点》教学反思
2014/02/12 职场文书
二年级小学生评语
2014/04/21 职场文书
委托书怎么写
2014/07/31 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
教师外出学习心得体会
2016/01/18 职场文书
《刷子李》教学反思
2016/02/20 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js