`

javascript设计模式--Module(模块)模式

阅读更多

     最近在看《javascript设计模式》一书,看完之后不能就完了吧,做个读书笔记。

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

     我在此只做两种实现模块的方法,1.对象字面量  2.Module模式

     1.对象字面量

     对象字面量表示法:可以被认为是包含一组键值对的对象,每一对键和值由冒号进行分隔,键也可以代表新的命名空间。

   对象字面量不需要使用new运算符进行实例化,但不能用在一个语句的开头,因为开始的可能被解读为一个块的开始。

   在对象外部,新成员可以使用赋值语句添加到对象字面量上。

   通过对象字面量,我们可以处理成类似其他高级语言中命名空间或者包的形式。

   

var Mymodule = {
  getInfo:function(){
      console.log("My name is "+this.settings.lastname+",and I am "+this.settings.age);    
  },
  setInfo:function(info){
    console.log("Set Info:"+info);
  },
  settings:{firstname:"zhang",lastname:"mike",age:28},
  com:{
    cn:{
      setAge:function(age){
        console.log("Set age is:"+age);
      }
    }
  }
}
Mymodule.getDate = function(){
  console.log(new Date());
}
Mymodule.getInfo();
Mymodule.setInfo("zeromike");
Mymodule.getDate();
console.log(Mymodule.settings.firstname+" is "+Mymodule.settings.age+" years old!");
Mymodule.com.cn.setAge(18);

 

 

   打印结果:

    My name is mike,and I am 28

    Set Info:zeromike

    Sun Oct 05 2014 16:58:56 GMT+0800 (中国标准时间)

    zhang is 28 years old!

    Set age is:18


    2.Module模式

    Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。在Javascript中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。产生的结果是:函数名与在页面上其他脚本定义的函数冲突的可能性降低。

    Module模式使用闭包封装"私有"状态和组织。它提供了一种包装混合私有/公有方法和变量的方式,防止其泄露至全局作用域,并与其他接口发生冲突。通过该模式,只返回一个公有API,而其他的一切则都维持在私有闭包里。该模式返回一个对象而不是一个函数。

   第一种方式:

   

var MySecondModule = (function(){
  var defaultValue = {firstname:"zhang",lastname:"mike",age:"18"};
  var _setSettings=function(settings){
     _settings = settings;
     $.extend(defaultValue,_settings);
  }
  var _getSettings = function(){
    return defaultValue;
  }
  return {
    setNewSettings:function(settings){
      _setSettings(settings);
    },
    getNewSettings:_getSettings
  };
})();
var options = {firstname:"Lee",lastname:"Bruce",age:"32",address:"Beijing"};
MySecondModule.setNewSettings(options);
console.log(MySecondModule.getNewSettings());

    打印结果:

   {firstname: "Lee", lastname: "Bruce", age: "32", address: "Beijing"}

 

   第二种方式:

   

var MyThirdModule = (function(){
  var defaultValue = {firstname:"zhang",lastname:"mike",age:"18"};
  var module = {};
  module.setNewSettings=function(settings){
     _settings = settings;
     $.extend(defaultValue,_settings);
  }
  module.getNewSettings=function(){
      return defaultValue;   
  }
  return module;
})();
var options = {firstname:"Lee",lastname:"Bruce",age:"32",address:"Beijing"};
MyThirdModule.setNewSettings(options);
console.log(MyThirdModule.getNewSettings());

   打印结果:

   {firstname: "Lee", lastname: "Bruce", age: "32", address: "Beijing"}


   Bonus:单例模式

   单例模式被熟知是因为它限制了实例化次数只能一次。从经典意义上说,Singleton模式,在该实例不存在的情况下,可以通过一个方法创建一个类来实现创建类的实例:如果实例已经存在,它会简单返回该对象的引用。

   

var Singleton = (function(){
  var _instance;
  function MySingleton(options){
    options = options||{};
    this.name = options.name||'zeromike';
    this.message = options.message||'Hi';
  }
  return {
    getInstance:function(options){
      if (_instance===undefined){
        _instance = new MySingleton(options);
      }
      return _instance;
    }
  };
})();
var single = Singleton.getInstance({name:'mike',message:'Hello'});
console.log(single.message+","+single.name);
var single = Singleton.getInstance();
console.log(single.message+","+single.name);

    打印结果:

    Hello,mike

    Hello,mike

  


    代码HTML:

    

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Test2</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="module1.js">
</script>
<body>
</body>

</html>

   将以上JS代码放到module1.js文件中即可。

0
1
分享到:
评论

相关推荐

    JavaScript 设计模式 azw3

    《JavaScript设计模式》是JavaScript设计模式的学习指南。全书分为14章。首先介绍了什么是模式、模式的结构、类别、模式的分类、如何编写模式等等;然后,集中介绍了很多流行的设计模式在JavaScript中的应用,包括...

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

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

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

    主要为大家详细介绍了javascript设计模式之module(模块)模式 ,感兴趣的小伙伴们可以参考一下

    module-pattern-[removed]javascript中的模块化模式发布

    编写代码时的最佳实践之一是使用javascript中的设计模式,而最常用的是模块化模式。 在javascript中,模块化模式模仿类的概念,因此我们能够在单个对象中包含公共/私有方法和属性,从而保护全局范围内的特定数据,...

    javascript 模块依赖管理的本质深入详解

    模块是’javascript’的一种设计模式,它为函数定义一个包装函数,并且该包装函数的返回值与模块的API保持一致: function createModule() { function hello(name) { console.log(name + '帅哥你好!'); } ...

    wait-module:轻量级模块加载器,用来加载构建js文件依赖

    例如有个storages模块,在require时需要和其他module共享数据。require("!storages");即可。 4.只在设计上遵循了AMD规范,但是使用上却使用了类似CMD规范。我和我的团队都喜欢在require时暴露出过程,会比较灵活。...

    Asteroids-alike:小行星游戏的 JavaScript 重制

    外观和模块设计模式 单一设计模式 水池 应用程序目录布局 index.html --&gt; app layout file &#40;the main html template file of the app&#41; bower.json .bowerrc images/ css/ styles.css js/ ...

    JavaScript应用架构Chaplin.js.zip

    Chaplin 主要为了解决 Backbone 的局限性,提供一个轻量级和灵活的结构,采用良好的设计模式和最佳实践。 一些主要特性: CoffeeScript 类层次 以及对象组合 使用 AMD 模块的 Module 封装和延迟加载 使用 ...

    asp.net知识库

    Coalesys PanelBar + R.a.d Treeview +Xml 构建的Asp.net 菜单和权限管理模块 突破屏蔽限制,自己的网站使劲弹新IE窗口 对页面SCROLLING的CSS不能生效原因 .Net 中IE使用WinForm控件的使用心得。 动态加载用户控件的...

    关于JS模块化的知识点分享

    在模块化规范形成之前,JS开发者使用Module设计模式来解决JS全局作用域的污染问题。Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。在JavaScript中,Module模式使用匿名函数自调用 (闭包...

    steal:获取JavaScript

    偷 ... 它们是许多JavaScript设计模式的基础,在ES6中看起来可能像这样: export function hello ( ) { console . log ( 'hello' ) ; } export function goodbye ( ) { console . log ( 'goodbye'

    micro-ioc:一个简单的“做一件事”的ContainerService定位器,为您的NodeJS应用程序提供IoCDI设计模式

    /去设计模式提供了一种构建松散耦合的模块化系统的好方法。 在构建应用程序时,DI可以帮助应用诸如以减少具体依赖关系,以提高可测试性等概念。 但是,这些好处通常伴随着采用复杂框架的成本,或者用于定义和利用...

    js-deep:js深入学习

    JavaScript数据类型JavaScript代码运行机制作用域和作用域链let/const/var的区别JavaScript高阶编程技巧原型和原型链的底层运行机制this...JavaScript事件解析使用es5实现class以及extends关键字ES Module模块化浏览器...

    viewcontrol:一个模块视图控制器模式

    这是一个轻量级的 javascript 框架,提供对传统样式类/...模块.extend() Module.extend 是任何模块定义的起点。 这也是将任何模块继承到另一个模块的方式。 实际上,您编写的每个模块都是“模块”的后代。 var MyModu

    balsa:用于浏览器的轻量级、多中继 JavaScript 日志记录

    一个支持模块模式( require 、 module 、 exports等)的环境,例如 ,但是当它与捆绑在一起并在浏览器中使用时,它真的很。 基本用法 // Create a new Balsa logger with a console relay var balsa = new require...

    python入门到高级全栈工程师培训 第3期 附课件代码

    04 module模块和包的介绍 05 模块的执行以及__name__ 06 关于模块的介绍 07 time时间模块 08 random模块 第22章 01 模块的补充 02 sys修改环境变量 03 BASEDIR的介绍 04 os模块的介绍 05 sys模块的介绍 06 json...

    buaasoft-wechat:buaasoft-微信

    从 2.0 开始,正式引入 Module 模式,即公众账号的功能和内核完全脱离,每个功能都以一个单独的 Module 的形式存在并独立加载,不同功能模块之间完全解耦,极大地增强了系统的稳定性和可维护性。2.0 版本的数据库也...

    di-container:Node.js 的基本依赖注入 (DI) 容器

    双容器Node.js 的基本依赖注入 (DI) 容器受 [Node.js 设计模式] ( ) 一书中的代码示例启发。浏览器支持这个库没有在浏览器中测试过,但它应该可以与一起使用,只要浏览器支持(或有一个Array.isArray() ) Array....

    wac:C中的WebAssembly解释器

    设计为运行用Emscripten构建的wasm代码(使用-s SIDE_MODULE=1 -s LEGALIZE_JS_FFI=0 )。 先决条件 要构建wac / wax / wace,您需要32位版本的gcc和32位版本的SDL2和libedit。 在64位Ubuntu / Debian上,可以这样...

Global site tag (gtag.js) - Google Analytics