js设计模式(四)语言之魂-原型模式

原型模式

原型模式:用原型实例指向创建的类,使创建的对象的类共享原型对象的属性和方法.把消耗较大的方法放在基类中。避免很多不必要的消耗

//图片轮播 可以左右切换 渐隐切换 收缩切换
function LoopImages = funciton(imgArr,contaier){
    this.imageArr = imgArr;
    this.container = container;
    this.createImage = function(){};
    this.changeImage = funciton(){}
}

多类切换

//上下切换
var SlideLoopImg = funciton(imgArr,container){
  //构造函数继承图片轮播类
  LoopImage.call(this,imgArr,container);
  //重写继承切换下一张图片的方法
  this.changeImage = funciton(){
    console.log("SlideLoopImage change Function");
  }
}

//渐隐切换类
var FadeLoopImg = function(imgArr,container,arrow){
  FadeLoopImg.call(this,imgArr,container);
  this.arrow = arrow;
  this.changeImg =function(){
    console.log("FadeLoopImg change Funciton")
  }
}

创建测试例

var fadeImg = new FadeLoopImg(['01.jpg','02.jpg'],
'container',['left.png','right.png'])
fadeImg.changeImage(); // FadeLoopImg change Funciton

上述方法没实例化一个对象,都会新创建一个createImage ，changeImage

var LoopImage = funciton(imgArr,container){
  this.imgArr = imgArr;
  this.container = container;
}
LoopImage.prototype = {
  createImage:function(){
     //
  },
  changeImage:function(){
    //
  }
}
//上下滑动类
var SlideLoopImg = funciton(imgArr,container){
 LoopImage.call(this,imgArr,container);
}
SlideLoopImg.prototype = new LoopImage();
//重写继承的切换图片的方法
SlideLoopImg.prototype.changeImage = function(){
}
//同理实例化其他