亮亮的博客 - javascript

汉字和Unicode编码互转

hi_94this@163.com(亮亮) — Mon,10 Aug 2009 22:12:33 +0800

这个是就是把汉字和Unicode编码互转的javascript代码，也是从网上找到了，也许有人用得着！！

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

javascript的设计模式之七[单件模式(Singleton)]

hi_94this@163.com(亮亮) — Wed,03 Jun 2009 22:25:06 +0800

这篇主要对于单件模式的各种代码形式进行归纳总结。可能大家没有经意，实际上，单件模式也许是我们日常前端JS开发中使用频率最高的设计模式了。
概述

在软件系统中，总有一些类只能或者必须产生一个实例对象，比如线程池，缓存，注册表等等；对于这种类，如果产生多个实例对象，就会出现各种异常状况；对于这种对象只要创建一次并且分配一次内存空间即可，所以这里也有个问题，对象所分配的内存空间的消耗，对于长期不使用的对象，这就产生资源浪费，所以利用单件模式，也可以按照需要来创建对象。

定义

单件模式确保一个类只有一个实例，并且提供一个全局访问点。
类图

分析
首先我们考虑到传统的编程语言如C#，单件模式中设置一个静态变量，可以这样表示：

 程序代码
public sealed class Singleton
{
    static Singleton instance = null;
    //
}

Singleton的构造函数设置为私有，防止Singleton多次实例化，这样就可以有以下的静态方法：

 程序代码
public static Singleton Instance
{
    get
    {
        if (instance == null)
        {
            instance = new Singleton();
        }
        return instance;
    }
}

这样只有在第一次实例化的时候，才创建对象；通过静态方法，得到唯一实例；

这个是C#中最简单的单件模式写法。而Javascript作为弱类型语言，有着它独特的地方，现在我就来介绍Javascript单件模式的几种形式：

1. 最基本的单件模式

 程序代码
var LoginUser = {
    name : "匿名用户",
    sex : "保密",
    setName : function(name){
        this.name = name;
    },
    setSex : function(sex){
        this.sex = sex;
    },
    getUserInfo : function() {
        return "用户名：" + this.name + "；性别：" +this.sex;
    }
}

这里定义了一个对象(LoginUser)，对象中包含了各种属性(name,sex)和方法(setName,setSex,getUserInfo)；

这样我新建一个HTML页面：

程序代码

可以发现，界面初始化时弹出的警告框为“用户名：匿名用户；性别：保密”，通过setName和setSex方法之后，点击按钮后弹出的警告框为“ 用户名：Leepy；性别：男”，说明在不同的方法作用域下，LoginUser保持着修改后的状态，因此LoginUser在页面中就保持着单一的状态。

我想大家一定也听过prototype的JS框架了吧（http://www.prototypejs.org），最新版本为（http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js），实际上在它的文件中包含着很多这样类似的代码，比如从文件一开头就可以发现：

 程序代码

var Prototype = {
  Version: '1.6.0.3', 

  Browser: {
    IE:     !!(window.attachEvent &&
      navigator.userAgent.indexOf('Opera') === -1),
    Opera:  navigator.userAgent.indexOf('Opera') > -1,
    WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
    Gecko:  navigator.userAgent.indexOf('Gecko') > -1 &&
      navigator.userAgent.indexOf('KHTML') === -1,
    MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
  }, 

  BrowserFeatures: {
    XPath: !!document.evaluate,
    SelectorsAPI: !!document.querySelector,
    ElementExtensions: !!window.HTMLElement,
    SpecificElementExtensions:
      document.createElement('div')['__proto__'] &&
      document.createElement('div')['__proto__'] !==
        document.createElement('form')['__proto__']
  }, 

  ScriptFragment: ']*>([\\S\\s]*?)<\/script>',
  JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/, 

  emptyFunction: function() { },
  K: function(x) { return x }
};
//以下是它的使用
if (Prototype.Browser.MobileSafari)
  Prototype.BrowserFeatures.SpecificElementExtensions = false;

可以看出，Version、Browser、BrowserFeatures、ScriptFragment、JSONFilter作为Prototype对象的属性，而emptyFUnction、K作为Prototype对象的方法；因此它就是一个最基本的单件模式。

由于Javascript的语言特性，可以在后期动态添加，删除，修改属性：

如：LoginUser.age = 24; 那么LoginUser对象便增加了age属性；而如：delete LoginUser.name; 那么LoginUser对象就删除了name属性；而如：LoginUser.name = "cnblogs"; 那么LoginUser对象的“私有”属性不需要通过setName的“公有”方法仍然能够做出修改。

因为根据设计模式原则：对扩展开放而对修改关闭，显然违背了该条准则。为了防止这种情况的发生，到时候会引入闭包的方式，稍后会说明。

2. 命名空间的单件模式

命名空间可以很好地划分属性和方法的归属，以及可以防止属性和方法被轻易的修改，通过访问各自的命名空间得到对应我们想要的属性和方法。这里还是以上面的LoginUser为例：

 程序代码
var LoginUser = {
    name : "匿名用户",
    sex : "保密",
    setName : function(name){
        this.name = name;
    },
    setSex : function(sex){
        this.sex = sex;
    },
    getUserInfo : function() {
        return "用户名：" + this.name + "；性别：" +this.sex;
    }
}
LoginUser.Mother = {
    name : "母亲姓名",
    career : "职位",
    setName : function(name){
        this.name = name;
    },
    setCareer : function(career){
        this.career = career;
    },
    getUserInfo : function() {
        return LoginUser.name + "的母亲名字：" + this.name + "；职业：" +this.career;
    }
}

从代码中看出，这里我把LoginUser作为“命名空间”，而LoginUser.Mother作为它的一个“全局变量”，这样做的好处可以防止 LoginUser的属性和方法被轻易地覆盖，通过LoginUser.××××，以致于LoginUser.××××.××××（如 LoginUser.Mother.Brother）来划分属性和方法的归属，如LoginUser中的name属性和LoginUser.Mother中的name属性是区分开来的。

这样我新建一个HTML页面：

程序代码

可以得到下面的弹出框：

LoginUser和LoginUser.Mother的name属性已经区分开来了。
在prototype.js文件中也用到命名空间的单件模式：

 程序代码

var Class = {
  create: function() {
    var parent = null, properties = $A(arguments);
    if (Object.isFunction(properties[0]))
      parent = properties.shift();

    function klass() {
      this.initialize.apply(this, arguments);
    }

    Object.extend(klass, Class.Methods);
    klass.superclass = parent;
    klass.subclasses = [];

    if (parent) {
      var subclass = function() { };
      subclass.prototype = parent.prototype;
      klass.prototype = new subclass;
      parent.subclasses.push(klass);
    }

    for (var i = 0; i < properties.length; i++)
      klass.addMethods(properties[i]);

    if (!klass.prototype.initialize)
      klass.prototype.initialize = Prototype.emptyFunction;

    klass.prototype.constructor = klass;

    return klass;
  }
};

Class.Methods = {
  addMethods: function(source) {
    var ancestor   = this.superclass && this.superclass.prototype;
    var properties = Object.keys(source);

    if (!Object.keys({ toString: true }).length)
      properties.push("toString", "valueOf");

    for (var i = 0, length = properties.length; i < length; i++) {
      var property = properties[i], value = source[property];
      if (ancestor && Object.isFunction(value) &&
          value.argumentNames().first() == "$super") {
        var method = value;
        value = (function(m) {
          return function() { return ancestor[m].apply(this, arguments) };
        })(property).wrap(method);

        value.valueOf = method.valueOf.bind(method);
        value.toString = method.toString.bind(method);
      }
      this.prototype[property] = value;
    }

    return this;
  }
};

这里实际上Class.create实现的是类的继承，具体这里我就不再阐述了，大家可以查看prototype官方的Api文档。

3. 闭包方式的单件模式

如果要得到真正意义上的“私有”成员，那么闭包方式是构造单件模式的一种选择。通过闭包的方式，只暴露一些可以公开的方法或者属性，而私有成员只在内部实现操作，而所有的属性和方法只需要实例化一次。现在开始继续看LoginUser的例子,闭包方式单件模式(上)对比基本单件模式(下)的例子：

 程序代码
闭包方式单件模式
var LoginUser = (function(){
    var _name = "匿名用户";
    var _sex = "保密";
    return {
        setName : function(name){
            _name = name;
        },
        setSex : function(sex){
            _sex = sex;
        },
        getUserInfo : function(){
            return "用户名：" + _name + "；性别：" + _sex;
        },
        getName : function(){
            return _name;
        }
    };
})();

 程序代码

对比基本单件模式    
var LoginUser = {
    _name : "匿名用户",
    _sex : "保密",
    setName : function(name){
        this._name = name;
    },
    setSex : function(sex){
        this._sex = sex;
    },
    getUserInfo : function() {
        return "用户名：" + this._name + "；性别：" +this._sex;
    }
}

可以发现，闭包方式将公共的方法放在return { ... }中，而属性_name和_sex做为参数传入return { ... }中；

现在两种方式都实现一下代码，测试一下：

 程序代码

window.onload = function() {
    LoginUser.setName("Leepy");
    LoginUser.setSex("男");
    alert(LoginUser._name);
}

可以得到闭包方式单件模式(左)对比第1条基本单件模式(右)如下两个结果：

可以看出闭包方式的LoginUser无法得到_name的值，而基本方式的LoginUser可以得到_name的值；

这进一步说明了闭包方式的_name已经成为“私有”成员属性了。而如果要得到_name的值，只有通过公开方法或者公开属性来获得，如下：
return { // 注意这里的“{”号不能够换行到下一行，不然浏览器提示错误
    getName : function() {
       return _name;
   }
}

这样子，alert(LoginUser.getName()); 就可以显示正确的值了。

继续看prototype.js文件中，其实也用到闭包方式的单件模式：

 程序代码

