- 浏览: 7250422 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
原文:http://www.joezimjs.com/javascript/javascript-closures-and-the-module-pattern/
在JavaScript中一个最广泛使用的设计模式是模块的模式。模块模式使用了JavaScript中的一个很棒的特性-闭包- 用来给你方法中的隐私一些控制这样的第三方应用程序不能访问私有数据或覆盖它。在这篇文章中,我会教你什么是闭包,它是如何工作的,以及如何利用它在你的JavaScript代码中实现模块模式。
什么是闭包?
闭包是JavaScript语言的一种构造。在JavaScript内所有变量都能在全局范围内访问,除非变量在函数内用var关键字声明过。
variable1 = 1; //全局范围 var variable2 = 2; // 不在一个函数内: 全局范围 function funcName() { variable3 = 3; // 没用var关键字声明: 全局范围 var variable4 = 4; //仅本地访问 }
view raw gistfile1.js This Gist brought to you by GitHub.
在一个函数内,你也可以获得全局范围和每个你所在的函数上级范围的访问权限。换句话说,函数内声明变量只能在函数包围范围内访问。
var globalvar = 1; //全局范围 function outer() { var outervar = 2; // outer()范围内 function inner() { var innervar = 3; // inner()范围内 console.log(globalvar); // => 1 console.log(outervar); // => 2 console.log(innervar); // => 3 } console.log(globalvar); // => 1 console.log(outervar); // => 2 console.log(innervar); // => Reference Error引用错误; } console.log(globalvar); // => 1 console.log(outervar); // => Reference Error引用错误 console.log(innervar); // => Reference Error引用错误
每一个真正的JavaScript程序员应该知道这一点,除非他不思进取。知道这一点,你可以得出这样的结论,用一种办法来保持你所有代码在全局命名空间外,是正确的。这特别有用,当你不想给任何人在未经许可的情况下有重写你任何代码的机会。你可以通过使用一个匿名函数(不给它命名,没有被赋予一个变量)立即执行自身。这是众所周知的自调用匿名函数(SIAF),虽然它可能是更准确地称为立即调用的函数表达 (IIFE–读做“iffy”) -作者Ben Alman。
(function() { // 这函数立即执行,内部所有变量都是私有的 }());
view raw gistfile1.js This Gist brought to you by GitHub.
紧接着右大括号,是左右括号于是函数将立即执行。围绕整个函数表达式的括号不是运行的代码必需的,但一般用作给其他开发人员的信号,这是一个IIFE,而不是一个标准函数。有些人喜欢在前面加上一个惊叹号(!)或分号(;),而不是用括号包起来。
用闭包的模块模式
知道了闭包是什么,我们就可以使用模块模式创建对象。通过返回一个对象或变量并赋给一个函数外变量,这样我们可以暴露任何希望暴露给外界的,我们可以有公开和私有的方法。
var Module = (function() { // 下面函数是私有的,但可以被公开函数访问 function privateFunc() { … }; // 返回一个对象赋予Module return { publicFunc: function() { privateFunc(); // publicFunc可以直接访问privateFunc } }; }());
这就是模块模式的本质。您还可以使用参数传入或缩写常用资源的名称:
var Module = (function($, w, undefined) { // … // return {…}; }(jQuery, window));
我传入jQuery和window,被分别缩写为$和w。注意我没有传任何东西作为第三个参数。这样参数undefined将是undefined,所以它完美地工作。有些人这样处理undefined是因为无论如何,它是可编辑的。所以,如果你判断某某是否是undefined,但undefined可能已经改变,你的比较将不起作用。这种技术保证它将按预期工作。
透露模块模式revealing module pattern
透露模块模式是另一种方式来写模块模式,需要更多点代码,但有时更容易理解和阅读。不同于在IIFE中定义所有私有变量并在返回对象中定义公开方法,你把所有方法都写在IIFE中,只是“透露”哪些是你想公开在return语句内的。
var Module = (function() { // 现在所有函数直接互访 var privateFunc = function() { publicFunc1(); }; var publicFunc1 = function() { publicFunc2(); }; var publicFunc2 = function() { privateFunc(); }; // 返回对象赋予Module return { publicFunc1: publicFunc1, publicFunc2: publicFunc2 }; }());
对比正常的模块模式,透露模块模式有几个优点:
所有函数的声明和实现都在同一个地方,从而制造较少的混乱。
私有函数现在可以访问公开函数,如果他们需要。
当一个公开函数需要调用另一个公开函数时,他们调用publicFunc2(),而不是用this.publicFunc2(),从而节省了几个字符。
透露模块模式的唯一真正的缺点,正如我所说,是你必须写更多的代码,因为你必须先写好函数然后再把它的名字写在return语句内,尽管它最终可能会因为你可以忽略this.部分而节省你的代码。
扩展模块模式
我想谈的最后一件事是使用模块模式扩展已经存在的模块。这很常用,当为jQuery之类的库做插件,如下。
var jQuery = (function($) { $.pluginFunc = function() { … } return $; }(jQuery));
此代码是相当灵活的,因为你甚至不需要var jQuery=或接近尾部的return语句。没有它们jQuery仍将可以用这个新方法扩展。实际上返回和赋值整个jQuery对象,可能在性能上有损失,但是,如果你想在扩展jQuery的同时,分配jQuery到一个新的变量名,你只需改变第一行的jQuery为任何你想要的。
结论
朋友们,今天就到这里。这些都是常见的技术和功能,即使你不使用这篇文章的知识,保留在你的脑海,以防万一用到(很可能会发生)。。。最后,不要忘记分享和在下面评论。感谢和编码快乐!
发表评论
-
【转】互联网常见Open API文档资源
2012-07-17 17:22 2365原文出处:http://www.williamlong.i ... -
phonegap contact API的使用
2012-07-10 14:23 2839没事开发一个phonegap通讯录使用: js如 ... -
phonegap开发中必备的帮助文档android apk
2012-07-08 16:48 2599在phonegap配置jquerymobile开发的人 ... -
jquerymobile 开发中几个样式问题
2012-07-07 15:16 24081.在jquerymobile开发中如果遇到中文乱码处理如下 ... -
【转】JavaScript编程模式:模块的力量
2012-07-06 12:50 1829块模式是一个常用的JavaScript编程模式。它 ... -
【转】PhoneGap域名白名单说明书(Domain Whitelist Guide)
2012-07-05 17:31 9840概述Cordova项目中的域名白名单是一个用来控制外部域名访问 ... -
phonegap拍照的获取图片和设置问题
2012-07-05 17:10 12678目前项目中Android中第一次加载使用用 ... -
Native+WebApp中Phonegap调用Android Activity
2012-07-05 16:10 10926在项目采用Native+Web方式开发,A ... -
IOS Xcode4.3使用中几个问题
2012-07-04 15:36 18141. xcode 4.3.2 编译生成的app放在哪里? ... -
PhoneGap Xcode iOS入门教程
2012-07-04 15:30 7758文介绍了利用Xcode建立PhoneGap应用程 ... -
phonegap底层原理学习和研究(四)
2012-06-12 17:34 3040在phonegap ... -
phonegap底层原理学习和研究(三)
2012-06-12 17:08 6217针对Phonegap开发中常用的D ... -
phonegap底层原理学习和研究(二)
2012-06-11 11:07 3121转载自IBM中国开发网站: http://www.ibm ... -
【转】手机应用开发者需注意的20个事项
2012-05-30 10:54 1748你想要成为手机开发者吗?你的目标可能是从应用商店中赚取大 ... -
【转】8 个移动产品设计必备网站
2012-05-30 09:49 2100本文整理了8个移动设计资源丰富的网站,希望对你的开发设计工作有 ... -
HTML5 canvas实现电子签名
2012-05-29 17:27 225761.为什么要用到BASE64编码的图片信息 Base6 ... -
HTML5 的GEOLocation的API
2012-05-29 10:15 7105Geolocation API用于将用户当前地理位 ... -
jquerymobile 一个简单的九宫格实现(Gallery)
2012-05-28 11:10 9228jquerymobile实现一个简单的九宫格代码如下: ... -
phonegap底层原理学习和研究(一)
2012-05-21 14:16 12002在phonegap中,通过android和ip ... -
jquerymobile google地图插件jquery-ui-map
2012-05-20 16:12 5834最近要开发地图相关的功能,学习一下jquerymob ...
相关推荐
可以使用构造函数模式、原型模式来实现自定义类型的特权方法,也可以使用模块模式、增强的模块模式来实现单例的特权方法。 JavaScript中的匿名函数和闭包都是非常有用的特性,利用它们可以实现很多功能。不过,因为...
3.JavaScript 闭包 4.JavaScript 事件 5.javascript 跨域 6.javascript 命名空间 Oject-Oriented 1.JavaScript Expressive 2. Interfaces 3.Introduction 4. Inheritance 5.AOP Jquery [jQuery][9] [jQuery...
JavaScript模块模式 然后,Node.js模块系统允许模块导出任何值,无论是字符串,数字,单个函数还是更复杂的对象。... 使用此模式,您可以创建几种模块模式:单例,基于闭包的类,基于原型的类和外观。
3.JavaScript 闭包 4.JavaScript 事件 5.javascript 跨域 6.javascript 命名空间 Oject-Oriented 1.JavaScript Expressive 2. Interfaces 3.Introduction 4. Inheritance 5.AOP Jquery [jQuery][9] [jQuery...
本书详细介绍讲述了...主要内容包括:JavaScript基础知识,函数、闭包和模块,数据结构和相关处理,面向对象的JavaScript,JavaScript设计模式,测试与调试,ECMAScript 6,DOM事件和操作,服务器端JavaScript
本文实例讲述了JavaScript模块模式。分享给大家供大家参考,具体如下: 在JS中没有Class的概念,那么如何体现Object的Public和Private属性呢,答案就是模块模式(Module Pattern)。 JS中有一个显著的特性: 匿名...
模块化编程是一种非常常见Javascript编程模式。它一般来说可以使得代码更易于理解,但是有许多优秀的实践还没有广为人知。 基础 我们首先简单地概述一下,自从三年前Eric Miraglia(YUI的开发者)第一次发表博客...
3.JavaScript 闭包 4.JavaScript 事件 5.javascript 跨域 6.javascript 命名空间 Oject-Oriented 1.JavaScript Expressive 2. Interfaces 3.Introduction 4. Inheritance 5.AOP Jquery [jQuery][9] [jQuery...
第11章 JavaScript的子集和扩展 11.1 JavaScript的子集 11.2 常量和局部变量 11.3 解构赋值 11.4 迭代 11.5 函数简写 11.6 多catch 从句 11.7 E4X: ECMAScript for XML 第12章 服务器端JavaScript 12.1 用Rhino脚本...
第11章 JavaScript的子集和扩展 11.1 JavaScript的子集 11.2 常量和局部变量 11.3 解构赋值 11.4 迭代 11.5 函数简写 11.6 多catch 从句 11.7 E4X: ECMAScript for XML 第12章 服务器端JavaScript 12.1 用Rhino脚本...
第11章 JavaScript的子集和扩展267 11.1 JavaScript的子集268 11.2 常量和局部变量271 11.3 解构赋值274 11.4 迭代276 11.5 函数简写285 11.6 多catch 从句285 11.7 E4X: ECMAScript for XML286 ...
第11章 JavaScript的子集和扩展 11.1 JavaScript的子集 11.2 常量和局部变量 11.3 解构赋值 11.4 迭代 11.5 函数简写 11.6 多catch 从句 11.7 E4X: ECMAScript for XML 第12章 服务器端JavaScript 12.1 用Rhino脚本...
《JavaScript权威指南(第6版)》是程序员学习核心JavaScript语言和由WEB浏览器定义的JavaScript API的指南和综合参考手册。 《JavaScript权威指南(第6版)》涵盖html5和ecmascript 5。很多章节完全重写,以便与时俱进...
13.3.4 事件模块和事件类型 13.3.5 关于Event接口 13.3.5.1 Event接口的属性和方法 13.3.5.2 UIEvent接口的属性 13.3.5.3 MouseEvent接口的属性 13.3.5.4 MutationEvent接口 13.3.6 混合...
第11章 JavaScript的子集和扩展267 11.1 JavaScript的子集268 11.2 常量和局部变量271 11.3 解构赋值274 11.4 迭代276 11.5 函数简写285 11.6 多catch 从句285 11.7 E4X: ECMAScript for XML286 ...
第十一课 闭包小例子学习目录闭包生成图形组件一.闭包生成图形组件这个小例子中不仅包含闭包的知识,更包括了js设计模式中的模块化模式以及策略模式的知识,所以虽然是
第14章使用JavaScript、CSS和ARIA创建交互和可访问性效果 第15章创建富媒体和交互应用程序 第16章JavaScript对象 第17章JavaScript库 第18章通信 第19章使用结构化数据 第20章持久化 第21章...
第11章 JavaScript的子集和扩展 11.1 JavaScript的子集 11.2 常量和局部变量 11.3 解构赋值 11.4 迭代 11.5 函数简写 11.6 多catch 从句 11.7 E4X: ECMAScript for XML 第12章 服务器端JavaScript 12.1 用Rhino脚本...
Javascript高手必看,闭包详解,面向对象与设计模式,JS的模块化编程