摘要：
介绍中介者模式（Mediator），用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。主要内容来自：http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#mediatorpatternjavascript正文软件开发中，中介者是一个行为设计模式，通过提供一个统一的接口让系统的不同部分进行通信。一般，如果系统有很多子模块需要直接沟通，都要创建一个中央控制点让其各模块通过该中央控制点进行交互。中介者模式可以让这些子模块不需要直接沟通，而达到进 阅读全文
随笔分类 - [07]Web开发
深入理解JavaScript系列（35）：设计模式之迭代器模式
2012-03-09 08:46 by 汤姆大叔, 12318 阅读, 收藏, 编辑
摘要：
介绍迭代器模式(Iterator)：提供一种方法顺序一个聚合对象中各个元素，而又不暴露该对象内部表示。迭代器的几个特点是：访问一个聚合对象的内容而无需暴露它的内部表示。为遍历不同的集合结构提供一个统一的接口，从而支持同样的算法在不同的集合结构上进行操作。遍历的同时更改迭代器所在的集合结构可能会导致问题（比如C#的foreach里不允许修改item）。正文一般的迭代，我们至少要有2个方法，hasNext()和Next()，这样才做做到遍历所有对象，我们先给出一个例子：var agg = (function () { var index = 0, data = [1, 2, 3, 4,... 阅读全文
深入理解JavaScript系列（34）：设计模式之命令模式
2012-03-08 09:13 by 汤姆大叔, 13302 阅读, 收藏, 编辑
摘要：
介绍命令模式(Command)的定义是：用于将一个请求封装成一个对象，从而使你可用不同的请求对客户进行参数化；对请求排队或者记录请求日志，以及执行可撤销的操作。也就是说改模式旨在将函数的调用、请求和操作封装成一个单一的对象，然后对这个对象进行一系列的处理。此外，可以通过调用实现具体函数的对象来解耦命令对象与接收对象。正文我们来通过车辆购买程序来展示这个模式，首先定义车辆购买的具体操作类：$(function () { var CarManager = { // 请求信息 requestInfo: function (model, id) { ... 阅读全文
深入理解JavaScript系列（33）：设计模式之策略模式
2012-03-05 09:22 by 汤姆大叔, 18900 阅读, 收藏, 编辑
摘要：
介绍策略模式定义了算法家族，分别封装起来，让他们之间可以互相替换，此模式让算法的变化不会影响到使用算法的客户。正文在理解策略模式之前，我们先来一个例子，一般情况下，如果我们要做数据合法性验证，很多时候都是按照swith语句来判断，但是这就带来几个问题，首先如果增加需求的话，我们还要再次修改这段代码以增加逻辑，而且在进行单元测试的时候也会越来越复杂，代码如下： validator = { validate: function (value, type) { switch (type) { ca... 阅读全文
深入理解JavaScript系列（32）：设计模式之观察者模式
2012-03-02 08:43 by 汤姆大叔, 62712 阅读, 收藏, 编辑
摘要：
介绍观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。使用观察者模式的好处：支持简单的广播通信，自动通知所有已经订阅过的对象。页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。正文（版本一）JS里对观察者模式的实现是通过回调来实现的，我们来先定义一个pubsub对象，其内部包含了3个方法：订阅、退订、发布。var pubsub = {};(function (q) 阅读全文
深入理解JavaScript系列（31）：设计模式之代理模式
2012-02-29 09:03 by 汤姆大叔, 20783 阅读, 收藏, 编辑
摘要：
介绍代理，顾名思义就是帮助别人做事，GoF对代理模式的定义如下：代理模式（Proxy），为其他对象提供一种代理以控制对这个对象的访问。代理模式使得代理对象控制具体对象的引用。代理几乎可以是任何对象：文件，资源，内存中的对象，或者是一些难以复制的东西。正文我们来举一个简单的例子，假如dudu要送酸奶小妹玫瑰花，却不知道她的联系方式或者不好意思，想委托大叔去送这些玫瑰，那大叔就是个代理（其实挺好的，可以扣几朵给媳妇），那我们如何来做呢？// 先声明美女对象var girl = function (name) { this.name = name;};// 这是duduvar dudu = f... 阅读全文
深入理解JavaScript系列（30）：设计模式之外观模式
2012-02-28 08:55 by 汤姆大叔, 13280 阅读, 收藏, 编辑
摘要：
介绍外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口值得这一子系统更加容易使用。正文外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式经常被认为开发者必备，它可以将一些复杂操作封装起来，并创建一个简单的接口用于调用。外观模式经常被用于JavaScript类库里，通过它封装一些接口用于兼容多浏览器，外观模式可以让我们间接调用子系统，从而避免因直接访问子系统而产生不必要的错误。外观模式的优势是易于使用，而且本身也比较轻量级。但也有缺点 外观模式被开发者连续使用时会产生一定的性能问题，因为在每次调用时都要检测功能的可用性。下面是一 阅读全文
深入理解JavaScript系列（29）：设计模式之装饰者模式
2012-02-24 08:59 by 汤姆大叔, 20315 阅读, 收藏, 编辑
摘要：
介绍装饰者提供比继承更有弹性的替代方案。 装饰者用用于包装同接口的对象，不仅允许你向方法添加行为，而且还可以将方法设置成原始对象调用（例如装饰者的构造函数）。装饰者用于通过重载方法的形式添加新功能，该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的。正文那么装饰者模式有什么好处呢？前面说了，装饰者是一种实现继承的替代方案。当脚本运行时，在子类中增加行为会影响原有类所有的实例，而装饰者却不然。取而代之的是它能给不同对象各自添加新行为。如下代码所示：//需要装饰的类（函数）function Macbook() { this.cost = function () { ... 阅读全文
深入理解JavaScript系列（28）：设计模式之工厂模式
2012-02-23 08:31 by 汤姆大叔, 35607 阅读, 收藏, 编辑
摘要：
介绍与创建型模式类似，工厂模式创建对象（视为工厂里的产品）时无需指定创建对象的具体类。工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。这个模式十分有用，尤其是创建对象的流程赋值的时候，比如依赖于很多设置文件等。并且，你会经常在程序里看到工厂方法，用于让子类类定义需要创建的对象类型。正文下面这个例子中，是应用了工厂方法对第26章构造函数模式代码的改进版本：var Car = (function () { var Car = function (model, year, mile... 阅读全文
深入理解JavaScript系列（27）：设计模式之建造者模式
2012-02-22 10:01 by 汤姆大叔, 17038 阅读, 收藏, 编辑
摘要：
介绍在软件系统中，有时候面临着“一个复杂对象”的创建工作，其通常由各个部分的子对象用一定的算法构成；由于需求的变化，这个复杂对象的各个部分经常面临着剧烈的变化，但是将它们组合在一起的算法确相对稳定。如何应对这种变化？如何提供一种“封装机制”来隔离出“复杂对象的各个部分”的变化，从而保持系统中的“稳定构建算法”不随着需求改变而改变？这就是要说的建造者模式。建造者模式可以将一个复杂对象的构建与其表示相分离，使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式，那么用户就需要指定需要建造的类型就可以得到它们，而具体建造的过程和细节就不需要知道了。正文这个模式相对来说比较简单，先上代码 阅读全文
深入理解JavaScript系列（26）：设计模式之构造函数模式
2012-02-21 08:59 by 汤姆大叔, 27933 阅读, 收藏, 编辑
摘要：
介绍构造函数大家都很熟悉了，不过如果你是新手，还是有必要来了解一下什么叫构造函数的。构造函数用于创建特定类型的对象——不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。基本用法在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概念，但是有特殊的构造函数。通过new关键字来调用定义的否早函数，你可以告诉JavaScript你要创建一个新对象并且新对象的成员声明都是构造函数里定义的。在构造函数内部，this关键字引用的是新创建的对象。基本用法如下：func 阅读全文
深入理解JavaScript系列（25）：设计模式之单例模式
2012-02-20 08:39 by 汤姆大叔, 79363 阅读, 收藏, 编辑
摘要：
介绍从本章开始，我们会逐步介绍在JavaScript里使用的各种设计模式实现，在这里我不会过多地介绍模式本身的理论，而只会关注实现。OK，正式开始。在传统开发工程师眼里，单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。正文在JavaScript里，实现单例的方式有很多种，其中最简单的一个方式是使用对象字面量的方法，其字面量里可以包含大量的属性和方法：var mySingleton = { ... 阅读全文
深入理解JavaScript系列（24）：JavaScript与DOM（下）
2012-02-17 09:58 by 汤姆大叔, 18948 阅读, 收藏, 编辑
摘要：
介绍上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面，包括如何访问node节点。本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型。本文参考：http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-lesson-2/操作元素上一章节我们提到了DOM节点集合或单个节点的访问步骤，每个DOM节点都包括一个属性集合，大多数的属性都提供为相应的功能提供了抽象。例如，如果有一个带有ID属性intro的文本元素，你可以很容易地通过DOM API来改变该元素的颜色：document.getE 阅读全文
大叔手记（20）：ASP.NET MVC中使用jQuery时的浏览器缓存问题
2012-02-16 14:49 by 汤姆大叔, 9344 阅读, 收藏, 编辑
摘要：
介绍尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持，还是有必要了解一下如何高效地使用http协议。首先要做的事情是在服务器端支持HTTP GET，定义不同的URL输出不同的数据（MVC里对应的就是action）。如果要使用同一个地址获取不同的数据，那就不对了，一个HTTP POST也不行因为POST不能被缓存。许多开发人员使用POST主要有2个原因：明确了数据不能被缓存，或者是避免JSON攻击（JSON返回数组的时候可以被入侵）。缓存解释jQuery全局对象里的ajax方法提供了一些options来支持缓存和Conditional GETs功能。$.ajax({ ifM... 阅读全文
深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手
2012-02-16 08:56 by 汤姆大叔, 35541 阅读, 收藏, 编辑
摘要：
文档对象模型Document Object ModelDOM（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来访问全局对象。属性在对象下 阅读全文
深入理解JavaScript系列（22）：S.O.L.I.D五大原则之依赖倒置原则DIP
2012-02-15 09:12 by 汤姆大叔, 11728 阅读, 收藏, 编辑
摘要：
前言本章我们要讲解的是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 depend on abs. 阅读全文
深入理解JavaScript系列（21）：S.O.L.I.D五大原则之接口隔离原则ISP
2012-02-14 10:49 by 汤姆大叔, 13133 阅读, 收藏, 编辑
摘要：
前言本章我们要讲解的是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 methods th 阅读全文
深入理解JavaScript系列（20）：《你真懂JavaScript吗？》答案详解
2012-02-10 08:54 by 汤姆大叔, 46699 阅读, 收藏, 编辑
摘要：
介绍昨天发的《大叔手记（19）：你真懂JavaScript吗？》里面的5个题目，有很多回答，发现强人还是很多的，很多人都全部答对了。今天我们来对这5个题目详细分析一下，希望对大家有所帮助。注：问题来自大名鼎鼎的前端架构师Baranovskiy的帖子《So, you think you know JavaScript?》。答案也是来自大名鼎鼎的JS牛人Nicholas C. Zakas的帖子《Answering Baranovskiy’s JavaScript quiz》——《JavaScript高级程序设计》一书的原作者(但题目2的解释貌似有点问题）OK，我们先看第一题题目1if (!(&qu 阅读全文
大叔手记（19）：你真懂JavaScript吗？
2012-02-09 09:45 by 汤姆大叔, 20274 阅读, 收藏, 编辑
摘要：
介绍大叔整理的《深入理解JavaScript系列》已经快20篇了，不知道大家看的如何了？ 除了大家熟知的闭包、原型、作用域以外，不知道大家是否真正理解了JavaScript的核心特性，在网上发现几个小题目非常有意思，正好适合考察大家对JavaScript的理解。如果大家有兴趣（或者自认为对JavaScript了解还不错的人），可以尝试着回答一下下面5个题目的输出结果（不要google或baidu哦）。至于正确结果嘛，自己可以将代码复制到浏览器里就可以看到了（稍后这两天，我会将详细的解释单独发帖整理出来）。PS：大胆点，不管结果对不对，都把你的答案贴出来（最好带有自己的想法，后面我们和准确解释做 阅读全文
深入理解JavaScript系列（19）：求值策略(Evaluation strategy)
2012-02-08 09:50 by 汤姆大叔, 18602 阅读, 收藏, 编辑
摘要：
介绍本章，我们将讲解在ECMAScript向函数function传递参数的策略。计算机科学里对这种策略一般称为“evaluation strategy”（大叔注：有的人说翻译成求值策略，有的人翻译成赋值策略，通看下面的内容，我觉得称为赋值策略更为恰当，anyway，标题还是写成大家容易理解的求值策略吧），例如在编程语言为求值或者计算表达式设置规则。向函数传递参数的策略是一个特殊的case。http://dmitrysoshnikov.com/ecmascript/chapter-8-evaluation-strategy/写这篇文章的原因是因为论坛上有人要求准确解释一些传参的策略，我们这里给出 阅读全文