jQuery extend 實現代碼封裝

標籤：

jQuery 有兩種方式封裝代碼 $.extend 和 $.fn.extend，我們也稱為封裝外掛程式

$.extend DEMO

// 封裝$.extend({  say:function(options){ // options 也可以是多個參數 a, b, c    var name= options.name|| ‘‘;    var words = options.words || ‘‘;    document.write(name + ‘ say: ‘ + words);  }})// 調用$.say({ // options 是多個參數時，$.say(a, b, c);  name:‘Tom‘,  words:‘hello‘});// 輸出 Tom say: hello

$.fn.extend DEMO

<div id="man">man</div>// 封裝$.fn.extend({  talk:function(options){    var defaults = {        words:‘something‘    }    var opts = $.extend(defaults, options);    var obj = $(this);    obj.html(defaults.words);  }})// 調用$(‘#man‘).talk({ words:‘hi‘ });

由此可見，$.extend 可以直接調用，$.fn.extend 需要基於對象來調用

jQuery extend 實現代碼封裝