1.jQuery插件的命名方式：jquery.[插件名].js

2.對象方法附加在jQuery.fn上，全局函數附加在jQuery對象本身上

3.插件內部this指向的是通過選擇器獲取的jQuery對象

4.結尾加分號，插件頭部最好也加分號

5.插件應該返回一個jQuery對象，保證插件的鏈式操作

6.插件內部應用完整的jQuery而不是$，但可以利用閉包，將jQuery傳入，使插件內部可以繼續使用$符合作為jQuery別名

7.閉包另一大好處：可以避免內部變量影響全局空間

；（function（$）{
}）（jQuery）；//jQuery作為實參傳遞給$

紅色的（）代表運算符，執行綠色的括號（）

8.jQuery.extend（）方法：擴展jQuery對象、擴展已有的object對象

9.jQuery.extend（）方法常用於設置插件方法的一系列默認參數，可以很方便的用傳入的參數來覆蓋默認值。

10.jQuery的選擇符可能會匹配一個或多個元素，所以寫插件時，可以用each（）方法遍歷元素，然後執行相應的方法，this.each（。。）this會依次引用每個DOM元素

接下來結合註釋分析jQuery手風琴插件

;(function (factory) {
    if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
        
 
// AMD或CMD
        define([ "jquery" ],factory);
    } else if (typeof module === ‘object‘ && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                if ( typeof window !== ‘undefined‘ ) {
                    jQuery 
 
= require(‘jquery‘);
                } else {
                    jQuery = require(‘jquery‘)(root);
                }
            }
            factory(jQuery);//將jQuery作為實參傳遞給factory函數，在factory中就可以使用$符號了
            return jQuery;
        };
    } else {
        //Browser globals
        factory(jQuery);
    }
}(function ($) {//function（factory）{。。。}（function（$）{xxx}）立即執行，
                //function（$）{xxx}這個函數將作為參數傳遞給factory，不直接寫在裏面，是因為要兼容不同的模式，提高代碼復用性，否則得寫三次
                //function（factory）{}()，這個()是運算符，執行這個函數 ，
                //利用閉包（函數中的函數），可以繼續使用$符號
    $.fn.accordion = function(parameter,getApi) {//對象方法要附加到jQuery.fn對象上
        if(typeof parameter == ‘function‘){ //重載
            getApi = parameter;
            parameter = {};//只傳入了一個參數，且這個參數對應的是getApi
        }else{
            parameter = parameter || {};//傳入兩個參數的情形
            getApi = getApi||function(){};
        }
        var defaults = {
            triggerCls: "trigger",      //主列表的class值
            panelCls: "panel",          //列表所對應的內容列表的class值
            activeCls: "active",        //導航選中時的class
            triggerType: ‘mouse‘,       //切換時的觸發事件
            activeIndex: 0,             //默認選中導航項的索引
            multiple: false,            //是否同時支持多面板展開
            animate: false,             //是否開啟動畫
            duration:500,               //動畫開啟時長
            beforeEvent: function() {   //切換前執行,返回flase時不移動;傳入一個對象,包含：target當前導航項對象,tabs導航列表對象,panels內容列表對象,index當前導航項索引,event事件對象;
            },
            afterEvent: function() {    //切換後執行;傳入一個對象,包含：target當前導航項對象,tabs導航列表對象,panels內容列表對象,index當前導航項索引,event事件對象;
            }
        };
        var options = $.extend({}, defaults, parameter);//jQuery除了可以擴展jQuery對象外，還可以擴展object對象
                                                        //用defaults, parameter對象擴展{}
                                                        //結果是options合並了這兩個對象
                                                        //$.extend（）經常用於設置插件方法的一系列默認參數
                                                        //這裏defaults就是默認參數，parameter是傳遞的參數，傳遞的參數會覆蓋默認參數
        return this.each(function() {//調用each（）遍歷選中的元素，且返回jQuery對象
            //對象定義
            var $this = $(this);
            var $triggers = $this.find("." + options.triggerCls);
            var $panels = $this.find("." + options.panelCls);
            //全局變量
            var _api = {};
            options.triggerType += options.triggerType === "mouse" ? "enter" : "";  //使用mouseenter防止事件冒泡,先執行===
            //函數
            _api.select = function(i,animate){
                var animate = animate==false?animate:options.animate;
                if(options.multiple){
                    if(animate){
                        $panels.eq(i).slideToggle(options.duration);
                    }else{
                        $panels.eq(i).toggle(options.duration);
                    }
                    $triggers.eq(i).toggleClass(options.activeCls);
                }else{
                    if(animate){
                        $panels.not(‘:eq(‘+i+‘)‘).slideUp(options.duration);
                        $panels.eq(i).slideDown(options.duration);
                    }else{
                        $panels.not(‘:eq(‘+i+‘)‘).hide();
                        $panels.eq(i).show();
                    }
                    $triggers.removeClass(options.activeCls).eq(i).addClass(options.activeCls);
                }
            };
            //初始化
            _api.select(options.activeIndex,false);
            $triggers.bind(options.triggerType, function(e) { //事件綁定
                var i = $triggers.index($(this));
                var status = {
                    target:$this,
                    triggers:$triggers,
                    panels:$panels,
                    index:i,
                    event:e
                };
                if(options.beforeEvent(status)!=false){
                    _api.select(i);
                    options.afterEvent(status);
                }
            });
            getApi(_api);
        });
    };
}));

【jQuery】結合accordion插件分析寫插件的方法及註意事項