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 相关文章推荐
DOM精简教程
Oct 03 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
纯javascript版日历控件
Nov 24 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
node.js 微信开发之定时获取access_token
Feb 07 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
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
编程语言Python的发展史
2014/09/26 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
技术总监的工作职责
2013/11/13 职场文书
慰问信模板
2015/02/14 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
员工担保书范本
2015/09/22 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis