插件扩展和 UI 类库

jQuery 的插件扩展

开发 jQuery 插件非常简单，jQuery 对象的原型对象是 jQuery.fn，所以扩展 jQuery 只需要给这个原型对象新增函数即可，该函数会成为一个 jQuery 方法：

jQuery.fn.println = function () {
    var msg = Array.prototype.join.call(arguments, " ");
    this.each(function () {
        jQuery(this).append(document.createTextNode(msg).append("<br/>"));
    });
    return this;
};

关于插件开发的一些约定：

• 不要依赖 $ 标识符
• 如果插件代码不返回自己的值，确保返回 jQuery 对象以便链式调用
• 如果对象有两个以上参数或配置选项，请允许用户使用对象方式传递选项
• 不要污染 jQuery 方法的命名空间
• 如果插件需要绑定事件处理程序，请将这些事件处理程序放在事件命名空间里
• 如果插件需要使用data()方法与元素关联数据，请将所有数据值放在单一对象中
• 用「jquery.plugin.js」这种命名方式将插件代码保存到文件中

插件可以给 jQuery 自身增加函数来添加新的工具函数：

jQuery.debug = function () {
    var elt = jQuery("#debug");
    if (elt.length === 0) {
        elt = jQuery("<div id='debug'><h1>Debugging Output</h1></div>");
        jQuery(document.body).append(elt);
    }
    elt.println.apply(elt, arguments);
};

除此之外，还可以扩展 jQuery 类库的其他部分，比如通过给 jQuery.fx.speeds 添加属性来扩充新的动画时长名，也可以通过给 jQuery.easing 添加属性添加新的缓动函数，甚至可以扩展 jQuery 的 CSS 选择器引擎：

jQuery.expr[:].draggable = function(e) {
    return e.draggable === true;
};

或者看一个更完整的示例 —— :data(x)伪类：

jQuery.expr[:].data = function(element, index, match, array) {
    return element.hasAttribute("data-" + match[3]);
};

其中，第一个参数是候选 DOM 元素，第二个参数是整数序号，表示当前元素在候选元素数组中的位置，候选元素数组是第四个参数，第三个参数是调用 RegExp.exec() 方法后返回的数组，该数组第四个元素是伪类过滤器后面的圆括号中的值。

jQuery UI 类库

jQuery UI 是在 jQuery 基础之上构建的用户界面组件类库：http://jqueryui.com。

jQuery UI 组件和交互功能采用 jQuery 插件的方法构建，每一个都定义了一个 jQuery 方法。要灵活自如地使用 jQuery UI 组件，需要熟悉三样东西：组件地配置项、方法和事件。