关于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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
JS 事件机制完整示例分析
Jan 15 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
PHP脚本数据库功能详解(下)
2006/10/09 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python中__init__.py文件的作用详解
2016/09/18 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
作风年建设汇报材料
2014/08/14 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
党支部综合考察意见
2015/06/01 职场文书
工作年限证明范本
2015/06/15 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书