初识JavaScript中的模块
初识JavaScript中的模块
小王JOJO 发表于3年前
初识JavaScript中的模块
  • 发表于 3年前
  • 阅读 98
  • 收藏 5
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 个人感觉, 模块在JavaScript的应用要多于面向对象,而且模块比面向对象更加优雅,这篇参考了<JavaScript语言精粹>一书(就是传说中的蝴蝶书)

模块

    模块可以提供一个接口,并且隐藏其中的状态与实现的的函数或者对象,利用模块我们可以完全屏蔽全局变量的使用(全局变量太坑了,55555)

一个小例子

Function.prototype.method = function(name,func){
	this.prototype[name] = func;
	return this;
}
String.method("def",function(){
	var ent = {
		quot:'""',
		lt:'<',
		gt:'>'
	};
	//这里的整个匿名自执行函数是window调用的
	//this---->window


	
	return function(){
		return this.replace(/&([^&;]+);/g,function(a,b){
			var r = ent[b];
			return typeof r ==="string" ? r : b;
		});
	};

}());




/**************test*********************/
var  a = "<">".def();
console.log(a);//<"">

在String的自定义def属性 , 这个属性是一个自执行函数, 它会return一个新的函数,并赋值给def(比较绕........),这个新的函数就是最终的在String添加的def方法,只有他才有权力访问内部的ent 对象

一个单例模式

再看一个生成密匙的例子

<!-- lang: js -->
//模块生成安全的对象
var serial_maker = function (){
	var prefix = "";
	var seq = 0;
	return {	
		set_seq:function(s){
			seq = s;
		},
		set_pre:function(p){
			prefix = p;
		},
		gensym:function(){
			var result = prefix + seq;
			seq += 1;
			return result;
		}
	}
}

var seqer = serial_maker();
seqer.set_pre("W");
seqer.set_seq(100);

console.log(seqer.gensym());//W100
console.log(seqer.gensym());//W101
console.log(seqer.gensym());//W102

这里在是返回一个对象,这个对象里的属性是函数,这些函数能访问serial_maker 中定义的变量,而且外面是无法修改serial_maker变量中的值的,serial_maker 返回的值是唯一的

#PS

模块是JavaScript编程的重要思想 , 其实很多情况下,我感觉用模块是比较好的选择,并不是一定要用面向对象的思想,好多框架也是建立在模块的基础的上,比如jQuery,使用的就是架构用面向对象,内部实现使用模块的模式,影响比较神的是jQuery在延迟对象和回调函数部分,内部就使用了模块的方法实现

标签: js 模块
共有 人打赏支持
粉丝 2
博文 7
码字总数 5082
×
小王JOJO
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: