关于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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
给Function做的OOP扩展
May 07 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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脚本不报错的原因
2014/06/12 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP中cookie知识点学习
2018/05/06 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python人人网登录应用实例
2014/09/26 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python下载指定页面上图片的方法
2016/05/12 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
linux面试题参考答案(5)
2016/11/05 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
政风行风整改方案
2014/10/25 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技