Templat plugin jQuery yang baik

Ini adalah templat plugin jQuery yang berstruktur. Berikut adalah versi yang sedikit disemak dengan kejelasan yang lebih baik dan beberapa pelarasan kecil untuk amalan terbaik:

TakeAways Key

Artikel ini membentangkan templat plugin jQuery yang mantap yang berfungsi sebagai asas untuk membina plugin jQuery adat. Ia secara komprehensif merangkumi definisi plugin, tetapan pilihan lalai, kemas kini pilihan, pengendalian acara, dan pengurusan negeri. Templat ini menyediakan contoh praktikal yang menunjukkan penciptaan plugin asas, integrasi pilihan, kebolehkerjaan, pelaksanaan kaedah swasta/awam, pengendalian acara, akses elemen, pemeliharaan negeri, dan pemusnahan plugin. Kepentingan mengembalikan objek jQuery untuk kebolehkerjaan dan menggunakan kaedah JQuery

untuk pengurusan negeri diserlahkan. Templat ini adalah titik permulaan yang sangat baik untuk pembangunan plugin jQuery seterusnya. Contoh kerja boleh didapati di data() https://www.php.cn/link/a598e7d200bf02558d5534839884b7a3 .

kod templat plugin jQuery

/*!
  jQuery [name] plugin
  @name jquery.[name].js
  @author [author name] ([author email] or @[author twitter])
  @version 1.0
  @date 01/01/2013
  @category jQuery Plugin
  @copyright (c) 2013 [company/person name] ([company/person website])
  @license Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*/
(function($) {

  // Default plugin options
  const defaultOptions = {
    myVar1: 1,
    myVar2: 2,
    myVar3: 3,
    resizeDelay: 50,
    // etc...
  };

  // Plugin constructor
  function MyPlugin(element, options) {
    this.element = element;
    this.settings = $.extend({}, defaultOptions, options);
    this.resizeTimer = null;

    this.init();
  }

  // Plugin methods
  MyPlugin.prototype = {
    init: function() {
      // Initialization logic here...
      if (this.settings.autoResize) {
        $(window).on('resize.myPlugin', this.onResize.bind(this));
      }
    },

    update: function(options) {
      $.extend(this.settings, options);
    },

    onResize: function() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(this.resizeFunc.bind(this), this.settings.resizeDelay);
    },

    resizeFunc: function() {
      // Resize handling logic here...
    },

    destroy: function() {
      clearTimeout(this.resizeTimer);
      $(window).off('resize.myPlugin');
      $(this.element).removeData('myPlugin'); // Remove plugin data
    }
  };


  // jQuery plugin method
  $.fn.myPlugin = function(options) {
    return this.each(function() {
      const $this = $(this);
      let plugin = $this.data('myPlugin');

      if (!plugin) {
        plugin = new MyPlugin(this, options);
        $this.data('myPlugin', plugin);
      } else if (typeof options === 'string' && plugin[options]) {
        //Call a method on the plugin
        plugin[options]();
      } else if (options) {
        plugin.update(options);
      }

      //Ensure chainability
      return this;
    });
  };

}(jQuery));

Penambahbaikan:

sintaks es6:
• menggunakan dan untuk lebih banyak javascript moden. const let
Corak Pembina:
• Menggunakan fungsi pembina () untuk struktur berorientasikan objek yang lebih baik. MyPlugin
• untuk : bind() secara eksplisit mengikat this konteks dalam pengendali acara untuk mengelakkan isu -isu yang berpotensi. this chaining kaedah:
jelas mengembalikan
• untuk mengekalkan kebolehkerjaan. this
:
• menambah dalam kaedah removeData() untuk membersihkan data plugin dengan betul. removeData() destroy Kaedah Memanggil:
Membolehkan memanggil kaedah plugin tertentu (mis., )
• Komen yang lebih jelas: .myPlugin('destroy') lebih banyak komen ringkas dan deskriptif.
• dipermudahkan :
secara langsung meluas
• . update Templat yang disemak ini lebih mantap, boleh dikekalkan, dan mengikuti amalan terbaik JavaScript moden. Ingatlah untuk menggantikan komen tempat letak dengan logik plugin sebenar anda. this.settings

Atas ialah kandungan terperinci Templat plugin jQuery yang baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!