封装jquery插件很简单

转载

laolu0837 2021-08-05 10:41:32 博主文章分类：JS封装等思想

文章标签 javascript html 封装 jquery 代码片段 文章分类 代码人生

其实，封装jquery插件很简单。
先看看，封装模板是什么？看下这个light-weight模式：

javascript 代码

propertyName : "value"

}

//插件类

function Plugin ( element , options ) {

//拿到dom元素，获得对应jq对象，要$(element)

this.element = element;

//覆盖默认配置项

this.options = $.extend({},defaults,options);

//缓存配置项

this._defaults = defaults;

//缓存插件名字（并没神马用）

this._name = pluginName;

//调用初始函数

this.init();

}

Plugin . prototype . init = function ( ) {

//做你想做的事情

}

//fn就是prototype

$ . fn [ pluginName ] = function ( options ) {

//each表示对多个元素调用，用return 是为了返回this，进行链式调用

return this.each(function(){

//判断有没有插件名字如果你不愿意加if 直接new就好了

if(!$.data(this,'plugin_'+pluginName)){

//生成插件类实例。

$.data(this,'plugin_'+pluginName,new Plugin(this,options));

}

});

}

})(jQuery,window,document);//注意没有传第四个参数。

第一步，先写出简单demo，这里不写了，直接找一个吧。这里以一个tab选项卡为例
运行效果如下：

代码片段效果预览

$(function(){

$ ( document ) . ready ( function ( ) {

$(".tab li").click(function(){

$(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');

$("div").hide().eq($(this).index()).show();

//另一种方法: $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on');

});

</script>

<style>

div{margin: 0; padding: 0; width: 184px; height: 200px; border: 1px solid #ccc; display: none; }

.tab{margin: 0; padding: 0; list-style: none; width: 200px; overflow: hidden; }

.tab li{float: left; width: 60px; height: 30px; background: #ccc; color: #fff; border: 1px solid red; text-align: center; line-height: 30px; cursor: pointer; }

.on{display: block; }

.tab li.cur{background: blue; }

</style>

</head>

<body>

</ul>

</body>

</html>

假设是自己写的，先看看核心逻辑是什么？

javascript 代码

$(document).ready(function(){

$(".tab li").click(function(){

$(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');

$("div").hide().eq($(this).index()).show();

//另一种方法: $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on');

});

很简单，不做过多说明了。
第二步，改写代码为封装插件做准备，原文中的是index为顺序的，我想不要这种顺序，改用data属性来指明那个tab对应那个div。
先给内容区域，总体用div包装一下，同样要改变样式。
tab页和内容区域做关联，改用data属性关联。

javascript 代码

$(document).ready(function(){

$(".tab li").click(function(){

var $this = $(this);

var c = $this.data("tab");

alert(c)

$this.addClass("cur").siblings().removeClass('cur');

$(".tabContent").find('>[data-tab='+c+']').addClass("on").siblings().removeClass('on');

});

代码片段效果预览

$(document).ready(function(){

$(".tab li").click(function(){

var $this = $(this);

var c = $this.data("tab");

$this.addClass("cur").siblings().removeClass('cur');

$(".tabContent").find('>[data-tab='+c+']').addClass("on").siblings().removeClass('on');

});

</script>

<style>

.tabContent div{margin: 0; padding: 0; width: 184px; height: 200px; border: 1px solid #ccc; display: none; }

.tab{margin: 0; padding: 0; list-style: none; width: 200px; overflow: hidden; }

.tab li{float: left; width: 60px; height: 30px; background: #ccc; color: #fff; border: 1px solid red; text-align: center; line-height: 30px; cursor: pointer; }

.tab li.cur{background: blue; }

div.on{display: block; }

</style>

</head>

<body>

</ul>

</div>

</body>

</html>

第三步，用模板来封装插件，套用就行了，我做一个可以支持默认激活某一项的配置。

javascript 代码

this.element = element;

this.options = $.extend({},defaults,options);

this._defaults = defaults;

this._name = pluginName;

this.init();

}

Plugin . prototype . init = function ( ) {

var self = this;

$(this.element).find('li').click(function(){

var $this = $(this);

var name = $this.data("tab");

$this.addClass("cur").siblings().removeClass('cur');

$(self.options.contentWrapper).find('>[data-tab='+name+']').addClass("on").siblings().removeClass('on');

});

var activeName = this.options.activeTabName;

alert(activeName);

if(activeName == null){

$(this.element).find('li').eq(0).click();

}else{

$(this.element).find('>[data-tab='+activeName+']').click();

}

$ . fn [ pluginName ] = function ( options ) {

return this.each(function(){

if(!$.data(this,'plugin_'+pluginName)){

$.data(this,'plugin_'+pluginName,new Plugin(this,options));

}

});

}

})(jQuery,window,document);

使用方式：

javascript 代码

$('#tab').myTab({contentWrapper:'#tabContent',activeTabName : 'tab2'});

第四步，代码优化，每个li都有click，太浪费了。改用委托（原先用的delegate,经网友提醒，包括bind，我全改成on了）。

javascript 代码

var self = this;

var $element = $(this.element);

$element.on('click','li',function(){

var $this = $(this);

var c = $this.data("tab");

$element.trigger('tab/change',c);

});

$element.on('tab/change',function(e,tabName){

$element.find('li').removeClass('cur');

$element.find('>[data-tab='+tabName+']').addClass("cur");

});

var $contentWrapper = $(this.options.contentWrapper);

$element.on('tab/change',function(e,tabName){

$contentWrapper.find('>[data-tab]').removeClass('on');

$contentWrapper.find('>[data-tab='+tabName+']').addClass("on");

});

var activeName = this.options.activeTabName;

if(activeName == null){

$element.find('li').eq(0).click();

}else{

$element.trigger('tab/change',this.options.activeTabName);

}

$ . fn [ pluginName ] = function ( options ) {

return this.each(function(){

if(!$.data(this,'plugin_'+pluginName)){

$.data(this,'plugin_'+pluginName,new Plugin(this,options));

}

});

}

})(jQuery,window,document);

完整案例

代码片段效果预览

}

});

}

})(jQuery,window,document);

</script>

$(function(){

$ ( '#tab' ) . myTab ({contentWrapper:'#tabContent',activeTabName : 'tab2'});

})

</script>

<style>

.tabContent div{margin: 0; padding: 0; width: 184px; height: 200px; border: 1px solid #ccc; display: none; }

.tab{margin: 0; padding: 0; list-style: none; width: 200px; overflow: hidden; }

.tab li{float: left; width: 60px; height: 30px; background: #ccc; color: #fff; border: 1px solid red; text-align: center; line-height: 30px; cursor: pointer; }

.tab li.cur{background: blue; }

div.on{display: block; }

</style>

</head>

<body>

</ul>

</div>

</body>

</html>