Làm cách nào để thêm phương thức vào mẫu plugin jQuery này?

Question

Tôi đang sử dụng đoạn mã sau làm cơ sở cho một plugin Tôi đang làm việc trên một dự án - đó là từ một bài báo trên tạp chí Smashing nằm đây dưới tiêu đề 'A Lightweight Bắt đầu':

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

Nó đã hoạt động tốt cho mục đích của tôi, nhưng phần còn lại của bài viết sẽ tiếp xúc và nói về những tiện ích jQuery UI mà tôi cho rằng tôi cần thư viện jQuery UI mà tôi không thực sự muốn sử dụng .

/*! 
* jQuery lightweight plugin boilerplate 
* Original author: @ajpiano 
* Further changes, comments: @addyosmani 
* Licensed under the MIT license 
*/ 

// the semi-colon before the function invocation is a safety 
// net against concatenated scripts and/or other plugins 
// that are not closed properly. 
;(function ($, window, document, undefined) { 

    // undefined is used here as the undefined global 
    // variable in ECMAScript 3 and is mutable (i.e. it can 
    // be changed by someone else). undefined isn't really 
    // being passed in so we can ensure that its value is 
    // truly undefined. In ES5, undefined can no longer be 
    // modified. 

    // window and document are passed through as local 
    // variables rather than as globals, because this (slightly) 
    // quickens the resolution process and can be more 
    // efficiently minified (especially when both are 
    // regularly referenced in your plugin). 

    // Create the defaults once 
    var pluginName = 'defaultPluginName', 
     defaults = { 
      propertyName: "value" 
     }; 

    // The actual plugin constructor 
    function Plugin(element, options) { 
     this.element = element; 

     // jQuery has an extend method that merges the 
     // contents of two or more objects, storing the 
     // result in the first object. The first object 
     // is generally empty because we don't want to alter 
     // the default options for future instances of the plugin 
     this.options = $.extend({}, defaults, options) ; 

     this._defaults = defaults; 
     this._name = pluginName; 

     this.init(); 
    } 

    Plugin.prototype.init = function() { 
     // Place initialization logic here 
     // You already have access to the DOM element and 
     // the options via the instance, e.g. this.element 
     // and this.options 
    }; 

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations 
    $.fn[pluginName] = function (options) { 
     return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, 
       new Plugin(this, options)); 
      } 
     }); 
    } 

})(jQuery, window, document); 

Bây giờ tôi cần thêm phương thức vào điều này nhưng tôi không biết cách làm như vậy.

Phương pháp này cần phải hoạt động theo cách mà trình cắm tạo trên trang có thể thay đổi động bằng cách gọi phương thức với giá trị thông qua bảng điều khiển (điều này sẽ xảy ra thông qua một số quy trình khác , nhưng giao diện điều khiển là tốt cho bây giờ).

Tôi làm cách nào để sửa đổi mã ở trên để cho phép điều này? Hay tôi đang sủa cây sai?

Bất kỳ trợ giúp nào sẽ được đánh giá cao, JavaScript phức tạp có thể khiến tôi hơi lạc trong bóng tối vào những lúc tôi sợ nhưng tôi muốn cố gắng làm những việc như 'thực hành tốt nhất' càng tốt.

Answer 1

Các tài liệu jQuery mạnh mẽ khuyến cáo kêu gọi các phương pháp plugin bằng chuyển một chuỗi đến phương thức plugin chính. Điều này là để ngăn chặn không gian tên $.fn trở nên lộn xộn bởi các phương pháp của plugin của bạn. Vì vậy, bạn làm như sau:

$.fn.yourPlugin = function(options) { 
    if (typeof options === "string") { 
     //Call method referred to by 'options' 
    } else { 
     //Setup plugin as usual 
    } 
}; 

Trong mẫu của bạn, bạn đã có nơi hoàn hảo để xác định phương pháp: Plugin.prototype. Ví dụ, để thêm một phương pháp changeColor:

Plugin.prototype.changeColor = function(color) { 
    $(this.element).css("color", color); 
} 

Thông báo việc sử dụng các $(this.element). Đó là bởi vì trong constructor Plugin, một tài sản element được định nghĩa, và các yếu tố trên mà các plugin đang được áp dụng được gán cho nó:

this.element = element; 

Đó là phần tử DOM thực tế, không phải là một đối tượng jQuery, vì vậy cần phải để gọi jQuery trên đó.

Vì vậy, bây giờ bạn có một phương pháp, bạn cần phải thêm một cơ chế để gọi nó.Sau khi khuyến nghị từ các tài liệu jQuery:

$.fn[pluginName] = function (options) { 
    return this.each(function() { 
     if (typeof options === "string") { 
      var args = Array.prototype.slice.call(arguments, 1), 
       plugin = $.data(this, 'plugin_' + pluginName); 
      plugin[options].apply(plugin, args); 
     } else if (!$.data(this, 'plugin_' + pluginName)) { 
      $.data(this, 'plugin_' + pluginName, 
      new Plugin(this, options)); 
     } 
    }); 
}; 

Sau đó bạn có thể gọi phương thức changeColor như thế này:

$("#example").defaultPluginName("changeColour", "red");​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Dưới đây là một fiddle with a working example. Bạn có thể muốn thêm một số kiểm tra xung quanh phương thức gọi mã để đảm bảo rằng plugin đã thực sự được khởi tạo trên (các) phần tử bạn đang gọi nó.

Answer 2

sử dụng

Plugin.prototype.reset = function() { 

}; 
Plugin.prototype.destroy = function() { 

}; 

và vân vân. thêm bao nhiêu tùy chọn như bạn muốn

Answer 3

Thay vì bắt đầu với một soạn sẵn mà thật khó để bạn có thể hiểu, khởi đầu tốt nhất là nguồn gốc:

http://docs.jquery.com/Plugins/Authoring