【JavaScript】设计模式-module模式及其改进

写在前面

编写易于维护的代码,其中最重要的方面就是能够找到代码中重复出现的主题并优化他们,这也是设计模式最有价值的地方

说到这里......

《head first设计模式》里有一篇文章,是说使用模式的心智,

  1、初学者"心智" :"我要为HELLO WORLD找个模式"

  2、中级人员模式: "或许这里我需要一个单件模式"

  3、悟道者心智:"在这里使用一个装饰者模式相当自然"

  but,but,but,不学,连初学者都不算呐...

  先了解一下设计模式的起源吧:

    >>>设计模式最初起源于奥地利维也纳的一个土木工程师克里斯托弗·亚历山大,模式语言最早是为了解决复杂工程项目而创立的,30年前,软件开发工程师们的开始把亚历山大编写的设计原则纳入首个设计模式的文档中。

    >>>1995年,出版了《设计模式:可复用面向对象软件的基础》,就这样经过开发工程师们的经验的总结与使用,成长成为今天的设计模式,已经得到了广泛的使用,是初级开发人员改进编程技巧的指南。

  那么就先为我们的hello world找个模式吧 【罒ω罒】...我使用的JavaScript

Module(模块)模式

  模块是任何强大的应用程序框架中不可或缺的一部分,也是在程序框架中应用比较广泛的模式,他帮助我们清楚的分离组织项目中代码单元

  在module模式中,,可以使一个对象拥有共有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分

  

  我们来一艘卡通版的module~

  

相信聪明的你已经观察出来了,在module模式中,有两个重要的点就是公有私有 ,

  module模式提供了一种混合公有/私有方法和变量的方式,防止其泄露至全局作用域,并与别的开发人员接口发生冲突,

通过该模式,只需返回一个公有的API,而其他的一切都维持在私有闭包里。

  我们来写一个简单的示例:<通过module模式实现一个购物车>

  

在module模式中,我们注意到了,我们返回了一个object对象。他会自动赋值给basketModule,以便我们可以与他交互.

我们的函数能够享有私有函数的自由,因为他们不会暴露于页面的其他部分,

  

  当我们试着输出console.log(basket) ,发现不能正常工作,因为basket只存在basketModule闭包的作用域中,而不是存在于返回的公有对象里。

Module模式变化

1、引入混入

  模式的引入混入变化演示了全局变量如何作为参数传递给模块的匿名函数,如果你想在你的模式中使用jQuery或者underscore等等中的方法

  

  通过全局变量(jQuery、underscore)传递参数给模块的方式来使用全局变量中的方法。

2、引出

  我们声明一个全局变量,而不需要使用他。然后接下来你用样可以使用引入混入的方法引入该全局变量
  

  我们在控制台输出myModule,里面已经存在了一公有变量和方法,
  但是module,privateVariable、privateMethod对外仍然是不可见的,这样也保持了全局变量的纯洁性

Revealing module(揭示)模式

我们理解了module模式之后,我们来看一个稍有改进的版本 — —Revealing module模式:

Revealing module的关键在于:将暴露的公有指针指向私有函数和属性上

Heilmann创建的这种改进版的module模式,可以使脚本语法更加一致。在模板代码的底部,他很容易指出哪些函数和变量可以被公开访问,从而改善可读性

但是Revealing module 相比 module模式创建的模块更加脆弱,所以使用时应特别小心(ヽ( ̄▽ ̄)?,hey,我会注意)

写在后面

  module模式的优势是很明显的,它支持私有数据,在module模式中代码的公有部分能够接触私有部分,而外界无法接触类的私有部分。

  那么module模式有哪些缺点呢?由于我们访问公有和私有成员的方式不同,当我们想要改变可见性时,我们就需要修改每一个曾经使用过该成员的地方。还有其他的一些缺点

  虽然如此module仍然是相当有用的。

  

参考书籍:

  《JavaScript设计模式》
  《head first设计模式》

  

时间: 2024-10-13 21:02:23

【JavaScript】设计模式-module模式及其改进的相关文章

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

