插件，之前沒(méi)有動(dòng)手寫的時(shí)候覺(jué)得很神秘，給人一種很難的感覺(jué)，但是萬(wàn)事開頭難，先從最簡(jiǎn)單的入手，記錄一下自己的學(xué)習(xí)軌跡。插件嘛，顧名思義，額外的組件，為了拓展功能而存在，那么Jquery的插件自然而然就是為了更加豐富Jquery的功能。
一般來(lái)說(shuō)，插件需要定義在一個(gè)單獨(dú)的js文件中，網(wǎng)上很多的插件也都是這么做的，一來(lái)因?yàn)樗?#8220;插件”嘛，應(yīng)該獨(dú)立存在，不應(yīng)該侵入代碼，二來(lái)也可以清晰的維護(hù)好插件的內(nèi)容。定義插件之前，我們應(yīng)該都清楚在Jquery中，$是jQuery的別名，通過(guò)$.來(lái)調(diào)用庫(kù)中的方法也就是通過(guò)jQuery.來(lái)調(diào)用，此時(shí)可能會(huì)有一個(gè)問(wèn)題，$符號(hào)是為數(shù)不多的可以當(dāng)做別名的符號(hào)，很多插件也都用$來(lái)當(dāng)做自己的別名，那么類庫(kù)和類庫(kù)之間就可能存在沖突，根據(jù)實(shí)際情況，我們需要通過(guò)調(diào)用jQuery.noConflict();方法來(lái)消除$別名的沖突，該方法使得jQuery讓出$別名，不和其他類庫(kù)沖突，如此一來(lái)，就只能通過(guò)jQuery.來(lái)調(diào)用方法。
下面就給出一個(gè)插件的案例jquery.plugIn.demo.js，在插件js中，為了兼顧開發(fā)效率并縮減代碼量，使用閉包的方式將jQuery關(guān)鍵字傳入，在閉包中繼續(xù)使用$作為別名。
1 //如果有必要，消除$符號(hào)的沖突
2 //jQuery.noConflict();
3 (function($){
4
5 //一個(gè)簡(jiǎn)單的插件方法
6 $.simple = function(name){
7 alert("hello " + name);
8 };
9
10 //一個(gè)稍復(fù)雜的插件方法。如果某個(gè)函數(shù)需要多個(gè)參數(shù)，或含有可選的參數(shù)，使用options（對(duì)象的方式）對(duì)默認(rèn)參數(shù)進(jìn)行覆蓋
11 //p1和p2作為必選參數(shù)，options參數(shù)傳入可選參數(shù)將默認(rèn)數(shù)值進(jìn)行覆蓋
12 $.complex = function(p1,options,p2){
13 //alert(p1 + " " + options + " " + p2);
14
15 var ops = $.extend({
16 p3:'#3',
17 p4:'#4',
18 p5:'#4'
19 }, options||{});
20
21 alert(p1 + " - " + p2 +" - ops:" + "p3=" + ops.p3 + ";p4=" + ops.p4 + ";p5=" + ops.p5);
22
23 };
24 })(jQuery);
25
測(cè)試頁(yè)面：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_16_Jquery插件基礎(chǔ)</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <!--
11 一般來(lái)說(shuō)，插件需要定義在一個(gè)單獨(dú)的文件中，可以更好的維護(hù)
12 *需要在jquery類庫(kù)導(dǎo)入之后再導(dǎo)入
13 -->
14 <script type="text/javascript" src="jquery.plugIn.demo.js"></script>
15 <script type="text/javascript">
16 $(function(){
17 $.simple("duyt");
18
19 $.complex("I'am",{p3:"111",p4:"222",p5:"333"},"duyt");
20 $.complex("I'am",{},"duyt");
21 });
22 </script>
23 </head>
24 <body>
25 </body>
26 </html>
27
基于上述兩個(gè)簡(jiǎn)單的插件方法，就可以試著寫一個(gè)具有功能性的插件了，下面實(shí)現(xiàn)一個(gè)處理長(zhǎng)文本標(biāo)題的小插件jquery.simpleTextCutter.plugIn.js
1 (function($){
2 //文本截留插件
3 $.toFixedStr = function(OriStr,options){
4 var settings = $.extend({
5 fill:".",//可指定的省略符號(hào)
6 length:12,//可指定的保留長(zhǎng)度
7 fillLength:3//可指定的省略符號(hào)顯示長(zhǎng)度，例如"XXX..."
8 },options||{});
9
10 if(OriStr.length >12){
11 OriStr = OriStr.substring(0,12);
12 for(var i = 0;i<settings.fillLength;i++){
13 OriStr+=settings.fill;
14 }
15 }
16 return OriStr;
17 };
18
19 })(jQuery);
20
測(cè)試頁(yè)面
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Jquery_感受插件_簡(jiǎn)易文本處理插件</title>
8 <meta name="author" content="Administrator" />
9 <script type="text/javascript" src="jquery-1.11.1.js"></script>
10 <script type="text/javascript" src="jquery.simpleTextCutter.plugIn.js"></script>
11 <!-- Date: 2014-12-01 -->
12 <script type="text/javascript">
13 $(function(){
14 $("ul li").each(function(index) {
15 var newStr = $.toFixedStr($(this).text(),{
16 fill:"~",
17 });
18 $(this).text(newStr);
19 });
20 });
21
22 </script>
23 </head>
24 <body>
25 <ul>
26 <li>123你你你444444444444444444</li>
27 <li>456我我我77777777</li>
28 <li>789他他他0000</li>
29 </ul>
30 </body>
31 </html>
32
以上就是實(shí)現(xiàn)jQuery插件的一個(gè)初步的感受