var Hash = Class.create(Enumerable, (function() {

  function toQueryPair(key, value) {
    if (Object.isUndefined(value)) return key;
    return key + '=' + encodeURIComponent(String.interpret(value));
  }

  return {
    initialize: function(object) {
      this._object = Object.isHash(object) ? object.toObject() : Object.clone(object);
    },

    _each: function(iterator) {
      for (var key in this._object) {
        var value = this._object[key], pair = [key, value];
        pair.key = key;
        pair.value = value;
        iterator(pair);
      }
    },

    set: function(key, value) {
      return this._object[key] = value;
    },

    get: function(key) {
      // simulating poorly supported hasOwnProperty
      if (this._object[key] !== Object.prototype[key])
        return this._object[key];
    },

    unset: function(key) {
      var value = this._object[key];
      delete this._object[key];
      return value;
    },

    toObject: function() {
      return Object.clone(this._object);
    },

    keys: function() {
      return this.pluck('key');
    },

    values: function() {
      return this.pluck('value');
    },

    index: function(value) {
      var match = this.detect(function(pair) {
        return pair.value === value;
      });
      return match && match.key;
    },

    merge: function(object) {
      return this.clone().update(object);
    },

    update: function(object) {
      return new Hash(object).inject(this, function(result, pair) {
        result.set(pair.key, pair.value);
        return result;
      });
    },

    toQueryString: function() {
      return this.inject([], function(results, pair) {
        var key = encodeURIComponent(pair.key), values = pair.value;

        if (values && typeof values == 'object') {
          if (Object.isArray(values))
            return results.concat(values.map(toQueryPair.curry(key)));
        } else results.push(toQueryPair(key, values));
        return results;
      }).join('&');
    },

    inspect: function() {
      return '#        return pair.map(Object.inspect).join(': ');
      }).join(', ') + '}>';
    },

    toJSON: function() {
      return Object.toJSON(this.toObject());
    },

    clone: function() {
      return new Hash(this);
    }
  }
})());

Class.create的第二个参数就是闭包方式的单件对象，这里的作用是将Hash对象继承于Enumerable类，并且包含了单件对象的公开方法如set,get,keys,values等等操作获取散列键值的方法。具体这里我就不再阐述了，大家可以查看prototype官方的Api文档。

4. 延迟加载的单件模式
上面介绍的各种方式都是在建立对象的时候，对象内部的成员都已经加载完毕，如果对于资源占用多的脚本，在不需要的时候，这对于内存造成了极大的浪费，所以要考虑一种方式将成员实例化推迟到需要调用对象的时候，也就是叫做延迟加载。
继续以LoginUser的例子作为演示：

 程序代码

var LoginUser = (function(){
    var uniqueInstance;
    var _name;
    var _sex;
    function constructor(){
        _name = "匿名用户";
        _sex = "保密";
        
        return {
            setName : function(name){
            _name = name;
            },
            setSex : function(sex){
                _sex = sex;
            },
            getUserInfo : function(){
                return "用户名：" + _name + "；性别：" + _sex;
            },
            getName : function(){
                return _name;
            }
        };
    }
    
    return {
        getInstance : function() {
            if(uniqueInstance == null)
            {
                uniqueInstance = constructor();
            }
            return uniqueInstance;
        }
    }
})();

可以看到，我这里添加了一个私有方法constructor()，并且由它来公开成员方法；
再则，当第一次调用getInstance方法的时候，调用contructor方法，并且对于成员属性_name和_sex进行初始化，说明通过调用 getInstance方法才对属性进行初始化，平时不进行初始化，constructor()返回了一个uniqueInstance的对象，由 uniqueInstance对象负责该单件对象的公开方法的操作。

然后新建一个HTML页面：
[/code]
window.onload = function() {
    var user1 = LoginUser.getInstance();
    user1.setName("Leepy");
    user1.setSex("男");
    alert(user1.getUserInfo());//用户名：Leepy；性别：男

    var user2 = LoginUser.getInstance();
    alert(user1 == user2); //user1和user2共享同一块内存空间，为true
}
[/code]
只有通过LoginUser.getInstance()后，LoginUser才进行成员初始化，而方法返回的对象共享同一块的内存空间。这就是延迟加载单件模式的工作原理。

5. 其他

另外上次园里一位朋友(winter-cn)发我的一个单件设计模式的文章，觉得挺不错，它也是利用了“匿名”函数的特征构建了单件模式，我这里把代码贴出来一下：

程序代码

总结

该篇文章用Javascript来设计单件模式的几种方式，在许多优秀的JS开源框架中，如 prototype，MicrosoftAjaxLibrary，jQuery，MooTools等等，都包含着大量单件模式的应用，所以单件模式在 Javascript中是很重要的一个模式。

附：源代码下载

本篇到此为止，谢谢大家阅读！

参考文献：《Head First Design Pattern》

《Professional Javascript Design Patterns》

javascript的设计模式之六[命令模式(Command)]

hi_94this@163.com(亮亮) — Tue,02 Jun 2009 22:17:29 +0800

概述

在各种各样的行为实现中，行为请求者与行为实现者紧密耦合，当每增加一个行为实现的时候，行为请求者必须增加一个对行为的处理，这样就需要大量改动请求者的操作，显然这样不利于维护和扩展。为了让行为请求者和行为实现者解耦，可以将行为封装为一个命令对象，但需要处理行为时，只要请求者知道命令对象，它本身不需要知道命令对象都做些什么，命令对象负责执行接收者的真正实现，这样就达到二者之间松耦合的目的。

定义

命令模式是将请求封装成对象，这可以让你使用不同请求、队列，或者日志请求来参数化其他对象。命令模式也可以支持撤销操作。

类图

实例分析

现在开始利用命令模式来应用到一个在线编辑器的场景中，并且详细分析一下：

这里先给大家看下效果图（兼容多浏览器）：

这里我引用了第5篇－组合模式的菜单例子进行改进；将命令模式和组合模式相结合的方式来阐述例子。

其中主菜单包括：

    * 文件（子菜单：新建、导出、退出）
    * 编辑（子菜单：剪切、复制、粘贴、删除）
    * 格式（子菜单：字体、字号、加粗、斜体、下划线、位置、编号、字体颜色）
    * 插入（子菜单：插入链接、插入图片），操作（撤销、重做、切换HTML）
    * 自定义格式（子菜单：格式1）
    * 帮助（子菜单：关于作者）

编辑器的这些功能实际上很常用。最后点击“得到HTML值”的按钮，可以得到HTML的内容，这里就可以按照您的需要来存储编辑器内容；文章的最后我将附上源代码。

1. 首先添加一个ICommand.js文件，其中定义一个Command接口：

 程序代码
var ICommand = new Interface("ICommand", [["execute"]]);

其中execute作为Command执行的接口方法;

关于接口的定义，可以参考第1篇－面向对象基础以及接口和继承类的实现。

2. 添加一个ConcreteCommand.js文件，作为继承ICommand接口的所有具体实现类：

因为子菜单中的每个按钮都可作为一个具体实现类，那么我以“加粗”按钮为例，就可以得到：

 程序代码

//加粗
function onBoldCommand() {
    Interface.registerImplements(this, ICommand);
}
onBoldCommand.prototype.execute = function() {
    var editor = window.frames["HtmlEditor"];
    editor.document.execCommand("Bold", false, false);
    editor.focus();
};

其中Interface.registerImplements(this, ICommand);说明它继承于ICommand接口，而execute方法作为基于接口方法的具体实现，这里实现了文档加粗功能；

3. 现在要创建“主菜单”和“子菜单”，Menu类和MenuItem类，注意这里“子菜单”也可能是Menu类，比如“格式”主菜单下的“位置”下面还包括下级菜单“居左对齐”，“居中对齐”，“居右对齐”等等，所以作为“叶子”结点的菜单就以MenuItem类来实现：

Menu类的实现如下：

 程序代码

function Menu(text, title, href) {
    this.menuComponents = new Array();
    this.text = text;
    this.title = title;
    this.href = href;
    Interface.registerImplements(this, MenuComponent);
} 

Menu.prototype = {
    getElement : function() {
        if(this.menuComponents.length == 0)
        {
            throw new Error(this.text + "菜单下没有子菜单");
        }
        var liElement = document.createElement("li");
        liElement.className = "Menu-WithChildren";
        liElement.title = this.title;
        var anchor = document.createElement("a");
        anchor.className = "Menu-Link";
        anchor.href = this.href;
        liElement.appendChild(anchor);
        anchor.innerHTML = this.text;
        var ulElement = document.createElement("ul");
        liElement.appendChild(ulElement);
        for(var i = 0, len = this.menuComponents.length; i < len; i++)
        {
            ulElement.appendChild(this.menuComponents[i].getElement());
        }
        return liElement;
    },
    add : function(component) {
        this.menuComponents.push(component);
    },
    remove : function(component) {
        for(var i = 0, len = this.menuComponents.length; i < len; i++)
        {
            if(this.menuComponents[i] == component)
            {
                this.menuComponents.splice(i,1);
                break;
            }
        }
    },
    removeAt : function(index) {
        if(this.menuComponents.length <= index)
        {
            this.menuComponents.splice(index, 1);
        }
        else
        {
            throw new Error("索引操作数组超过上限");
        }
    }
}

Menu继承于MenuComponent接口（var MenuComponent = new Interface("MenuComponent", [["getElement"]]);），并且在上一篇组合模式讲过，它作为Composite复合元素。
MenuItem的实现如下：

 程序代码

function MenuItem(text, title, href, command) {
    this.text = text;
    this.title = title;
    this.href = href;
    this.command = command;
    Interface.registerImplements(this, MenuComponent);
} 

MenuItem.prototype = {
    getElement : function() {
        var liElement = document.createElement("li");
        liElement.className = "Menu-Leaf";
        liElement.title = this.title;
        var anchor = document.createElement("a");
        anchor.href = this.href;
        liElement.appendChild(anchor);
        anchor.innerHTML = this.text;
        var command = this.command;
        addEvent(anchor, "click", function(){
            command.execute();
        });
        return liElement;
    }
}

其中参数command是作为传递进来的“命令对象”，比如前面的onBoldCommand的“加粗”命令对象，并且通过方法getElement()实现菜单按钮的点击触发达到命令对象的触发请求，而MenuItem不需要知道命令对象的具体实现；

 程序代码
addEvent(anchor, "click", function(){
    command.execute();
});

通过这句代码来添加点击事件从而执行命令对象的实现；

4. 既然有“主菜单”，“子菜单”，那么就需要有个“导航条”来“挂接”它们了，这里我添加了一个MenuBar对象，它作为一个初始化菜单显示和所有命令按钮行为实现方法的“容器”，代码如下：

 程序代码
var MenuBar = {
    list : new Array(),
    add : function(component) {
        this.list.push(component);
    },
    show : function(container) {
        var ulElement = document.createElement("ul");
        ulElement.className = "Menu";
        for(var i = 0, len = this.list.length; i < len; i++) {
            ulElement.appendChild(this.list[i].getElement());
        }
        document.getElementById(container).appendChild(ulElement);
    }
}

通过show方法进行初始化菜单显示和所有命令按钮行为的实现方法；

5. 现在利用命令模式来进行在线编辑器的实现，新建HTML页面，在window.onload方法中实现：

 程序代码

