`

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设计模式

    #### 最新的模块化JavaScript设计模式 随着JavaScript生态系统的发展,模块化的概念也变得越来越重要。本书中探讨了几种最新的模块化模式: - **AMD(Asynchronous Module Definition)**:异步加载模块的标准。 -...

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

    ### JavaScript设计模式之Module(模块)模式 #### 模块的重要性 在现代软件工程中,模块化编程是一种关键的技术手段,它可以显著提高代码的可维护性和可读性。通过将程序划分为独立的功能块(即模块),开发者能够...

    前端项目-simple-module.zip

    "前端项目-simple-module.zip" 提供了一个基于JavaScript的模块化基础框架,让我们来深入探讨这个主题。 首先,JavaScript模块是将功能相关的代码封装在一起的一种方式,它有助于避免全局变量污染,提升代码的...

    JavaScript高级与设计模式.zip

    接下来,我们讨论JavaScript设计模式。设计模式是在特定场景下解决问题的通用、可重用的解决方案。在JavaScript中,常见的设计模式有: 1. **单例模式(Singleton)**:确保一个类只有一个实例,并提供一个全局访问...

    JavaScript----创建可重用代码

    总的来说,通过模块化、函数封装、闭包与高阶函数以及设计模式的应用,JavaScript开发者可以创建出高度可重用的代码,提高开发效率,降低维护成本。在实际项目中,结合具体需求灵活运用这些技术,可以使代码更加健壮...

    全面解析JavaScript Module模式

    JavaScript Module模式是编程实践中一种非常重要的设计模式,它主要用于实现JavaScript代码的模块化和封装,以提高代码的可维护性和可重用性。模块模式的关键在于利用匿名函数和闭包来创建私有作用域,从而保护内部...

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

    JavaScript设计模式是编写高效、可维护代码的重要手段之一,而Module模式是JavaScript中一种非常常用的模式。本文重点讲解了Module模式,以及一些与模块化编程相关的其他技术,例如AMD、CommonJS以及ECMAScript ...

    modulejs轻量级的JavaScript模块化系统

    `modulejs`是一个专门针对JavaScript设计的模块化系统,它的主要目标是提供简单、高效且灵活的方式来管理和加载模块。作为一个轻量级的框架,`modulejs`不依赖任何其他库,这使得它可以在各种项目中轻松集成,无论是...

    JavaScript模块化编程七日

    - 分享模块设计模式,如单例模式、工厂模式等。 第六天:动态导入与懒加载 - 了解动态`import()`语法,及其在优化应用性能上的作用。 - 应用动态导入实现按需加载,减少初始加载时间。 - 结合路由系统实现模块的懒...

    JavaScript模式

    - **提升编程技能**:本书不仅是一本关于JavaScript设计模式的手册,同时也涵盖了大量实用的编程技巧和高级概念。 ### 设计模式详解 #### 3. **工厂模式** - **定义**:工厂模式是一种创建型设计模式,提供了一...

    JavaScript类的设计模式

    JavaScript 类的设计模式是一种在开发过程中遵循的一套最佳实践和结构化方法,用于创建可维护、可扩展和可重用的代码。设计模式是解决常见编程问题的经验总结,它们不是具体的代码实现,而是解决特定问题的通用解决...

    JavaScript模块化编程

    在软件工程中,模块化是一种重要的设计思想,指的是将复杂的系统分解成一系列独立的功能单元(即模块),每个模块负责实现系统的一部分功能。模块化的核心在于明确划分职责边界,并通过接口来规范模块间的交互方式。...

    Multi-Use-Module:多重布局模块的示例

    在IT行业中,尤其是在前端开发领域,模块化设计已经成为构建高效、可维护的代码的重要方法。本主题关注的是“Multi-Use-Module”,一个专门用于实现多重布局的模块化解决方案。这个示例着重展示了如何通过CSS技术来...

    node-handler-module:MéduloNodeJS操作手册

    `node-handler-module` 是一个专为 Node.js 设计的处理模块,用于简化常见的服务器操作。本手册将深入探讨这个模块的使用方法、核心概念以及如何利用 TypeScript 进行强类型编程。 **一、模块介绍** `node-handler...

    Javascript-Single-Page-Aplication-SPA-javascript-html-css

    JavaScript 单页应用(SPA:Single-Page Application)是一种现代Web开发模式,它允许用户在不刷新整个页面的情况下与应用程序进行交互,提高了用户体验和性能。SPA通常由JavaScript、HTML和CSS构建,通过Ajax等技术...

    javascript的基础语法,面向对象的实现和设计模式实现

    在这个专题中,我们将深入探讨JavaScript的基础语法,面向对象的实现,以及设计模式在JavaScript中的应用。 **一、JavaScript基础语法** JavaScript的基础语法包括变量声明、数据类型、运算符、流程控制和函数等...

    全面解析Module模式

    Module模式是JavaScript编程中一个非常实用的设计模式,主要用于创建可复用的模块。它能够有效地帮助开发者封装变量和函数,减少全局命名空间的污染,提高代码的可维护性和可读性。本篇文章将深入探讨Module模式的...

    module4-solution:module4-solution

    最后,了解模块的最佳实践和设计模式,如工厂函数、立即执行函数表达式(IIFE)、模块模式等,也是提升JavaScript编程技能的重要部分。通过学习和实践这些概念,开发者可以更好地组织代码,提高代码质量和可维护性。...

Global site tag (gtag.js) - Google Analytics