javascript设计模式

面向对象编程

1.创建，使用函数

var CheckObject = {

checkName : function() {}

}

创建，使用类(原型，链式)

var CheckObject = function() {

this.checkName = fucntion(){}

}

var a = new CheckObject();

a.checkName();

var CheckObject = function(){};

CheckObject.prototype = {

checkName:function(){}

}

var a = new CheckObject();

a.checkName();

var CheckObject = function(){};

CheckObject.prototype = {

checkName:function(){

return this;

}

}

var a = new CheckObject();

a.checkName();

Function.prototype.addMethod = function(name,fn){

this[name] = fn;

}

var CheckObject = new Function();

CheckObject.addMethod('checkName',function(){});

CheckObject.checkName();

Function.prototype.addMethod = function(name,fn){

this[name] = fn;

return this;

}

var CheckObject = new Function();

CheckObject.addMethod('checkName',function(){});

CheckObject.checkName();

Function.prototype.addMethod = function(name,fn){

this[name] = fn;

return this;

}

var CheckObject = new Function();

CheckObject.addMethod('checkName',function(){

return this;

});

CheckObject.checkName();

Function.prototype.addMethod = function(name,fn){

this.ptototype[name] = fn;

return this;

}

var CheckObject = new Function();

CheckObject.addMethod('checkName',function(){

return this;

});

var a = new CheckObject();

a.checkName();

2.私有属性方法

公有属性方法(特权方法，构造器) this. 

类静态私有属性方法

类静态公有属性方法 prototype.

var Book = function(){

var name=1;//私有

this.getName = function(){};//公有，特权，构造器

}

Book.bookNum = 0;//静态私有

Book.prototype = {

isJSBook : false//静态公有

}

var Book = (function(){

var bookNum = 0; //静态私有

function _book(){

var name; //私有

this.getName = function(){}; //公有，特权，构造器

}

_book.prototype = {

isJSBook :false // 静态公有

}

return _book;

})();

继承

//类式继承

function SuperClass(){}

SuperClass.prototype.get = function(){};

function SubClass(){}

SubClass.prototype = new SuperClass();

SubClass.prototype.getSub = function(){};

var a = new SubClass();

a.get();

a.getSub();

//构造函数式继承

function SuperClass(){}

SuperClass.prototype.show(){};

function SubClass(){

SuperClass.call(this);

}

var a= new SubClass();

a.show();// 错误用法

//组合式继承

function SuperClass(){}

SuperClass.prototype,get=function(){};

function SubClass(){

SuperClass.call(this)

}

SubClass.protorype = new SuperClass();

SubClass.prototype.getSub = function(){};

var a = new SubClass();

a.get();

a.getSub();

//原型式继承

function inheritObject(o){

function F(){}

F.prototype = o;

return new F();

}

var book = {};

var newBook = inheritObject(book);

newBook.xxx;

//寄生式继承

function createBook(obj){

var o = new inheritObject(obj);

o.get = function(){};

return o;

}

var book = {};

var newBook = createBook(book);

newBook.xxx;

//寄生组合式继承

function inheritPrototype(subClass,superClass){

var p = inheritObject(superClass.prototype);

p.constructor = subClass;

subClass.prototype = p;

}

var SuperClass= {};

SuperClass.prototype.get= fucntion(){};

var SubClass(){

SuperClass.call(this);

};

inheritPrototype(SubClass,SuperClass);

SubClass.prototype.getSub = fucntion(){};

var a= new SubClass();

a.xxx;

---

创建型设计模式：处理对象创建

3.简单工厂模式

//先定义类，然后用函数返回一个类的实例对象

var PopFactory = function(name){

switch(name){

case 'alert':return newLoginAlert();

}

}

var userNameAlert=PopFactory ('alert');

//用函数返回一个对象

function createPop(type,text){

var o=new Object();

o.content = type;

o.show = function(){};

if(type === 'alert'){}

return o;

}

var userNameAlert = createPop('alert','xxx');

4.工厂方法模式

//在函数的属性里定义类，然后用函数返回一个类的实例对象

var Factory = function(type,content){

if(this instanceof Factory){

var s= new this[type](content);

return s;

}else{

return new Factory(type,content);

}

}

Factory.prototype={

Java:fucntion(){}

}

5.抽象工厂模式

//在函数的属性里定义抽象类，然后用函数返回一个抽象类的子类，然后用子类创建实例对象

var VeicleFactory = function(subType,superType){

if(typeof VehicleFactory[superType] === 'function'){

function F(){};

F.prototype = new VehicleFactory[superType]();

subType.constructor = subType;

subType.prototype = new F();

}else{

throw new Error('未创建该抽象类');

}

}

VhicleFactory.Car = function(){

this.type ='car';

}

VhicleFactory.Car.prototype = {

getPrice:function(){}

}

var BMW = function(price){

this.price =price;

}

VhicleFactory(BMW,'Car');

BMW.prototype.getPrice = function(){

return this.price;

}

var car = new BMW(1000);

car.getPrice();

car.type;

6.建造者模式

//用函数返回一个实例化对象，该实例化对象的某些属性是其他类的实例对象

var Human = fucntion(){};

Human.prototype={};

var Name = fucntion(name){};

var Work = function(work){};

Work.prototype=fucntion(){};

var Person = function(name,work){

var _person = new Human();

_person.name = new Name(name);

_person.work =new  Work(work);

return _person;

}

var person = new Person('xxx','xxx');

7.原型模式

//先创建父类，再创建子类，最后通过子类创建实例对象

var LoopImages=function(){};

LoopImages.prototype={};

var FadeLoopImg = function(){

LoopImages.call(this);
}

FadeLoopImg.prototype = new LoopImages();

var fadeImg = new FadeLoopImg();

//原型继承，创建一个对象，该对象的原型复制其他属性

var prototypeExtend(){

var F = function(),args=arguments,i=0,len=args.length;

for(;i

for(var j in args[i]){

F.prototype[j]=args[i][j];

}

}

return new F();

}

var penguin = prototypeExtend({xxx});

penguin.xxx;

8.单例模式

//用对象收编函数，此对象相当于命名空间

//单例模式还可以用来创建小型代码库，静态变量，惰性单例

var Ming = {

g:function(){}

}

---

结构型设计模式：如何将类或对象组合成更大更复杂的结构

9.外观模式

//兼容处理

function addEvent(dom,type,fn){

if(dom.addEventListener){

dom.addEventListener(type,fn,false);

}else if(dom.attachEvent){

dom.attachEvent('on'+type,fn);

}else{

dom['on'+type]=fn;

}

}

addEvent(xxx,'click',function(){});

10.适配器模式

//把旧框架的方法用新框架重写

A.g=function(id){

return $(id).get(0);

}

//适配多个参数

function doSomeThing(obj){

var _adapter = {

name:'xxx'

}

for(var i in _adapter){

_adapter[i] = obj[i] || _adapter[i];

}

}

//数据适配

var arr = ['js','book','前端','8月1日'];

function arrToObjAdapter(arr){

return{

name:arr[0],

type:arr[1],

title:arr[2],

data:arr[3]

}

}

var arrToObjAdapter(arr);

//服务器端数据适配

function ajaxAdapter(data){

return [data[key1],data[key2]]

}

11.代理模式

//统计代理

car Count = (fucntion(){

var _img = new Image();

return function(param){

var str = 'http://www.count.com/a.gif?';

for(var i in param){

str+=i+'='+param[i];

}

_img.src = src

}

})()

Count({num:10})

//jsonp