자바스크립트에서 회전형 차트 플러그인 캡슐화의 예

이 글의 예시는 참고용으로 js 캐러셀 차트의 플러그인 캡슐화 코드를 공유합니다.

구체적인 코드는 다음과 같습니다.

~function(){
  function AutoBanner(curEleId,ajaxURL,interval){
    //把之前存储获取元素的变量都作为当前实例的私有属性
    this.banner = document.getElementById(curEleId);
    this.bannerInner = utils.firstChild(this.banner);
    this.bannerTip = utils.children(this.banner,"ul")[0];
    this.bannerLink = utils.children(this.banner,'a');
    this.bannerLeft = this.bannerLink[0];
    this.bannerRight = this.bannerLink[1];
    this.pList = this.bannerInner.getElementsByTagName('p');
    this.imgList = this.bannerInner.getElementsByTagName('img');
    this.oLis = this.bannerTip.getElementsByTagName('li');

    //之前的全局变量也应该变为自己的私有属性
    this.jsonData = null;
    this.interval = interval || 3000;
    this.autoTimer = null;
    this.step = 0;
    this.ajaxURL = ajaxURL;
    //返回当前实例
    return this.init();
  }

  AutoBanner.prototype = {
    constructor:AutoBanner,
    //Ajax请求数据
    getData:function(){
      var _this = this;
      var xhr = new XMLHttpRequest;
      xhr.open("get",this.ajaxURL + "?_="+Math.random(),false);
      xhr.onreadystatechange = function(){
        if(xhr.readyState ===4 && /^2\d{2}$/.test(xhr.status)){
          _this.jsonData = utils.formatJSON(xhr.responseText)
        }
      }
      xhr.send(null)
    },
    //实现数据绑定
    bindData:function(){
      var str = "",str2 = "";
      if(this.jsonData){
        for(var i = 0,len=this.jsonData.length;i<len;i++){
          var curData = this.jsonData[i];
          str+=&#39;<p><img src="" alt="" trueImg="&#39;+curData[&#39;img&#39;]+&#39;"></p>&#39;;
          i===0?str2+="<li class=&#39;bg&#39;></li>":str2+="<li></li>"
        }
      }
      this.bannerInner.innerHTMl = str;
      this.bannerTip.innerHTML = str2;
    },
    //延迟加载
    lazyImg:function(){
      var _this = this;
      for(var i = 0,len = this.imgList.length;i<len;i++){
        ~function(i){
          var curImg = _this.imgList[i];
          var oImg = new Image;
          oImg.src = curImg.getAttribute(&#39;trueImg&#39;);
          oImg.onload = function(){
            curImg.src = this.src;
            curImg.style.display = block;
            //只对第一张处理
            if(i===0){
              var curp = curImg.parentNode;
              curp.style.zIndex = 1;
              myAnimate(curp,{opacity:1},200);
            }
            oImg = null;
          }
        }(i)
      }
    },
    //自动轮播
    autoMove:function(){
      if(this.step === this.jsonData.length-1){
        this.step = -1
      }
      this.step++;
      this.setBanner();
    },
    //切换效果和焦点对齐
    setBanner:function(){
      for(var i = 0,len = this.pList.length;i<len;i++){
        var curp = this.pList[i];
        if(i===this.step){
          utils.css(curp,"zIndex",1)
          //2、让当前的透明度从0变为1,当动画结束，我们需要让其他的p的透明度的值直接变为0
          myAnimate(curp,{opacity:1},200,function(){
            var curpSib = utils.siblings(this);
            for(var k = 0,len = curpSib.length;k<len;k++){
              utils.css(curpSib[k],&#39;opacity&#39;,0)
            }

          })
          continue
        }
        utils.css(curp,"zIndex",0)
      }
      //实现焦点对其
      for(i = 0,len = this.oLis.length;i<len;i++){
        var curLi = this.oLis[i];
        i === this.step?utils.addClass(curLi,"bg"):utils.removeClass(curLi,"bg");
      }
    },
    //控制自动轮播
    mouseEvent:function(){
      var _this = this;
      this.banner.onmouseover = function(){
        window.clearInterval(_this.autoTimer);
        _this.bannerLeft.style.display = _this.bannerRight.style.display = "block"

      }
      this.banner.onmouseout = function(){
        _this.autoTimer = window.setInterval(function(){
          _this.autoMove.call(_this)
        },_this.interval);
        _this.bannerLeft.style.display = _this.bannerRight.style.display = "none"
      }
    },
    //实现焦点切换
    tipEvent:function(){
      var _this = this;
      for(var i = 0,len = this.oLis.length;i<len;i++){
        var curLi = this.oLis[i];
        curLi.index = i;
        curLi.onclick = function(){
          _this.step = this.index;
          _this.setBanner();
        }
      }
    },
    //实现左右切换
    leftRight:function(){
      var _this = this;
      this.bannerRight.onclick = function(){
        _this.autoMove();
      };
      this.bannerLeft.onclick = function(){
        if(_this.step === 0){
          _this.step = _this.jsonData.length;
        }
        _this.step--;
        _this.setBanner();
      }
    },
    //当前插件的唯一入口 命令模式:init相当于指挥室，指挥各军队协同作战
    init:function(){
      var _this = this;
      this.getData();
      this.bindData();
      window.setTimeout(function(){
        _this.lazyImg();
      },500);
      this.autoTimer = window.setInterval(function(){
        _this.autoMove();
      },this.interval);

      this.mouseEvent();
      this.tipEvent();
      this.leftRight();
      return this;
    }

  }

  window.AutoBanner = AutoBanner
}()

//使用
var banner1 = new AutoBanner(&#39;banner&#39;,&#39;json/banner.txt&#39;,1000)

코딩 세계의 초보자로서 저는 작업 중에 왼쪽 및 오른쪽 변환 휠을 여러 번 호출해야 합니다. 사진을 게시하면 캡슐화하겠습니다. 하지만 나는 항상 내가 작성하는 코드가 더 번거롭다고 느낀다. 방법이 다소 서툴러서 마스터에게 간단하게 해달라고 부탁해서 배워보세요. 또한 기본값이 top인 경우. 애니메이션 효과는 없습니다.

아아아아

위 내용은 자바스크립트에서 회전형 차트 플러그인 캡슐화의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!