模块是任何强大应用程序中不可或缺的一部分,它通常能帮助我们清晰地分离和组织项目中的代码单元. js中实现模块的方法: 对象字面量表示法 Module模式 AMD模块 CommonJS模块 ECMAScript Harmony 模块 对象字面量 对象字面量不需要使用new运算符进行实例化,但不能用在一个语句的开头,因为开始的可能被解读为一个块的开始,在对象的外部,新成员可以使用如下赋值语句添加到对象字面量上,myModule.property = "someValue". var myM

JavaScript设计模式 - 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素 许多浏览器都支持 Javascript 的 Array.prototype.forEach 迭代器可以分为 内部迭代器 和 外部迭代器 一.jQuery 中的迭代器 1 $.each( [1,2,3,4], function (i, n) { 2 console.log( "当

javascript设计模式-组合模式

组合模式所要解决的问题: 可以使用简单的对象组合成复杂的对象,而这个复杂对象有可以组合成更大的对象.可以把简单这些对象定义成类,然后定义一些容器类来存储这些简单对象. 客户端代码必须区别对象简单对象和容器对象,而实际上大多数情况下用户认为它们是一样的.对这些类区别使用,使得程序更加复杂.递归使用的时候跟麻烦,而我们如何使用递归组合, 使得用户不必对这些类进行区别呢? 概念: 将对象组合成树形结构以表示“部分-整体”的层次结构.Composite使得用户对单个对象和组合对象的使用具有一致性. 有时

JavaScript设计模式——工厂模式

工厂模式:是一种实现“工厂”概念的面上对象设计模式.实质是定义一个创建对象的接口,但是让实现这个接口的类来决定实例化哪个类.工厂方法让类的实例化推迟到子类中进行.创建一个对象常常需要复杂的过程,所以不适合在一个复杂的对象中.创建对象可能会导致大量的重复代码,也可能提供不了足够级别的抽象.工厂方法模式通过定义一个单独的创建对象的方法来解决这些问题,由子类实现这个方法来创建具体类型的对象. 1.简单工厂: //定义接口 var Bicycle = new Interface('Bicycle', [

JavaScript设计模式 策略模式

在现实中,我们到达一个地方,通常可以选择不同的方式,例如自行车,火车,汽车,飞机等. 在程序设计中,通常也会有这样的情况,实现一个功能有多个方案可以选择,比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法. 而这种情况,在设计模式中,称为策略模式. 策略模式的定义:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 例子: 很多公司的年终奖是根据员工的工资基数和年底绩效情况来方法的.如S级绩效为4倍工资,A级有3倍工资,B级有两倍工资. 在不使用策略模式的情况下,

JavaScript设计模式 - 状态模式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>状态模式</title> </head> <body> <input type="button" value="download" id="download_button&quo

javascript设计模式-桥接模式

在系统中,某些类由于自身逻辑,具有两个或两个以上维度的变化,如何使得该类型可以沿多个方向变化,但又不引入额外的复杂度,这就是桥接模式要解决的问题. 定义:桥接模式(Bridge),将抽象部分与它的实现部分分离,使他们可以独立的变化. 意图:将抽象与实现解耦. 对于前端,比较常用的场景,是事件监控: addEvent(element, 'click', getDrinkById); function getDrinkById(e) { var id = this.id; asyncRequest(

javascript设计模式-外观模式

也可译为门面模式.它为子系统中的一组接口提供一个一致的界面, Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.引入外观角色之后,使用者只需要直接与外观角色交互,使用者与子系统之间的复杂关系由外观角色来实现,从而降低了系统的耦合度. 比如在家要看电影,需要打开音响,再打开投影仪,再打开播放器等等,引入外观角色之后,只需要调用“打开电影设备”方法就可以.外观角色封装了打开投影仪等操作,给使用者提供更容易使用的方法. 作用: 简化复杂接口 解耦和,屏蔽使用者对子系统的直接访问

JavaScript设计模式——单体模式

一:单体模式简介: 是什么:将代码组织为一个逻辑单元,这个单元中的代码通过单一的变量进行访问.只要单体对象存在一份实例,就可以确信自己的所有代码使用的是同样的全局资源. 用途:1.用来划分命名空间,减少网页中全局变量的数目. 2.在分支技术中用来封装浏览器之间的差异. 3.单体对象创建的命名空间可以快速清除全局变量. 4.增强模块性 关于单体模式的好坏,等你看完所有的讲解之后再告诉你哦....... 二:单体结构: 1.最简单的单体就是一个对象字面量. 1 var ProductTools={