JS杂谈系列-jquery-插件开发小记

最新推荐文章于 2022-02-08 21:29:55 发布

weixin_33923762

最新推荐文章于 2022-02-08 21:29:55 发布

阅读量148

点赞数

原文链接：https://my.oschina.net/tbd/blog/487688

版权

为什么80%的码农都做不了架构师？>>>

//=======================start
(function ($) {
//扩展 必须
$.fn.extend({ 
//插件名称 必须
colh: function (options) {
//默认参数 (放在插件外面，避免每次调用插件都调用一次，节省内存)
var defaults = {one: '#faa',two: '#ccc'};
//覆盖默认参数 必须
var opts = $.extend(defaults, options);
//主函数
return this.each(function () {
//激活事件
//操作对象
var obj = $(this);
//执行效果
obj.find('tr:even').css('background',opts.one);
obj.find('tr:odd').css('background',opts.two);
});
}
});
})(jQuery);
//=================end

上面是隔行换色的jq插件，一个最简单的插件实例，我们创建一个jqex.js文件，粘贴上面代码

我们新建一个demo.html页面，引入jquery类库和上面保存好的jqex.js文件，运行可见效果

静态html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript" src="jqex.js"></script>
<script type="text/javascript">
$(function(){
//start
//调用插件，改变奇偶颜色 赋值
$(".a1").colh({ one:'#114245',two:'#afe365'});
$(".a2").colh({ one:'#ffc',two:'#ccc'});
//end
})
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
table{ margin:50px;}</style>
</head>
<body>
<table width="100%" cellspacing="1" class="a1">
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>
<table width="100%" cellspacing="1" class="a2">
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>
<table width="100%" cellspacing="1" class="a2">
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>
</body>
</html>

如上代码，执行demo，其中script中的 $(".a1").colh({ one:'#114245',two:'#afe365'}); 是调用插件

我们可以看见.a1的奇偶采用颜色是one:'#114245',two:'#afe365'

.a2的奇偶采用颜色是 one:'#ffc',two:'#ccc'

比对调用插件的代码发现实现了索要效果，只要把参数的one和two进行改变就实现了不用部分的隔行换色，我们来分析原理

//============================

(function ($) {

})(jQuery);

封装插件的最外层，一个立即执行的匿名函数，传入了一个jquery，我们先解释的jquery是什么

他就是 $("div").hide()中的$,$其实是jquery的简写，

而jquery是一个方法，简单比喻写成jquery=function(){} ，而且这个方法是一个构造方法，俗称就是类，jq是js的类库，名字合理解释了

这句代码的意思：闭包下，执行函数，传入jquery类

//============================

$.fn.extend({
});

下一层结构，其实$==jquery,不要迷糊

fn是什么，他就是prototype的简写，原型属性，用于给构造函数（类）添加共享的属性和方法，用于new的实例的调用中

prototype属性，任何的方法都会有这个属性

extend就是jq自己写的添加插件扩展方法，原理代码略，结构固定

这句代码的意思就是：给jquery类new出的实例添加扩展方法

//============================

//插件名称必须
colh: function (options) {
}

第三层，定义一个插件，插件的名称是colh，自定义的，叫阿猫阿狗随意

意思：我要写一个自定义名称的插件了（其实是一个方法），这部分名称随意

当然我可以添加多个，多个的写法就是

colh: function (options) {
}，

colh1: function (options) {
}

自己写几个就是造几个，逗号隔开，最后一个不要写逗号

//============================

var defaults = {one: '#faa',two: '#ccc'};
var opts = $.extend(defaults, options);

这次是关键代码了，也是你自己要写的

var defaults = {one: '#faa',two: '#ccc'}; 定义一个object类型的内容，作为默认采用值，我们在调用插件这样写

$(".a1").colh(); 调用时没有写参数，那么采用的就是我们 defaults 的数值，表格奇偶颜色就是

one: '#faa',two: '#ccc' 可以试一试，这个的主要做用就是不传参数下，也添加一个最通用的效果

