拥抱模块化的JavaScript


Posted in Javascript onMarch 07, 2012

我们再一次被计算机的名词,概念笼罩。
backbone、emberjs、spinejs、batmanjs 等MVC框架侵袭而来。
CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript扑面而来。
模块化JavaScript的概念尤为强烈,似乎有赶超07年Ajax风潮之趋势。
一、写函数(过程式)
2005年以前,JavaScript没人重视,只作为表单验证等少量应用。那时一个网页上写不了几行JS代码,1000行算很复杂了。这时组织代码的方式是过程时,几十行的代码甚至连一个函数都不用写。稍多的需要提取抽象出一个函数,更复杂一些则需要更多函数,函数间互相调用。

二、写类(面向对象)
2006年,Ajax席卷全球。JavaScript被重视了,越来越多的后端逻辑放到了前端。网页中的JS代码量急剧增加。这时写函数方式组织大量代码显得力不从心。有时调试一个小功能,从一个函数可能会跳到第N个函数去。这时写类的方式出现了,Prototype 率先流行开来。用它组织代码,写出的都是一个个类,每个类都是Class.create创建的。又有YUI、Ext等重量级框架。虽然它们的写类方式各不同,但它们的设计思路却都是要满足大量JavaScript代码的开发。

三、写模块(现在,未来?)
2009年,Nodejs诞生!这个服务器端的JavaScript采用模块化的写法很快征服了浏览器端的JSer。牛人们纷纷仿效,各种写模块的规范也是层出不穷。CommonJS想统一前后端的写法,AMD则认为自己是适合浏览器端的。好吧,无论写模块的风格是啥样,写模块化的JavaScript却已开始流行了。准备好了吗?(呃具煽动性)

呵,模块化的JavaScript是啥? 这是我们发明了又一个银弹吗?无论是啥,就当学习吧。至于适不适合项目中使用,各自斟酌。

写到这也没说什么是“模块”。其实在计算机领域,模块化的概念被推崇了近四十年。软件总体结构体现模块化思想,即把软件划分为一些独立命名的部件,每个部件称为一个模块,当把所有模块组装在一起的时候,便可获得问题的一个解。

模块化以分治法为依据,但是否意味着我们把软件无限制的细分下去。事实上当分割过细,模块总数增多,每个模块的成本确实减少了,但模块接口所需代价随之增加。要确保模块的合理分割则须了解信息隐藏,内聚度及耦合度。

信息隐藏
模块应设计的使其所包含的信息(过程和数据)对于那些不需要用到它的模块不可见。每个模块只完成一个独立的功能,然后提供该功能的接口。模块间通过接口访问。JavaScript中可以用函数去隐藏,封装,而后返回接口对象。如下是一个提供事件管理的模块event。

event = function() { 
// do more 
return { 
bind: function() {}, 
unbind: function() {}, 
trigger: function() {} 
}; 
}();

函数内为了实现想要的接口bind、unbind、trigger可能需要写很多很多代码,但这些代码(过程和数据)对于其它模块来说不必公开,外部只要能访问接口bind,unbind,trigger即可。

信息隐藏对于模块设计好处十分明显,它不仅支持模块的并行开发,而且还可减少测试或后期维护工作量。如日后要修改代码,模块的隐藏部分可随意更改,前提是接口不变。如事件模块开始实现时为了兼容旧版本IE及标准浏览器,写了很多IE Special代码,有一天旧版本IE消失了(猴年马月),只需从容删去即可。

内聚度
内聚度指模块内部实现,它是信息隐藏和局部化概念的自然扩展,它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显,当把相关的任务分组后去阅读就容易多了。
设计时应该尽可能的提高模块内聚度,从而获得较高的模块独立性。

耦合度
内聚度是指特定模块内部实现的一种度量,耦合度则是指模块之间的关联程度的度量。耦合度取决于模块之间接口的复杂性,进入或调用模块的位置等。与内聚度相反,在设计时应尽量追求松散耦合的系统。

Javascript 相关文章推荐
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 #Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 #Javascript
JQuery魔力之$("tagName")与selector
Mar 05 #Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 #Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 #Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 #Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 #Javascript
You might like
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
微信小程序实现消息框弹出动画
2020/04/18 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
js数组的基本使用总结
2021/01/18 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python 错误和异常代码详解
2018/01/29 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
Django实现随机图形验证码的示例
2020/10/15 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
七夕情人节促销方案
2014/06/07 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
小王子读书笔记
2015/06/29 职场文书