关于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实用函数用法总结
Aug 29 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 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获取当前网址及域名的实现代码
2013/06/23 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
定义select的边框颜色
2008/04/28 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
Python中单例模式总结
2018/02/20 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python标准库itertools的使用方法
2020/01/17 Python
python实现交并比IOU教程
2020/04/16 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
授权委托书格式
2014/07/31 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers