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 获取(接收)地址栏参数值的方法
Apr 01 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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
PHP在线生成二维码代码(google api)
2013/06/03 PHP
php mail to 配置详解
2014/01/16 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python入门篇之对象类型
2014/10/17 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
wxpython绘制音频效果
2019/11/18 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
python学生管理系统的实现
2020/04/05 Python
Python colormap库的安装和使用详情
2020/10/06 Python
python3 kubernetes api的使用示例
2021/01/12 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
竞选体育委员演讲稿
2014/04/26 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
Django drf请求模块源码解析
2021/06/08 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL