使用jq把js代碼封裝一個自己的插件

為什么要把js功能封裝成插件呢？我覺得有以下幾點吧

　　1、最基本的原因就是便於代碼復用。

　　2、便於維護和管理。

　　3、提升自身的能力。

　　4、避免各個相同功能組件的干擾，以及一些作用域會相互影響的問題。

jq的標准封裝方式

<script type="text/javascript">
    (function ($) {
        //這里放入插件代碼
    })(jQuery);
</script>

這是jQuery官方的插件開發規范，這樣寫是作用是：

1. 避免全局依賴。
2. 避免第三方破壞。
3. 兼容jQuery操作符’$’和’jQuery’

這段代碼在被解析時會形同如下代碼：

var jq = function($) {
    // Code goes here
}; 
jq(jQuery);

然后傳參怎么搞呢，我們一個插件一般有一些必選參數或者可選參數，在我看來可選參數不過就是在插件里面給了默認值罷了。我們傳的參數會覆蓋插件中的默認參數，可以用$.extend({})覆蓋

例如：

$(function ($) {
    $.fn.getMsg = function (options) {
        var defaults = {
            Event : "click",
            msg : "點擊了插件!" //顯示內容
        } 
        var options = $.extend(defaults, options);//繼承默認參數
        var $this = $(this); //當然響應事件對象
        //綁定事件
        $this.on(options.Event, function (e) {
            alert(options.msg);
        });
    }
});

調用方法

$(function () {
    //綁定元素事件
    $("#test").插件名稱({
        Event : "click", //觸發響應事件會覆蓋上面defaults里面的Event
        msg : "插件!" //顯示內容
    });
});

html

<button id = "test" >插件調用</button >

 知識擴展

官方提供兩個開發插件的方法：

• $.extend(object);為擴展jQuery類本身.為類添加新的方法。 
• $.fn.extend(object);給jQuery對象添加方法。 

$.extend(object)：可以理解為靜態方法，不需要使用到頁面的dom元素，直接使用（$.插件名(參數)）就可以調用

為jQuery類添加類方法，可以理解為添加靜態方法。如$.ajiax也是一個靜態方法，$.extend(object)相當於新增一個類似$.ajax這樣的靜態方法：

jQuery.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5

$.fn.extend(object):($.fn =$.prototype.)對jQuery.prototype進得擴展，就是為jQuery類添加“成員函數”。jQuery類的實例可以使用這個“成員函數”。

(function( $ ){
    $.fn.tooltip = function( options ) {
        //內容
    };
    //等價於
    var tooltip = {
        function(options){
        }
    };
    $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );　 

比如我們要開發一個插件，做一個特殊的編輯框，當它被點擊時，便alert當前編輯框里的內容。可以這么做：

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); // 頁面上