当前位置: 首页 > 工具软件 > modulejs > 使用案例 >

JS—Module

甘英光
2023-12-01

Module模式

模块是任何强大应用程序架构中不可或缺的一部分,它通常能帮助我们清楚地分离和组织项目中的代码单元。

在JS中,有几种用于实现模块的方法,包括:

1、对象字面量表示法

2、Module模式
3、AMD模式
4、CommonJS模块
5、ECMAScript Harmony模块

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

这里我们就了解下前两种方法。
方法一:对象字面量

关键字:声明对象   name/key    :

经典程序:

var myModule = {

			myProperty: "someValue",

			//对象字面量可以包含属性和方法
			//例如:可以声明模块的配置对象
			myConfig: {
				useCaching: true,
				language: "en"
			},

			//基本方法
			myMethod: function() {
				console.log("myMethod");
			},

			//根据当前配置输出信息
			myMethod2: function() {
				console.log("Caching is " + ((this.myConfig.useCaching) ? "enabled" : "disabled"));
			},

			//重写当前配置
			myMethod3: function(newConfig) {

				if(typeof newConfig === "object") {
					this.myConfig = newConfig;
					console.log(this.myConfig.language);
				}
			}
		};

		//输出"myMethod"
		myModule.myMethod();

		//输出enabled
		myModule.myMethod2();

		//输出:fr
		myModule.myMethod3({
			language: "fr",
			useCaching: false
		});

使用对象字面量有助于封装和组织代码。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

方法二  Module(模块)模式
Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。
在JS中,Module模拟用于进一步模拟类的概念,通过这种方式,能够使一个单独对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。产生的结果是:函数名与在页面上其他脚本定义的函数冲突的可能性降低。

关键字:模拟类    公有/私有

最简单最经典代码:

(function() {
			//在此声明私有变量或者函数
			
			return {
				//在此声明公共变量或者函数
			}
		})();

简单且具体代码:

var testModule = (function () {
			//私有
			var counter = 0;

			return {
				//return以内的均是公有(可被外部访问)
				incrementCounter: function() {
					return ++counter;
				},

				resetCounter: function() {
					console.log("counter value prior to reset: " + counter);
					counter = 0;
				}
			};
		})();

		//增加计数器
		testModule.incrementCounter();

		//检查计数器并重置
		//输出:1
		testModule.resetCounter();

在这里,代码的其他部分无法直接读取incrementCounter()或resetCounter()。counter变量实际上是完全与全局作用域隔离的,因此他表现得就像是一个私有变量,它的存在被局限在模块的闭包内,因此唯一能访问其作用域的代码就是这两个函数。上述方法进行了有效的命名设置,所以在测试代码中,所有的调用都需要加上前缀(如:testModule)

自己的想法:匿名函数+声明的变量或函数+return(本质还是函数,而且利用了函数内部的作用域)

Module模式的变化:引入混入、引出

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

改进版本——Revealing Module(揭示模块)模式
这个模式的产生是因为Heilmann很不满意这种状况:当他想从另一个方法调用一个公有方法或访问公有变量时,必须重复主对象的名称。他也不喜欢使用Module模式时,必须切换到对象字面量表示法让某种方法变成公有方法。
他努力的结果就是创建了一个新的模式,能够在私有范围内简单定义所有的函数和变量,并返回一个匿名对象,它拥有指向私有函数的指针,该函数是他希望展示为公有的方法。

关键字:私有域中定义所有
示例代码:


var revealingModule = (function(){
			var privateVar = "private", publicVar = "Hello World";
			function privateFunction(){
				console.log("Names:" + privateVar);
			}
			function publicSetName(strName){
				privateName = strName;
			}
			function publicGetName(){
				privateFunction();
			}

			return {
				setName: publicSetName,
				greeting: publicVar,
				getName: publicGetName
			}
		})();

		revealingModule.setName("abc");
		// 输出 Names:private
		revealingModule.getName();
		// 输出 Hello World
		console.log(revealingModule.greeting);

该模式可以使脚本语法更加一致,在模块代码底部,它也会很容易指出哪些函数和变量可以被公开访问,从而改变可读性。



摘录于:《JavaScript设计模式》
参考:http://www.cnblogs.com/irocker/p/4-javascript-design-patterns-you-should-know.html





 类似资料: