关于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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
offsetParent 算法分析
Apr 05 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
Vue中keep-alive组件的深入理解
Aug 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
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php中strtotime函数用法详解
2014/11/15 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
python如何去除字符串中不想要的字符
2020/07/05 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
基于PyTorch中view的用法说明
2021/03/03 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
中学家长会邀请函
2014/01/17 职场文书
物流创业计划书
2014/02/01 职场文书
医院总经理岗位职责
2014/02/04 职场文书
补充协议书范本
2014/04/23 职场文书
师范生见习报告范文
2014/11/03 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题