var file_menu = new Menu("文件", "文件", "#");
file_menu.add(new MenuItem("新建", "新建", "#", new onNewCommand()));
file_menu.add(new MenuItem("导出", "导出", "#", new onExportCommand()));
file_menu.add(new MenuItem("退出", "退出", "#", new onExitCommand()));
var edit_menu = new Menu("编辑", "编辑", "#");
edit_menu.add(new MenuItem("剪切", "剪切", "#", new onCutCommand()));
edit_menu.add(new MenuItem("复制", "复制", "#", new onCopyCommand()));
edit_menu.add(new MenuItem("粘贴", "粘贴", "#", new onPasteCommand()));
edit_menu.add(new MenuItem("删除", "删除", "#", new onDeleteCommand())); 

var format_menu = new Menu("格式", "格式", "#");
format_menu.add(new MenuItem("字体", "字体", "#", new onFontFaceCommand()));
format_menu.add(new MenuItem("字号", "字号", "#", new onFontSizeCommand()));
format_menu.add(new MenuItem("加粗", "加粗", "#", new onBoldCommand()));
format_menu.add(new MenuItem("斜体", "斜体", "#", new onItalicCommand()));
format_menu.add(new MenuItem("下划线", "下划线", "#", new onUnderlineCommand()));
var format_menu_1 = new Menu("位置", "位置", "#");
format_menu_1.add(new MenuItem("居左对齐", "居左对齐", "#", new onLeftCommand()));
format_menu_1.add(new MenuItem("居中对齐", "居中对齐", "#", new onCenterCommand()));
format_menu_1.add(new MenuItem("居右对齐", "居右对齐", "#", new onRightCommand()));
format_menu_1.add(new MenuItem("减少缩进", "减少缩进", "#", new onOutdentCommand()));
format_menu_1.add(new MenuItem("增加缩进", "增加缩进", "#", new onIndentCommand()));
format_menu.add(format_menu_1);
var format_menu_2 = new Menu("编号", "编号", "#");
format_menu_2.add(new MenuItem("数字编号", "数字编号", "#", new onOrderedCommand()));
format_menu_2.add(new MenuItem("项目编号", "项目编号", "#", new onUnorderedCommand()));
format_menu.add(format_menu_2);
var format_menu_3 = new Menu("字体颜色", "字体颜色", "#");
format_menu_3.add(new MenuItem("前景颜色", "前景颜色", "#", new onForeColorCommand()));
format_menu_3.add(new MenuItem("背景颜色", "背景颜色", "#", new onBackColorCommand()));
format_menu.add(format_menu_3); 

var insert_menu = new Menu("插入", "插入", "#");
insert_menu.add(new MenuItem("插入链接", "插入链接", "#", new onLinkCommand()));
insert_menu.add(new MenuItem("插入图片", "插入图片", "#", new onImageCommand())); 

var opr_menu = new Menu("操作", "操作", "#");
opr_menu.add(new MenuItem("撤销", "撤销", "#", new onUndoCommand()));
opr_menu.add(new MenuItem("重做", "重做", "#", new onRedoCommand()));
opr_menu.add(new MenuItem("切换HTML", "切换HTML", "#", new onToHtmlCommand())); 

var custom_menu = new Menu("自定义格式", "自定义格式", "#");
custom_menu.add(new MenuItem("格式1", "加粗＋斜体＋下划线", "#", new onMacro1Command(new onBoldCommand(), new onItalicCommand(), new onUnderlineCommand()))); 

var help_menu = new Menu("帮助", "帮助", "#");
help_menu.add(new MenuItem("关于作者", "关于作者", "#", new onAuthorCommand())); 

MenuBar.add(file_menu);
MenuBar.add(edit_menu);
MenuBar.add(format_menu);
MenuBar.add(insert_menu);
MenuBar.add(opr_menu);
MenuBar.add(custom_menu); 
MenuBar.add(help_menu); 

MenuBar.show("main_container");

各个命令对象作为命令参数传递给对应的子菜单项对象中，其中我们发现有个onMacro1Command的命令对象，它里面包含一系列的其他单命令对象，这个菜单按钮属于“自定义格式”。顾名思义，这里执行一个新的命令，它包括一连串的单命令，“加粗＋斜体＋下划线”，onMacro1Command类实现如下：

 程序代码
function onMacro1Command() {
    this.commands = new Array();
    for(var i = 0, len = arguments.length; i < len; i++)
    {
        this.commands.push(arguments[i]);
    }
    Interface.registerImplements(this, ICommand);
}
onMacro1Command.prototype.execute = function() {
    for(var i = 0, len = this.commands.length; i < len; i++)
    {
        this.commands[i].execute();
    }
};

这里通过一个commands数组存储这一系列的命令对象，当onMacro1Command对象执行execute方法时，就一次性地执行数组中的所有命令对象；

6. 还有其他一些JS函数介绍下：

 程序代码

function addEvent(target, event_type, handler) {
    if (target.addEventListener) 
        target.addEventListener(event_type, handler, false);
    else if (target.attachEvent)
        target.attachEvent("on" + event_type, handler);
    else
        target["on" + event_type] = handler;
}
//弹出DIV层
function showDiver(str, width, height) {
    var iWidth = width;
    var iHeight = height;
    document.getElementById("diver").style.width = iWidth + "px";
    document.getElementById("diver").style.height = iHeight + "px";
    document.getElementById("diver").style.left = (document.body.clientWidth - iWidth)/2 + "px";
    document.getElementById("diver").style.top = (document.body.clientHeight - iHeight)/2 + "px";
    document.getElementById("diver").style.display = "inline";
    document.getElementById("divMore").innerHTML = str;
}
//关闭DIV层
function closeDiver() {
    document.getElementById("diver").style.display = "none";
    document.getElementById("divMore").innerHTML = "";
}

其中addEvent方法为了兼容各个浏览器的绑定事件的实现。

7. 至于ConcreteCommand各种命令类的实现，请下载源代码自己查看研究吧，这里不进行讲述了。

附：源代码下载

总结

该篇文章用Javascript设计命令模式的思路，实现一个简单的在线编辑器。

本篇到此为止，谢谢大家阅读

参考文献：《Head First Design Pattern》

《Professional Javascript Design Patterns》

javascript的设计模式之五[组合模式(Composite)]

hi_94this@163.com(亮亮) — Mon,01 Jun 2009 20:57:42 +0800

概述

它又是部分－整体的模式，元素有两种形式，一种是简单元素，一种是复杂元素，其中复杂元素是简单元素的组成，所以客户程序要操作复杂元素时，有时候它并不想了解内部包括哪些简单元素，但是又想能够保持简单元素的简易操作性，于是，就有了组合模式，它可以抽象成一个树状结构，其中简单元素为叶子结点，而复杂元素为非叶子结点。

定义

组合模式允许你将对象组合成树形结构以表示“整体/部分”的层次结构。组合能让客户以一致的方式处理个别对象以及对象组合。

类图

实例分析

这里我给出一个利用组合模式设计的菜单导航：

先看下效果图：

现在开始分析通过组合模式如何实现它：

1. 引用InterfaceAndClass.js文件，作为接口的构造和类的继承，这个不多说了，详细请看前面的文章；

2. 添加MenuComponent.js文件，作为Component接口或者抽象类，这里我用了接口的形式：

 程序代码
var MenuComponent = new Interface("MenuComponent", [["getValue"]]);

3. 添加MenuItem.js文件，作为Leaf简单元素，这里指菜单的叶子结点：

 程序代码

function MenuItem(text, title, href) {
    this.text = text;
    this.title = title;
    this.href = href;
    Interface.registerImplements(this, MenuComponent);
}

MenuItem.prototype = {
    getValue : function() {
        //
    }
}

其中text为菜单上显示的文本，title为提示文本符，href为链接导向；并且让它继承MenuComponent接口；

4. 添加Menu.js文件，作为Composite复合元素，它是由一系列的Leaf简单元素组成的：

 程序代码

function Menu(text, title, href) {
    this.menuComponents = new Array();
    this.text = text;
    this.title = title;
    this.href = href;
    Interface.registerImplements(this, MenuComponent);
}

Menu.prototype = {
    getValue : function() {
        //
    },
    add : function(component) {
        this.menuComponents.push(component);
    },
    remove : function(component) {
        for(var i = 0, len = this.menuComponents.length; i < len; i++)
        {
            if(this.menuComponents[i] == component)
            {
                this.menuComponents.splice(i,1);
                break;
            }
        }
    },
    removeAt : function(index) {
        if(this.menuComponents.length <= index)
        {
            this.menuComponents.splice(index, 1);
        }
        else
        {
            throw new Error("索引操作数组超过上限");
        }
    }
}

它继承MenuAComponent接口，因此它和MenuItem使用同一个接口，这样可以统一简单元素和复杂元素的方法调用，add方法用来添加component类，这里的component可以是Menu，也可以是MenuItem；remove方法用来删除指定的component 类；removeAt方法用过索引删除相应的component类；getValue方法取得菜单数据；

让我们先从实例上得到一个树状图：

从图上可以看出，实际上菜单1，菜单2-1，菜单2-2-1，菜单2-2-2，菜单2-3，菜单3-1，菜单4都是属于Leaf，即MenuItem类；

菜单2，菜单2-2，菜单3都属于Composite，即Menu类；

这样Menu类的GetValue方法可以通过遍历它的子结点数组，得到所有子结点菜单数据；

 程序代码

for(var i = 0, len = this.menuComponents.length; i < len; i++)
{
    str += this.menuComponents[i].getValue();
}

其中this.menuComponents[i].getValue()可以是Menu类的getValue方法，也可以是MenuItem类的getValue方法；

这样就可以完成了所有结点的遍历。

然后给出MenuItem.js和Menu.js的完整代码如下：
MenuItem.js

程序代码

Menu.js

程序代码

function Menu(text, title, href) {
    this.menuComponents = new Array();
    this.text = text;
    this.title = title;
    this.href = href;
    Interface.registerImplements(this, MenuComponent);
}

Menu.prototype = {
    getValue : function() {
        if(this.menuComponents.length == 0)
        {
            throw new Error(this.text + "菜单下没有子菜单");
        }
        var str = "

";
str += "

";
        return str;
    },
    add : function(component) {
        this.menuComponents.push(component);
    },
    remove : function(component) {
        for(var i = 0, len = this.menuComponents.length; i < len; i++)
        {
            if(this.menuComponents[i] == component)
            {
                this.menuComponents.splice(i,1);
                break;
            }
        }
    },
    removeAt : function(index) {
        if(this.menuComponents.length <= index)
        {
            this.menuComponents.splice(index, 1);
        }
        else
        {
            throw new Error("索引操作数组超过上限");
        }
    }
}

5. 接着添加一个Menu操作类MenuOpr：

 程序代码

var MenuOpr = {
    list : new Array(),
    add : function(component) {
        this.list.push(component);
    },
    print : function(container) {
        var str = "";
        for(var i = 0, len = this.list.length; i < len; i++) {
            str += this.list[i].getValue();
        }
        document.getElementById(container).innerHTML = str + "";
    }
}

