js★★★【面向對象的使用方法】*****************★★★★ 至關重要

標準用法：

function Sprite(){
    //函數內容部設置屬性
    this.name='shimily';
} 
//原型上設置方法
Sprite.prototype.show=function(){
    console.log(this.name);
}
//【儘可能不要在原型上面添加公共屬性】
//公共的屬性或常量能夠在原型上面設置

Sprite.prototype.PI=3.1415926;
var s = new Sprite();
s.show();

 改進用法：

改進用法一：*************************

function Sprite2(name,age){
    //函數內容部設置屬性
    this.name=name;
    this.age=age;
} 
//原型上設置方法
Sprite2.prototype.show=function(){
    console.log(this.name);
}

var s2 = new Sprite2('shimily1314',20);
s2.show();    

 

改進方法二：*******************

function Sprite3(options){
    //函數內容部設置屬性
    this.name=options.name;
    this.age=options.age;
} 
//原型上設置方法
Sprite3.prototype.show=function(){
    console.log(this.name);
}
var s3 = new Sprite3({
    name:'shimilygood',
    age:20
});
 s3.show();

 

最終經常使用方法：***************

function Sprite4(options){
   //函數內容部設置屬性
   this._init(options);
} 

Sprite4.prototype._init=function(options){
   this.name=options.name;
   this.age=options.age;
   this.color=options.color;
}
  //原型上設置方法
Sprite4.prototype.show=function(){
   console.log(this.name);
}

var s4 = new Sprite4({
   name:'shimilygood123',
   age:20
});
s4.show();

【最好、最經常使用】

  最終【優化版】經常使用方法：***************

function Sprite5(options){
   //函數內容部設置屬性
   this._init(options);
} 

Sprite5.prototype={
   _init:function(options){  //只容許內部調用的方法【僅內部調用】
      this.name=options.name;
      this.age=options.age || 20;
      this.color=options.color || 'red';
      console.log(this.name);
   },
  show:function(ele){   //[能夠不加參數]外部能夠調用的方法不使用下劃線
     console.log(this.name + ele);
  }

};
 var s5 = new Sprite5({
     name:'shimilygoodabc',
    age:20
});
s5.show('yang');

 

王偉峯，圖片輪播開發案例格式*******挺好用的

function Slider(container, opts){    //屬性設置 this.$outer = $(container);
        this.$inner = this.$outer.children();
        this.$prev = $(opts.prev);
        this.$next = $(opts.next);
        this.$els = this.$inner.children();
        this.total = this.$els.length;
        this.w = this.$els.outerWidth(true);
        this.timer = null;
        this.isSliding = false;
        this.autoplay = opts.autoplay || false;

        this.init();                                     //對外接口
    }
    var proto = Slider.prototype;                        //原型中封裝方法
    proto.init = function(){
        var self = this;
        var $last = this.$els.eq(this.total-1);
        if(this.total<6){
            $last = this.$els.clone().appendTo(this.$inner).eq(this.total-1);
            this.total *= 2;
        }
        $last.prependTo(this.$inner);
        this.$inner.css('marginLeft', -this.w);
        console.log(this.$next)
        this.$prev.on('click', function(){
            self.prev();
        })
        this.$next.on('click', function(){
            self.next();
        })
        this.$outer.on('mouseenter', function(){
            clearTimeout(self.timer);
        })
        this.$outer.on('mouseleave', function(){
            self.auto();
        })
        this.auto();
    }
    proto.prev = function(){
        if(this.isSliding) return;
        this.isSliding = true;
        var self = this;
        this.$inner.animate({
            marginLeft: 0
        }, 500, function(){
            self.$inner.children().eq(self.total-1).prependTo(self.$inner);
            self.$inner.css('marginLeft', -self.w);
            self.isSliding = false;
        })
    }
    proto.next = function(){
        if(this.isSliding) return;
        this.isSliding = true;
        var self = this;
        this.$inner.animate({
            marginLeft: -this.w*2
        }, 500, function(){
            self.$inner.children().eq(0).appendTo(self.$inner);
            self.$inner.css('marginLeft', -self.w);
            self.isSliding = false;
        })
    }
    proto.auto = function(){
        if(!this.autoplay) return;
        var self = this;
        function delay(){
            self.timer = setTimeout(function(){
                self.next();
                delay();
            }, 5000)
        }
        delay();
    }
    
//實例化 new Slider('.slideOuter',{
    prev: '.prev',
    next: '.next',
    autoplay: true
});