`

ExtJS设计模式-模块模式(Module Pattern)

阅读更多
《JavaScript: The Definitive Guide, 5th Edition》一书的8.8章节其中有一段这样的描述:

When you define a nested function, however, the scope chain includes the containing function. This means that nested functions can access all of the arguments and local variables of the containing function.

这句话的主要意思可以理解为:
当你在js中定义一个内部函数时,此内部函数的作用域链将此内部函数包含的所有函数都include到了其中。这就意味着内部函数可以访问所有的包含在其中的函数的参数和本地变量。

在ExtJS的设计中大量利用了这个特点设计代码,获得的最大好处有两点:

1、实现封装

这种写法保证了此方法中定义的内部函数(nested function)与本地变量(local variables)不能被外部访问,同时只允许特权(公有)方法访问这些内部函数或者变量。作用类似于javabean的private成员以及getXXX方法。

2、性能提升(单例模式)-通过模块模式实现

模块模式与单例模式的关系是什么?在提到这个之前不得不提到javascript的单例模式(Singleton)。在javascript中,单例(Singleton)就是指只有一个实例的对象,而不需要用new关键字去创建一个对象实例。单例其实有点类似于java里面的静态类。在javascript中,是以对象字面量的方式来创建单例对象的,也就是以花括号包裹起来的键值对的JSON形式来创建的。例如:
var singletonObj={
    field1:'aaa',
    methodA:function(){
        //code...
    }
}; 


单例模式的目的就是尽可能少的创建对象,最终目的其实就是性能的提升。这点是程序员都清楚,无须多言。

模块模式则是用来对单例对象进行封装,从而能增强单例的可访问性。
以模块模式定义的内部函数(nested function)与变量(local variables)只有单例对象本身的特权(公有)
方法可以访问到,其他外部的任何对象都不可以。
其语法形式如下:
Util = function() { 
	// private
	var A = 1;
	var C = 2;
	// private
	function methodA() {
		// 打印本地变量
		alert("A="+A);
	}
	function methodC(argC) { 
		// 打印参数
		alert("argC=" + argC);
	}

	return {
	         B : 3,
		methodB : function() {
			methodA();
		},
		methodD : function() {
			//打印本地变量
			alert(C);
			//将本地变量作为参数使用
			methodC(C);
		}
	}
}(); //匿名函数立即执行,并且返回


上面的代码中,我们创建了一个匿名函数并赋值给变量Util,然后立即调用这个函数返回可以公开的公有方法和属性的对象实例。在匿名函数内部定义了本地(私有)变量A,C,内部(私有)函数methodA(),methodC()。然后将一个对象实例作为函数值返回,这样返回的对象中只包含可以公开的属性(指变量B)和方法(指函数methodB(),methodD())。

单例对象中公有属性和公有方法的调用与一般对象的属性和方法调用一样,使用点表示法或者方括号语法来调用单例对象的公有成员。

让我们通过以下代码,进一步验证我们的想法。

执行以下代码,会得到TypeError: Util.methodA is not a function
//内部函数不能被访问
Util.methodA();


执行以下代码,会得到ReferenceError: A is not defined
//本地变量不能被访问
alert(A); 


执行以下代码,得到1
//单例模式通过公有方法可以访问内部函数,进而访问本地变量
Util.methodB();


执行以下代码,得到2 C=2 argC=2
//单例模式通过公有方法可以访问内部函数,进而访问本地变量,以及内部函数参数
Util.methodD();


执行以下代码,得到ReferenceError: B is not defined
//公有变量不能直接访问。
alert(B);


执行以下代码,得到3
//公有变量可以通过单例模式访问
alert(Util.B);




所以,模块模式的适用场景:需要对单例进行一些初始化,又需要对私有变量进行封装时。

参考资料链接:
http://www.cnblogs.com/fengmiaosen/archive/2011/01/11/1933219.html

参考文档:
<JavaScript: The Definitive Guide, 5th Edition> By David Flanagan
分享到:
评论

相关推荐

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    extjs-620-docs.zip

    extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档

    extjs-theme-bootstrap

    "extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题,它借鉴了 Bootstrap 的设计风格,让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架,由 Twitter 推出,主要用于构建响应式...

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    extJs-5.0.1-gpl(part1)

    extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分

    extjs-theme-bootstrap-master.zip

    "extjs-theme-bootstrap-master"很可能是一个将ExtJS组件的样式与Bootstrap的样式相结合的主题,这样用户可以利用Bootstrap的美观设计,同时享受ExtJS的强大功能。 现在,我们来详细探讨这个主题包可能包含的内容:...

    extjs2----关于extjs 的使用,操作

    ExtJS 是一个强大的JavaScript库...随着技术的发展,现在的ExtJS已经更新到了更高级别的版本,例如ExtJS 7.x,加入了更多现代Web开发特性,如响应式设计、Material Design风格等,但其核心设计理念和组件模型依然适用。

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    ExtJS-MVC-用户列表实例

    在本例"ExtJS-MVC-用户列表实例"中,我们将深入探讨如何利用ExtJS的Model-View-Controller(MVC)架构来创建一个用户列表应用。 MVC模式是软件工程中常用的设计模式,它将应用程序分为三个主要部分:模型(Model)...

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中,我们将会看到如何使用ExtJS来创建一个简单的“你好,世界!”应用。以下是对这个示例中涉及的主要知识点的详细解释: 1. **引入ExtJS库**:首先,你需要在HTML文件中引入ExtJS...

    Extjs6.2 生成的admin-dashboard官方模板

    Extjs6.2 生成的admin-dashboard官方模板

    Extjs-ext-3.1.1

    licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS ...

    ExtJS-4.2.2-gpl.rar

    本资源"ExtJS-4.2.2-gpl.rar"是ExtJS 4.2.2的开源版本,适用于GPL许可协议,包含完整的源码、示例、API文档以及相关的文档资料,对于学习和开发基于ExtJS的应用程序非常有帮助。 1. **ExtJS 4.2.2 版本详解** ...

    extjs-620-docs.rar完全离线版

    此"extjs-620-docs.rar"压缩包包含了该版本的完全离线版API文档,旨在解决在没有网络连接或网络环境不稳定时,开发者仍然可以便捷地查阅和学习ExtJS 6.2.0的相关知识。 API 文档是任何开发者的重要工具,特别是对于...

    extjs-620-docs-离线文档

    extjs-620-docs,6.2.0离线文档,解压后可以布署到web服务器

    extjs-7.0.0-gpl

    在"extjs-7.0.0-gpl"版本中,我们看到的是ExtJS框架的一个重要里程碑,这个版本引入了许多新特性、性能优化和兼容性的提升。 1. **组件化开发**:ExtJS 7.0.0的核心是其组件化的开发模式。组件可以是按钮、表格、...

    Extjs4---combobox省市区三级联动+struts2

    在IT行业中,ExtJS是一个流行的JavaScript库,用于构建富客户端应用程序。版本4是其一个重要的迭代,提供了许多改进和新特性。在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中,我们将探讨如何利用...

Global site tag (gtag.js) - Google Analytics