JS插件开发怎么入门_JS插件开发从零开始详细入门教程

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.MyPlugin = factory());
}(this, (function () {
  'use strict';

  function MyPlugin(element, options) {
    this.element = element;
    this.settings = Object.assign({
      speed: 300,
      onInit: null
    }, options);
    this.init();
  }

  MyPlugin.prototype.init = function () {
    // 初始化逻辑
    console.log('插件已初始化');
    if (this.settings.onInit) {
      this.settings.onInit.call(this.element);
    }
  };

  return function (selector, opts) {
    const elements = document.querySelectorAll(selector);
    return Array.from(elements).map(el => new MyPlugin(el, opts));
  };
})));

MyPlugin('.slider', { speed: 500, onInit: function() { console.log('启动完成'); } });

MyPlugin.prototype.destroy = function () {
  // 清理事件监听、定时器等
  this.element.removeEventListener('click', this.handleClick);
};

this.element.dispatchEvent(new CustomEvent('myplugin:init', { detail: this }));