javascript设计模式之module(模块)模式


Posted in Javascript onAugust 19, 2016

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

js中实现模块的方法:
 1.对象字面量表示法
 2.Module模式
 3.AMD模块
 4.CommonJS模块
 5.ECMAScript Harmony 模块

对象字面量

对象字面量不需要使用new运算符进行实例化,但不能用在一个语句的开头,因为开始的可能被解读为一个块的开始,在对象的外部,新成员可以使用如下赋值语句添加到对象字面量上,myModule.property = “someValue”。

var myModule = {
 myProperty:"someValue",
 myConfig:{
 useCaching:true,
 language:"en"
 },
 //基本方法
 myMethod:function(){
 //...
 },
 //根据当前配置输出信息
 myMethod2:function(){
  console.log("Caching is:"+(this.myConfing.useCaching) ? "enabled":"disabled");
 },

 //重写当前配置
 myMethod3:function(newConfig) {
 if(typeof newConfig ==="object"){
  this.myConfig = newConfig;
  console.log(this.myConfig.language);
  }
 },


};
myModule.myMethod3({
language:"fr",
usecaching:false
})

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

在javascript中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。

module模式使用了闭包封装“私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式,防止起泄露至全局作用域,并与别的开发人员的接口发生冲突。通过该模式,只需要返回一个公有的API,而其他的一切则都维持在私有闭包里。
在module模式内,由于闭包的存在,声明变量和方法只在该模式内部可用,但在返回对象上定义的变量和方法,则对外部使用者都是可用的

module模式的实现

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

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

//检查计数器值并重置
testModule.resetCounter();

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

//包含命名空间、公有、和私有变量的Module模式
var myNamspace = (function(){
 //私有计数器变量
 var myPrivateVar = 0;

 //记录素有参数的私有函数
 var myPrivateMethod = function(foo){
  console.log(foo);
 };

 return {
  //公有变量
  muPublicVar:"foo",

  //调用私有变量和方法的公有函数
  myPublicFunction:function(bar){
   myPrivateVar++;
   myPrivateMethod(bar);

  }
 }
})();

引用全局变量
JavaScript有一个特性叫做隐式全局变量,不管一个变量有没有用过,JavaScript解释器反向遍历作用域链来查找整个变量的var声明,如果没有找到var,解释器则假定该变量是全局变量,如果该变量用于了赋值操作的话,之前如果不存在的话,解释器则会自动创建它,这就是说在匿名闭包里使用或创建全局变量非常容易,不过比较困难的是,代码比较难管理,尤其是阅读代码的人看着很多区分哪些变量是全局的,哪些是局部的。

不过,好在在匿名函数里我们可以提供一个比较简单的替代方案,我们可以将全局变量当成一个参数传入到匿名函数然后使用,相比隐式全局变量,它又清晰又快,我们来看一个例子:

//全局模块
var myModule = (function(jQ,_){

  function privateMethod1(){
    jQ(".container").html(test);
  }
  return {
    publicMethod:function(){
      privateMethod1();
    }
  }
})(jQuery,_);
myModule.publicMethod();

//全局模块 
var myModule = (function(){
//模块对象
var module = {};
privateVariale = "Hello";

function privateMethod(){
  //...
}
module.publicproperty = "Foobar";
module.publiceMethod = function(){
}  
return module;

 })();

声明全局变量,而不需要实现它们,并可以同样地支持全局引入的概念

Module模式的还是存在一定的不足:
1. 由于我们访问公有和私有成员的方式不同,当我们想改变可见性时,实际上我们必须修改每一个曾经使用过该成员的存在。
2. 我们无法访问那些之后在方法里面添加的私有成员,
3. 无法为私有成员创建自动化单元测试,bug需要修正补丁时会增加额外的复杂性。
4. 开发人员无法轻易地扩展私有方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js验证表单大全
Nov 25 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
JS实现音乐导航特效
Jan 06 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
JS实现六位字符密码输入器功能
Aug 19 #Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 #Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 #Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 #Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 #Javascript
jQuery Validate插件实现表单验证
Aug 19 #Javascript
jQuery如何封装输入框插件
Aug 19 #Javascript
You might like
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
php生成随机颜色的方法
2014/11/13 PHP
php中return的用法实例分析
2015/02/28 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python中count函数简单的实例讲解
2020/02/06 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
课程改革实施方案
2014/03/16 职场文书
企业活动策划方案
2014/06/02 职场文书
教师工作决心书
2015/02/04 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python