6. 最后利用组合模式编写调用代码：

 程序代码

var menu1 = new MenuItem("菜单1","菜单1","#");

var menu2 = new Menu("菜单2","菜单2","#");
var menu2_1 = new MenuItem("菜单2-1", "菜单2-1", "#");
var menu2_2 = new Menu("菜单2-2", "菜单2-2", "#");
var menu2_2_1 = new MenuItem("菜单2-2-1", "菜单2-2-1", "#");
var menu2_2_2 = new MenuItem("菜单2-2-2", "菜单2-2-2", "#");
var menu2_3 = new MenuItem("菜单2-3","菜单2-3","#");
menu2.add(menu2_1);
menu2.add(menu2_2);
menu2_2.add(menu2_2_1);
menu2_2.add(menu2_2_2);
menu2.add(menu2_3);

var menu3 = new Menu("菜单3","菜单3","#");
var menu3_1 = new MenuItem("菜单3-1","菜单3-1","#");
menu3.add(menu3_1);

var menu4 = new MenuItem("菜单4","菜单4","#");

MenuOpr.add(menu1);
MenuOpr.add(menu2);
MenuOpr.add(menu3);
MenuOpr.add(menu4);

MenuOpr.print("main_container");

main_container为一个div层的id，这里代码就不多说了，一看就看得懂的。

当然实现这个菜单还是有不少方法的，而我这肯定不是最优的，这里我只是提供一个利用组合模式的思路而已；

如果按照常规，你可以把MenuItem都整合到Menu上，即MenuItem都改为Menu，这样的代码，你是不是更喜欢点呢？

这个就留给大家自己研究吧！

最后，说下由于文中实例的菜单样式采用li:hover的方式来弹出下级菜单，由于这个方式对于IE7以下版本是无效的，所以这里引用了cssfriendly开源项目中的两个JS文件，MenuAdapter.js和AdapterUtils.js，所以把它们放进项目中引用进来，这样该菜单就兼容了IE7以下版本的浏览器。

附：源代码下载

总结

该篇文章用Javascript设计组合模式的思路，实现一个菜单实例。

本篇到此为止，谢谢大家阅读！

参考文献：《Head First Design Pattern》

javascript的设计模式之四[装饰者模式(Decorator) ]

hi_94this@163.com(亮亮) — Tue,26 May 2009 23:22:29 +0800

概述

在软件开发中，经常因为需求变动而需要扩展功能，想到的可能是继承类的方式进行扩展（还可以是组合方式（这个别篇另谈）），但是随着功能越来越多，子类也会越来越多，这样很不利用维护；而且需求的变动还导致部分功能也许不再需要，所以能够按需求来动态地扩展所需要的功能，是很好的解决方式；这样，装饰者模式应油而生，它动态地解决了功能扩展的问题

这里借用《Head First Design Pattern》归纳的五点：

    * 装饰者和被装饰者对象有相同的超类型
    * 你可以用一个或是多个装饰者包装一个对象
    * 既然装饰者和被装饰对象有相同的超类型，所以在任何需要原始对象（被包装）的场合，可以用装饰过的对象代替它
    * 装饰者可以在所委托被装饰者的行为之前与/或之后，加上自己的行为，以达到特定的目的
    * 对象可以在任何时候被装饰，所以可以在运行是动态地、不限量地用你喜欢的装饰者来装饰对象

定义

[b]装饰者模式是动态地将责任附加到对象上。若要扩展功能，装饰者提供了比继承更有弹性的替代方案。

类图

原理分析

现在结合Javascript，开始介绍Javascript装饰者模式，这里我举个多功能复印机的例子来说明：

1. 首先最开始我定义一个复印机接口，它会什么呢？它有说明书，要插电，可查看时间，可修理，可进行复印，有价格

那就可以这样子得到：

 程序代码
var IManifdder = new Interface("IManifdder", [["getDescription"],["electrify"],["watch"],["repair"],["duplicate"],["getPrice"]]);

2. 然后定义一个继承于该复印机接口的类Manifdder：

 程序代码

function Manifdder() {
    Interface.registerImplements(this, IManifdder);
}
Manifdder.prototype = {
    getDescription : function() {
        //
    },
    electrify : function() {
        //
    },
    watch : function() {
        //
    },
    repair : function() {
        //
    },
    duplicate : function() {
        //打印操作
    },
    getPrice : function() {
        return 500.0;
    }
};

3. 接着定义一个继承复印机接口的装饰者抽象类：

 程序代码

function ManifdderDecorator(manifdder) {
    this.manifdder = manifdder;
    Interface.registerImplements(this, IManifdder);
}
ManifdderDecorator.prototype = {
    getDescription : function() {
        return this.manifdder.getDescription();
    },
    electrify : function() {
        return this.manifdder.electrify();
    },
    watch : function() {
        return this.manifdder.watch();
    },
    repair : function() {
        return this.manifdder.repair();
    },
    duplicate : function() {
        return this.manifdder.duplicate();
    },
    getPrice : function() {
        return this.manifdder.getPrice();
    }
};

每个装饰者都有一个变量来保存IManifdder的引用，现在来实现它的具体类：

 程序代码

//中国制造
function MakeInChinaDecorator(manifdder) { 
    ManifdderDecorator.call(this,manifdder);
}
inheritClass(MakeInChinaDecorator, ManifdderDecorator);
MakeInChinaDecorator.prototype.electrify = function() {
    return this.manifdder.electrify() + ". 中国标准电压为220V.";
};
MakeInChinaDecorator.prototype.getPrice = function() {
    return this.manifdder.getPrice() + 100.0;
};

//日本制造
function MakeInJapanDecorator(manifdder) { 
    ManifdderDecorator.call(this,manifdder);
}
inheritClass(MakeInJapanDecorator);
MakeInJapanDecorator.prototype.electrify = function() {
    return this.manifdder.electrify() + ".日本标准电压为110V.";
};
MakeInJapanDecorator.prototype.getPrice = function() {
    return this.manifdder.getPrice() + 200.0;
};

其中它覆盖了抽象类中的electrify和getPrice方法；

现在执行它们：

 程序代码

var manifdder = new Manifdder();
alert(manifdder.getPrice());  // 得到500.0
manifdder = new MakeInChinaManifdder(manifdder);
alert(manifdder.getPrice()); // 得到600.0

如果再需要添加一个具体装饰类MakeInAmericaDecorator，只要再定义一个继承抽象类的子类即可；

3. 什么叫做被装饰者方法之前或者之后，添加行为呢？接着看下下面的例子：

在方法之后添加行为：

 程序代码

function MakeInChinaDecorator(manifdder) {
    //
}
inheritClass(MakeInChinaDecorator, ManifdderDecorator);
//
MakeInChinaDecorator.prototype.getPrice = function() {
    return this.manifdder.getPrice() + 100.0;
};

实际上刚才上面的那个例子，就是方法之后添加行为的方式，当实例化MakeInChinaDecorator对象的时候，它的装饰目的是为了价格上的差异,当调用getPrice（方法之后）的时候，价格上才得以体现出来，在原来价格的基础上加上100.0。

而在方法之前添加行为，我这里在增加一个复印机的颜色装饰类：

 程序代码

function ColorDecorator(manifdder, color) {
    ManifdderDecorator.call(this,manifdder);
    this.color = color;
}
inheritClass(ColorDecorator, ManifdderDecorator);
ColorDecorator.prototype.getDescription = function() {
    return this.manifdder.getDescription() + ": " + "它的颜色是" + this.color;
};

当实例化ColorDecorator对象的时候，它的装饰目的已经在构造函数中得到颜色上的体现，因此它是在getDescription()方法调用之前就得到体现了。

现在执行它：

 程序代码

manifdder = new ColorDecorator(manifdder, "白色");
alert(manifdder.getDescription()); //得到“它的颜色是白色”

4. 现在我要实现多功能复印机，还具有打印，扫描，传真功能，那么开始添加它们的装饰类：

 程序代码

function PrintDecorator(manifdder) {
    ManifdderDecorator.call(this,manifdder);
}
inheritClass(PrintDecorator, ManifdderDecorator);
PrintDecorator.prototype.getDescription = function() {
    return this.manifdder.getDescription() + ": " + "它具有打印功能. ";
};
PrintDecorator.prototype.getPrice = function() {
    return this.manifdder.getPrice() + 220.0;
};
PrintDecorator.prototype.print = function() {
    return "Print!";
};

现在执行它：

 程序代码

var manifdder = new Manifdder();
manifdder = new PrintDecorator(manifdder);
alert(manifdder.print()); //得到“Print!”

从结果可以看出，manifdder引用的对象具有方法print；

如果我继续装饰一个MakeInChina：

 程序代码

var manifdder = new Manifdder();
manifdder = new PrintDecorator(manifdder);
manifdder = new MakeInChinaDecorator(manifdder);
alert(manifdder.print()); //得到“manifdder.print is not a function”

从结果可以看出，print已经找不到了。

这说明MakeInChinaDecorator装饰manifdder的时候，它的父类ManifdderDecorator不包含print方法，所以自然就调用不到；

这个问题要如何解决呢？我们看到ManifdderDecorator的构造函数传进来一个manifdder 的引用，通过它的引用我们可以得到它可能含有的新方法，比如print，通过和接口方法的比较，将新进的方法，动态添加进 ManifdderDecorator中，于是我们修改ManifdderDecorator抽象类，如下所示：

 程序代码
function ManifdderDecorator(manifdder) {
    this.manifdder = manifdder;

    this.interface = IManifdder;
    for(var key in this.manifdder) 
    {
        if(typeof this.manifdder[key] !== "function")  //判断是否为方法类
            continue;
        var i;
        for(i = 0, len = this.interface.methods.length; i < len; i++) {
            if(key == this.interface.methods[i][0]) { //通过遍历比较在接口类中是否包含此方法，如果包含返回下一个
                break;
            }
        }
        if(i < this.interface.methods.length)
            continue;
        var decorator = this;
        //采用匿名函数调用方式来定义新方法
        (function(methodName) {
            decorator[methodName] = function() {
                return decorator.manifdder[methodName]();
            };
        })(key);
    }

    Interface.registerImplements(this, IManifdder);
};
ManifdderDecorator.prototype = {
    //
};

这样，如果在装饰类中定义了新方法，它的抽象类就会把该新方法动态定义出来，这样保证方法调用上的正确；

然后再执行刚才的代码：

 程序代码

var manifdder = new Manifdder();
manifdder = new PrintDecorator(manifdder);
manifdder = new MakeInChinaDecorator(manifdder);
alert(manifdder.print()); //得到“Print!”

