关于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取消文本选定的实现代码
Nov 14 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
JS 数字转换研究总结
Dec 26 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
JSONP基础知识详解
Mar 19 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
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
PHP的SQL注入过程分析
2012/01/06 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php头像上传预览实例代码
2017/05/02 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
javascript时间函数大全
2014/06/30 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
销售内勤岗位职责
2014/04/15 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
移交协议书
2014/08/19 职场文书
黄石寨导游词
2015/02/05 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
汉字听写大会观后感
2015/06/12 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python