jQuery入门笔记之（七）插件

时间 2019-11-16

原文原文链接

插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循必定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。而对于jQuery开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。javascript

一．插件概述

插件是以 jQuery 的核心代码为基础，编写出复合必定规范的应用程序。也就是说，插件也是 jQuery 代码，经过 js 文件引入的方式植入便可。
插件的种类不少，主要大体能够分为：UI 类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
引入插件是须要必定步骤的，基本以下：css

必须先引入 jquery.js 文件，并且在全部插件以前引入；html
引入插件；java
引入插件的周边，好比皮肤、中文包等。jquery

好比最经常使用到的表单验证插件：validate，除了最基本的插件文件jquery.validate.min.js以外，还有着messages_zh.js等等各国的语言包能够供你使用。json

如何使用该插件在这里就不进行描述了，能够去看看慕课网上的视频jQuery插件——Validation Plugin，里面详细的描述了这个插件的各类配置项，以及扩展。浏览器

举一反三，一个优秀的插件，详细的说明文档必不可少，详细的看说明文档能，而且在本地进行测试能让你快速的入门各类插件的使用。cookie

还有各类各样的别人编写好的插件能够供你使用：好比管理cookie的插件--cookie等等。闭包

插件能够去jQuery官网的插件模块进行查找The jQuery Plugin Registry架构

二. 自定义插件

前面咱们使用了别人提供好的插件，使用起来很是的方便。若是市面上找不到本身满意的插件，而且想本身封装一个插件提供给别人使用。那么就须要本身编写一个 jQuery 插件了。

插件种类

按照功能分类，插件的形式能够分为一下三类：

封装对象方法的插件；（也就是基于某个 DOM 元素的 jQuery 对象，局部性，使用最多）
封装全局函数的插件；（全局性的封装）
选择器插件。(相似与.find()，例如：color(red)来选择全部的红色元素之类)

插件的基本要点

主要用以以解决各类由于插件致使的冲突、错误等问题，包括以下：

插件名推荐使用 jQuery.[插件名].js，以避免和其余 js 文件或者其余库相冲突（可使用alert($.[插件名])验证是否存在该全局方法）；
局部对象附加 jQuery.fn 对象上，全局函数附加在 jQuery对象自己上（可使用alert($(selector).[插件名])验证是否存在该局部方法）；
插件内部，this 指向是当前的局部对象（经过选择器获取的jQuery对象）；
能够经过 this.each 来遍历全部元素；
全部的方法或插件，必须用分号结尾，避免出现问题（为了更稳妥，可在插件头部先加上一个分号）；
插件应该返回的是 jQuery 对象，以保证可链式操做；
避免插件内部使用$，若是要使用，使用闭包把传递 jQuery 进去，使插件内部继续使用$做为jQuery的别名。

;(function($){//这里将$符做为匿名函数的形参
/*在此处编写代码，可以使用$做为jQuery的缩写别名*/
})(jQuery);//这里将jQuery做为实参传递给匿名函数了

编写一个插件

假设咱们的插件需求是：实现一个下拉菜单，在移入该元素时，把对应的下拉列表展示出来，移出时收回。而且能够设置其展开时的文字颜色。

根据惯例，咱们在编写插件时，能够对于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");//调用局部方法
});

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

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

代码首先是写我的看的，再而后才是给机器看的。