jQuery--插件的基本原理及使用（全局函数的封装及调用、封装对象方法的插件、自定义选择器插件）详解

Myth丶恋晨 2021-08-13 14:28 346阅读 0赞

#### 插件的基本原理 ####

开发的jQuery插件常见的有3种：封装全局函数的插件、封装对象方法的插件、自定义选择器插件。

**1. 封装全局函数的插件：**  
封装全局函数的插件是指将独立的函数追加到jQuery命名空间之下，通过jQuery或 符 号 进 行 访 问 ， 如 j Q u e r y . e a c h ( ) 或 符号进行访问，如jQuery.each()或 符号进行访问，如jQuery.each()或.each()形式。

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<script type="text/javascript"> //1.封裝全局函數的插件 $.extend({ sayHello:function(name){ console.log("Hello," + (name?name:"測試") + "！"); } }); //2.调用已经定义的全局函数 $.sayHello(); $.sayHello("带参调用1"); jQuery.sayHello("带参调用2"); </script>
    	</body>
    </html>

![在这里插入图片描述][20191002224325775.png]  
**2. 封装对象方法的插件：**  
封装对象方法的插件是指将对象方法封装起来，用于对选择器所获取的jQuery对象进行操作。通过$.fn向jQuery添加新的方法后，该方式的使用方式与jQuery中的parent()、append()等方法的使用方式完全相同。

封装对象方法的插件使用比较广泛，目前90%以上的插件都是通过封装对象方法的形式实现的。

示例：

// JavaScript Document
    $.fn.myPlugin=function(options){ 
    	var defaults={ 
    		'color':'red',
    		'fontSize':'12px'
    	};
    	//1.调用extend时会将defaults的值改变，再次访问时已经被用户传进来的参数更改
    	//可以通过F12开发者工具进行查看
    	//var settings=$.extend(defaults,options);
    	
    	//2.将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后
    	//所有值被合并到这个空对象上，从而保护了插件里面的默认值
    	var settings=$.extend({ },defaults,options);
    	return this.css({ 
    		'color':settings.color,
    		'fontSize':settings.fontSize
    	});
    }

<!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>自定义插件</title>
        <script type="text/javascript" src="../js/jquery-1.x.js"> </script>
        <script type="text/javascript" src="jquery.myPlugin.js"></script>
      </head>
      <body>
        <ul>
            <li><a href="http://www.baidu.com">我的微博</a></li>
            <li><a href="http://www.163.com">我的博客</a></li>
            <li><a href="http://www.google.com">我的小站</a></li>
        </ul>
        <p>这是p标签不是a标签，我不会受影响</p>
    	<script type="text/javascript"> $(function(){ //使用参数的插件 var options={ 'color':'#2c9929'}; $('a').myPlugin(options); //调用无参方法，将使用插件的默认值 //由于插件中返回了jQuery对象，允许进行链式操作 //$('a').myPlugin().fadeOut("slow").delay(1000).slideDown("slow"); }) </script>
      </body>
    </html>

![在这里插入图片描述][20191002225103442.png]  
上述代码中，当myPlugin插件没有提供参数时，将使用插件所提供的默认参数；当为myPlugin插件提供options实参时，将通过options来设定元素的样式。

当插件与其他插件混合使用时，可能会因为同时使用相同的全局变量而产生冲突。在开发jQuery插件时，尽量使用自调用匿名函数将代码包裹起来，以保证插件在任何位置使用都不会产生冲突。

示例：包裹后的插件

;(function($, window, document, uundefined){ 
    	//插件代码
    })(jQuery, window, document);

当多个插件混合使用时，开始部分的分号（；）可以有效避免因前面插件没有以分号结束而产生的解析错误。将系统变量jQuery、window和document以形参的方式传递到插件内部，可以有效地提高系统的性能。

由于没有提供undefinded参数，从函数的第4个参数所获取的数据是一个真实的undefinded。如果函数不提供undefinded参数，插件内部将有可能抛出“UncaughtTypeError：undefinded is not a function”错误。

**3. 自定义选择器插件：**  
虽然jQuery中提供了许多选择器，但并不能满足所有开发者的需求。通过自定义选择器能够让开发者更加灵活地对元素进行选取，其语法格式如下：

$.expr[":"][selectorName] = function(obj, index, meta){ }
    $.expr[":"].selectorName = function(obj, index, meta){ }

*  selectorName：表示自定义选择器的名称
 *  obj：表示当前遍历的DOM元素
 *  index：表示当前元素对应的索引位置
 *  meta：是一个数组，用于存放选择器提供的信息，其中meta\[3\]比较关键，用于接收自定义选择器传入的数据

示例：

//自定义选择器
    ;(function($){ 
    	$.expr[":"]["color"] = function(obj,index,meta){ 
    		console.log(meta);
    		return $(obj).css("color",meta[3]);
    	};
    	$.expr[":"].search = function(obj,index,meta) { 
    		return $(obj).text().toUpperCase().indexOf(meta[3].toUpperCase()) >= 0;
    	};
    })(jQuery);

<!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>自定义插件</title>
        <script type="text/javascript" src="../js/jquery-1.x.js"> </script>
        <script type="text/javascript" src="jquery.customPlugIn.js"></script>
      </head>
      <body>
        <table>
        	<tr>
                <td><input type="checkbox" /></td>
                <td>绿树<span>苹果</span>脆苹果干</td><td>40</td><td>2016-5-20</td><td>3年</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>台湾零食<span>核桃仁</span>枣核恋</td><td>120</td><td>2015-8-15</td><td>4年</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>韩国蜜炼果味茶</td><td>50</td><td>2015-10-18</td><td>6年</td>
            </tr>
        </table>
        <script type="text/javascript"> //使用选择器 $(function(e){ $("td:search('果')").css({ "background-color":"#5FF"}); $("td span:color(blue)").css("font-weight","bold"); }); </script>  
      </body>
    </html>
    ```
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019100223092246.png)
    在上述代码中，使用 :search() 选择器来筛选包含“果”字的单元格，并将背景设为#5FF。使用层次选择器选取单元格中的span元素，然后再使用 :color() 选择器对其过滤，将包含蓝色字体的文本内容加粗显示。
    
    
    
    **在开发jQuery插件时，需要注意一下几点：**
    
    - jQuery插件的文件名格式推荐使用jquery.[插件名].js形式，避免与其他JavaScript库插件冲突
    
    - 所有的对象方法都应附加到jQuery.fn对象上，而所有的全局函数都应附加到jQuery对象本身
    
    - 在插件内部，通过this获取当前选择器选取的jQuery对象，而在普通的事件处理函数中，this表示触发事件的当前DOM元素
    
    - 所有的方法及函数都应以分号（：）结束，否则代码压缩时可能出现问题
    
    - 插件应该返回一个jQuery对象，以保证插件可以进行链式操作

[20191002224325775.png]: /images/20210813/34a15ad060ab44239bfc9bff7965eeba.png
[20191002225103442.png]: /images/20210813/9d5fa9267edb464593b1d1116f56bda0.png