1. 程式人生 > >面向物件封裝外掛思想 jquery

面向物件封裝外掛思想 jquery

寫了很多年的js  對於封裝成一個通用的外掛 用過很多種方法  現在來一一來記錄下 所謂積累便是進步 每天一點點  每天就是一大步 廢話不多說我來看下

1.常用的jq 申明表示式 進行封裝的物件 看起來是不是很清晰 又不汙染變數

var  a = function (){

return {

auto:function(pm){

var loader = {

num:"3"

}

var pml = $.extend(true,loader ,pm);

alert(pml.num);

},

get:function(pm){

var loader = {

num:"2"

}

var pml = $.extend(true,loader ,pm);

alert(pml.num);

}

}

}()

呼叫方法   可以傳引數 也可以不傳  不傳的 話就是預設引數 傳了就是你所傳的引數

$(document).ready(function(){

a.auto({num:"8"});

a.get();   

})

2.利用jq外掛機制來編寫我們需要封裝的外掛

(function($){

$.fn.table = function(pm){

var loader = {

num:"2"

}

var pml = $.extend(true,loader,pm);

var i_self = $(this);

return _self.each(function(){

_self.on("click",function(){

alert(pml.num);

})

})

}

})(jQuery);

呼叫方法 

$(document).ready(function(){

$("table").table({num:"7"});

$("table").table();

})

3.利用json面向物件方式來進行封裝

;(function(w,$){

var load = {

get : function(callback,config){

var config = config?config:{};//防止引數未傳而報錯

alert("恭喜你呼叫到我了");

callback

&&callback(config);

}

}

$.load = load;

})(window,window.jQuer)

呼叫方法

$(document).ready(function(){

$.load.get();

$.load.get(getAjax,{

num:"8"

});

function getAjax(config){

alert(config.num);

}

})


如以上有什麼問題 可以直接向我提出 謝謝大家關注