02工厂，创建者

工厂模式

简单工厂模式

• 创建同一类的对象;

var PopFatory = function (name) {
  switch(name) {
    case 'alert':
      return new LoginAlert();
    case 'confirm':
      return new LoginConfirm();
    case 'prompt':
      return new LonginPrompt();
  }
}

• 通过一个对象来代替

function createPop(type, text) {
  var o = {
    content: 'text',
    show = function() {}
  }
  switch(type) {
    case 'alert':
    ....
    case 'confirm':
    ....
    case 'prompr':
    ...
  }
  return o;
}

工厂方法模式

• 创建多类;
• 将实际创建对象工作推迟到子类当中;

var Factory = function (type, content) {
  var self = this instanceof Factory 
    ? this : Object.create(Factory.prototype);
  ....
  return self[type](cntent);
}
//在原型中创建所有基类
Factory.prototype = {
  ...
}

抽象工厂模式

• 创建的不是对象实例，而是一个类簇;
• 汽车模型例子:

var VehicleFactory = function (subType, superType) {
  if(typeof VehicleFactory[superType] === 'function') {
  	function F(){};
    F.prototype = new VehicleFactory[superType]();
    superType.constructor = subType;
    subType.prototype = new F();
  } else {
  	throw Error('为创建该抽象类')
  }
}

VehicleFactory.Car = function () {
  this.type = 'car';
}
VehicleFactory.Car.prototype = {
  getPrice: function () {
    return new Error('抽象方法不能使用');
  },
  getSpeed: function () {
    return new Error('抽象方法不能使用');
  }
}

//对抽象类的继承实现
var BMW = function (price, speed) {
  this.price = price;
  this.speed = speed;
}
VehicleFactory(BMW, 'Car');
BMW.prototype.getPrice = function () {
  return this.price;
}
BMW.prototype.getSpeed = function () {
  return this.speed;
}

创建者模式

• 将一个复杂对象的构建层和表示层分离;
• 工厂模式不关心过程而关心最后的产出,建造者模式更关注创建的细节;

招聘模版例子

var Human = function (params) {
  this.skill = params && params.skill || '保密';
  this.hobby = params && params.hobby || '保密';
}
Human.prototype = {
  getSkill: function() {...},
  getHobby: function() {...}
}

var Named = function (name) {
  var index;
  this.wholeName = name;
  if((index = name.indexOf(' ')) > -1) {
    this.FirstName = name.slice(0, index);
    this.secondName = name.slice(index + 1);
  } 
}

var Work = function (work) {
  switch(work) {
    case 'code':
      this.work = '工程师';
      this.workDescript = '...';
      break;
    ...
    default:
      this.work = work;
      this.workDescript = 'None';
  }
}
Work.prototype = {
  changeWork: function () {...},
  changeDescript: function () {...}
}

var Person = function (name, work) {
  var _person = new Human();
  _person.name = new Named(name);
  _person.work = new Work(work);
  return _person;
}

原型模式

• 用原型实例指向创建对象的类，新对象共享原型属性、方法;

图片轮播例子

//轮播基类
var LoopImages = function (imgArr, container) {
  this.imagesArray = imgArr;
  this.container = container;
}
LoopImages.prototype = {
  createImage: function () {
    console.log('create Img');
  },
  changeImg: function () {
    console.log('change Img');
  }
}
//上下滑动切换
var SlideLoopImg = function (imgArr, container) {
  LoopImages.call(this, imgArr, container);
}

SlideLoopImg.prototype = new LoopImages();
//重写切换方法
SlideLoopImg.prototype.changeImg = function () {
  console.log('slide change Img');
}

var FadeLoopImg = function (imgArr, container, arrow) {
  LoopImages.call(this, imgArr, container);
  this.arrow = arrow;
}
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImg = function () {
  console.log('fade change Img');
}

模版对象克隆

function prorotypeExtend() {
  var args = arguments, len = args.length,
    F = function () {}, i = 0, temp;
  for(; i < len; i++) {
    temp = args[i];
    for(var j in temp) {
      F.prototype[j] = temp[j];
    }
  }
  return new F();
}

外观模式

• 为一组负责的子系统接口提供一个更高级的统一接口;