zoukankan      html  css  js  c++  java
  • 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 });
  • 相关阅读:
    上班啦!
    用命令测试maven是否安装成功和创建maven java项目和maven javaweb 项目demo
    String部分
    将Linux虚拟机与本地主机组成局域网
    Maven部分
    JavaSe一个月一些笔记和感想
    Linux一些指令
    maven项目编译后没有生成target/class文件部分解决方案
    7、学习《细说PHP》笔记 七
    12、borderstyle样式边框风格属性
  • 原文地址:https://www.cnblogs.com/shimily/p/6241032.html
Copyright © 2011-2022 走看看