jQuery插件开发

1. 使用闭包：

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

　　

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

a) 避免全局依赖。

b) 避免第三方破坏。

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

 

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

var jq = function($) {
  // Code goes here
};
jq(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插件开发代码如下：

jsCode

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.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 () { 
	$("div").height({ color: 'black' }); 
}); 
</script>
<div style="border:4px dashed #ccc;margin:100px;padding:50px;">click me</div>

　　

页面效果：

 

 文章参考：https://www.cnblogs.com/yxlwb/p/6625878.html