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 });
复制代码

 

posted @   Shimily  阅读(353)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示