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 });
给心灵一个纯净空间,让思想,情感,飞扬!