关于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实现div的tab切换实例代码
May 27 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
详解原生JS动态添加和删除类
Mar 26 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
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php实现的mongodb操作类
2015/05/28 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python标记语句块使用方法总结
2019/08/05 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Python sys模块常用方法解析
2020/02/20 Python
Python range与enumerate函数区别解析
2020/02/28 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
2014年小学植树节活动方案
2014/03/02 职场文书
财产公证书格式
2014/04/10 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
西游记读书笔记
2015/06/25 职场文书