关闭

jquery1.9.1自定义插件简述

549人阅读 评论(1) 收藏 举报
分类:

      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.效果如下 



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:152911次
    • 积分:3081
    • 等级:
    • 排名:第11347名
    • 原创:161篇
    • 转载:5篇
    • 译文:0篇
    • 评论:23条
    最新评论