首頁 > web前端 > js教程 > 分享jQuery外掛的學習筆記_jquery

分享jQuery外掛的學習筆記_jquery

WBOY
發布: 2016-05-16 15:20:08
原創
1154 人瀏覽過

插件(Plugin)也成為 jQuery 擴充(Extension),是一種遵循一定規範的應用程式介面編寫出來的程式。目前 jQuery 外掛已超過數千種,由來自世界各地的開發者共同編寫、驗證和改進。而對於jQuery開發者而言,直接使用這些外掛程式將快速穩定架構系統,節省專案成本。

一. 插件概述

外掛程式是以 jQuery 的核心程式碼為基礎,編寫出複合一定規範的應用程式。也就是說,插件也是 jQuery 程式碼,透過 js 檔案引入的方式植入即可。

插件的種類很多,主要大致可以分為:UI 類、表單及驗證類、輸入類、特效類、Ajax類、滑動類、圖形圖像類、導航類、綜合工具類、動畫類等等。

引入插件是需要一定步驟的,基本上如下:

  • 1、必須先引入 jquery.js 文件,而且在所有插件之前引入;
  • 2、引入插件;
  • 3、引入插件的周邊,如皮膚、中文包等。

例如最常使用的表單驗證外掛: validate ,除了最基本的外掛程式檔案 jquery.validate.min.js 之外,還有著 messages_zh.js 等等各國的語言包可以供你使用。

如何使用該插件在這裡就不進行描述了,可以去看看慕課網上的視頻 jQuery插件——Validation Plugin ,裡面詳細的描述了這個插件的各種配置項,以及擴展。

觸類旁通,一個優秀的插件,詳細的說明文檔必不可少,詳細的看說明文檔能,並且在本地進行測試能讓你快速的入門各種插件的使用。

還有各式各樣的別人寫好的外掛可以供你使用:例如管理cookie的插件–cookie等等。

外掛程式可以去jQuery官網的外掛模組進行找 The jQuery Plugin Registry

二. 自訂外掛程式

前面我們使用了別人提供好的插件,使用起來非常的方便。如果市面上找不到自己滿意的插件,並且想自己封裝一個插件提供給別人使用。那就需要自己寫一個 jQuery 外掛了。

1、外掛種類

依照功能分類,插件的形式可以分為三類:

  • 封裝物件方法的插件;(也就是基於某個 DOM 元素的 jQuery 對象,局部性,使用最多)
  • 封裝全域函數的外掛程式;(全域性的封裝)
  • 選擇器插件。 (類似.find(),例如: color(red) 來選擇所有的紅色元素之類)

2、插件的基本要點

主要用以解決各種因為插件而導致的衝突、錯誤等問題,包括如下:

  • 插件名稱推薦使用jQuery.[插件名稱].js,以免和其他js 檔案或其他程式庫相衝突(可以使用alert( $.[插件名稱] )驗證是否存在該全域方法);
  • 局部物件附加jQuery.fn 物件上,全域函數附加在jQuery物件本身上(可以使用alert( $(selector).[外掛名稱] )驗證是否存在該局部方法);
  • 外掛內部,this 指向是目前的局部物件(透過選擇器取得的jQuery物件);
  • 可以透過 this.each 來遍歷所有元素;
  • 所有的方法或插件,必須用分號結尾,避免出現問題(為了更穩健,可在插件頭部先加上一個分號);
  • 插件應該返回的是 jQuery 對象,以保證可鍊式操作;
  • 避免插件內部使用$,如果要使用,使用閉包把傳遞 jQuery 進去,使插件內部繼續使用$作為jQuery的別名。
;(function($){//这里将$符作为匿名函数的形参
/*在此处编写代码,可使用$作为jQuery的缩写别名*/
})(jQuery);//这里将jQuery作为实参传递给匿名函数了
登入後複製

3、寫一個外掛程式

假設我們的插件需求是:實作一個下拉式選單,在移入該元素時,把對應的下拉清單展現出來,移出時收回。並且可以設定其展開時的文字顏色。

根據慣例,我們在寫外掛時,可以對於html結構有所約束。現在假設我們的頁面上有以下HTML結構:

<ul class="list">
 <li>导航列表1
  <ul class="nav">
   <li>导航列表1</li>
   <li>导航列表2</li>
   <li>导航列表3</li>
   <li>导航列表4</li>
   <li>导航列表5</li>
   <li>导航列表6</li>
  </ul>
 </li>
 <li>导航列表2
  <ul class="nav">
   <li>导航列表1</li>
   <li>导航列表2</li>
   <li>导航列表3</li>
   <li>导航列表4</li>
   <li>导航列表5</li>
   <li>导航列表6</li>
  </ul>
 </li>