var opts = $.extend(defaults, options); 这个里面$.extend(）的作用就是键值融合，我们举几个例子

var a={aa:1111,bb:2222},var b={bb:3333},var c={dd:4444},

$.extend(a,b）=>{aa:1111,bb:3333}

$.extend(a,c）=>{aa:1111,bb:2222,dd:4444}

方法理解就是，我会把前后的obj参数的全部键提出来，放在一个新obj类型里面，然后对出现同样键，第二个obj中键值会替换第一个obj的键值

$.extend(a,b）提出所有键：aa和bb，第二个和第一个同样有bb键，第二个的bb键对应键值“3333”替换第一个的bb键值“2222”最后返回 {aa:1111,bb:3333}

$.extend(）的另一个用处就是添加工具扩展，下面介绍

//============================

return this.each(function () {
       var obj = $(this);
    obj.find('tr:even').css('background',opts.one);
    obj.find('tr:odd').css('background',opts.two);
   });

这就是核心代码了

js中this上下文指针

$(".a1").colh({ one:'#114245',two:'#afe365'}); this指向 $(".a1")

$(".a2").colh({ one:'#ffc',two:'#ccc'}); this指向 $(".a2") 有2个，当前页面

我们发现一个页面会出现多个同类名内容，这时候就是jq的 each() 发挥作用了，

他会遍历方法前面所有实例，并且在回调函数中，遍历到的每一个存放在$(this)

这样我们就可以实现通同类名对象，多实例的实现了

$(this)代表每一个实例，当前就是代表

$(".a1").colh({ one:'#114245',two:'#afe365'}); 中的$(".a1")、

$(".a2").colh({ one:'#ffc',two:'#ccc'}); 中的$(".a2")[0]、$(".a2")[1]

加上下面css设置obj.find('tr:even').css('background',opts.one);
obj.find('tr:odd').css('background',opts.two);

3个表格都实现了隔行换色

查找下面的奇偶，用伪类选择器

//============================

写一个tab切换插件

第一步最外层

(function ($) {
})(jQuery);

第二步第二层

(function ($) {

$.fn.extend({
});

})(jQuery);

第三步第三层

(function ($) {

$.fn.extend({

tab: function () {
}

});

})(jQuery);

上面三步的代码几乎固定的，复制就好，除了插件名称

第四步创建一个tab插件插件全部代码

(function ($) {
$.fn.extend({
tab:function(){ 
return this.each(function () { 
var obj = $(this);
obj.find(".tabnav").children().click(function(){
obj.find(".tabbox").children().eq($(this).index()).show().siblings().hide();
});
});
}
});
})(jQuery);

tab插件已经完成了，下面是html代码

 <div class="tab1" style="height:400px; width:400px; background:#F93">
<div class="tabnav" style="height:50px; line-height:50px;">
<span>111</span>
<span>222</span>
<span>333</span>
</div>
<div class="tabbox" style="height:350px; background:#F9C;">
<div>111111</div>
<div style="display:none;">22222222222</div>
<div style="display:none;">33333333</div>
</div>
</div>

调用插件代码

$(".tab1").tab();

发现一个tab切换也被封装为插件了，下一步你可以封装更复杂的，如：焦点图、带动画的tab切换等

//===========================================

插件开发已经差不多了，我们会发现，jq里面有这样一些方法，如此调用

var arr = [ 4, "Pete", 8, "John" ];

jQuery.inArray("John", arr); //3
jQuery.inArray(4, arr); //0
jq提供的 inArray()方法,调用$.inArray(4, arr);实现方法处理，返回结果

jq的工具更定不能满足所有人，我们也会希望对某个项目添加很多基于jq的工具，也是$.fun()去调用

开始吧！这个封装方法就是

$.extend({key:fun,key2:fun2}); 我们很眼熟，上面对象类型合并就是他，他另一个用途就是添加工具扩展，基于类，这个类就是jquery

他的原理就是jquery.hanfun1=function(){}，给jquery的方法名直接.一个属性

其实function的原型就是object类型，可以.添加属性和方法就可以理解了，这属于静态方法，静态就是通过jquery.hanfun1去调用，不用new实例去调用，解释完毕，看代码

工具开发jq代码获取数组最大值

(function ($) {
$.extend({
han1:function(arr){
return Math.max.apply(null,arr) 
}
});
})(jQuery);

调用工具js代码

var arr=[45,897,548,789];
alert($.han1(arr));

会输出 897

完毕了！

转载于:https://my.oschina.net/tbd/blog/487688

weixin_33923762

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS杂谈系列-jquery-插件开发小记

为什么80%的码农都做不了架构师？>>> ...
复制链接

扫一扫

JS杂谈系列-jquery-插件开发小记

“相关推荐”对你有帮助么？