关于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 常用功能总结
Mar 18 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
小程序实现录音上传功能
Nov 22 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 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
基于mysql的论坛(5)
2006/10/09 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python使用turtle库绘制树
2018/06/25 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python使用递归的方式建立二叉树
2019/07/03 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
班组安全员工作职责
2014/02/01 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
oracle数据库去除重复数据
2022/05/20 Oracle