Jquery插件开发

  1. Jquery插件开发的三种方式

准备工作:请见我的博客《Jquery对象与DOM对象的转换》


1 通过$.extend()来扩展jQuery

wKioL1hmH_KSvJpaAAAXC1XlDQA185.png

wKioL1hmH82w-rmNAAAnxkpNb2A052.png


2 通过$.fn 向jQuery添加新的方法

wKiom1hmIdPRrYxCAAAZEkTYhG4742.png

此处需要注意:myFunction里面的this是Jquery包装对象。this调用Jquery的each函数,里面的this是DOM对象,如果需要调用Jquery方法,需要先用$()包装。

wKioL1hmIgLTaigsAAA2bY-3PHE479.png3.让插件接收参数

wKiom1hrSGuQgO9sAAAqp9x5oGU233.png

wKioL1hrSlPQx-hCAAANuoCbQTU649.png

当给extend方法传递一个以上的参数时,他会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。

利用这一点,上面的代码就实现了用户指定了值得参数使用指定的值,未指定的参数使用插件默认值。

4 保护好默认参数

注意到上面代码调用extend时会将defaults的值改变,这样不好。一个好的做法是将空对象作为$.extend的第一个参数。

wKiom1hrS2fgVqOAAAAqYQRTK28577.png

5 面向对象的插件开发

希望将需要的重要变量定义到对象的属性上,函数变成对象的方法,当我们需要的时候通过对象来获取。一来方便管理,二来不会影响外部命名空间,因为所有这些变量名和方法名都在对象内部。

wKioL1hrUqDS0U_2AABLoaDjNdw824.png


6 完善代码

关于命名空间:

不仅仅是jQuery插件的开发,我们在写任何JS代码时都应该注意不要污染全局命名空间。因为随着你代码的增多,如果有意无意在全局范围内定义一些变量的话,最后很难维护,也容易跟别人写的代码有冲突。

比如你在代码中向全局window对象添加了一个变量status用于存放状态,同时页面中引用了另一个别人写的库,也向全局添加了这样一个同名变量,最后的结果肯定不是你想要的。所以不到万不得已,一般我们不会将变量定义成全局的。

一个好的做法是始终用自调用匿名函数包裹你的代码,即保持原来的代码不变,我们将所有代码用自调用匿名函数包裹。这样就可以完全放心,安全地将它用于任何地方了,绝对没有冲突。

wKiom1hrU8vi3wtqAABUGafATZg140.png

此外,为防止前面别人写的代码没有用分号结尾,而导致报错,我们的代码无法正常执行。好的做法是我们在代码开头加一个分号,这在任何时候都是一个好的习惯。

wKioL1hrVNHjh6RKAAATs05bDtk668.png

此处可以暂记住:如果有function前面是'('开头的,前面加';'

wKiom1hrVYWilCQdAABVNem-VDk526.png

同时,将系统变量以参数形式传递到插件内部也是个不错的实践。

当我们这样做之后,window等系统变量在插件内部就有了一个局部的引用,可以提高访问速度,会有些许性能的提升

wKioL1hrVlCi6A6uAABcwShjvYo486.png

一个安全,结构良好,组织有序的插件编写完成。

7 代码压缩

。。。

8 插件发布(GitHub)

。。。

未完待续。。。

此篇博客学习资料来自于http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章