[译] EXTENDING JQUERY – 2.2 A simple plugin

浏览数：23 / 时间：2015年06月09日

2.2 一个简单的插件示例

jQuery 插件能做任何事情，这个已经由浩如烟海的各类第三方插件如证明。小到只影响一个元素，大到改变多个元素的外观和行为，jQuery 的各种功能等你来扩展。

2.2.1 占位文本插件

为了维持一个form 的空间，很多时候一个字段的描述往往是省略的，取而代之的是用一个占位文本。如果这个字段是空的，占位文本将会重新显示。为了更好的用户体验，这个占位文本往往是灰色的，用来区别真正的内容。这个功能有个比较通用的名字叫做水印(watermark)。

占位的文本可以在插件初始化的时候赋值，但是最好允许多个文本框同时赋值。因此input 的title 属性是一个理想的占位文本取值的所在。当该字段获得焦点的时候，你需要移除占位文本并且移除灰色的样式。相应的，当该字段失去焦点的时候，如果值仍然是空白，就需要恢复原来的文字和样式。为了有更好的扩展性，字段的样式需要由css去指定，能够被插件的使用者轻松的重写样式。

2.2.2 Watermark 插件代码

由于这个插件的作用对象是页面上的元素，则是一个集合插件。因此需要扩展$.fn

$.fn.watermark = function (options) {
    //set options
    optoins = $.extend({ watermarkClass: ‘watermark‘ }, options || {});
    //when field is focused
    return this.focus(function () {
        var field = $(this);
        if (field.val() == field.attr(‘title‘)) {
            field.val(‘‘);
            removeClass(options.watermarkClass);
        }
    }).blur(function () {
        var field = $(this);
        if (field.val() == ‘‘) {
            field.val(field.attr(‘title‘)).addClass(options.watermarkClass);
        }
    }).blur();
};

该插件扩展$.fn，声明了$.fn.watermark 使得该插件和jQuery 选择器无缝集成。定义了options 参数的默认值，watermarkClass 和值watermark. 通过extend 方法，允许被重写该属性。||{} 用来确保当options 没有被提供的时候使用默认值。为了允许该插件和其他插件的链式调用，一个关键的jQuery 理念就是function 必须返回当前的集合。由于默认内置的jQuery 方法已经实现了该功能，只需要直接返回内置的方法返回值即可。.blur 就是链式调用的例子。最后触发blur 给字段赋初始值。

这个简单的集合插件给了你一个第一印象。接下去的文章将会讲解一些jQuery 插件开发时候的最佳实践的理念。