jquery插件编写

以前要实现一个功能效果我一般写一个函数就搞定了,后来写的东西多了,发现经常写到一些以前用到的功能,想把原来的代码粘贴过来吧还得改很多变量甚至结构,而且后期想扩展一下功能什么的,也很麻烦,后来果断写成插件的形式,其实写成插件有很多好处,不多说,下面以jquery插件的编写为例,说一下插件的一般形式,

在jquery官方博客中推荐使用对象级别的方式编写插件(还可以在类级别上开发插件),并给出一个模板参考:


;(function($){ //为了避免一些不必要的麻烦,最前加了一个分号

	$.fn.demo=function(options){
		var defaults={
			//默认参数
		}

		//将用户传进来的参数扩展覆盖默认参数
		var options=$.extend({},defaults,options);

		this.each(function(){
			//实现功能的代码 ,this代表调用本插件的对象
			
		});

		return this; //使之能够链式操作
	}

})(jQuery); //转化为父类的引用(这个不用理解)

举个例子:要实现这样一个功能,设置元素背景颜色,

;(function($){

	$.fn.demo=function(options){
		var defaults={
			color:‘green‘ 
		}

		var options=$.extend(defaults,options);

		this.each(function(){
			$(this).css(‘background‘,options.color);
		});
		return this;
	}

})(jQuery);   //这个插件保存为demo.js

在html中使用插件:

<head>
	<title>demo</title>
	<script src="jquery.js"></script>
	<script src="demo.js"></script>  //载入插件文件
</head>
<body>
	<div id="div1">
		demo
	</div>
	<script>
		$("#div1").demo({    //调用方式
			color:‘black‘   //如果用户不传递参数就使用默认参数
		});
	</script>
</body>


这个例子只是介绍怎么去开发jquery插件,没有什么功能,如果想写出功能丰富的插件,可以在功能代码那里自由发挥

官方推荐插件的命名是这样的,我刚刚写的那个名字(demo.js)就不标准,标准写法是jquery.demo.v1.0.js或者jquery-demo-v1.0.js(jquery.插件名.版本号.js);


文章开头我说了这是官方推荐的对象级别的插件开发,还有类级别的插件开发(一般是jquery官方使用,第三方开发插件用这种方式的话意义不大,对象级别的优势明显突出,本文不讨论这两者的优劣,仅写出来了解一下,总之推荐使用对象级别开发)


类级别的开发有三种方式:

1、直接给jQuery添加静态函数

jQuery.demo=function(){
	//功能代码
}

//调用方式:
$.demo();
2、使用extend()方法


jQuery.extend({
	demo1:function(){
		//功能代码
	}
	demo2:function(){
		//功能代码
	}
});

// 调用方式:

$.demo1();
$.demo2();

3、使用命名空间


jQuery.kongjian={
	demo:function(){

	}
}

// 调用方式:
$.kongjian.demo();

懂了写插件的一般方法不一定能写出好的插件,应该多看看官网上的那些优秀插件,除了分析功能实现,还要看看别人是怎么优化代码的,关键是思想

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。