編寫jquery插件的模型

Question

我必須創建一個文檔，爲如何爲大型站點編寫jQuery插件提供「模型」。

例如：所有的插件應該有：

$.fn.somePlugin = function() { 
    return this.each(function() { 
     // Here the plugins does its goal. 
    }); 
}; 

所以他們尊重流暢的模型，也是他們可以在同一時間多個元素被調用。一些其他的事情，我認爲他們都應該有【

• 選項getter和setter（如在jQuery的UI）
• 方法（如在jQuery的UI）
• 一些方法來改變默認選項。當然，這應該在不修改插件文件的情況下完成（再次像jQuery-ui）。

它會是你的「模型插件」？ （以最好的方式實現這一點和其他一些你認爲必要的事情）。

結果

Here你可以看到基於所有我看到的資料我的插件模板。

Answer 1

jQuery的文檔對插件開發的一部分： http://docs.jquery.com/Plugins/Authoring

與這裏的距離Ben almans對插件開發的談話從波士頓jQuery的會議 「幻燈片」：

https://github.com/cowboy/talks/blob/master/jquery-plugin-authoring.js

和一個來自ben alman的關於編寫插件的更多鏈接。

http://msdn.microsoft.com/en-us/scriptjunkie/ff696759

Answer 2

我通常使用類似結構的本

(function ($, plugin) { 
    "use strict"; 

    $[plugin] = function (options/* params */) { 
    var settings; 
    settings = $.extend({}, $[plugin].defaultSettings, options); 
    //static funciton code here 
    }; 

    $.fn[plugin] = function (options/* params */) { 
    this.each(function (index, element) { 
     var settings, $this; 
     settings = $.extend({}, $.fn[plugin].defaultSettings, options); 
     $this = $(this); 
     $this.data(plugin+'Settings', settings); 
     //chainable function code here 
    }); 
    return this; 
    }; 

    $[plugin].defaultSettings = { 
    'foo': 'bar' 
    }; 

    $.fn[plugin].defaultSettings = { 
    'fizz': 'buzz' 
    }; 

    $(function(){ 
    //document.ready initialization code here 
    }); 
}(jQuery, 'foo')); 

我通常不與plugin參數麻煩，但它可以爲推廣插件的名稱是有用的

對於事件快捷方式，我將使用：

$.each('foo bar baz'.split(' '), function(i, name) { 
    $.fn[name] = function(data,fn){ 
    if (fn == null) { 
     fn = data; 
     data = null; 
    } 
    return arguments.length > 0 ? 
     this.bind(name, data, fn) : 
     this.trigger(name); 
    }; 
}); 

這將產生.foo(),.bar(),.baz()全部作爲用於綁定/觸發事件的快捷方式，用於綁定/觸發'foo','bar'和'baz'事件。

Answer 3

我一直在使用以下模板很長一段時間了，它似乎做所需要的一切，以及提供傳統的jQuery的腳本，如：$.myPlugin("element", {options})，$.myPlugin({options}, callback)，或「$（‘元素’）爲myplugin （）;

(function($) { 
    if (!$.myExample) { // check your plugin namespace does not already exist 
     $.extend({ // this will allow you to add your plugin to the jQuery lib 
      myExample: function(elm, command, args) { 
       // keep in mind, right here you might want to do a class or data check to determine which direction this call is going 
       // for example, upon init the plugin on an element you may add the plugin name as a class, 
       //  this way, when it's recalled, you can see it alrady has that class and might be calling a command, 
       //   thus make an if statemnt to push the process through 
       return elm.each(function(index){ 
        // do work to each element as its passed through 
        // be sure to use something like 
        // return elm.each(function(e) { dor work }); 
        // as your final statement in order to maintain "chainability" 
       }); 
      } 
     }); 
     $.fn.extend({ // this gives the chainability functionality seen with $ funcs like: $("#eleID").css("color", "red") <--returns original element object 
      myExample: function(command) { 
       return $.myExample($(this), command, Array.prototype.slice.call(arguments, 1)); 
      } 
     }); 
     $.myExample.props = { // Here you can establish specific properties to your plugin, prehaps even make them "Over-writable" 
      key1: "value", 
      key2: "value" 
     }; 
     $.myExample.methods = { // Here you can establish specific methods/functions for your plguin to carry out and maintain your namespace as well 
      key1: function(param) { 
       /* do work */ 
      }, 
      key2: function(param) { 
       /* do work */ 
      } 
     }; 
     // This next part is not seen in many plugins but useful depending on what you're creating 
     $.myExample.init = function(param) { // If you have an initialize method to apply, namespace it in here and calll on initializing your plugin 
      var key = "value", 
       key2 = { 
        subKey: "value" 
       }; 
       /* 
       /run any number of initializing functions here 
       /I prefer to make my param a value that can be a 
       / string with a possible object 
       / the string for holding a base configuration 
       / the object for any change in properties or base values for that config 
       */ 
     }; 
     $.myExample.defaults = { // establish base properties here that can be over-written via .props, but their values should never truly change 
      key1: "value", 
      key2: { 
       prop1: { 
        subKey1: "value", 
        subKey2: "value" 
       }, 
       prop2: { 
        subKey1: "value" 
       } 
      }, 
      key3: function(param) { 

      } 
     }; 
    } 
})(jQuery);