</ul>
<!-- 默认已经引入jquery -->
登入後複製

在这里,我们就对我们的插件实现效果有了第一个要求,必须在 对于需要hover展现的元素 内部下面建立 ul 列表,且 className 必须为 nav 。(插件内部都是根据该条件来做文章)

下面就可以开始编写我们的插件了。保存为 jQuery.nav.js ,(符合上面所说的要求,默认已经导入)

;(function($){
 $.extend({ //插件定义在全局方法上
  "nav" : function (color){//传参,这里只是抛砖引玉,在您编写的时候,参数选项可以更加丰富,例如传入json对象等等
   $('.nav').css({//对展开的下拉列表设置样式,此处在下面进行详细说明
    "list-style" : "none",
    "margin" : 0,
    "padding" : 0,
    "display" : "none",
    "color":color//由用户控制hover时,展现出来列表的文字颜色
   });
   $('.nav').parent().hover(//这里用到了.nav的父节点(就是hover到的元素)
    //因为我们只能在插件要求的范围内进行设定,若是使用了外部的选择器,就违背了这个原则
    function (){
     $(this).find(".nav").stop().slideDown("normal");//注意我们在这里使用了jquery的动画方法
    },function (){
     $(this).find(".nav").stop().slideUp("normal");//注意stop()的使用,不然会有类似手风琴效果的出现,但那并不是我们需要的
    });
  }
 });
})(jQuery);
登入後複製

注意:这里使用css方法只是为了方便,在真实插件编写过程中,若存在如此大量的css样式编写时,推荐在外部定义css样式,例如可改写为:

插件依赖的css,需和插件一起导入html中

.hover{/*插件必须样式*/
 list-style: none;
 margin:0;
 padding: 0;
 display: none;
}
登入後複製

在插件内部修改。

$('.nav').addClass("hover");//将CSS与jQuery分离开来
$('.nav').css("color",color);//存在用户设置时启用,不存在就不用了(进行判断)
登入後複製

刚刚说的都是插件的js文件,最后要起到效果,别忘了页面的js中加上那么一句话(当前插件定义在全局方法上)

$(function (){
 $.nav("#999");//调用插件实现的全局方法,并且设置其展现背景颜色为#999。
});
登入後複製

就这样,我们的全局插件就编写,而且调用完成了,在你的页面刷新看看,是不是已经有了效果呢?

但是,因为我们的方法定义在全局上,现在只要页面中出现了我们插件所规定的结构,就会存在hover展现效果,但是有时我们往往想要的不是这样,我们希望它在局部,在我指定的元素调用。所以我们需要对其进行一些改造,让其变成局部方法,其实也很简单:

;(function($){
 $.fn.extend({//定义为局部方法
  "nav" : function (color){
   $(this).find('.nav').addClass('hover');//上面已经说过了,此时this指向调用该方法的元素
   $(this).find('.nav').css("color",color);//在当前元素下,增加了一次find筛选,实现在对应的元素中执行。
   $(this).find('.nav').parent().hover(
    function (){
     $(this).find(".nav").stop().slideDown("normal");
    },function (){
     $(this).find(".nav").stop().slideUp("normal");
    });
   return this;//返回当前的对象
  }
 });
})(jQuery);
登入後複製

我们去刷新一下浏览器。你会发现,咦,怎么没效果? 当然因为原来的代码是直接在全局调用的,现在变成局部方法了,显然就不能这样做了,需要做一点改变:

我这里就不贴html代码了,但是希望您在实践时能把上面的html代码在其下复制几份,以达到思考其实现的效果

$(function (){//这里的eq(0)代表只对第一份起到效果,复制后的没有效果。
 //(你可以把上面的find筛选删除之后再试试,您会发现,他又对余下的几份起效果了)
 $(".list").eq(0).nav("red");//调用局部方法
});
登入後複製

现在回过头再把我们写的插件代码对应上面写的 插件编写的要点 ,思考一下,我们还有哪些没有做到?就会发现,基本已经能对应上了。现在我们就完成了一个下拉菜单的插件。

其实编写插件并不难,最主要的是在我们编写插件的时候,一定要时刻注意这样的要点,每一个细节都遵循在大家实践过程中总结出来的最佳实现,才能自定义实现一个良好的插件。

代码首先是写个人看的,再然后才是给机器看的。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板