成功调用了！

其他扫描，传真功能，和打印功能类似，创建ScanDecorator和FaxDecorator，这里不在多说了。

实例分析

今天要介绍的场景是个个人服装秀（类似于QQ秀）的网页范例，可以更换头像，上衣，腰裤，背景等。

效果图先让大家瞧瞧：

这里介绍几个核心代码：

1. 添加IPerson.js的IPerson接口类：

 程序代码
var IPerson = new Interface("IPerson", [["getData"]]);

2. 添加PersonDecorator.js的装饰者抽象类：
PersonDecorator.js

 程序代码

function PersonDecorator(person) {
    this.person = person;
    this.interface = IPerson;
    for(var key in this.person) 
    {
        if(typeof this.person[key] !== "function") //判断是否为方法类
            continue;
        var i;
        for(i = 0, len = this.interface.methods.length; i < len; i++) {
            if(key == this.interface.methods[i][0]) { //通过遍历比较在接口类中是否包含此方法，如果包含返回下一个
                break;
            }
        }
        if(i < this.interface.methods.length)
            continue;
        var decorator = this;
        //采用匿名函数调用方式来定义新方法
        (function(methodName) {
            decorator[methodName] = function() {
                return decorator.person[methodName]();
            };
        })(key);
    }
    Interface.registerImplements(this, IPerson);
}
PersonDecorator.prototype = {
    getData : function() {
        throw new Error("抽象方法，不能调用!");
    }
}

3. 添加ConcreteDecorator.js的具体装饰者：
ConcreteDecorator.js

 程序代码

// 头像装饰者
function HeadDecorator(person, model) {
    PersonDecorator.call(this, person);
    this.model = model;
}
inheritClass(HeadDecorator, PersonDecorator);
HeadDecorator.prototype.getData = function() {
    var index = this.person.head.lastIndexOf("_");
    if(index != -1)
        this.person.head = this.person.head.slice(0, index);
    this.person.head = this.person.head + "_" + this.model;
    return this.person;
};

// 上衣装饰者
function BodyDecorator(person, model) {
    PersonDecorator.call(this, person);
    this.model = model;
}
inheritClass(BodyDecorator, PersonDecorator);
BodyDecorator.prototype.getData = function() {
    var index = this.person.body.lastIndexOf("_");
    if(index != -1)
        this.person.body = this.person.body.slice(0, index);
    this.person.body = this.person.body + "_" + this.model;
    return this.person;
};

// 腰裤装饰者
function FootDecorator(person, model) {
    PersonDecorator.call(this, person);
    this.model = model;
}
inheritClass(FootDecorator, PersonDecorator);
FootDecorator.prototype.getData = function() {
    var index = this.person.foot.lastIndexOf("_");
    if(index != -1)
        this.person.foot = this.person.foot.slice(0, index);
    this.person.foot = this.person.foot + "_" + this.model;
    return this.person;
};

// 背景装饰者
function BackgroundDecorator(person, model) {
    PersonDecorator.call(this, person);
    this.model = model;
}
inheritClass(BackgroundDecorator, PersonDecorator);
BackgroundDecorator.prototype.getData = function() {
    this.person.background = "bg" + this.model;
    return this.person;
};

4. 添加PersonOpr.js，创建操作类：

 程序代码

var PersonOpr = {
    display : function(person) { //显示个人秀照片
         $("#imgHead").attr("src","images/" + person.head + ".gif");
        $("#imgBody").attr("src","images/" + person.body + ".gif");
        $("#imgFoot").attr("src","images/" + person.foot + ".gif");
        $("#divBg").css("background-image", "url(images/" + person.background + ".gif)");
    },
    init : function() {
        //初始化皮肤列表
        //...
    }
}

至此，装饰者模式的思路已经应用在该个人服装秀中了。

总结

该篇文章用Javascript设计装饰者模式的思路，重点从原理中分析，最后实现一个类似于QQ秀的应用网站。

javascript的设计模式之三[抽象工厂以及工厂方法模式(Factory) ]

hi_94this@163.com(亮亮) — Thu,21 May 2009 22:34:56 +0800

概述

抽象工厂模式广泛应用于因为需求变动导致一些相似对象的创建工作，拿我们做项目最熟悉的多版本数据库，根据数据库的不同，有可能有 SQLServer，Access，Oracle，MySQL版本等等的数据库，这样我们就能运用工厂模式，把各个数据库中相似的功能操作封装到它们各自的对象模型中，通过工厂对象统一创建各个对象实例，是客户程序和这些具体对象实现了松耦合；而工厂方法模式主要是针对某个对象的需求变更，但是这个对象不会随着它的变动而导致它所在的业务流程中的变动，它具有高聚合的能力，因此它的外部接口是很稳定的；

定义

抽象工厂模式是每个抽象产品派生多个具体产品类，每个抽象工厂派生多个具体工厂类，每个具体工厂负责多个（一系列）具体产品的实例创建。

工厂方法模式是每个抽象产品派生多个具体产品类，每个抽象工厂类派生多个具体工厂类，每个具体工厂类负责一个具体产品的实例创建。

类图

抽象工厂模式类图

工厂方法模式类图

实例分析

在开始工厂模式之前，有必要先介绍下简单工厂的说法，为了避免在客户程序的对象出现"if...else..."代码难以扩展以及维护，这里创建一个工厂类来封装这些对象，那这个就应用了简单工厂的方式。

这个场景是这样，有个博客网站，在网站中用户分为几种类型，我这里暂且暂且分为游客，博客会员，超级管理员三种用户权限：
   游客只能进行简单的查看博客的文章，个人资料等等；
   博客会员还可以对自己的博客进行管理；
   超级管理员还可以对于博客系统后台进行管理。
在开始介绍之前，先贴出前两篇介绍的一些接口和类继承的JS文件InterfaceAndClass.js，这里主要要说的是类继承的写法：

 程序代码

function inheritClass(subClass, superClass)
{    
    var Func = function() {};
    for(p in superClass.prototype)
    {
        Func.prototype[p] = superClass.prototype[p];
    }
    subClass.prototype = new Func();
    subClass.prototype.constructor = subClass;
}

这里将父类superClass原型的所有方法赋值给新创建的函数类，之后把函数类的原型赋值于子类subClass原型中。

一、现在先对Javascript简单工厂进行介绍：

1. 添加用户类型接口IMember.js：

 程序代码
var IMember = new Interface("IMember", [["getMemberInfo"]]);

getMemberInfo做为IMember接口的接口方法。

2. 添加三个具体用户类型的类Guest.js，BlogMember.js，SuperAdmin.js，继承IMember接口：

 程序代码

//游客类
function Guest() { 
    Interface.registerImplements(this, IMember); //继承IMember接口
}
Guest.prototype = {
    getMemberInfo : function() {
        return "游客";
    },
    getData : function() {
        return "";
    }
}

//博客会员类
function BlogMember() {
    Interface.registerImplements(this, IMember);
}
BlogMember.prototype = {
    getMemberInfo : function() {
        return "博客会员";
    },
    getData : function() {
        return "";
    }
}

//超级管理员类
function SuperAdmin() {
    Interface.registerImplements(this, IMember);
}
SuperAdmin.prototype = {
    getMemberInfo : function() {
        return "超级管理员";
    }, 
    getData : function() {
        return "";
    }
}

3. 创建一个用户类型工厂类来封装这些用户类型的操作，添加MemberFactory.js：

 程序代码

var MemberFactory = {
    createMemberType : function(memberType) {
        var  _memberType;
        switch(memberType)
        {
            case "guest": _memberType = new Guest(); break;
            case "blogmember": _memberType = new BlogMember(); break;
            case "superadmin": _memberType = new SuperAdmin(); break;
            default: _memberType = new BlogMember(); break;
        }
        return _memberType;
    }
}

通过memberType的“枚举”，创建相应的用户类型类的对象；

4. 至此，通过MemberFactory.createMemberType的“静态方法”返回一个用户类型对象；

 程序代码

var member = MemberFactory.createMemberType("guest");  //guest, blogmember, superadmin
$("#result").html("您当前为：" + member.getMemberInfo());

（这里$(“…”)写法是jquery类库中的语法，详细请看官方文档http://jquery.com/）

二、接下来开始本篇的重点，Javascript工厂模式的网站应用

1. 延续上面的博客网站的场景：

   游客只能进行简单的查看博客的文章，个人资料等等；
   博客会员还可以对自己的博客进行管理；
   超级管理员还可以对于博客系统后台进行管理；

这里有这些标签Tab：首页，文章，电影，音乐，相册，关于我，文章管理，个人资料管理，系统后台管理，其中游客只能访问“首页，文章，电影，音乐，相册，关于我”，博客会员（登录后）增加访问“文章管理，个人资料管理”，超级管理员增加访问“系统后台管理”；另外博客会员和超级管理员拥有修改皮肤颜色和版块类型的功能；

最终页面显示如下所示：

从图上可以看出，博客会员以上的用户类型可以显示“文章管理，个人资料管理”标签，超级管理员可以显示“系统后台管理”；而布局选择包括“左，中，右结构”，“左，右上，右下结构”，“左上，左下，右结构”，颜色包括“蓝”，“红”，“绿”，“紫”，这里只能博客会员和超级管理员才可以显示；
（这里我使用了网上提供的jquery.tab.js插件对标签进行实现，详细请看http://stilbuero.de/jquery/tabs_3/）

好了，现在开始介绍这个实例通过Javascript工厂模式是如何实现的。

2.  IMember.js不变，从简单工厂中直接复制。

3. IMember的具体实现类Guest，BlogMember，SuperAdmin从简单工厂中复制，这里分别添加个原型方法isSetColorBlock，判断该用户类型是否可设置颜色和布局，如下所示：

 程序代码

Guest.prototype = {
    //…
    isSetColorBlock : function() {
        return false;
    }
}

BlogMember.prototype = {
    //…
    isSetColorBlock : function() {
        return true;
    }
}

SuperAdmin.prototype = {
    //…
    isSetColorBlock : function() {
        return true;
    }
}

可以看到游客不能进行设置，而博客会员和超级管理能进行设置；

4. MemberFactory.js不变，从简单工厂直接复制。

5. 添加IBlock.js，创建布局接口：

 程序代码
var IBlock = new Interface("IBlock", [["getData"]]);

6. 实现它的具体类，这里添加LMRBlock.js（左中右布局），LRMBlock.js（左上左下右布局），MLRBlock.js（左右上右下布局），这里以LMRBlock.js为例：

 程序代码

// 左、中、右结构样式版块
function LMRBlock()
{
    this.color = "blue";
    Interface.registerImplements(this, IBlock); //继承布局IBlock接口
}
LMRBlock.prototype = {
    displayBlock : function() {
        this.getData();
        // 具体布局实现
    },
    getData : function() {
        return new Error("抽象方法，不能调用");
    }
}

