jquery 插件编写.ppt

jQuery插件编写 编写方法： 1.通过$.extend()来扩展 jQuery 2.通过$.fn 向 jQuery 添加新的方法 3.通过$.widget()应用 jQuery UI 的部件工 厂方式创建 1. $.extend()简单，方便，但由于无法利用jQuery强大的选择器带来的便利，所以只用此方法开发一些简单的辅助性方法。如下例所示： 2. $.widget()用来开发更高级jQuery部件的，不会，有兴趣的自己可以看看。 3.$.fn.xxx = function(){}这种方法使用的比较多，现在绝大多数jquery插件都是用此方法开发的，这里详细描述下此方法。 基本格式： 基本上就是往$.fn上面添加一个方法，方法名就是我们的插件名字，调用时只要使用$(‘xxx’).helloWorld()或者$.fn.helloWorld()就可以了，如下： 当然，不推荐$.fn.helloWorld()这种调用方式。 再来看一个例子： 这里说一下this。this指代jquery选择器选择出的对象，也就是$(‘#h1’)这个对象，所以我们可以this.css()来改变颜色。在插件编写中灵活使用this，会很方便。但是this有时会指代一个jquery集合，如下： 上例中，出现了两个this，第一个this指$(‘.h1’)这个jquery集合，第二个this至具体的.h1的元素，此时this是object HtmlDivElement，并不是jquery对象。 支持链式调用 在jquery中，你会经常看到这种调用方式： 这就是jquery的链式调用，不管调用几次，最后返回的都是选择器选择的jquery对象，为了不破坏这种链式，我们在自己的插件中要这样做： 这样就支持链式调用了。 当然，作为一个插件，参数肯定是要能自定义的，所以接受参数的功能必不可少。 这里注意$.extend(),它的意思是后面无限多个对象叠加到第一个对象上，对第一个对象进行扩展，如果字段相同，则覆盖，特别注意，第一个对象给了个空对象，这是为了保护默认参数不被破坏。 面向对象的插件开发 好处：1. 方便维护，条理清晰，特别是在代码规模较大的时候尤其明显。 2. 不会污染外部命名空间，因为变量名和方法名都在对象内部。 如何写： 1. 首先用自调用匿名函数来包裹我们要写的代码，自调用匿名函数一般有如下写法 不管哪种写法，都是告诉浏览器自动运行这个匿名函数，这样我们就有了一个自己的命名 空间，不会污染全局的命名空间了。 2.然后定义一个函数对象，对象名首字母要大写，插件编写模式大体如下： 注意事项：1.在自调用匿名函数前加一个‘；’，这样做的目的是为了防止别人在用的插件，进行代码压缩时出错。