在jquery的學習中，經常碰到使用jQuery插件的使用，后來想著自己應該動手寫一個jQuery插件，提高自己的能力，所以自己就寫了一個簡單的日歷插件。自己動手將這個插件開發的全過程寫下來，希望對各位前端新手有所幫助。

jquery插件開發大體上分為兩種方式：

• 使用jQuery.extend(object)
• 使用jQuery.fn.extend(object)

前者的使用非常的簡單，其相當于向jQuery添加了一個靜態方法，可以通過$直接調用，舉個例子：

$.extend({
  canlen:function(){
      alert('這是一個日歷插件')
  }
});
$.canlen();//直接調用

下面我們來看第二種方式的jQuery插件開發，我的日歷插件也是使用該方法進行開發的。并且為了后期的維護，將代碼改寫成面向對象的形式。首先，為了確保插件不與其他使用$的庫發生沖突，所以，將jQuery傳遞給立即調用函數。并且為了讓插件更加的靈活，所以應該讓插件可以接受參數，當然使用者可以不進行傳參，插件里面會給出參數的默認值。而整個的jquery插件如下所示：

;(function($){
    $.fn.calenPlugin = function(options){
        var calen = new Calen(this,options);
        return calen.init();
    }
    function Calen(ele,opt){
        this.ele = ele;
        this.tableBox = $('<div class="box"></div>');
        this.options = opt;
        this.defaults = {
            elem : this.ele,
        };
        this.options = $.extend({},this.defaults,opt);
        this.selectedMonth = new Date().getMonth() + 1;
        this.selectedYear = new Date().getFullYear();
    };
    Calen.prototype = {
        init:function(){
            var sel = $('<div class="sel"></div>');
                selYear = $('<select class="sel_year"></select>'),
                selMonth = $('<select class="sel_month"></select>');
            for(var i=-25;i<25;i++){
                var option = $('<option value="'+(new Date().getFullYear()+i)+'">'+(new Date().getFullYear()+i)+'</option>');
                option.appendTo(selYear);
            };
            for(var i=1;i<=12;i++){
                var option = $('<option value="'+i+'">'+i+'</option>');
                option.appendTo(selMonth);
            }
            sel.append(selYear);
            sel.append(selMonth);
            this.ele.append(sel);
            $('.sel_year').val(new Date().getFullYear());
            $('.sel_month').val(new Date().getMonth()+1);
            this.slectChange();
        },

        slectChange:function(){
            var _self = this;

            $('.sel_year').change(function(){
                _self.selectedYear = $(this).val();
                _self.renderTable();
            });
            $('.sel_month').change(function(){
                _self.selectedMonth = $(this).val();
                _self.renderTable();
            });
            _self.renderTable();
        },

        renderTable:function(){
            this.tableBox.html('');
            this.ele.append(this.tableBox);
            var table = $('<table class="calen_table"></table>');
            var html = '<thead><tr>';
            var totalDay = new Date(this.selectedYear,this.selectedMonth,0).getDate();

            var pervMonth = this.selectedMonth -1 < 1 ? 12 : this.selectedMonth -1;
            var prevYear = this.selectedMonth -1 < 1 ? this.selectedYear - 1 : this.selectedYear;
            var prevToDay = new Date(prevYear,pervMonth,0).getDate();
            var firWeek = new Date(this.selectedYear+'-'+this.selectedMonth).getDay();
            var weekArry = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            for(var i=0;i<weekArry.length;i++){
                html += '<td>'+weekArry[i]+'</td>';
            };
            html += '</tr><thead><tbody><tr>';
            for(var i=1;i<=firWeek;i++){
                html +='<td class="prevDay">'+(prevToDay+i-firWeek)+'</td>';
            }
            for (i=1; i<=totalDay; i++){
                html += '<td>' + i + '</td>';
                firWeek = (firWeek + 1)%7;
                if ((firWeek==0) && (i!=totalDay)){
                    html += '</tr><tr>';
                };
                if(i==totalDay&&firWeek!=0){
                    var j = 7-firWeek;
                    for(var s = 1;s<=j;s++){
                        html += '<td class="prevDay">'+s+'</td>';
                    }
                };
            }
            html+='</tr></tbody></table>';
            table.html(html);
            table.appendTo(this.tableBox);
        }
    }
}(jQuery));

同時，插件的調用直接如下所示：

$('.calen').calenPlugin({
    elem:this
})

具體的效果如下圖所示

calen.gif

項目github地址。項目還有些東西不完善，以后將更新。