这里首先创建的是类似于一个抽象类，该类首先继承于布局接口，从代码中可以看出getData方法的实现返回错误异常，实际上它作为一个抽象方法，不需要实现任何东西；这里displayBlock方法中调用它的抽象方法，这里就是典型的抽象方法模式，以备于它的子类继承实现它的抽象方法；

现在看看它的子类有哪些：

 程序代码

function BlueLMRBlock(){
}
inheritClass(BlueLMRBlock, LMRBlock); //继承LMRBlock抽象类
BlueLMRBlock.prototype.getData = function() { //父类抽象方法的具体实现
    $(".tabs-nav a, .tabs-nav a span").css({"background-image":"url(script/tab/tab_blue.png)"});
    this.color = "blue";
}

function GreenLMRBlock(){
}
inheritClass(GreenLMRBlock, LMRBlock);
GreenLMRBlock.prototype.getData = function() {
    $(".tabs-nav a, .tabs-nav a span").css({"background-image":"url(script/tab/tab_green.png)"});
    this.color = "green";
}

function RedLMRBlock(){
}
inheritClass(RedLMRBlock, LMRBlock);
RedLMRBlock.prototype.getData = function() {
    $(".tabs-nav a, .tabs-nav a span").css({"background-image":"url(script/tab/tab_red.png)"});
    this.color = "red";
}

function VioletLMRBlock(){
}
inheritClass(VioletLMRBlock, LMRBlock);
VioletLMRBlock.prototype.getData = function() {
    $(".tabs-nav a, .tabs-nav a span").css({"background-image":"url(script/tab/tab_violet.png)"});
    this.color = "violet";
}

这里包括4种颜色的子类，全部都继承于抽象类LMRBlock，子类中getData的方法做为抽象方法的具体实现；

7. 现在该创建个工厂来实现它们了，添加BlockFactory.js文件，首先创建布局抽象工厂类：

 程序代码

function BlockFactory(){
}
BlockFactory.prototype = {
    getBlock : function(block) {
        var _block;
        _block = this.createBlock(block);
        
        // 添加其他逻辑
        // 
        
        return _block;
    },
    createBlock : function(block) {
        return new Error("抽象方法，不能调用");
    },
    getBlockText : function() {
        return new Error("抽象方法，不能调用");
    }
};

这里createBlock和getBlockText同样是做为抽象方法；
现在要创建三个继承于这个布局抽象工厂类，LMRBlockFactory，LRMBlockFactory，MLRBlockFactory，这里同样以LMRBlockFactory为例：

 程序代码

function LMRBlockFactory(){ 
}
inheritClass(LMRBlockFactory,BlockFactory);
LMRBlockFactory.prototype.createBlock = function(block) {
    var _block;
    switch(block)
    {
        case "blue": _block = new BlueLMRBlock(); break;
        case "red": _block = new RedLMRBlock(); break;
        case "green": _block = new GreenLMRBlock(); break;
        case "violet": _block = new VioletLMRBlock(); break;
        default: _block = new BlueLMRBlock(); break;
    }
    return _block;
};
LMRBlockFactory.prototype.getBlockText = function() {
    return "LMR";
};

LMRBlockFactory继承于布局抽象工厂类，实现它的抽象方法createBlock和getBlockText，其中creatBlock通过参数值，创建对应的布局实现类，这里用到了典型的抽象工厂模式；

8. 好了，一切都具备好了，现在开始讨论我们的前台使用了，添加factory.html，引用该引用的JS文件，这里列出一些核心代码：

1) 添加初始化数据

 程序代码

var membertype = "superadmin"; //从用户类型得到值，这里是个假设，包含三个类型用户：guest,blogmember,superadmin
var color = "blue"; //这里是初始化颜色，包括四种颜色：blue,green,red,violet
var blockfactory; //布局工厂类的全局变量声明

（你可以通过用户登录将登录信息存入cookies中，从cookies获取用户类型和用户选择色调）

2) 初始化用户类型

 程序代码

// 初始化用户类型
var member = MemberFactory.createMemberType(membertype);
$("#spanMemberType").html(member.getMemberInfo());
$("#container-1 li[id^='li']").css("display","block");
$("#container-1 li[id^='li']").each(function(index){
    var arr = $(this).attr("power").split('|'); //取得对应标签的权限数组
    if(arr.indexOf(membertype) == -1) //权限比较
    {
        $(this).css("display","none");
        $("#fragment-" + (index+1)).css("display","none");
    }
 });
if(member.isSetColorBlock()) //是否可设置布局和颜色
    $("#Set").css("display","block");
else
    $("#Set").css("display","none");
$("#selMemberType").val(membertype);

通过var member = MemberFactory.createMemberType(membertype);获取用户对象，通过用户对象判断是否可设置布局和颜色；

3) 初始化版块类型和颜色类型

 程序代码

// 初始化版块类型和颜色类型
blockfactory = new LMRBlockFactory();
var block = blockfactory.getBlock(color);
block.displayBlock();
$("img[id^='imgcolor_']").removeClass().addClass("color-unselected");
$("#imgcolor_" + color).removeClass().addClass("color-selected");

通过创建工厂对象，从颜色中获取布局实现类的对象，然后通过调用displayBlock方法的实现初始化界面的布局；

前台JS代码完整实现如下：

 程序代码

var membertype = "superadmin"; //从用户类型得到值，这里是个假设，包含三个类型用户：guest,blogmember,superadmin
    var color = "blue"; //这里是初始化颜色，包括四种颜色：blue,green,red,violet
    var blockfactory; //布局工厂类的全局变量声明
    $(function() {
        $("#container-1").tabs();
        
        // 初始化用户类型
        var member = MemberFactory.createMemberType(membertype);
        $("#spanMemberType").html(member.getMemberInfo());
        $("#container-1 li[id^='li']").css("display","block");
        $("#container-1 li[id^='li']").each(function(index){
            var arr = $(this).attr("power").split('|'); //取得对应标签的权限数组
            if(arr.indexOf(membertype) == -1) //权限比较
            {
                $(this).css("display","none");
                $("#fragment-" + (index+1)).css("display","none");
            }
        });
        if(member.isSetColorBlock()) //是否可设置布局和颜色
            $("#Set").css("display","block");
        else
            $("#Set").css("display","none");
        $("#selMemberType").val(membertype);
        // 初始化版块类型和颜色类型
        blockfactory = new LMRBlockFactory();
        var block = blockfactory.getBlock(color);
        block.displayBlock();
        $("img[id^='imgcolor_']").removeClass().addClass("color-unselected");
        $("#imgcolor_" + color).removeClass().addClass("color-selected");

        // 用户类型下拉框绑定
        $("#selMemberType").bind("change", function() {
            $('#container-1').triggerTab(1);
            var mt = $(this).val();
            membertype = MemberFactory.createMemberType(mt);
            $("#spanMemberType").html(membertype.getMemberInfo());
            $("#container-1 li[id^='li']").css("display","block");
            $("#container-1 li[id^='li']").each(function(index){
                var arr = $(this).attr("power").split('|');
                if(arr.indexOf(mt) == -1)
                {
                    $(this).css("display","none");
                    $("#fragment-" + (index+1)).css("display","none");
                }
            });
            if(membertype.isSetColorBlock())
                $("#Set").css("display","block");
            else
                $("#Set").css("display","none");
        });
        // 版块类型选择
        $("img[id^='imgblock_']").bind("click", function() {
            if($(this).className != "block-selected")
            {
                $("img[id^='imgblock_']").removeClass().addClass("block-unselected");
                $(this).removeClass().addClass("block-selected");
            }
            var blocktext = $(this).attr("id").substring(9);
            switch(blocktext)
            {
                case "LMR": blockfactory = new LMRBlockFactory(); break;
                case "LRM": blockfactory = new LRMBlockFactory(); break;
                case "MLR": blockfactory = new MLRBlockFactory(); break;
                default: blockfactory = new LMRBlockFactory(); break;
            }
            var block = blockfactory.getBlock(color);
            block.displayBlock();
        });
        // 颜色选择
        $("img[id^='imgcolor_']").bind("click", function() {
            color = $(this).attr("id").substring(9);
            var block = blockfactory.getBlock(color);
            block.displayBlock();
            $("img[id^='imgcolor_']").removeClass().addClass("color-unselected");
            $("#imgcolor_" + color).removeClass().addClass("color-selected");
        });
    });

至此，抽象工厂和工厂方法模式的一些思路已经应用在该博客系统中。

总结

该篇文章用Javascript设计抽象工厂和工厂方法模式的思路，实现一个博客系统的构想。

javascript的设计模式之二[观察者模式]

hi_94this@163.com(亮亮) — Tue,19 May 2009 22:15:16 +0800

概述

在现实生活中，存在着“通知依赖关系”，如在报纸订阅的服务，只要读者（订阅者）订购了《程序员》的期刊杂志，那么他就订阅了这个服务，他时刻“监听”着邮递员（出版者）来投递报纸给他们，而邮递员（出版者）只要报社有新刊杂志传达给他（就是状态发生了变化），邮递员（出版者）就随时投递（通知）订阅了服务的读者；另一方面，如果读者不想在继续订购（取消通知）《程序员》的杂志了，那么邮递员就不在投递（通知）这些读者了。－－－这就是典型的出版者和订阅者的关系，而这个关系用一个公式来概括：

出版者 + 订阅者 = 观察者模式

定义

观察者模式定义了对象之间的一对多依赖，这样一来，当一个对象改变状态时，他的所有依赖者都会收到通知并自动更新。

类图

示例分析

现在开始利用观察者模式来应用到项目的一个场景中去，并且层层剖析一下。

有这样一个场景，一个购书网站，用户提交上去一个订单，网站系统只要有订单上来，会采取如下操作：（为了简化，我这里其实只是简单的提交）

一、产生一条通知用户“已购买”记录的短信息（该短信箱还会有其他记录，如交友等等）；

二、在浏览器上显示你的订单名片；

三、该条订单提交上服务器，保存到数据库或者其它任何存储介质中去，最后显示你的购书记录；

那么开始我的设计：

1. 网站上添加IPublisher.js，它作为系统的出版者“接口”，利用第0篇文章面向对象基础以及接口和继承类的实现中的Interface.js类（另外，谢谢winter-cn园友提出了些宝贵的建议，目前Interface类还在改善中，这里暂且先用原来的Interface类：

这里是改进的程序示范，包括重载函数的构造，这里也暂时贴出来下：

 程序代码

