《jQuery插件开发资料》由会员分享，可在线阅读，更多相关《jQuery插件开发资料（9页珍藏版）》请在金锄头文库上搜索。
1、 北京阿博泰克北大青鸟信息技术有限公司 jQuery 插件开发 目录 1 类级别的插件开发 2 1 1 添加一个新的全局函数 2 1 2 增加多个全局函数 2 1 3 使用 jQuery extend object 2 1 4 使用命名空间 3 2 对象级别的插件开发 3 2 1 在 JQuery 名称空间下申明一个名字 4 2 2 接受 options 参数以控制插件的行为 4 2 3 暴露插件的默认设置 5 2 4 适当的暴露一些函数 5 2 5 保持私有函数的私有性 6 2 6 支持 Metadata 插件 7 2 7 整合 8 3 总结 9 3 1 jQuery fn extend o
2、bject 9 3 2 jQuery extend object 9 北京阿博泰克北大青鸟信息技术有限公司 jQuery 插件的开发包括两种 一种是类级别的插件开发 即给 jQuery 添加新的全局函数 相当于给 jQuery 类本身添 加方法 jQuery 的全局函数就是属于 jQuery 命名空间的函数 另一种是对象级别的插件开 发 即给 jQuery 对象添加方法 下面就两种函数的开发做详细的说明 1 类级别的插件开发类级别的插件开发 类级别的插件开发最直接的理解就是给 jQuery 类添加类方法 可以理解为添加静态方法 典型的例子就是 AJAX 这个函数 将函数定义于 jQuery 的
3、命名空间中 关于类级别的插 件开发可以采用如下几种形式进行扩展 1 1 添加一个新的全局函数添加一个新的全局函数 添加一个全局函数 我们只需如下定义 JavaScript 代码 1 jQuery foo function 2 alert This is a test This is only a test 3 1 2 增加多个全局函数增加多个全局函数 添加多个全局函数 可采用如下定义 JavaScript 代码 1 jQuery foo function 2 alert This is a test This is only a test 3 4 jQuery bar function par
4、am 5 alert This function takes a parameter which is param 6 调用时和一个函数的一样的 jQuery foo jQuery bar 或者 foo bar bar 1 3 使用使用 jQuery extend object JavaScript 代码 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 北京阿博泰克
5、北大青鸟信息技术有限公司 1 4 使用命名空间使用命名空间 虽然在 jQuery 命名空间中 我们禁止使用了大量的 javaScript 函数名和变量名 但是仍然不可避免 某些函数或变量名将于其他 jQuery 插件冲突 因此我们习惯将一些方法封装到另一个自定义的命名空间 JavaScript 代码 jQuery myPlugin foo function alert This is a test This is only a test bar function param alert This function takes a parameter which is param 采用命名空间的
6、函数仍然是全局函数 调用时采用的方法 myPlugin foo myPlugin bar baz jQuery myPlugin foo function alert This is a test This is only a test bar function param alert This function takes a parameter which is param 采用命名空间的函数仍然是全局函数 调用时采用的方法 myPlugin foo myPlugin bar baz 通过这个技巧 使用独立的插件名 我们可以避免命名空间内函数的冲突 2 对象级别的插件开发对象级别的插件开发
7、 对象级别的插件开发需要如下的两种形式 形式 1 JavaScript 代码 function fn extend pluginName function opt callback Our plugin implementation code goes here jQuery 形式 2 JavaScript 代码 function fn pluginName function Our plugin implementation code goes here jQuery 上面定义了一个 jQuery 函数 形参是 函数定义完成之后 把 jQuery 这个实参传递进去 立即调用执 行 这样的好处
8、是 我们在写 jQuery 插件时 也可以使用 这个别名 而不会与 prototype 引起冲突 2 1 在在 JQuery 名称空间下申明一个名字名称空间下申明一个名字 这是一个单一插件的脚本 如果你的脚本中包含多个插件 或者互逆的插件 例如 fn doSomething 和 fn undoSomething 那么你需要声明多个函数名字 但是 通常当我 们编写一个插件时 力求仅使用一个名字来包含它的所有内容 我们的示例插件命名为 highlight JavaScript 代码 fn hilight function Our plugin implementation code goes he
9、re 我们的插件通过这样被调用 myDiv hilight 但是如果我们需要分解我们的实现代码为多个函数该怎么办 有很多原因 设计上的需要 这样做更容易 或更易读的实现 而且这样更符合面向对象 这真是一个麻烦事 把功能实现分解成多个函数而不增加多余 的命名空间 出于认识到和利用函数是 javascript 中最基本的类对象 我们可以这样做 就像其他对象一 样 函数可以被指定为属性 因此我们已经声明 hilight 为 jQuery 的属性对象 任何其他的属性或者函 数我们需要暴露出来的 都可以在 hilight 函数中被声明属性 稍后继续 2 2 接受接受 options 参数以控制插件的行为
10、参数以控制插件的行为 让我们为我们的插件添加功能指定前景色和背景色的功能 我们也许会让选项像一个 options 对象传递 给插件函数 例如 JavaScript 代码 plugin definition fn hilight function options var defaults foreground red background yellow Extend our default options with those provided var opts extend defaults options Our plugin implementation code goes here 我们
11、的插件可以这样被调用 myDiv hilight 北京阿博泰克北大青鸟信息技术有限公司 foreground blue 2 3 暴露插件的默认设置暴露插件的默认设置 我们应该对上面代码的一种改进是暴露插件的默认设置 这对于让插件的使用者更容易用较少的代码覆盖 和修改插件 接下来我们开始利用函数对象 JavaScript 代码 plugin definition fn hilight function options Extend our default options with those provided Note that the first arg to extend is an emp
12、ty object this is to keep from overriding our defaults object var opts extend fn hilight defaults options Our plugin implementation code goes here plugin defaults added as a property on our plugin function fn hilight defaults foreground red background yellow 现在使用者可以包含像这样的一行在他们的脚本里 这个只需要调用一次 且不一定要在 r
13、eady 块中调用 fn hilight defaults foreground blue 接下来我们可以像这样使用插件的方法 结果它设置蓝色的前景色 myDiv hilight 如你所见 我们允许使用者写一行代码在插件的默认前景色 而且使用者仍然在需要的时候可以有选择的 覆盖这些新的默认值 覆盖插件缺省的背景颜色 fn hilight defaults foreground blue 使用一个新的缺省设置调用插件 hilightDiv hilight 通过传递配置参数给插件方法来覆盖缺省设置 green hilight foreground green 2 4 适当的暴露一些函数适当的暴露一
14、些函数 这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件 同时让其他人扩展你的插件 例如 我们插件的实现里面可以定义一个名叫 format 的函数来格式化高亮文本 我们的插件现在看起来像这样 默认的 format 方法的实现部分在 hiligth 函数下面 JavaScript 代码 plugin definition fn hilight function options iterate and reformat each matched element return this each function var this this var markup this html cal
15、l our format function markup fn hilight format markup this html markup define our format function fn hilight format function txt return txt 我们很容易的支持 options 对象中的其他的属性通过允许一个回调函数来覆盖默认的设置 这是另外 一个出色的方法来修改你的插件 这里展示的技巧是进一步有效的暴露 format 函数进而让他能被重新定义 通过这技巧 是其他人能够传递他们自己设置来覆盖你的插件 换句话说 这样其他人也能够为你的插件写插 件 考虑到这个篇文
16、章中我们建立的无用的插件 你也许想知道究竟什么时候这些会有用 一个真实的例子是 Cycle 插件 这个 Cycle 插件是一个滑动显示插件 他能支持许多内部变换作用到滚动 滑动 渐变消失等 但是实际上 没有办法定义也许会应用到滑动变化上每种类型的效果 那是这种扩展性有用的地方 Cycle 插件对使用者暴露 transitions 对象 使他们添加自己变换定义 插件中定义就像这样 fn cycle transitions 这个技巧使其他人能定义和传递变换设置到 Cycle 插件 2 5 保持私有函数的私有性 保持私有函数的私有性 这种技巧暴露你插件一部分来被覆盖是非常强大的 但是你需要仔细思考你实现中暴露的部分 一但被暴 露 你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性 一个通理是 如果你不能肯 定是否暴露特定的函数 那么你也许不需要那样做 那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢 这就是闭包的功能 为了演示 我们将 会添加另外一个 debug 函数到我们的插件中 这个 debug 函数将为输出被选中的元素格式到 firebug 控制台 为了创建一个
