面向对象封装插件思想 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);

}

})


如以上有什么问题 可以直接向我提出 谢谢大家关注





阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/localhost_xiao/article/details/71195229
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