改进的代码
// Interface.js
function Interface(name, methods) 
{
    if(arguments.length != 2) {
        throw new Error("接口构造函数含" + arguments.length + "个参数, 但需要2个参数.");
    }
    
    this.name = name;
    this.methods = [];
    
    if(methods.length < 1) {
        throw new Error("第二个参数为空数组.");
    }
    
    for(var i = 0, len = methods.length; i < len; i++) {
        
        if(typeof methods[i][0] !== 'string') {
            throw new Error("接口构造函数第一个参数必须为字符串类型.");
        }
        for(var j = 1; j < methods[i].length; j++) {
            if(methods[i][j] && typeof methods[i][j] !== 'number') {
                throw new Error("接口构造函数第二个参数以上必须为整数类型.");
            }
        }        
        this.methods.push(methods[i]);
    }    
};

Interface.registerImplements = function(object) {
    
    if(arguments.length < 2) {
        throw new Error("接口的实现必须包含至少2个参数.");
    }

    for(var i = 1, len = arguments.length; i < len; i++) {
        var interface = arguments[i];
        if(interface.constructor !== Interface) {
            throw new Error("从第2个以上的参数必须为接口实例.");
        }
        
        for(var j = 0, methodsLen = interface.methods.length; j < methodsLen; j++) {
            
            var method1 = interface.methods[j][0];
            var arr1 = interface.methods[j].slice(1).sort(compareNumber);
            for(var k = 0; k < object.methodArr.length; k++) {
                var method2 = object.methodArr[k][0];
                if(method1 === method2)
                {
                    var arr2 = object.methodArr[k].slice(1).sort();
                    if(ComareArray(arr1,arr2))
                    {
                        break;
                    }
                    else
                    {
                        throw new Error("接口的实现对象不能执行" + interface.name + "的接口方法" + method1 + "，因为它找不到或者不匹配.");
                    }
                }
                
            }
        }
    }
};
function compareNumber(num1, num2) {
    var iNum1 = parseInt(num1);
    var iNum2 = parseInt(num2);
    if(iNum1 < iNum2) return -1;
    else if(iNum1 > iNum2) return 1;
    else return 0;
}
function ComareArray(arr1, arr2) {
    if(arr1.length!=arr2.length)
    {
        return false;
    }
    for(var i = 0; i < arr1.length; i++) {
        if(arr1[i]!==arr2[i])
        {
            return false;
        }
    }
    return true;
}

Function.prototype.getParameters = function() {

    var str = this.toString();
    var paramString = str.slice(str.indexOf('(') + 1, str.indexOf(')')).replace(/\s*/g,'');     //取得参数字符串
    
    try
    {
        return (paramString.length == 0 ? [] : paramString.split(','));
    }
    catch(err)
    {
        throw new Error("函数不合法!");
    }
}


// demo.js 
function Overload(method)
{
    this.methods = [];
    
    for(var i = 1; i <= arguments.length - 1; i++)
    {
        methods.push(arguments[i].length);
    }
    OverloadNumber.methodArr.push([arguments[0]].concat(methods));
    OverloadNumber.argumentArr.push(arguments);
    return function()
    {
        for(var i = 0; i < OverloadNumber.methodArr.length; i++)
        {
            if(OverloadNumber.methodArr[i][0] == method)
            {
                var index = OverloadNumber.methodArr[i].slice(1).indexOf(arguments.length);
                if(index != -1)
                {  
                    return OverloadNumber.argumentArr[i][index+1].apply(this,arguments);
                }
            }
        }
        
        throw new Error("参数不匹配!");
    }
}

var INumber = new Interface("INumber", [["Add",1,0,2,3],["Sub",1,2]]); //其中1,0,2,3之类属于重载函数参数个数，可以不按先后顺序

function OverloadNumber() {
    Interface.registerImplements(OverloadNumber, INumber);
}
OverloadNumber.methodArr = [];
OverloadNumber.argumentArr = [];
OverloadNumber.prototype = {
    
    Add : Overload(                 //算术加
            "Add",
            function(a,b) {
                return a + b;
            },
            function(a) {
                return ++a;
            },
            function(a,b,c) {
                return a+b+c;
            },
            function() {
                return -1;
            }
        ),
    Sub : Overload(                 //算术减
            "Sub",
            function(a) {
                return --a;
            },
            function(a,b) {
                return a - b;
            }
        )
}

调用如下：

 程序代码

var number = new OverloadNumber();
alert("4 - 1 = " + number.Sub(4,1));
alert("++3 = " + number.Add(3));
alert("4 + 6 = " + number.Add(4, 6));
alert("4 + 6 + 5 = " + number.Add(4, 6, 5));
alert(number.Add());
alert("3 - 1 = " + number.Sub(3,1));
alert("--10 = " + number.Sub(10));
alert(number.Add(4, 6, 5, 9)); // Error！参数不匹配

－－－－－－－－－－－－－－－－－－－－

 程序代码
var IPublisher = new Interface('IPublisher', [['registerSubscriber',1], ['removeSubscriber',1], ['notifySubscribers']]);

所有的依赖者（订阅者）将要注册于它的实现类。

2. 添加ISubscriber.js，它作为系统的订阅者“接口”：

 程序代码
var ISubscriber = new Interface('ISubscriber',[['update',4]]);

3. 现在开始实现我们的IPublisher的具体类，添加OrderData.js，它作为一个订单数据类，让其继承IPublisher的接口：

 程序代码

function orderData() {  
    this._subscribers = new Array();  //观察者列表
    this.ProductName = "";          //商品名称
    this.ProductPrice = 0.0;        //商品价格
    this.Recommend = 0;             //推荐指数
    this.productCount = 0;          //购买个数
    Interface.registerImplements(this, IPublisher);
}

orderData.prototype = {
    registerSubscriber : function(subscriber) { //注册订阅者
        this._subscribers.push(subscriber);
    },
    removeSubscriber : function(subscriber) {   //删除指定订阅者
        var i = _subscribers.indexOf(subscriber);
        if(i > 0)
            _subscribers.slice(i,1);
    },
    notifySubscribers : function() {  //通知各个订阅者
        for(var i = 0; i < this._subscribers.length; i++)
        {
            this._subscribers[i].update(this.ProductName, this.ProductPrice, this.Recommend, this.ProductCount);
        }
    },
    SubmitOrder : function(productName,productPrice,recommend,productCount) {   //提交订单
        this.ProductName = productName;
        this.ProductPrice = productPrice;
        this.Recommend = recommend;
        this.ProductCount = productCount;
        this.notifySubscribers();
    }
}

这里简单介绍下，OrderData构造函数中设置订阅者列表，以及商品属性；

Interface.registerImplements(this, IPublisher); 实际上是让OrderData继承IPublisher接口；

registerSubscriber，removeSubscriber，notifySubscribers实际上覆盖了从 IPublisher继承上来的“接口”方法，这样保存了这个类的方法调用，其中notifySubscribers为通知所有的订阅者更新信息；

4. 实现ISubscriber的具体类，添加Subscriber.js，它里面包含三个订阅者，1）MsgBox类，短信箱列表；2）ThisOrder 类，该条订单名片；3）OrderList类，我的订单列表；并且让其三都继承ISubscriber的“接口”：

 程序代码

unction MsgBox(publisher)
{
    this.Publisher= publisher;
    this.Publisher.registerSubscriber(this);
    Interface.registerImplements(this, ISubscriber);
} 
MsgBox.prototype.update = function(productName,productPrice,recommend,productCount) {
//    具体实现
} 

  
function ThisOrder(publisher)
{   
    this.Publisher = publisher;
    this.Publisher.registerPublisher(this);
    Interface.registerImplements(this, ISubscriber);
} 
ThisOrder.prototype.update = function(productName,productPrice,recommend,productCount) { 
//    具体实现
} 

  
function orderList(publisher)
{
    this.Publisher = publisher;
    this.Publisher.registerPublisher(this);
    Interface.registerImplements(this, ISubscriber);
} 
orderList.prototype.update = function(productName,productPrice,recommend,productCount) { 
//    具体实现
} 

看到Subscriber实现类们的构造函数中的内容了么？它把出版者类参数赋值于Subscriber实现类们的Publisher对象，然后在该对象上注册this订阅者自己，这样Publisher对象上就注册了Subscriber对象，并且以Array对象的方式存储起来；

5. 好了，IPublisher.js，ISubscriber.js，OrderData.js，Subscriber.js都创建好了，现在需要一个aspx界面来使用它们了：

程序代码

商品名	市场价	推荐指数	数量
你必须知道的.NET	69.8	10	1

您的短信箱

内容	发布日期

您刚提交的订单名片

您已买的商品列表

商品名	市场价	推荐指数	数量	发布日期

6. 创建一个OrderSend.js，编写相关的JS代码了，以下是核心代码：

 程序代码

$("#btnSubmit").click(function(){
    var productName = $("#productName").html();
    var productPrice = parseFloat($("#productPrice").html());
    var recommend = parseInt($("#recommend").html());
    var productCount = parseInt($("#productCount").html());


    var orderData = new orderData();            //实例化Publisher的实现类orderData
    var msgBox = new MsgBox(orderData);         //orderData作为MsgBox构造函数的参数进行传递 
    var thisOrder = new ThisOrder(orderData);   //orderData作为ThisOrder构造函数的参数进行传递 
    var orderList = new orderList(orderData);   //orderData作为OrderList构造函数的参数进行传递 
    orderData.SubmitOrder(productName,productPrice,recommend,productCount);     //提交相关商品信息
});

通过点击页面上的“提交”，将三个Subscriber实现类注册到OrderData(Publisher实现类)中去，这样只要OrderData对象提交新商品信息上去，也就是状态更新，那么三个Subscriber实现类就会被通知而更新自身相关的内容了。

页面实现效果如下:

点击“结算”按钮，如下：

这里只是简单的对于三个Subscriber进行更新，关于update方法中的实现，这里不在贴出来了，具体可以下载源代码查看看；在update方法中可以编写你想要的操作以及显示结果，如利用$.ajax进行数据操作和数据展示，这里就留着大家自己发挥吧:)

总结

该篇文章用Javascript来设计观察者模式的思路，通过触发变化通知的方式来请求状态更新，利用一个简单的购书网站来实践。

附：代码打包下载

javascript的设计模式之一[面向对象基础以及接口和继承类的实现]

hi_94this@163.com(亮亮) — Mon,18 May 2009 23:14:52 +0800

javascript方面又出新书了，关于javascript设计模式的，没钱买，所以在网上找了些这方面的文章看看，反正也不是很明白，就转过来，放在这有时间慢慢看了！！当然若你想深入了解javascript，您也不妨看看！！

理论知识

