JS插件开发技巧与实战分享

(function (window, document) {
  function Carousel(element, options) {
    this.element = element;
    this.config = Object.assign({}, Carousel.defaults, options);
    this.init();
  }

  Carousel.defaults = {
    autoplay: true,
    interval: 3000
  };

  Carousel.prototype.init = function () {
    // 初始化逻辑
  };

  // 挂载到 window，供外部调用
  window.Carousel = Carousel;
})(window, document);

new Carousel('#slider', {
  autoplay: false,
  interval: 5000,
  onSlideChange: function (index) {
    console.log('切换到第 ' + index + ' 张');
  }
});

this.element.dispatchEvent(new CustomEvent('slidechange', {
  detail: { index: this.currentIndex }
}));

document.querySelector('#slider').addEventListener('slidechange', function(e) {
  console.log(e.detail.index);
});

Carousel.prototype.next = function () {
  // 切换下一张
  return this; // 支持链式调用
};

Carousel.prototype.pause = function () {
  // 暂停自动播放
  return this;
};

if (typeof module !== 'undefined' && module.exports) {
  module.exports = Carousel;
} else if (typeof define === 'function' && define.amd) {
  define(function () { return Carousel; });
} else {
  window.Carousel = Carousel;
}