关于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 相关文章推荐
jQuery中first()方法用法实例
Jan 06 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
开启BootStrap学习之旅
May 04 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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与SQL注入攻击[三]
2007/04/17 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
PHP的反射机制实例详解
2017/03/29 PHP
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
护士年终个人总结
2015/02/13 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
同意报考公务员证明
2015/06/17 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Python四款GUI图形界面库介绍
2022/06/05 Python