1. 首先Javascript是弱类型语言，它定义变量时不必声明类型，如var Person = new Person()，它的变量类型为“var”，现在的C# 3.0也引进了这种匿名类型的概念，弱类型的变量产生了极大的灵活性，因为Javascript会根据需要来进行类型转换。所以这也决定了它采用了晚绑定的方法，即在运行后才知道变量的类型；

2. 面向对象概念不必多说，封装，继承，多态；

3. Javascript对象的类型主要分为三种：本地对象，如String，Array，Date等；内置对象，如Global，Math等；宿主对象，是指BOM,DOM对象等等；变量范围包括传统面向对象程序设计中的作用域，如公有，保护，私有，静态等等；

主要内容

1. 现在让我们来看看Javascript怎样创建对象的：

 程序代码

function Man() {
   //  
}
Man.prototype.getNickName = function() {
    return "Leepy";
}; 

var man = new Man();
var name = man.getNickName(); 

这样就创建了最简单的类和对象，其中我们可以把function Man() {} 看作是Man类的构造函数，getNickName()看作是Man类的方法，准确说可以“当作”是Man类的公共方法；为什么要说是当作呢？那是因为其实Javascript实际上并没有一个私有共有的划分，因此开发者们自己指定了这样的规约，那么规约是什么样的呢？我这里把Man类的清单完整地列出来：

 程序代码

function Man() {
    // 私有静态属性
    var Sex = "男";
    //私有静态方法
    function checkSex() {
        return (Sex == "男");
    }
    //私有方法
    this._getSex = function() {
        //调用私有静态方法
        if(checkSex())
            return "男";
        else
            return "女";
    }
    //私有方法
    this.getFirstName = function() { 
        return "Li";
    };
    //私有方法
    this.getLastName = function() {
        return "Ping";
    };
}
//公共方法
Man.prototype.getNickName = function() {
    return "Leepy";
};
//公共方法
Man.prototype.getFullName = function() {
    return this.getFirstName() + " " + this.getLastName();
};
//公共方法
Man.prototype.getSex = function() {
    //调用私有方法
    return this._getSex();
};
//公共静态方法
Man.say = function() {
    return "Happy new year!";
}

这样的类是否看起来和传统的类很相似了呢^_^

2. 接下来这个是本篇的一个重点，就是用Javascript如何设计一个接口，然后让类继承于它。

首先，先让我们看传统的C#语言是如何设计接口的吧：

 程序代码

public interface Person
{
    string GetName();
    void SetName(string name);
}
public class Man : Person
{
    private string _name; 

    public string GetName()
    {
        return _name;
    }
    public void SetName(string name)
    {
        _name = name;
    }
} 

接口中可以声明属性、方法、事件和类型(Structure)，（但不能声明变量），但是并不能设置这些成员的具体值，也就是说，只能定义，不能给它里面定义的东西赋值，而接口作为它的继承类或者派生类的规约，继承类或者它的派生类能够共同完成接口属性、方法、事件和类型的具体实现，因为这里GetName()，SetName()，不管是方法名还是属性调用顺序上都是要保持一致的；

那么有了这样的一个基于接口的思想，我们设计Javascript的接口类的时候也需要考虑到这个规范。我先从主JS文件调用端开始说起：

 程序代码
var Person = new Interface("Person", [["getName", 0], ["setName", 1]]); 

其中Interface类是稍后要说的接口类，第一个参数"Person"是接口类的名称，第二个参数是个二维数组，"getName"是接口方法的名称，"0"是该方法所带的参数个数（因为Javascript是弱语言，所以类型是不确定的，所以只要记住参数个数就好，"0"可以省略不写），"setName"同理。这样一个接口定义好了。怎样使用它呢？

 程序代码

function Man() 
{
    this.name = "";
    Interface.registerImplements(this, Person);
}
Man.prototype.getName = function() {
    return this.name;
};
Man.prototype.setName = function(name) {
    this.name = name;
}; 

看到Man的构造函数里面包含

Interface.registerImplements(this, Person);

它是用来将实例化的this对象继承于Person接口，然后继承类对接口的方法进行实现。

代码看起来是不是很清晰和简单呢^_^，那么现在要开始介绍真正的核心代码Interface.js了：

先看Interface的构造函数部分

 程序代码

function Interface(name, methods) 
{
    if(arguments.length != 2) {
        throw new Error("接口构造函数含" + arguments.length + "个参数, 但需要2个参数.");
    }
    this.name = name;
    this.methods = [];
    if(methods.length < 1) {
        throw new Error("第二个参数为空数组.");
    }
    for(var i = 0, len = methods.length; i < len; i++) {
        if(typeof methods[i][0] !== 'string') {
            throw new Error("接口构造函数第一个参数必须为字符串类型.");
        }
        if(methods[i][1] && typeof methods[i][1] !== 'number') {
            throw new Error("接口构造函数第二个参数必须为整数类型.");
        }
        if(methods[i].length == 1) {
            methods[i][1] = 0;
        } 

        this.methods.push(methods[i]);
    }    
};

刚才看到了var Person = new Interface("Person", [["getName", 0], ["setName", 1]]);，这里将两个参数分别保存起来；

调用方法部分：

 程序代码
Interface.registerImplements = function(object) { 

    if(arguments.length < 2) {
        throw new Error("接口的实现必须包含至少2个参数.");
    } 

    for(var i = 1, len = arguments.length; i < len; i++) {
        var interface = arguments[i];
        if(interface.constructor !== Interface) {
            throw new Error("从第2个以上的参数必须为接口实例.");
        }
        for(var j = 0, methodsLen = interface.methods.length; j < methodsLen; j++) {
            var method = interface.methods[j][0];
            if(!object[method] || typeof object[method] !== 'function' || object[method].getParameters().length != interface.methods[j][1]) {
                throw new Error("接口的实现对象不能执行" + interface.name + "的接口方法" + method + "，因为它找不到或者不匹配.");
            }
        }
    }
}; 

刚才这句Interface.registerImplements(this, Person);，实际上这里是把this对象的方法名以及参数个数与刚Person保存的methods逐一进行比较，如果找不到或者不匹配，就警告错误；其中object[method].getParameters().length，调用了如下的代码：

 程序代码

Function.prototype.getParameters = function() { 

    var str = this.toString();
    var paramString = str.slice(str.indexOf('(') + 1, str.indexOf(')')).replace(/\s*/g,'');     //取得参数字符串
    try
    {
        return (paramString.length == 0 ? [] : paramString.split(','));
    }
    catch(err)
    {
        throw new Error("函数不合法!");
    }
} 

getParrameters()方法作为Function对象的一个扩展，功能是取得方法含有的参数数组；

Interface.js完整的代码如下：

 程序代码
function Interface(name, methods) 
{
    if(arguments.length != 2) {
        throw new Error("接口构造函数含" + arguments.length + "个参数, 但需要2个参数.");
    }
    this.name = name;
    this.methods = [];
    if(methods.length < 1) {
        throw new Error("第二个参数为空数组.");
    }
    for(var i = 0, len = methods.length; i < len; i++) {
        if(typeof methods[i][0] !== 'string') {
            throw new Error("接口构造函数第一个参数必须为字符串类型.");
        }
        if(methods[i][1] && typeof methods[i][1] !== 'number') {
            throw new Error("接口构造函数第二个参数必须为整数类型.");
        }
        if(methods[i].length == 1) {
            methods[i][1] = 0;
        } 

        this.methods.push(methods[i]);
    }    
}; 

Interface.registerImplements = function(object) { 

    if(arguments.length < 2) {
        throw new Error("接口的实现必须包含至少2个参数.");
    } 

    for(var i = 1, len = arguments.length; i < len; i++) {
        var interface = arguments[i];
        if(interface.constructor !== Interface) {
            throw new Error("从第2个以上的参数必须为接口实例.");
        }
        for(var j = 0, methodsLen = interface.methods.length; j < methodsLen; j++) {
            var method = interface.methods[j][0];
            if(!object[method] || typeof object[method] !== 'function' || object[method].getParameters().length != interface.methods[j][1]) {
                throw new Error("接口的实现对象不能执行" + interface.name + "的接口方法" + method + "，因为它找不到或者不匹配.");
            }
        }
    }
}; 

Function.prototype.getParameters = function() { 

    var str = this.toString();
    var paramString = str.slice(str.indexOf('(') + 1, str.indexOf(')')).replace(/\s*/g,'');     //取得参数字符串
    try
    {
        return (paramString.length == 0 ? [] : paramString.split(','));
    }
    catch(err)
    {
        throw new Error("函数不合法!");
    }
} 

好了该创建一个html页面来试试效果了：

程序代码

最终结果为："Leepy"的弹出框；

这里还有一点要强调，如果接口上的方法没有在继承类上得到完全实现，或者方法参数个数不匹配，那么就会提示错误；

3. 如果我要一个类继承于另一个类该怎么做呢，继续看例子，这里我再定义一个SchoolBoy（男学生）类：

 程序代码

function SchoolBoy(classNo, post)
{
    Man.call(this);
    this._chassNo = classNo;
    this._post = post;
}
SchoolBoy.prototype = new Man();
SchoolBoy.prototype.getName = function() {
    return "Mr " + this.name;
}
SchoolBoy.prototype.setName = function(name) {
    this.name = name + "'s";
}

其中Man.call(this);实际上是将Man中的关键字this赋值于SchoolBoy对象中去，那么SchoolBoy就拥有了Man构造函数中的name属性了；

SchoolBoy.prototype = new Man();实际上是把Man的prototype赋值给SchoolBoy.prototype，那么SchoolBoy就有了Man类中的方法；

而后面跟着的getName()，setName()，实际上是覆盖了前面继承于Man类中的方法了；

然后看看效果：

 程序代码
var schoolboy = new SchoolBoy("三年二班", "班长");
schoolboy.setName("周杰伦");
alert(schoolboy.getName());

最后结果为："Mr 周杰伦's"的弹出框；

总结

该篇文章主要讲述一些Javascript面向对象的基础以及接口和继承类的实现等等；下一篇将开始真正的Javascript设计模式征程，并且我会结合一些网站系统上的实例来讲；

用localeCompare实现中文排序

hi_94this@163.com(亮亮) — Sat,29 Nov 2008 22:10:19 +0800

大家肯定做过中文的排序了，呵呵是不是代码很多啊，看看这个例子，用localeCompare来实现中文的按拼音首字母排序很简单。

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

让input也有hover,focus

hi_94this@163.com(亮亮) — Sat,29 Nov 2008 21:55:46 +0800

在css中使用伪类能很容易实现一些效果，但ie7以下的版本，除了支持a的伪类外，其他不支持，解决办法是用onmouseover、onmouseout来实现，当然下面的解决办法也是用了onmouseover、onmouseout的道理来解决，只是使用起来更方便而已。
好了看看效果吧！

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]