jQuery插件开发

1.规范

当咱们画出了UI以后就能够正式编写jQuery插件代码了，不过在着以前咱们还须要对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)之类的方式。

 

1.2编写JQuery插件须要注意的地方： （1）插件的推荐命名方法为：jquery.[插件名].js （2）全部的对象方法都应当附加到JQuery.fn对象上面，而全部的全局函数都应当附加到JQuery对象自己上。 （3）在插件内部，this指向的是当前经过选择器获取的JQuery对象，而不像通常方法那样，内部的this指向的是DOM元素。 （4）能够经过this.each 来遍历全部的元素 （5）全部方法或函数插件，都应当以分号结尾，不然压缩的时候可能会出现问题。为了更加保险写，能够在插件头部添加一个分号（；），以避免他们的不规范代码给插件带来 影响。 （6）插件应该返回一个JQuery对象，以便保证插件的可链式操做。 （7）避免在插件内部使用$做为JQuery对象的别名，而应当使用完整的JQuery来表示。这样能够避免冲突。