本文转载自原地址,感谢Feeldesign Studio的无私分享!
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试。模块化是一种非常好的代码组织方式,本文试着对JavaScript模块化开发的一些基础知识做一些阐释。
对象字面量(Object Literals)
对象字面量表示,其实就是用一对大括号括起来的键值对,也就是JavaScript声明对象的方式。
var myObject = { variableKey : variableValue, functionKey : function() { //do Something } }
比较一下下面代码声明方式,使用对象字面量表示,可以减少全局变量的污染,一般来说,强烈建议在任何时候都不要使用下面的声明方式:
var variableName = ...; function name1(){ //do Something } function name2(){ //do Something }
立即执行函数(IIFE Immediately-Invoked Function Expressions)
立即执行函数是现在非常流行的写法,大部分JS库都使用了这种技巧,主要是防止全局变量的污染。
当我们在声明类似于 var name1 = function (){ … }
这样的函数时,在后面加一对括号 (),就可以让它立即执行,但是如果是 function name1() { … }
这样的函数,则会有问题:
function name1(){ alert("123"); }();
上面代码在执行时会抛出错误,Unexpected token(意外的标记),因为后面的()会被解析为分组操作符。
解决上面的问题,只需要加上括号将function代码全部括住即可,下面就是立即执行函数的声明方式:
(function () { /* code */ } ()); (function () { /* code */ })();
注意,上面两种方式都是可以的,主要看个人习惯。立即执行函数可以不对外暴露私有变量,比如:
var myObject = { name : "FeeldesignStudio", getName : function(){ return this.name; } }; myObject.name; //FeeldesignStudio myObject.getName(); //FeeldesignStudio var myObject = (function(){ var name = "FeeldesignStudio"; return { getName : function(){ return name; } } })(); myObject.name; //出错! myObject.getName(); //FeeldesignStudio
导入全局变量
把全局变量作为参数传递给一个立即执行函数,这样就完成了全局变量的导入,立即执行函数中可以使用此全局变量的方法,并可以修改(简化)全局变量的名称:
var myModule = (function (jQ) { function method1(){ jQ(".container").html("test"); } return{ publicMethod: function(){ method1(); } }; })( jQuery ); myModule.publicMethod();
模块导出
当然,有导入也可以有导出,有时我们不仅要导入全局变量,也要把模块导出到全局空间供其他模块使用。通过在立即执行函数中返回一个Object,就可以实现模块导出功能:
var myModule = (function () { var module = {}, privateVariable = "Feeldesign"; function privateMethod() { // ... } module.publicProperty = "FeeldesignStudio"; module.publicMethod = function () { console.log( privateVariable ); }; return module; })();
扩展模块
在开发中,我们经常会对一些模块进行扩展,扩展当然可以直接修改模块的源代码,但是这不是一个好的方法,比如我们要给 myModule 模块增加几个方法,通过前面的“立即执行函数”、“导入全局变量”、“模块导出”的知识,我们可以推导出下面的扩展方式:
var myModule = (function(my) { my.xxMethod = function () { //do Something }; return my; })(myModule);问题来了:上面的代码可以很好地对 myModule 进行扩展,不过前提是 myModule 必须已经定义,如果扩展的 xxMethod 方法和 myModule 本身没有任何的依赖,那么要求 myModule 必须已经定义就毫无必要了,怎么解决这个问题呢,非常简单,只需要或一个空对象:
//松散扩展 var myModule = (function (my) { my.xxMethod = function () { //do Something }; return my; })( myModule || {} );上述代码还存在一个问题,那就是如果a.js中声明了
var myModule = …
,b.js中也声明了 var myModule = …
,这样在引入a.js和b.js时,后者会将前者覆盖,这并不是我们期望的,所以对上述代码,可以再加改进:
(function (my) { my.xxMethod = function () { //do Something } })( window.myModule = window.myModule || {} );上面把JavaScript模块化开发的基础知识作了介绍,接下来,会进一步介绍常见的规范和针对这些规范的一些js库实现,通过这些js库,我们可以很好的将模块化开发赋予实施。
相关推荐
《精通JavaScript》言简意赅,扩展了读者视野,并关注于基础且重要的主题——现代JavaScript是什么和不是什么,浏览器支持的当前状态,以及需要注意的陷阱等。书中所有概念都来自于现实案例的分析。
22.2 关于用户登录的基础知识——国际化资源 22.3 关于用户登录的基础知识——guice框架 22.4 用户登录的具体实现 22.5 小结 第3篇 项目案例实战 第23章 在线音乐管理系统(ajax+jsp+struts 2.x) ...
第13章 关系型数据库的基础知识 204 13.1 关系型数据库与关系型数据库系统的 13.1 介绍 204 13.2 关系型数据库系统的结构与运行过程 205 13.2.1 关系型数据库系统的层次结构 205 13.2.2 关系型数据库系统的运行过程 ...
事务隔离性的一些基础知识 在组件之间实现事务和异步提交事务(NET2.0) 其它 在.NET访问MySql数据库时的几点经验! 自动代码生成器 关于能自定义格式的、支持多语言的、支持多数据库的代码生成器的想法 发布Oracle...
12 八、IE6下为什么图片下有空隙产生 12 第二章 开发工具的介绍 13 第一节 梦幻网页的编织者——Dreamweaver 13 第二节 图形、图像编辑设计软件制作软件——Adobe Photoshop cs2 13 第三章 网站总体分析和设计 15 第...
其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。 作者简介 Pawel Kozlowski有15年以上的Web开发经验,接触过多种Web技术、语言和平台。他精通客户端和服务器端编程,并始终在寻找能提高...
本书是第I卷,以开发人员在项目开发中经常遇到的问题和必须掌握的技术为中心,介绍了应用PHP进行Web开发的各个方面的知识和技巧,主要包括开发环境、PHP基础、Web页面交互、文件操作、会话应用、图形图像处理及面向...
本书是第I卷,以开发人员在项目开发中经常遇到的问题和必须掌握的技术为中心,介绍了应用PHP进行Web开发的各个方面的知识和技巧,主要包括开发环境、PHP基础、Web页面交互、文件操作、会话应用、图形图像处理及面向...
7.6 Box2D的基础知识 203 7.6.1 概述 204 7.6.2 概念定义 204 7.6.3 物理引擎的模块 205 7.7 引 擎 内 核 205 7.7.1 基本配置 206 7.7.2 内存管理机制 207 7.7.3 工厂模式 208 7.7.4 数据单位 208 7.7.5 用户数据 ...
\两年前,当我们准备在Linux系统下开发GUI应用软件时,首先想到的就是选择一个GUI应用框架来简化开发。在三大GUI框架GTK+、Qt和wxWidgets 之间,我们选择了Qt 4工具包。作为重量级桌面系统KDE多年的坚实基础,Qt应该...
\两年前,当我们准备在Linux系统下开发GUI应用软件时,首先想到的就是选择一个GUI应用框架来简化开发。在三大GUI框架GTK+、Qt和wxWidgets 之间,我们选择了Qt 4工具包。作为重量级桌面系统KDE多年的坚实基础,Qt应该...
DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs、编程规范 其他: 移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
1、 Struts是一个为开发基于模型(Model)-视图(View)-控制器(Controller)(MVC)模式的应用架构的开源框架,是利用Servlet,JSP和custom tag library构建Web应用的一项非常有用的技术。由于Struts能充分满足应用开发...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...