随笔分类 - JS设计模式
摘要：装饰者模式概述本章讨论的是一种为对象添加特性的技术，她并不使用创建新子类这种手段。装饰者模式可以用来透明的把对象包装在具有同样接口的另一个对象中。这样一来，就可以给一个方法添加一些行为，然后将方法调用传递给原始对象。装饰者的结构装饰者可用于为对象添加功能，她可以用来替代大量子类。我们还是来看那个自行...
阅读全文
摘要：适配器模式概述适配器模式可用来在现有接口和不兼容的类之间进行适配。使用这种模式的对象又叫包装器(wrapper)。适配器特点从表面看，适配器模式很像门面模式。她们都要对别的对象进行包装并改变其呈现的接口。二者的区别在于她们如何改变接口：门面元素展现的是一个简化的接口，她并不提供额外的选择，而且有时为了方便完成任务她还会做出一些假定。适配器则要把一个接口转换为另一个接口，她并不滤除某些能力，也不会简化接口。假设有一个对象，还有一个以三个字符串为参数的函数：var clientObject = { string1: 'foo', string1: 'bar', st
阅读全文
摘要：门面模式这是一种组织性的模式，它可以用来修改类和对象的接口，使其更便于使用。它可以让程序员过得更轻松，使他们的代码变得更容易管理。门面模式有两个作用：简化类的接口消除与使用她的客户代码之间的耦合一个简单的门面模式var addEvent = function(el, ty, fn){ var cases = [ function(el, ty, fn) { el.addEventListener(ty, fn, false); }, function(el, ty, fn) { el.attachEvent('on'+ty, fn); }, fu...
阅读全文
摘要：组合模式概述组合模式是一种专为创建Web上的动态用户界面量身定制的模式.使用这种模式可以用一条命令在多个对象上激发复杂的递归的行为.它可以用来把一批子对象组织成树形结构,并且使整棵树都可被遍历.所有组合对象都实现了一个用来获得子对象的方法.组合对象有两种结构组合对象和叶对象,如下: 组合对象 / | \ 组合对象 叶对象 组合对象 / \ / \叶对象 叶对象 叶对象 叶对象 组合模式的适用条件存在一批组织成某种层次体系的对象(具体的结构在开发期间可能无法得知)希望这批对象或其中的一部分对象实施一个操作.组合模式擅长于对大批对象...
阅读全文
摘要：桥接模式的用途在实现API的时候,桥接模式非常有用.在设计一个JavaScript API的时候,可以用这个模式来弱化它与使用它的类和对象之间的耦合.示例:事件监听器桥接模式最常见和实际的应用的场合之一是事件监听器回调函数.假设有一个名为getBeerById的API函数,它根据一个标识符返回有关某种啤酒的信息.常规的实现:addEvent(element,'click', getBeerById);function getBeerById(e){ var id = this.id; asyncRequest('GET', 'beer.uri?id=&#
阅读全文
摘要：RSS阅读器由于我们只想跟RSS容器对象打交道,所以用一个工厂来实例化这些内部对象并把它们组装到一个RSS阅读器中.使用工厂方法在好处在于,我们创建的RSS阅读器类不会与那些成员对象紧密耦合在一起.RSS阅读器的成员对象成员对象1: xhr这个对象就是上一篇中介绍过的,所以就不再说了.成员对象2: 显示类为了满足RSS阅读器类的需要,它需要实现几个方法.var DisplayModule = new Interface('DisplayModule', ['append', 'remove', 'clear']);var List
阅读全文
摘要：XHR工厂基本实现var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXHR']);var SimpleHandler = function(){};SimpleHandler.prototype = { request: function(method, url, callback, postVars){ var xhr = this.createXHR(); xhr.onreadystatechange = function(){ if(xhr.ready...
阅读全文
摘要：工厂模式本章讨论两种工厂模式：简单工厂模式使用一个类(通常是一个单体)来生成实例。使用场景：假设你想开几个自行车商店(创建自行车实例，组装它，清洗它，出售它)，每个店都有几种型号的自行车出售。/*=====================实现车==========================*/var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'ride', 'repair']);//Interface见2.初识接口那一章的用鸭式辨型模仿接口
阅读全文
摘要：什么是链式调用这个很容易理解，例如:$(this).setStyle('color', 'red').show();分解链式调用链式调用其实是两个部分：1.操作对象(也就是被操作的DOM元素，如上例的$(this))2.操作方法(具体要做什么事情，如上例的setStyle和show)如何生成操作对象与操作方法一般的$函数：function $(){ var elements = []; for(var i= 0,len=arguments.length; i<len; i++){ var element = arguments[i]; if(typeof.
阅读全文
摘要：单体模式的优势用了这么久的单体模式，竟全然不知！用它具体有哪些好处呢？1.可以用它来划分命名空间(这个就是就是经常用的了)2.利用分支技术来封装浏览器之间的差异(这个还真没用过，挺新鲜)3.借助单体模式，可以把代码组织的更为一致，方便阅读与维护(这个也用过了)最基本的单体模式最简单的单体其实就是一个对象字面量。它把一批有一定关联的方法和属性组织在一起。var Singleton={ name: nimei, age: 2, walk: function(){ ... }, eat: function(){ ... }}这个对象可以...
阅读全文
摘要：目的我们的目的就是编写一个用于创建和管理就地编辑域的可重用的模块化API。它是指网页上的一段普通文本被点击后就变成一个配有一些按钮的表单域，以便用户就地对这段文本进行编辑。思路当用户点击时1.将普通文本域隐藏2.添加表单元素3.设置表单元素的value当用户保存时ajax通信保存内容当用户取消时1.隐藏表单域2.显示文本域3.设置文本域的value类式继承实现就地编辑superClass的实现(input)function EditInPlaceField(id, parent, value){ this.id = id; this.value = value || 'defaul..
阅读全文
摘要：类式继承0.构造函数一个简单的Person类function Person(name){ this.name = name;}Person.prototype.getName = function(){ return this.name;}1.原型链实现继承未封装extend函数继承继承步骤如下：step 1:创建继承类的构造函数step 2:设置继承类的原型链为父类构造函数。step 3:调整继承类的构造函数。step 4:创建继承类function Author(name, books){ Person.call(this, name); //step 1 this...
阅读全文
摘要：封装、信息隐藏与接口的关系信息隐藏是目的，封装是手段。接口提供了一份记载着可供公共访问的方法的契约。它定义了两个对象间可以具有的关系。只要接口不变，这个关系的双方都是可以替换的。一个理想的软件系统应该为所有类定义接口。创建对象的基本模式1.门户大开型var Publication = new Int...
阅读全文
摘要：什么是接口接口提供了一种用以说明一个对象应该具有哪些方法的手段。接口之利1.接口具有自我描述性从而促进代码的重用2.接口有助于稳定不同中的类之间的通信方式3.测试和调试也变得更轻松接口之弊1.在一定程度上强化了类型的作用2.ｊｓ中没有内置的interface，实现它会增加复杂度3.实现接口会对性能造成一定的影响4.无法强迫其他程序员遵守你定义的接口三种方法在JS中模仿接口注释法（这只是一种文档规范）/*interface Composite{ function add(child); function remove(child); function getChild(inde...
阅读全文
摘要：创建支持链式调用的类（构造函数+原型）Function.prototype.method = function(name, fn){ this.prototype[name] = fn; return this;};//构造函数+原型 创建类var Anim = function(){}...
阅读全文