jQuery插件开发全解析

所需积分/C币:11 2014-02-12 14:17:55 93KB PDF
收藏 收藏
举报

jQuery插件开发解析。可以简单的让新手了解熟悉jQuery的插件开发原理和方法。适合新手查阅
foreground: ' blue 2.3暴露插件的默认设置 我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖 和修改插件。接下来我们廾始利用跞数对象 / plugin definition s inhilight= function(options) // Extend our de fault options with those provided 7/ Note that the first arg to extend is ar empty object //this is tc keep from overriding our defaults"object ar opts =s extend((], s Enhilight defaults, options)i // Our plugin implementation code goes here / plugin defaults -added as a property on our plugin function hilight. defaults foreground: red background: ' yellow 现在使用者可以包含像这样的一行在他们的脚本里: //这个只需要调用一次,且不一定要在 ready块中调用 S Enhilight defaults foreground ='blue i 接下来我们可以像这样使用插件的方法,结果它设置蓝色的前景色: s('tmyDivi)h 妇你所见,我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的 覆盖这些新的默认值: /′覆盖插件缺省的背景颜色 s fn hilight defaults foreground lue /′使用一个新的铗省设置调用插件 S(.hilightDiv ).hilichto)i /通过传递配置参数给插件方法来覆盖缺省设置 s(green).hilight( foreground: greer 2.4适当的呆露一些函数 这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件(同刑让其他人扩展你的插件)。例如 我们插件的实现里面可以定义一个名叫" format"的函数来格式化高亮文本。我们的插件现在看起来像这样, 默认的 forma方法的实现部分在hi1ictn函数下面。 // plugin definition s tn hilight =function(options)t // iterate and reformat each matched element return this eaca(function() I var sthis =s(this) var markup sthishtml()i // call our format function markup =s fn hilight format(markup)i sthis, htIl(markup)i }); // define our format function s fn hilight format function(txt)t return ' <strong>I+ txt +I </strong>' 我们很容易的支持 options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。这是另外一个 出色的方法来修改你的插件。这里展示的技巧是进一步有效的暴露 format函数进而让他能被重新定义。道过这 技巧,是其伛人能够传递他们自凵设置来覆盖你的插件,换句话说,这样其他人也能够为你的插件写插件。 考虑到这个篇文章中我们建立的无用的插件,你也许想知道究竟什么时候这些会有用。一个真实的例子是 Cycle 插件这个yle插件是一个滑动显示插件,他能攴持许多内部变换作用到滚动,滑动,渐变消失等。但是实际 上,没有办法定义也许会应用到滑动变化上每种类型的效果。那是这种扩展性有用的地方。 CyCle插件对使用 者暴露" transitions"对象,使他们添加自己变换定义。插件中定义就像这样: s tn cycle. transitions =t 这个技巧使其他人能定义和传递变换设置到 Cycle插件 2.5保持私有函数的私有性 这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔绀思考你实现中暴露的部分。一但被暴 你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的耒容性。一个通理是,如果你不能背 定是否暴露特定的函数,那么你也许不需要那样做 那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢?这就是闭包的功能。为了演示,我们将 会添加另外一个 debug〃函数到我们的插件中。这个 debug函数将为输出被选中的元素格式到 firebug控制 台。为了创建一个闭包,我们将包装整个插件定义在一个函数中。 (function($) 7/ plugin defirition s fn hilight. function(options)t debug (this)i , private function for debugging furction debug(Sobj)t f (window. console & window console. log) window. console.log(hilight selection count: sobj size())i } qUEry)i 我们的 debug"方法不能从外部闭包进入,因此对于我们的实现是私有的 2.6支持 Metadata插件 在你正在写的插件的基础上,添加对 Metadata插件的支持能使他更强大。个人来说,我喜欢这个 Metadata插件,因为它计你使用不多的" markup〃覆盖插件的选项(这非常有用当创建例子时)。而且支持它 非常简单。更新:注释中有一点优化建议 S Enhilight function(options)( // build main options be=ore element iteration var opts =sextend(f1, $. fnhilight defaults, options)i return this eac(function() var sthis $(this) / build element specific options var o=s meta sextend(f), opts, sthis data()): opts 这些变动行做了一些事情:它是测试 Metadata插件是否被安装 如果它被安裟了,它能扩展我们的 options对象通过抽取元数据 这行作为最后一个参数添加到 JQuery. exterd,邦么它将会覆盖任何其它选项设置。现在我们能从" markup 处驱动行为,如果我们选择了" markup markup <div class=hilight i background: red, foreground: white]> Have a nice day! </div> <div class=hilight foreground: orange> da <div class=hilighti background: ' green> Have a nice day! 现在我们能高亮哪些div仅使用一行脚本 (Ihilight).hilight( 2.7整合 卜面使我们的例子完成后的代码: //创建一个闭包 (unction($) t //插件的定义 s fn. hilight- function(options) debug(this)i // build main options before element iteration ar opts =$. extend([], $. fn hilight defaults, options)i A/ iterate and reformat each matched element return this. each(function(i sthis = s(this / build element specific options var o=$meta $. extend((h, opts, sthis data()): opti / update element styles sthis. Css( backgroundcolor: O background, CO⊥or: foreground }); var markup =sthis.html()i // call our format function markup =s Inhilight format(markup)i s七his.htm_( markup); /私有函数: debugging furction debug (sobi)t f (window. console & window console. log) window. console. log( hilight selection count: sobjsize())i /定义暴露 format函数 s fn hilight. format. function(txt) return <strong>'+ txt +'</strcng>' /插件的 de faults S fn.hilight defaults =( foreground: red, background: ye_low /闭包结束 1)(jQuery)i 这段设汁凵经让我创建了强大符合规范的插件。我希望它能让你也能做到。 3、总结 Qery为开发插件提拱了两个方法,分别是: JQuery.fn, extend( object);给 jQuery对象添加方法。 JQuery. extend( object);为扩展 jQuery类本身.为类添加新的方法。 3.1 jQuery. fnextend(object)i fn是什么东西呢。查看 JQuery代码,就不难发现。 jQuery. fn = jQuery prototype =I init: function( selector, context )t// 原来 jQuery.fn= jQuery. prototype.对 prototype肯定不会陌生啦。虽然 Javascript没有 明确的类的概念,但是用类来理解它,会更方便。 jQuery便是一个封裝得非常好的类,比如我们用语句 ("#btn1")会生成一个 jquery类的实例。 Query.fn, extend( object);对 JQuery. rototype进得扩展,就是为 iQuery添加”成员函数 jQuery类的实例可以使用这个N成员函数 比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便a1ert当前编辑柜里的内容。可以这 么做: s. fn extend(t alertwhileclick: function()i s(this). click(function()i lert(s(this).va()i s("# input1"). alertwhilec1ick();//页面上为:< input. id=" input1"type="text"/> s("# input1")为一个 Query实例,当它调用成员方法 dler tWhilec1ick后,便实现了扩展,每次 被点击时它会先弹出目前编辑里的内容。 3.2 jQuery extend(object)i 为jρυery类添加添加类方法,可以理解为添加静态方法。如 s extena( add: function(a, b)return a+bi 便为 jQuery添加个为add的"静态方法〃,之后使叮以在引入 jQuery的地方,使用这个方 法了,$.ada(3,4);// return7

...展开详情
试读 7P jQuery插件开发全解析
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
tdl48109871 不错,很好的资料!
2014-07-29
回复
上传资源赚积分or赚钱
最新推荐
jQuery插件开发全解析 11积分/C币 立即下载
1/7
jQuery插件开发全解析第1页
jQuery插件开发全解析第2页

试读结束, 可继续读1页

11积分/C币 立即下载 >