摘要:
前言 这两天有些“高手”质疑JavaScript里是否应该有设计模式,甚至讨论到动态语言不应该有设计模式,或者不应该去乱套用设计模式,一直没参与 讨论,因为始终觉得自己对这些研究不深,也没尝试过深入理解编译器,词法解析等,更不要提去评论某种语言高不高级了,本人一直处在应用这个level上, 没达到那个高级别,所以也不敢参与讨论,以后也不会对这些讨论给予任何评价和回复,呵呵,级别不够。 不管怎么说,针对JavaScript整理的一些设计模式(或模式),我还是会一直完成下去的,因为我觉得国外的一些牛人写的东西确实很好的,而且 也解决了自己项目中很多现实的问题,何必在意别人怎么去评价呢,也或者或许把 阅读全文
摘要:
介绍 命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化;对请求排队或者记录请求日志,以及 执行可撤销的操作。也就是说改模式旨在将函数的调用、请求和操作封装成一个单一的对象,然后对这个对象进行一系列的处理。此外,可以通过调用实现具体函数 的对象来解耦命令对象与接收对象。 正文 我们来通过车辆购买程序来展示这个模式,首先定义车辆购买的具体操作类: $(function () { var CarManager = { // 请求信息 requestInfo: function (model, id) { ... 阅读全文
摘要:
介绍 迭代器模式(Iterator):提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示。 迭代器的几个特点是: 访问一个聚合对象的内容而无需暴露它的内部表示。为遍历不同的集合结构提供一个统一的接口,从而支持同样的算法在不同的集合结构上进行操作。遍历的同时更改迭代器所在的集合结构可能会导致问题(比如C#的foreach里不允许修改item)。 正文 一般的迭代,我们至少要有2个方法,hasNext()和Next(),这样才做做到遍历所有对象,我们先给出一个例子: var agg = (function () { var index = 0, data = [1, 2... 阅读全文
摘要:
介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户。 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很多时候都是按照swith语句来判断,但是这就带来几个问题,首先如果增加需求的话,我们还要再次修改这段代码以增加逻辑,而且在进行单元测试的时候也会越来越复杂,代码如下: validator = { validate: function (value, type) { switch (type) { ... 阅读全文
摘要:
介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。 使用观察者模式的好处: 支持简单的广播通信,自动通知所有已经订阅过的对象。页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。 正文(版本一) JS里对观察者模式的实现是通过回调来实现的,我们来先定义一个pubsub对象,其内部包含了3个方法:订阅、退订、发布。 var pubsub = {};(functi. 阅读全文
摘要:
介绍 代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。 代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象:文件,资源,内存中的对象,或者是一些难以复制的东西。 正文 我们来举一个简单的例子,假如dudu要送酸奶小妹玫瑰花,却不知道她的联系方式或者不好意思,想委托大叔去送这些玫瑰,那大叔就是个代理(其实挺好的,可以扣几朵给媳妇),那我们如何来做呢? // 先声明美女对象var girl = function (name) { this.name = name;};// 这是duduvar d... 阅读全文
摘要:
介绍 装饰者提供比继承更有弹性的替代方案。 装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数)。 装饰者用于通过重载方法的形式添加新功能,该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的。 正文 那么装饰者模式有什么好处呢?前面说了,装饰者是一种实现继承的替代方案。当脚本运行时,在子类中增加行为会影响原有类所有的实例,而装饰者却不然。取而代之的是它能给不同对象各自添加新行为。如下代码所示: //需要装饰的类(函数)function Macbook() { this.cost = function () { ... 阅读全文
摘要:
深入理解JavaScript系列(30):设计模式之外观模式 2012-02-28 08:55 by 汤姆大叔, 1801 visits, 收藏, 编辑 介绍 外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用。 正文 外观模式不仅简化类中的接口,而且对接口与调... 阅读全文
摘要:
介绍 在软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成;由于需求的变化,这个复杂对象的各个部分经常 面临着剧烈的变化,但是将它们组合在一起的算法确相对稳定。如何应对这种变化?如何提供一种“封装机制”来隔离出“复杂对象的各个部分”的变化,从而保持 系统中的“稳定构建算法”不随着需求改变而改变?这就是要说的建造者模式。 建造者模式可以将一个复杂对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式,那么用户就需要指定需要建造的类型就可以得到它们,而具体建造的过程和细节就不需要知道了。 正文 这个模式相对来说比较简 阅读全文
摘要:
介绍 与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类。 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。 这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。 正文 下面这个例子中,是应用了工厂方法对第26章构造函数模式代码的改进版本: var Car = (function () { var Car = function (model, yea... 阅读全文
摘要:
介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现。OK,正式开始。 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就 确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。 正文 在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法: var mySingleton . 阅读全文
摘要:
介绍 构造函数大家都很熟悉了,不过如果你是新手,还是有必要来了解一下什么叫构造函数的。构造函数用于创建特定类型的对象——不仅声明了使用的对象,构 造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法。 基本用法 在JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概念,但是有特殊的构造函数。通过new关键字来调用 定义的否早函数,你可以告诉JavaScript你要创建一个新对象并且新对象的成员声明都是构造函数里定义的。在构造函数内部,this关键字引用的是 新创建的对象。基本用法如 阅读全文
摘要:
介绍 上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面,包括如何访问node节点。本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型。 本文参考:http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-lesson-2/ 操作元素 上一章节我们提到了DOM节点集合或单个节点的访问步骤,每个DOM节点都包括一个属性集合,大多数的属性都提供为相应的功能提供了抽象。例如,如果有一个带有ID属性intro的文本元素,你可以很容易地通过DOM API来改变该元素的颜色: documen. 阅读全文
摘要:
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API。Javascript和DOM一般经常作为一个整体,因为Javascript通常都是用来进行DOM操作和交互的。 主要内容来自:http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/ 关于DOM,有些知识需要注意:1. window对象作为全局对象,也就是说你可以通过window来访问全局对象。 属. 阅读全文
摘要:
前言 本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第4篇,接口隔离原则ISP(The Interface Segregation Principle)。 英文原文:http://freshbrewedcode.com/derekgreer/2012/01/08/solid-javascript-the-interface-segregation-principle/注:这篇文章作者写得比较绕口,所以大叔理解得也比较郁闷,凑合着看吧,别深陷进去了 接口隔离原则的描述是: Clients should not be forced to depend on met... 阅读全文
摘要:
前言 本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第5篇,依赖倒置原则LSP(TheDependency Inversion Principle )。 英文原文:http://freshbrewedcode.com/derekgreer/2012/01/22/solid-javascript-the-dependency-inversion-principle/ 依赖倒置原则 依赖倒置原则的描述是: A. High-level modules should not depend on low-level modules. Both should depen... 阅读全文
摘要:
介绍 大叔整理的《深入理解JavaScript系列》已经快20篇了,不知道大家看的如何了? 除了大家熟知的闭包、原型、作用域以外,不知道大家是否真正理解了JavaScript的核心特性,在网上发现几个小题目非常有意思,正好适合考察大家对JavaScript的理解。 如果大家有兴趣(或者自认为对JavaScript了解还不错的人),可以尝试着回答一下下面5个题目的输出结果(不要google或baidu哦)。 至于正确结果嘛,自己可以将代码复制到浏览器里就可以看到了(稍后这两天,我会将详细的解释单独发帖整理出来)。 PS:大胆点,不管结果对不对,都把你的答案贴出来(最好带有自己的想法,后面我们和准 阅读全文
摘要:
介绍 昨天发的《大叔手记(19):你真懂JavaScript吗?》里面的5个题目,有很多回答,发现强人还是很多的,很多人都全部答对了。 今天我们来对这5个题目详细分析一下,希望对大家有所帮助。 注: 问题来自大名鼎鼎的前端架构师Baranovskiy的帖子《So, you think you know JavaScript?》。答案也是来自大名鼎鼎的JS牛人Nicholas C. Zakas的帖子《Answering Baranovskiy’s JavaScript quiz》——《JavaScript高级程序设计》一书的原作者(但题目2的解释貌似有点问题) OK,我们先看第一题 题目1 .. 阅读全文
摘要:
介绍 本章是关于ECMAScript面向对象实现的第2篇,第1篇我们讨论的是概论和CEMAScript的比较,如果你还没有读第1篇,在进行本章之前,我强烈建议你先读一下第1篇,因为本篇实在太长了(35页)。 英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/ 注:由于篇幅太长了,难免出现错误,时刻保持修正中。 在概论里,我们延伸到了ECMAScript,现在,当我们知道它OOP实现时,我们再来准确定义一下: ECMAScript is an object-oriente... 阅读全文
摘要:
介绍 本章,我们将讲解在ECMAScript向函数function传递参数的策略。 计算机科学里对这种策略一般称为“evaluation strategy”(大叔注:有的人说翻译成求值策略,有的人翻译成赋值策略,通看下面的内容,我觉得称为赋值策略更为恰当,anyway,标题还是写成大家容易理解的求值策略吧),例如在编程语言为求值或者计算表达式设置规则。向函数传递参数的策略是一个特殊的case。 http://dmitrysoshnikov.com/ecmascript/chapter-8-evaluation-strategy/ 写这篇文章的原因是因为论坛上有人要求准确解释一些传参的策略,.. 阅读全文