js/jQuery插件开发及规范

最新推荐文章于 2022-07-07 17:14:11 发布

love_bc

最新推荐文章于 2022-07-07 17:14:11 发布

阅读量130

点赞数

分类专栏： JS相关文章标签： js jQuery 插件开发规范 ViewUI

本文链接：https://blog.csdn.net/love_bc/article/details/84598992

版权

JS相关专栏收录该内容

15 篇文章 0 订阅

订阅专栏

当我们画出了UI之后就可以正式编写jQuery插件代码了，不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解。

1. 使用闭包：

(function($){
	//Code goes here
})(jQuery);

这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？

a) 避免全局依赖。

b) 避免第三方破坏。

c) 兼容jQuery操作符'$'和'jQuery'

我们知道这段代码在被解析时会形同如下代码：

var fun = function($) {
	//Code goes here
};
fun(jQuery);

这样效果就一目了然了。

2. 扩展

jQuery提供了2个供用户扩展的‘基类’ - $.extend和$.fn.extend.

$.extend 用于扩展自身方法，如$.ajax, $.getJSON等，$.fn.extend则是用于扩展jQuery类，包括方法和对jQuery对象的操作。为了保持jQuery的完整性，我比较趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend.

3. 选择器

jQuery提供了功能强大，并兼容多种css版本的选择器，不过发现很多同学在使用选择器时并未注重效率的问题。

a) 尽量使用Id选择器，jQuery的选择器使用的API都是基于getElementById或getElementsByTagName，因此可以知道效率最高的是Id选择器，因为jQuery会直接调用getElementById去获取dom，而通过样式选择器获取jQuery对象时往往会使用 getElementsByTagName去获取然后筛选。

b) 样式选择器应该尽量明确指定tagName, 如果开发人员使用样式选择器来获取dom，且这些dom属于同一类型，例如获取所有className为jquery的div，那么我们应该使用的写法是$('div.jquery')而不是$('.jquery')，这样写的好处非常明显，在获取dom时jQuery会获取div然后进行筛选，而不是获取所有dom再筛选。

c) 避免迭代，很多同学在使用jQuery获取指定上下文中的dom时喜欢使用迭代方式，如$('.jquery .child')，获取className为jquery的dom下的所有className为child的节点，其实这样编写代码付出的代价是非常大的，jQuery会不断的进行深层遍历来获取需要的元素，即使确实需要，我们也应该使用诸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2)之类的方式。

js插件开发的一种方法：

js代码：

<html>
<script language="javascript" src="jquery.js"></script>

<script type="text/javascript">
(function ($) {
	//默认参数(放在插件外面, 避免每次调用插件都调用一次, 节省内存)
	var defaults = {
		color: '红色'
	};
	//扩展
	$.fn.extend({
		//插件名称
		height: function(options) {
			//覆盖默认参数
			var opts = $.extend(defaults, options);
			//主函数
			return this.each(function(){
				//激活事件
				var obj = $(this);
				obj.click(function(){
					alert(opts.color);
				});
			});
		}
	});
})(jQuery);

$(function(){
	$("p").height({color: 'black'});
});
</script>
<body>
	<p>
	click here
	</p>
</body>
<html>

参考：http://www.360doc.com/content/14/0307/09/15605563_358431277.shtml

love_bc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js/jQuery插件开发及规范

当我们画出了UI之后就可以正式编写jQuery插件代码了，不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解。 1. 使用闭包：(function($){ //Code goes here})(jQuery); 这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？a) 避免全局依赖。b) 避免第三方破坏。c) 兼容jQu...
复制链接

扫一扫