`
zhouyrt
  • 浏览: 1181111 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

拥抱模块化的JavaScript

 
阅读更多

 

此篇属于软文,了解的请忽略。

 

我们再一次被计算机的名词,概念笼罩。

 

backboneemberjsspinejsbatmanjs  等MVC框架侵袭而来。

 

CommonJSAMDNodeJSRequireJSSeaJScurljs 等模块化的JavaScript扑面而来。

 

模块化JavaScript的概念尤为强烈,似乎有赶超07年Ajax风潮之趋势。

 

一、写函数(过程式)

2005年以前,JavaScript没人重视,只作为表单验证等少量应用。那时一个网页上写不了几行JS代码,1000行算很复杂了。这时组织代码的方式是过程时,几十行的代码甚至连一个函数都不用写。稍多的需要提取抽象出一个函数,更复杂一些则需要更多函数,函数间互相调用。

 

 

二、写类(面向对象)

2006年,Ajax 席卷全球。JavaScript被重视了,越来越多的后端逻辑放到了前端。网页中的JS代码量急剧增加。这时写函数方式组织大量代码显得力不从心。有时调试一个小功能,从一个函数可能会跳到第N个函数去。这时写类的方式出现了,Prototype  率先流行开来。用它组织代码,写出的都是一个个类,每个类都是Class.create创建的。又有YUIExt 等重量级框架。虽然它们的写类方式 各不同,但它们的设计思路却都是要满足大量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消失了(猴年马月),只需从容删去即可。

 

内聚度

内聚度指模块内部实现,它是信息隐藏和局部化概念的自然扩展,它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显,当把相关的任务分组后去阅读就容易多了。

 

设计时应该尽可能的提高模块内聚度,从而获得较高的模块独立性。

 

耦合度

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

 

 

相关:

Loose Coupling, High Cohesion

JavaScript中模块“写法”

 

 

0
0
分享到:
评论

相关推荐

    javascript经典特效---HTML加入javascript.rar

    9. **模块化**:通过import和export关键字,JavaScript支持模块化开发,提高代码组织性和可维护性。 10. **Web组件**:HTML、CSS和JavaScript可以封装成自定义组件,提高代码复用性。 这个压缩包中的"HTML加入...

    JavaScript 自写Js+CSS轮显效果.rar

    此外,良好的代码组织和模块化设计也是提高代码可维护性和复用性的重要因素。 总的来说,"JavaScript 自写Js+CSS轮显效果.rar"这个项目涵盖了JavaScript基础、DOM操作、事件处理、计时器以及CSS的定位、动画和响应...

    有点炫的JavaScript立体图片展示.rar

    最后,这个项目很可能包含了良好的代码组织结构和模块化设计,比如使用了ES6的模块语法(import和export),或者采用了CommonJS或AMD规范。这样可以提高代码的可读性和可维护性,方便其他开发者理解和复用。 总的来...

    JavaScript 图片友情链接滚动,横向,带控制按钮.rar

    8. **封装与模块化**:为了代码的可维护性,通常会将这部分功能封装成一个函数或模块,便于复用和扩展。 实际开发中,开发者可能还会使用到jQuery或其他库来简化DOM操作和动画实现,但基础原理仍基于以上JavaScript...

    javascript案例--web页在线开发.rar

    8. **前端框架**:如今,React、Vue和Angular等前端框架广泛应用于复杂Web应用开发,它们封装了JavaScript的一些繁琐细节,提供了组件化开发模式,使代码更加模块化。 9. **响应式设计**:JavaScript结合媒体查询...

    JavaScript 图片旋转构成3D圆环的展示特效.rar

    9. **模块化和封装**:如果项目复杂度增加,可以使用模块化工具(如ES6的模块导入导出,或CommonJS/AMD规范),将代码拆分为可重用的组件,便于维护和扩展。 10. **调试与测试**:在开发过程中,利用浏览器的开发者...

    javascript经典特效---21点游戏.rar

    9. **代码组织**:使用模块化或类(如果使用ES6以上版本的JavaScript)来组织代码,可以提高代码的可读性和可维护性。 通过这个项目,开发者可以深入理解JavaScript的动态特性,以及如何将这些特性应用于创建互动式...

    javascript经典特效---CSS使用大全.rar

    6. **CSS预处理器**:学习Sass、Less等预处理器,提高CSS的可维护性和复用性,编写更高效、模块化的样式代码。 7. **CSS自定义属性**:使用CSS变量(custom properties)进行动态样式设置,简化样式管理,提高代码...

    programacaoweb:Javascript

    - **闭包**:函数及其相关的引用环境组合而成的实体,常用于实现私有变量和模块化。 - **原型链**:JavaScript中的继承机制,通过原型对象实现属性和方法的共享。 - **异步编程**:包括回调函数、Promise、async/...

    Node.js-ThinkJS是一款拥抱未来的Node.jsWeb框架

    ThinkJS 通过引入多种最佳实践,如模块化、依赖注入、路由控制等,为开发者提供了一套完整的解决方案,使项目结构更加清晰,易于维护。 **ThinkJS 的主要特性** 1. **模块化**:ThinkJS 支持 CommonJS 规范,采用 ...

    前端组件化PPT教案学习.pptx

    组件是前端开发中的一种模块化方式,它封装了数据和方法。组件具有自身的属性(Attributes),用于存储和管理数据,以及方法(Methods),提供对外的交互功能。通过这种方式,组件能够保持内部状态并对外提供清晰的...

    深入浅出理解JavaScript闭包的功能与用法

    理解闭包对于JavaScript开发者来说非常重要,因为它允许创建封装数据和函数的模块,是实现模块化编程的关键技术之一。 闭包的形成基于几个核心概念:作用域、作用域链以及垃圾收集机制。首先,作用域可以分为全局...

    web前端开发最佳实践

    包括命名规范、模块化设计原则等,帮助开发者建立一套有效的样式组织体系,减少后期维护成本。 - **高性能的CSS**:随着Web应用复杂度的增加,CSS的性能优化变得越来越重要。这里详细介绍了CSS加载机制、渲染原理等...

    jquery各个稳定版本

    总结来说,jQuery的各个稳定版本体现了前端技术的发展历程,从解决兼容性问题到拥抱现代浏览器,再到适应模块化和性能优化的需求。无论是在小型个人项目还是大型企业应用中,jQuery都扮演着不可或缺的角色,是前端...

    notes-JS:写到老〜学到老〜拥抱大前端!

    - **函数与闭包**:函数是可复用的代码块,而闭包则是可以访问其自身作用域、外部函数作用域甚至全局作用域的函数,是JavaScript实现模块化和私有变量的重要机制。 - **原型与继承**:JavaScript的继承是基于原型...

    prefab.js:拥抱原型继承

    - **模块化和可复用性**:Prefab.js可能支持模块化的组件设计,使得代码更加结构化,组件更容易复用。 - **类型检测和错误处理**:可能内置了类型检查和异常处理机制,确保正确地使用原型继承。 ### 5. 使用Prefab....

    JS点击小图预览大图(仿淘宝).rar

    - 使用ES6的`import`和`export`进行模块化开发,可以将预览功能作为一个模块导出,然后在其他地方导入并使用。 9. **优化性能**: - 使用懒加载技术,只有当图片进入视口时才开始加载,以减少页面初次加载时的...

Global site tag (gtag.js) - Google Analytics