下载文档原格式
web前端培训教程：jQuery插件库插件(Plugin)也成为jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。
目前jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。
而对于jQuery 开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。
一．插件概述插件是以jQuery 的核心代码为基础，编写出复合一定规范的应用程序。
也就是说，插件也是jQuery 代码，通过js 文件引入的方式植入即可。
插件的种类很多，主要大致可以分为：UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
引入插件是需要一定步骤的，基本如下：1.必须先引入jquery.js 文件，而且在所有插件之前引入；2.引入插件；3.引入插件的周边，比如皮肤、中文包等。
二．验证插件Validate.js 是jQuery 比较优秀的表单验证插件之一。
这个插件有两个js 文件，一个是主文件，一个是中文包文件。
使用的时候，可以使用min 版本；在这里，为了教学，我们未压缩版本。
验证插件包含的两个文件分别为：jquery.validate.js 和jquery.validate.messages_zh.js。
//HTML 内容<script type="text/javascript" src="jquery.validate.js"></script><script type="text/javascript" src="jquery.validate.messages_zh.js"></script> <form><p>用户名：<input type="text" class="required" name="username" minlength="2" />*</p><p>电子邮件：<input type="text" class="required email" name="email" /> *</p><p>网址：<input type="text" class="url" name="url" /></p><p><input type="submit" value="提交" /></p></form>//jQuery 代码$(function () { $('form').validate();});只要通过form 元素的jQuery 对象调用validate()方法，就可以实现“必填”、“不能小于两位”、“电子邮件不正确”、“网址不正确”等验证效果。
jQuery插件开发的流程（你有没有封装过jQuery插件，你怎么实现的）需求：为了在jquery对象的原型上添加一个方法，该方法能实现jquery源码没有实现的功能。
这样，用jquery 选择器选择的dom对象就可以直接调用该方法，实现相应的业务逻辑。
一、外部包裹自运行函数1、首先所有的代码应该用一个自执行函数包裹（为了避免全局变量的污染）2、在自执行函数前最好加一个; ( ! ) (为了和前面加载的js进行分隔，避免出错)3、把window, document , jQuery 这些全局变量传入自运行函数中，使其成为局部变量，从而提高执行速度。
二、构建自定义对象要把插件扩展的方法要完成的业务逻辑以构造函数+原型的方式封装到一个自定义对象中1、把对象需要的属性构建在构造函数中2、把对象需要的方法构建在原型上3、对象要预留接口，允许用户传入自定义的设置（1）this.defauts : 默认设置（2）构造函数允许从外部传入配置opt（3）用$.extend()方法把默认设置和用户自定义设置进行合并（如果用户没有传入相应的配置，则使用默认值，如果传入，则使用用户自定义的值）三、基本自定义对象，实现在jquery的原型上添加新方法1、通过$.fn.myPlugin ,在jquery的原型上添加新方法，这样jquery的所有实例化对象都可以调用该方法，实现自定义对象所构建的功能2、在方法内部：(1)new 出来一个对象的实例化对象,并执行所需的方法(在new的时候,把相应的参数传给构造函数)(2)最后用return 把this返回，从而实现jquery方法的链式调用四、封装后插件的使用（1）先引入jquery.js（2）再引入封装好的jquery插件（3）根据需要，用jquery选择器选择需要实现功能的dom，直接调用插件中的方法。
JavaScript jQuery 插件开发jQuery 插件开发其实很简单jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。
【基础】a)样式很多人会认为样式是个很复杂的东西，需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI，抛开图片设计不说，其实css也就是那么些属性：position,margin,paddi ng,width,height,left,top,float,border,background...UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。
举个简单的例子，一个简单的页面，马虎的人：复制代码代码如下:<html xmlns="/1999/xhtml"><head><title>Test Page</title></head><body>jQuery是一个框架！压缩后有30多k吧。
</body></html>细心的人：复制代码代码如下:<html xmlns="/1999/xhtml"><head><title>Test Page</title><style type="text/css">body{font-family:'宋体';font-size:12px;}</style></head><body>jQuery是一个框架！压缩后有30多k吧。
</body></html>专心的人：[Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 我们对比一下三者的UI效果：一目了然，或许很多的站点失去关注正是因为这不起眼的font-family,font-size。
jquery编写插件的⽅法版权声明：作者原创，转载请注明出处！编写插件的两种⽅式:1.类级别开发插件(1%)2.对象级别开发(99%)类级别的静态开发就是给jquery添加静态⽅法，三种⽅式1.添加新的全局函数2.使⽤$.extend(obj)3.使⽤命名空间类级别开发插件（⽤的⾮常少，1%）分别举例：//1.直接给jquer添加全局函数jQuery.myAlert=function (str) {alert(str);};//2.⽤extend()⽅法。
extend是jquery提供的⼀个⽅法，把多个对象合并起来，参数是objectjQuery.extend({myAlert2:function (str1) {alert(str1);},myAlert3:function () {alert(11111);}});//⼀定要注意两种类级别编写插件⽅式书写的区别。
//3.使⽤命名空间(如果不使⽤命名空间容易和其他引⼊的JS库⾥⾯的同名⽅法冲突)jQuery.yuqing={myAlert4:function (str) {alert(str);},centerWindow:function (obj) {obj.css({'top':($(window).height()-obj.height())/2,'left':($(window).width()-obj.width())/2});//必须进⾏返回对象的操作，否则就不能继续往下进⾏链式操作了。
return obj;}};调⽤部分：//调⽤⾃定义插件⽅法$('#btn').click(function () {$.myAlert('我是调⽤jquery编写的插件弹出的警告框');$.myAlert2('我是调⽤jquery的extend()⽅法编写的插件弹出的警告框');$.myAlert3();$.yuqing.myAlert4("调⽤使⽤了命名空间编写的插件⽅法");});$.yuqing.centerWindow($('#div1')).css('background','red');注意：jquery⽂件要⼀并引⼊。
jQuery插件编写步骤详解如今做web开发，jquery ⼏乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项⽬⾥了。
⾄于使⽤jquery好处这⾥就不再赘述了，⽤过的都知道。
今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三⽅插件，有时我们写好了⼀个独⽴的功能，也想将其与jquery结合起来，可以⽤jquery链式调⽤，这就要扩展jquery，写成插件形式了，如下⾯就是⼀个简单扩展Jquery对象的demo：1 2 3 4 5 6 7 8 9 10 11//sample:扩展jquery对象的⽅法，bold()⽤于加粗字体。
(function($) {$.fn.extend({"bold": function() {///<summary>/// 加粗字体///</summary>return this.css({ fontWeight: "bold"});}});})(jQuery);调⽤⽅式：这是⼀个⾮常简单的扩展。
接下来我们⼀步步来解析上⾯的代码。
⼀、jquery的插件机制为了⽅便⽤户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()⽅法。
1. jQuery.extend() ⽅法有⼀个重载。
jQuery.extend(object) ,⼀个参数的⽤于扩展jQuery类本⾝，也就是⽤来在jQuery类/命名空间上增加新函数，或者叫静态⽅法，例如jQuery内置的 ajax⽅法都是⽤jQuery.ajax()这样调⽤的，有点像 "类名.⽅法名" 静态⽅法的调⽤⽅式。
下⾯我们也来写个jQuery.extend(object)的例⼦：12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19//扩展jQuery对象本⾝jQuery.extend({"minValue": function(a, b) {///<summary>/// ⽐较两个值，返回最⼩值///</summary>return a < b ? a : b;},"maxValue": function(a, b) {///<summary>/// ⽐较两个值，返回最⼤值///</summary>return a > b ? a : b;}});//调⽤var i = 100; j = 101;var min_v = $.minValue(i, j); // min_v 等于 100 var max_v = $.maxValue(i, j); // max_v 等于 101重载版本：jQuery.extend([deep], target, object1, [objectN])⽤⼀个或多个其他对象来扩展⼀个对象，返回被扩展的对象。
JQuery插件教程.txt我很想知道，多少人分开了，还是深爱着。
ゝ自己哭自己笑自己看着自己闹。
你用隐身来躲避我丶我用隐身来成全你！待到一日权在手，杀尽天下负我狗。
jQuery 插件开发全解析jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。
jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。
下面就两种函数的开发做详细的说明。
1、类级别的插件开发类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。
典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。
关于类级别的插件开发可以采用如下几种形式进行扩展：1.1 添加一个新的全局函数添加一个全局函数，我们只需如下定义：jQuery.foo = function() {alert('This is a test. This is only a test.');};调用的时候可以这样写：jQuery.foo(); 或$.foo();1.2 增加多个全局函数添加多个全局函数，可采用如下定义：jQuery.foo = function() {alert('This is a test. This is only a test.');};jQuery.bar = function(param) {alert('This function takes a parameter, which is "' + param + '".');};调用时和一个函数的一样的:jQuery.foo(); jQuery.bar(); 或者$.foo(); $.bar('bar');1.3 使用jQuery.extend(object);jQuery.extend({foo: function() {alert('This is a test. This is only a test.');},bar: function(param) {alert('This function takes a parameter, which is "' + param +'".');}});调用时和一个函数的一样的:jQuery.foo(); jQuery.bar(); 或者$.foo(); $.bar('bar');1.4 使用命名空间虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名，通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。
jQuery插件开发原文地址: jQuery插件开发关于jQuery插件的开发自己也做了少许研究，自己也写过多个插件，在自己的团队了也分享过一次关于插件的课。
开始的时候整觉的很复杂的代码，现在再次看的时候就清晰了许多。
这里我把我自己总结出来的东西分享出来，帮助那些和我一样曾经遇到过同样问题的人。
我要做什么我想要得到的javascript 插件应该会有以下几个特征代码相对独立链式操作插件可配置有可操作的方法，插件的生命周期可控制配置可被缓存可扩展无冲突处理事件代理，动态初始化* 以下的代码均假设存在jQuery插件的第一形态面对这种情况，通常我们会通过定义function的方式来实现。
function pluginName($selector){$.each($selector, function () {$(this).css("background-color", "#ccc");// to do something...});}// pluginName(document.getElementsByClassName("demo"));因为我谈的是jQuery插件开发，那么我现在把这段代码扩展到jQuery上，代码如下：// IIFE(立即调用函数表达式); [参考/blog/1981591/];(function ($) {// 扩展这个方法到jQuery.// $.extend() 是吧方法扩展到$ 对象上，和$.fn.extend 不同。
扩展到$.fn.xxx 上后，// 调用的时候就可以是$(selector).xxx()$.fn.extend({// 插件名字pluginName: function () {// 遍历匹配元素的集合// 注意这里有个"return"，作用是把处理后的对象返回，实现链式操作return this.each(function () {// 在这里编写相应的代码进行处理});}});// 传递jQuery到内层作用域去, 如果window,document用的多的话, 也可以在这里传进去.// })(jQuery, window, document, undefined);})(jQuery, undefined);// 调用方式$(".selector").pluginName().otherMethod();但是还差的远，目前只解决了两个问题代码相对独立链式操作插件可配置有可操作的方法，插件的生命周期可控制配置可被缓存可扩展无冲突处理事件代理，动态初始化插件的第二形态现在来给插件添加参数支持。
编写jquery弹出框插件弹出框插件在web开发中经常用到，下面我就讲解一个box弹出框的制作弹出框插件的制作几个步骤1.配置弹出框信息2.执行默认是否弹出信息3.启动之前设置插件位置4.显示弹出框窗口5.在弹出框窗口绑定事件6.绑定拖拽事件7.绑定关闭事件下面我就用代码来编写这个7个步骤的实现,从而来建立一个弹出框。
1.配置弹出框信息//弹出框基本配置信息和样式var default={boxUrl:"box/", //弹出窗口链接地址opacity:0.5, //背景透明度callBack:null, //是否有回调命令noTitle:false, //是否有标题show:false, //默认是否显示timeout:0 //弹出框消失时间target:null, //目标requestType:null, //设置弹出框请求类型title:"Title", //设置标题名词drag:true, //是否可以拖拽ifreameWH:{ //ifream设置高度和宽度width:400,height:300},html:'' //弹出框内容}//传递参数和默认参数合并this.options = $.extend({},defaults, options);//弹出对话框颜色var boxHtml ='<div id="wBox"><div class="wBox_popup"><table><tbody><tr><td class="wBox_tl"/><td class="wBox_b"/><td class="wBox_tr"/></tr><tr><td class="wBox_b"><div style="width:10px;"> </div></td><td><div class="wBox_body">' +(_this.options.noTitle ? '' : '<table class=" wBox_title"><tr><td class="wBox_dragTitle"><div class="wBox_itemTitle">' + _this.option s.title + '</div></td><td width="20px" title="关闭"><div class="wBox_close"></div></td></tr></ta ble> ') +'<div class="wBox_content" id="wBoxContent">< /div></div></td><td class="wBox_b"><div style="width:10p x;"> </div></td></tr><tr><td class="wBox_bl"/><td class= "wBox_b"/><td class="wBox_br"/></tr></tbody></table></di v></div>',//背景background = null,//内容content = null,$win = $(window),$_this=this;$this=$(this);2.执行默认是否弹出信息//是否默认弹出$win.resize(function{setPosition();})_this.options.show?_this.showBox():$t.click(function(){_this.showBox();return false;});return this;3.启动之前设置插件位置//设置弹出框的位置function setPosition(){//如果弹出窗口没有内容就可以不设置高度if(!content){return false;}//得到当前DOM节点的高度var width=content.width(),//调整未知lt=calPosition(width);content.css({left:lt[0];top:lt[1]});//得到body的高度var$bheight=$("body").height();//得到window窗口的高度var$wheight=$win.height();//得到html页面的高度$hheight=$("html").height();//得到最大的高度$h=Math.max($hheith,$wheight);//设置背景的高度和宽度background.height($h).width($win.width());}//计算弹出框位置function calPosition(w){l=($win.width()-w)/2;t=$win.scrollTop()+$win.height()/9;return[l,t];}4.显示弹出框窗口this.showBox=function(){//移掉wBox_overlay的DOM节点$("#wBox_ovrlay").remove();//移掉WBox的DOM节点$("#wBox").remove();//将背景先隐藏掉然后添加css并且设置透明度最后加载多body下面//最后出现backgroud=$("<div id='wBox_overlay' class='wBox_hide'> </div>").hide().addClass('wBox_overlayBG').css('opacity',_this.options.opacity).dblclick(function(){_this.close();}).appendTo('body').fadeIn(300);//将内容加入到body里面//注意appendTo的顺序不能先加载内容再加载背景content=$(wBoxHtml).appendTo('body');//绑定点击事件handleClick();}5.在弹出框窗口绑定事件/*** 处理点击* @param {string} what*/function handleClick(){var con = C.find("#wBoxContent");if (_this.YQ.requestType && $.inArray(_this.YQ.r equestType,['iframe', 'ajax','img'])!=-1) {con.html("<div class='wBox_load'><div id='wB ox_loading'><img src='"+_this.YQ.wBoxURL+"loading.gif' /> </div></div>");if (_this.YQ.requestType === "img") {var img = $("<img />");img.attr("src",_this.YQ.target);img.load(function(){img.appendTo(con.empty());setPosition();});}elseif (_this.YQ.requestType === "ajax") {$.get(_this.YQ.target, function(data) {con.html(data);C.find('.wBox_close').click(_this. close);setPosition();})}else{ifr = $("<iframe name='wBoxIframe' sty le='width:"+ _this.YQ.iframeWH.width + "px;height: "+ _this.YQ.iframeWH.height + "px;'scrolling='auto' frameborder='0' src=' "+ _this.YQ.target + "'></iframe>");ifr.appendTo(con.empty());ifr.load(function(){try {$it = $(this).contents();$it.find('.wBox_close').click(_ this.close);fH = $it.height();//iframe heig htfW = $it.width();w = $win;newW = Math.min(w.width() - 40, fW);newH = w.height() - 25 -(_this.YQ.noTitle ? 0 : 30);newH = Math.min(newH, fH);if (!newH)return;var lt = calPosition(newW);C.css({left: lt[0],top: lt[1]});$(this).css({height: newH,width: newW});}catch (e) {}});}}elseif (_this.YQ.target) {$(_this.YQ.target).clone(true).show().app endTo(con.empty());}elseif (_this.YQ.html) {con.html(_this.YQ.html);}else{$t.clone(true).show().appendTo(con.em pty());}afterHandleClick();}/** 处理点击之后的处理*/function afterHandleClick(){setPosition();C.show().find('.wBox_close').click(_this.close). hover(function(){$(this).addClass("on");}, function(){$(this).removeClass("on");});$(document).unbind('keydown.wBox').bind('keydow n.wBox', function(e){if (e.keyCode === 27)_this.close();return true});typeof_this.YQ.callBack === 'function' ? _this. YQ.callBack() : null;!_this.YQ.noTitle&&_this.YQ.drag?drag():null;if(_this.YQ.timeout){setTimeout(_this.close,_this.YQ.timeout);}}6.绑定拖拽事件/** 拖拽函数drag*/function drag(){var dx, dy, moveout;var T = C.find('.wBox_dragTitle').css('cursor', 'move'); T.bind("selectstart", function(){return false;});T.mousedown(function(e){dx = e.clientX - parseInt(C.css("left"));dy = e.clientY - parseInt(C.css("top"));C.mousemove(move).mouseout(out).css('opacity', 0.8); T.mouseup(up);});/** 移动改变生活* @param {Object} e 事件*/function move(e){moveout = false;if (e.clientX - dx < 0) {l = 0;}elseif (e.clientX - dx > $win.width() - C.width()) {l = $win.width() - C.width();}else {l = e.clientX - dx}C.css({left: l,top: e.clientY - dy});}/** 你已经out啦！* @param {Object} e 事件*/function out(e){moveout = true;setTimeout(function(){moveout && up(e);}, 10);}/** 放弃* @param {Object} e事件*/function up(e){C.unbind("mousemove", move).unbind("mouseout", out). css('opacity', 1);T.unbind("mouseup", up);}}7.绑定关闭事件/** 关闭弹出框就是移除还原*/this.close=function(){if (C) {B.remove();C.stop().fadeOut(300, function(){C.remove();})}}。
目录jQuery插件开发教程 (1)jQuery插件开发模式 (1)插件开发 (3)基本方法 (3)支持链式调用 (6)让插件接收参数 (6)保护好默认参数 (8)面向对象的插件开发 (9)关于命名空间 (12)用自调用匿名函数包裹你的代码 (12)将系统变量以变量形式传递到插件内部 (14)关于变量定义及命名 (17)代码混淆与压缩 (18)压缩的好处 (18)工具 (19)插件发布 (19)GitHub Service Hook操作说明 (21)附言： (23)jQuery插件开发教程——让你的jQuery水平提升一个台阶要说jQuery 最成功的地方，我认为是它的可扩展性吸引了众多开发者为其开发插件，从而建立起了一个生态系统。
这好比大公司们争相做平台一样，得平台者得天下。
苹果、微软、谷歌等巨头，都有各自的平台及生态圈。
学会使用jQuery并不难，因为它简单易学，并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。
如果想将能力提升一个台阶，编写一个属于自己的插件是个不错的选择。
本教程可能不是最精品的，但一定是最详细的。
jQuery插件开发模式软件开发过程中是需要一定的设计模式来指导开发的，有了模式我们就能更好地组织我们的代码，并且从这些前辈们总结出来的模式中学到很多好的开发经验。
根据《jQuery高级编程》中的描述，jQuery插件开发方式主要有三种：1、通过$.extend()来扩展jQuery2、通过$.fn 向jQuery添加新的方法3、通过$.widget()应用jQuery UI的部件工厂方式创建通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。
第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存、各种关于插件的常用方法等，非常贴心，这里不细说。
而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成在jQuery身上添加了一个静态方法而以。
jQuery插件开发全解析jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。
jQuery 的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。
下面就两种函数的开发做详细的说明。
1、类级别的插件开发类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。
典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。
关于类级别的插件开发可以采用如下几种形式进行扩展：1.1 添加一个新的全局函数添加一个全局函数，我们只需如下定义：Javascript代码1jQuery.foo = function() {2alert('This is a test. This is only a test.');3};1.2 增加多个全局函数添加多个全局函数，可采用如下定义：Javascript代码4jQuery.foo = function() {5alert('This is a test. This is only a test.');6};7jQuery.bar = function(param) {8alert('This function takes a parameter, which is "' + param + '".');9};10调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');1.3 使用jQuery.extend(object);Javascript代码11jQuery.extend({12foo: function() {13alert('This is a test. This is only a test.');14},15bar: function(param) {16alert('This function takes a parameter, which is "' + param +'".');17}18});1.4 使用命名空间虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。
但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
Javascript代码19jQuery.myPlugin = {20foo:function() {21alert('This is a test. This is only a test.');22},23bar:function(param) {24alert('This function takes a parameter, which is "' + param + '".');25}26};27采用命名空间的函数仍然是全局函数，调用时采用的方法：28$.myPlugin.foo();29$.myPlugin.bar('baz');通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。
2、对象级别的插件开发对象级别的插件开发需要如下的两种形式：、形式1：Javascript代码30(function($){31$.fn.extend({32pluginName:function(opt,callback){33// Our plugin implementation code goes here.34}35})36})(jQuery);形式2：Javascript代码37(function($) {38$.fn.pluginName = function() {39// Our plugin implementation code goes here.40};41})(jQuery);上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。
这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.2.1 在JQuery名称空间下申明一个名字这是一个单一插件的脚本。
如果你的脚本中包含多个插件，或者互逆的插件（例如： $.fn.doSomething() 和$.fn.undoSomething()），那么你需要声明多个函数名字。
但是，通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。
我们的示例插件命名为“highlight“Javascript代码42$.fn.hilight = function() {43// Our plugin implementation code goes here.44};45我们的插件通过这样被调用：46$('#myDiv').hilight();但是如果我们需要分解我们的实现代码为多个函数该怎么办？有很多原因：设计上的需要；这样做更容易或更易读的实现；而且这样更符合面向对象。
这真是一个麻烦事，把功能实现分解成多个函数而不增加多余的命名空间。
出于认识到和利用函数是Javascriptscript中最基本的类对象，我们可以这样做。
就像其他对象一样，函数可以被指定为属性。
因此我们已经声明“hilight”为jQuery的属性对象，任何其他的属性或者函数我们需要暴露出来的，都可以在"hilight" 函数中被声明属性。
稍后继续。
2.2 接受options参数以控制插件的行为让我们为我们的插件添加功能指定前景色和背景色的功能。
我们也许会让选项像一个options对象传递给插件函数。
例如：Javascript代码47// plugin definition48$.fn.hilight = function(options) {49var defaults = {50foreground: 'red',51background: 'yellow'52};53// Extend our default options with those provided.54var opts = $.extend(defaults, options);55// Our plugin implementation code goes here.56};57我们的插件可以这样被调用：58$('#myDiv').hilight({59foreground: 'blue'60});2.3 暴露插件的默认设置我们应该对上面代码的一种改进是暴露插件的默认设置。
这对于让插件的使用者更容易用较少的代码覆盖和修改插件。
接下来我们开始利用函数对象。
Javascript代码61// plugin definition62$.fn.hilight = function(options) {63// Extend our default options with those provided.64// Note that the first arg to extend is an empty object -65// this is to keep from overriding our "defaults" object.66var opts = $.extend({}, $.fn.hilight.defaults, options);67// Our plugin implementation code goes here.68};69// plugin defaults - added as a property on our plugin function70$.fn.hilight.defaults = {71foreground: 'red',72background: 'yellow'73};74现在使用者可以包含像这样的一行在他们的脚本里：75//这个只需要调用一次，且不一定要在ready块中调用76$.fn.hilight.defaults.foreground = 'blue';77接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：78$('#myDiv').hilight();如你所见，我们允许使用者写一行代码在插件的默认前景色。
而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值：// 覆盖插件缺省的背景颜色$.fn.hilight.defaults.foreground = 'blue';// ...// 使用一个新的缺省设置调用插件$('.hilightDiv').hilight();// ...// 通过传递配置参数给插件方法来覆盖缺省设置$('#green').hilight({foreground: 'green'});2.4 适当的暴露一些函数这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同时让其他人扩展你的插件）。
例如，我们插件的实现里面可以定义一个名叫"format"的函数来格式化高亮文本。
我们的插件现在看起来像这样，默认的format方法的实现部分在hiligth函数下面。
Javascript代码79// plugin definition80$.fn.hilight = function(options) {81// iterate and reformat each matched element82return this.each(function() {83var $this = $(this);84// ...85var markup = $this.html();86// call our format function87markup = $.fn.hilight.format(markup);88$this.html(markup);89});90};91// define our format function92$.fn.hilight.format = function(txt) {93return'<strong>' + txt + '</strong>';94};我们很容易的支持options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。
