js模块模式

当一个javascript文件很大的时候,会出现一些问题:
1.里面定义了大量的变量,你不得不把变量的名字写的越来越长。
2.系统读取全部javascript文件速度很变慢。

而解决这两个问题最好的有一个很不错的方式就是引入模块模式。

一、格式

模块模式使用了匿名闭包的方式

var model=(function(){
...//定义一些私有变量
return {
....//以对象的方式返回,返回值可以有函数内部的东西
}
})();//可以传参数
其中模块内可以定义一些私有变量,return出来的属性是共有属性。

二、例子

下面我以学生为例
<pre>
var student=(function(day){
var myStudyDay=day;
function study(){
myStudyDay++;
}
return {
mygrade:function(){
return myStudyDay;
},
study:study
}
});
var qq=student(50);
console.log(qq.mygrade());//50
qq.study();
console.log(qq.mygrade());//51
console.log(myStudyDay);//error:myStudyDay is not defind
</pre>
myStudyDay是student模块的私有属性,study是该模块的私有函数,防止了全局污染,在函数外部不能修改这两个的值。

三、高级

梦想决定高度,想要让你的模块更大试试这样
<pre>
var student=(function(day){
var myStudyDay=day;
function study(){
myStudyDay++;
};
var grade=(function(){
var grade=90;
return{
mygrade:function(){
return grade
}
}
})//模块里面套一个模块
return {
mygrade:function(){
return myStudyDay;
},
study:study
}
});
</pre>
模块里面套模块,这样可以让你的模块可以变得特别大。

使用模块模式不仅可以保护一些模块内的变量,同时还可以使我们的代码更具有意义性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,131评论 19 139
  • 在js的懒汉式单例模式中,其实也用到了另一种设计模式,即模块模式。在传统软件工程中,模块模式被定义为给类提供私有和...
    200813阅读 471评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,943评论 2 17
  • 我路过江南,风景旧曾谙。 说来都是很久之前的事情。一个青葱少年,去了趟江南,却并非为了好风光,打工歇息之余,遛了一...
    屋顶上的怪蜀黍阅读 272评论 0 0