js模块模式

作者: 我是渐渐呀 | 来源:发表于2017-02-26 16:10 被阅读10次

当一个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>
模块里面套模块,这样可以让你的模块可以变得特别大。

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

相关文章

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • js模块模式

    一、Module模式 最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。 在js中,Module模式用...

  • js模块模式

    当一个javascript文件很大的时候,会出现一些问题:1.里面定义了大量的变量,你不得不把变量的名字写的越来越...

  • js 模块模式

    在js的懒汉式单例模式中,其实也用到了另一种设计模式,即模块模式。在传统软件工程中,模块模式被定义为给类提供私有和...

  • js的4种设计模式及Vue小结(1)

    4种js设计模式 模块模式(module) 原型模式(prototype) 观察者模式(observer) 单例模...

  • js常见设计模式

    1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 JS设计模式大全 构造函数模...

  • modules

    翻译github整理笔记。模块(能力一般水平有限)。 ps:在ES6模块系统中,js自动将模式变为严格模式 exp...

  • JS设计模式之模块模式

    我们通过单体模式理解了是以对象字面量的方式来创建单体模式的;比如如下的对象字面量的方式代码如下: 模块模式的思路是...

  • JS设计模式三:模块模式

    模块模式简述 模块模式是为单例模式添加私有变量和私有方法,并减少全局变量的使用;如下就是一个模块模式的代码结构: ...

  • 2018-06-13 学习NodeJs 模块

    1.CommonJS规范 函数调用模式模块格式:hello.js'use strict'; vars ='Hell...

网友评论

    本文标题:js模块模式

    本文链接:https://www.haomeiwen.com/subject/vagowttx.html