jquery1.9.1自定义插件简述

最新推荐文章于 2021-08-06 09:37:11 发布

undergrowth

最新推荐文章于 2021-08-06 09:37:11 发布

阅读量866

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/undergrowth/article/details/24840217

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

5月1日呆在实验室接着学习的脚步记录学习的脚步还有2个月学生生涯即将结束十分珍惜此时的宁静看书、听歌、打球、喝酒时间只受自己支配真想说太XX爽了呵呵

好吧还是回到记录的脚步上来

按照jquery官方所说

jquery插件机制是一种用于扩展jquery原型对象方法的简单方式，通过扩展原型对象，可以让jquery的所有对象都继承你自定义的方法。

在自定义插件之前有几个知识点我们是必须要搞清楚的

1.iife--立即执行函数表达式

看看官网解释

简单地说就是定义一个表达式不过这个表达式中包含一个函数

我们知道在script的范围里只要不是定义在函数中的表达式在script第一次加载的时候都会从上至下的执行

所以这个IIFE的表达式也会立即执行

看个例子

<!DOCTYPE html>
<html><head>  
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head><body> <div id="log"></div> 
<script>
(function(a){
	$("#log").text("使用立即调用函数表达式"+a);
})(5);
</script> 
</body></html>

界面输出

通过输出可以看到 IIFE执行了上面的例子中看到IIFE的写法如下

(function(形参){需要处理的代码})(实参);

2.$.与$.fn,的区别

$.相当于jquery的Object类的静态部分,此部分中的方法与属性都无需jquery对象即可直接使用例如 $.extend()

$.fn.相当于jquery的Object类的实例部分,此类中的方法都需要先有jquery对象之后才能使用$.fn.的方法例如 $("a").attr()

还有一点需要注意 jquery的所有对象都继承了 Object类

所以前面所说的通过扩展愿意模型可以让jquery的所有对象都继承你自定义的方法即是往Object的静态部分和实例部分添加方法和属性即可

有了上面的知识自定义插件就比较简单了

不过有些准则可能需要注意一下

a:在你自定义的插件中,最好只留一个对外的方法接口这样可以避免过多的方法名与其他插件的方法重复通过传递的参数决定执行自定义插件中的哪一块代码

b:在自定义的插件方法中最好把jquery对象返回这样能够保持jquery的链式操作

c:在自定义的插件中提供一些默认属性同时也可让用户自定义属性的值让你的插件更具扩展性

好吧啰嗦了那么多看看实例吧

在此插件中封装一个遍历多层json对象的方法将json对象转换为特定的文本格式显示

1.新建一个iteratorJson.js文件封装的代码如下

//建立一个立即调用函数表达式 封装自定义的方法
//这样可以使封装的方法内部的变量、表达式与外部的变量、表达式互补干扰
//下面的jQuery为实参 $为形参 这样做的目的是保持代码的一致性 与
(function($){
	//往jquery的Object的实例部分添加方法
	$.fn.iteratorJson=function(choice,data){
		//choice用于判断是否深层迭代json对象
		if(choice===true){ //进行深层迭代 即将json对象中的json对象都转换为文本
			return iteratorDeep(data);
		}else{
			return iteratorNonDeep(data);
		}
     };
	 
    //下面定义的函数不对外调用 
	    //深度迭代
		function iteratorDeep(data){
		//定义数组
			var content=[];
			$.each(data,function(key,val){
				var next=key+":";
				next+=$.isPlainObject(val)?iteratorDeep(val):val;
				//向数组中添加内容
				content.push("["+next+"]");
			});
			//转换数组为文本
			return "{"+content.join(",")+"}";
		}
	
		//不进行深度迭代
	    function iteratorNonDeep(data){
			var content=[];
			$.each(data,function(key,val){
				var next=key+":"+val;
				content.push("["+next+"]");
			});
			return "{"+content.join(",")+"}"; 
		}
    
	//默认设置
	var defaults={
		"background-color":"red",
		"font-size":"20"
	};
	
    $.fn.chainCss = function(options){
	//将default和options的设置值合并到settings里面
		var settings=$.extend({},defaults,options);
		//this指的是jquery对象 因为新添加的方法chainCss也属于jquery对象的方法
		return this.css(settings);
	};
	
	
})(jQuery);

2.测试界面 iteratorJsonTest.html

<html>
<head>
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
	<!-- 引入自定义的插件 -->
	<script type="text/javascript" src="iteratorJson.js"></script>
	<script type="text/javascript">
		$(function(){
			//创建数组
			var testJson={name:"刘德华",age:54,loveFemale:{name:"朱丽倩",age:50}};
			//测试添加的方法
			$("#disJson").text($(document).iteratorJson(true,testJson));
			$("#disJson2").text($(document).iteratorJson(false,testJson));
			//测试新添加的方法
			console.log($("#disJson").chainCss({"background-color":"purple"}).width());
		});
	</script>
</head>
<body>
	<div id="disJson"></div>
	<div id="disJson2"></div>
</body>
</html>

3.效果如下