JS雜談系列-jquery-插件開發小記

時間 2019-11-07

原文原文鏈接

//=======================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文件，粘貼上面代碼javascript

咱們新建一個demo.html頁面，引入jquery類庫和上面保存好的jqex.js文件，運行可見效果css

靜態html代碼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'}); 是調用插件java

咱們能夠看見.a1的奇偶採用顏色是one:'#114245',two:'#afe365'jquery

.a2的奇偶採用顏色是 one:'#ffc',two:'#ccc'數組

比對調用插件的代碼發現實現了索要效果，只要把參數的one和two進行改變就實現了不用部分的隔行換色，咱們來分析原理閉包

//============================app

(function ($) {ide

})(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

完畢了！

1. 淺談jquery插件開發模式
2. 淺談jquery插件開發模式**************************************************************************************
3. JS雜談系列-經常使用開發工具介紹
4. JQuery插件開發 + 插件
5. jQuery插件開發
6. jquery插件開發
7. jquery開發插件
8. Jquery插件開發
9. js jquery 插件
10. 軟件開發雜談
更多相關文章...
• Maven 插件 - Maven教程
• Eclipse 安裝插件 - Eclipse 教程
• PHP開發工具
• IntelliJ IDEA安裝代碼格式化插件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。