jQuery組件寫法

知識點：
什麼是插件
jQuery插件的模式
jQuery插件的Lightweight Start模式（入門級插件模式）

8.1 插件（Plug-in）
        「插件」這個關鍵字，估計你們在平常生活中常常有所耳聞。例如：各網頁瀏覽器，容許用戶安裝一些插件，加強用戶體驗，常見的Adobe Flash播放器，銀行安全交易插件等。對於不作編程的朋友來講，是一個無所謂的詞，可是對於我們IT技術行業的朋友來講，是必需要了解，知道的。
       我們不是學者，不作特別規範的學術性研究，只要可以理解、夠用就能夠了。
       由於我們只是編程行業，因此將插件首先約束在編程領域試着理解。「插件」，是一段程序，它是與主應用程序交互，並擴展、替代主應用程序特定模塊（功能）。
        在js及js的一些框架Jqurey、ExtJs、Prototype···也比較流行以開發插件的形式，加強其程序的健壯性、伸縮性、安全性。其中JQuery的流行程度、市場佔有率是最高的，固然也是我們本次學習的 主題。
        如下兩個網址是官方資料，感興趣的朋友能夠去了解一下。
        jQuery官網：http://jquery.com/
        jQuery官網插件，有許多比較穩定、實用的插件，若是您感興趣，也能夠向官方貢獻你的代碼：http://plugins.jquery.com/  

        下面一段代碼展現了jQuery插件Django Superformset 的寫法：
        /*
 * django-superformset
 * https://github.com/jgerigmeyer/jquery-django-superformset
 *
 * Based on jQuery Formset 1.1r14
 * by Stanislaus Madueke
 *
 * Original Portions Copyright (c) 2009 Stanislaus Madueke
 * Modifications Copyright (c) 2013 Jonny Gerig Meyer
 * Licensed under the BSDv3 license.
 */

(function ($) {

    'use strict';

    var methods = {
        init: function (opts) {
            var vars = {};             var opti = $.extend({}, $.fn.superformset.defaults, opts);
            var wrapper = vars.wrapper = $(this);
            var rows = vars.rows = wrapper.find(options.rowSel);             var c = rows.closest(options.containerSel);

//@餘下的代碼略···
}(jQuery));
 
        完整代碼示例下載：http://plugins.jquery.com/django-superformset/
        另外，謝謝Jonny Gerig Meyer代碼。
        若是您還幫助別人解決一些常見的問題，或者想按照本身的想法寫一些有趣並能夠重複使用的一些插件，那麼請跟緊個人步伐，繼續學習
8.2 模式
       學習任何知識首先須要瞭解一下基礎和一些規則，纔可以在其上面構建本身須要的東西。學習jQuery插件也不例外，在不少社區都有一些最佳實踐，咱們先看看一些最基本的jQuery插件知識。
        第一種寫法以下，
        代碼1：
        $.fn.myPluginName = function(){
                //@您的插件業務邏輯
        }
        代碼2：
        (function ($) {
            $.fn.myPluginName = function(){
                 //@您的插件業務邏輯
             }
        })(jQuery);
        代碼1與代碼2有什麼不一樣，相信對於你們已經明朗化了。第一，將帶有 $.fn.myPluginName的代碼放入閉包中，能夠與外部環境隔離，防止產生衝突，還能夠將閉包看作一個模塊，以結構化代碼的做用；第二，將jQuery以參數的形式傳遞進去，映射到$符上，能夠防止在其它JavaScript庫之間產生衝突。
        第二種寫法以下，
        咱們能夠利用jQuery的jQuery.extend(),可以一次定義多個函數，這種寫法的主要意義就是在語義表達上更好。
        代碼3：
        (function ($) {
            $.extend($.fn, {
                myPlugin : function () {
                     //@您的插件業務邏輯
                }
            });
        })(jQuery)
8.3 Lightweight Start模式
        經過上邊的介紹，你們已經具有jQuery插件的基礎知識了。下面經過一段簡單的代碼向你們展現一下Lightweight Start模式，具體解釋請看代碼註釋。
        代碼4：
        /*
         * jQuery Lightweight 插件
         * 新浪微博  ：@席新亮_javascript_html5 
         * QQ：939898101
         * Email：939898101@qq.com
         */
        
        /*
         *1,在代碼開始以前，加一個分號，能夠防止沒有正常關閉的插件
         *2,undefined是ECMAScript3中定義的，能夠修改，但在ECMAScript5中undefined不能修改。
         *   undefined沒有真正傳遞進來以保證是真正的undefined
         *3，把window與document傳遞進來做爲局部變量，能夠減小做用域的訪問，加快速度，以及下降引用同一個插件的影響
         */
        ; (function ($, window, document, undefined) {
                //私有  默認變量
                var myPluginName = "defaultName",
                      defaults = {
                          otherName : "value"
                      };
                //私有 構造插件的函數
                var ctorPlugin = function (element, options) {
                    this.element = element;
                   
                     //利用jQuery 的extend 方法合併對象                     this.opti defaults, options);
                    
                    this._default = defaults;
                    this.name = myPluginName ;
                    this.init();
                };
            //原型鏈上添加方法

            ctorPlugin .prototype.init = function () {

                //執行一些初始化的邏輯，而後就能夠訪問DOM，進行一些業務處理  

            };

            

            //將插件包裝起來，利用模塊模式，防止屢次實例出現

            $.fn[myPluginName ] = function (options) {

                return this.each(function () {

                    var myPluginNameStr =  "plugin_"   myPluginName ;


                    if (!$.data(this, myPluginNameStr )) {

                        $.data(this, myPluginNameStr   , new ctorPlugin (this, options));

                    }

                });

            };
            
        })(jQuery, window, document);

        用法以下：  elementStr爲獲取節點的指定字符
        $(elementStr). defaultName({
            otherName : "your value"
        });
        經過以上代碼能夠看出：
必須有分號
將window、document、undefined做爲參數傳入
一些基本的（私有）默認對象
簡單的插件構造函數，執行一些初始化
擴展默認值的一些選項
一個包裝器避免屢次建立
8.4 擴展視野
    jQuery 插件官方學習：http://learn.jquery.com/plugins/