拥抱模块化的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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JQuery 学习技巧总结
May 21 Javascript
JS跨域代码片段
Aug 30 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
javascript简易画板开发
Apr 12 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php 保留字列表
2012/10/04 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
学习PHP session的传递方式
2016/06/15 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
Ionic快速安装教程
2016/06/03 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
最受欢迎的自我评价
2013/12/22 职场文书
爱情保证书范文
2014/02/01 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
娱乐节目策划方案
2014/06/10 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
单位租房协议书范本
2014/12/04 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android