jQuery高级篇 简单几招学会如何制作jQuery插件

 

jQuery高级篇 简单几招学会如何制作jQuery插件

在使用jQuery[write less，do more]开发过程中我们会总结出很多非常实用的方法或函数，这些是我们工作中不可或缺的一部分，如果你有分享精神，愿意把你的实用方法或函数与全世界jQuery使用者共享，那把这些方法或函数制作成一个插件吧！本文将以实例的方式谈谈如何制作jQuery插件，或许你会有很多的收获。

以dataForAjax插件为例[dataForAjax实例下载或查看dataForAjax在线实例]

第一招，制作一个什么样的插件

你打算制作一个什么样的插件，你知道它能拿来做什么？这是你制作jQuery插件的前提，回答好三个问题：制作什么插件，有什么用，怎么样？

实例说明：在使用jQuery.ajax提交表单时，需要获取表单数据data，如果一个一个获取表单数据非常麻烦，如jQuery('username').val()获取用户名等，制作一个可获取表单数据的插件，在使用jQuery.ajax提交时获取表单数据。

第二招，jQuery插件文件命名

给你的jQuery插件命一个名称，然后去jQuery官网http://plugins.jquery.com/查查是否有相同的插件，这很重要，如果已经存在类似的插件，或改进或换名(建议如果有的话就好好参考一个别人的，也许你的比它更好)，文件命名jquery.[你的插件名].js，如：jquery.dataForAjax.js。

第三招，书写插件代码

一，jQuery插件架构

现在正式开始你的插件代码书写，使用如下格式(参考)

1. jQuery.fn.[第二招里的插件名称] = function(options){
2. 这里是你插件代码部分 this
3. }

实例说明：

1. jQuery.fn.dataForAjax = function(options){
2. 这里是你插件代码部分 this
3. }

二，如何传入参数和参数的使用

如果需要传入参数如上options，可以是数组，字符等

使用jQuery内置jQuery.extend扩展jQuery对象本身这个方法，如dataForAjax插件需要传入两个参数，一个显示错误提示的ID(字符)和错误提示信息(数组)，实现方法如下：

1. setting = jQuery.extend({
2. showMessage:'showmessage',
3. message:message,
4. },options);

可设置默认值，如上的showMessage的默认ID为showmessage，message表示数组，默认为空。
当然，如果参数非常少，你可以直接传入参数

传入的参数如何使用？

使用参数非常简单，直接引用setting.showMessage

接下来就开始你的jQuery插件代码书写过程!

注意事项：
1，this对象
其中this对象，表示当前的引用对象，实例说明如下：

1. <div id="biuuu"></div>

1. jQuery("#biuuu").dataForAjax(options)

那么this就表示代表<div id="biuuu"></div>这个对象

2，学会this.each使用
循环获取每一个对象

3，尽量把$替换成jQuery，考虑通用性和冲突

第四招，测试jQuery插件

当你的插件书写完成后，就需要测试一下你的插件，在不同的浏览器下进行测试，如：IE7、IE8、Firefox、Safari、Google Chrome和Opera等等。

第五招，发布jQuery插件

1，打开jQuery.com
2，新注册一个用户http://plugins.jquery.com/user
3，增加一个插件，注意选好分类(ajax、Animation and Effects、Browser Tweaks等等)，插件名称，插件介绍等等
4，上传JS文件，如果条件允许可以制作一个在线演示页面(可增加你的网站访问哦)，同时你也可以发布在http://code.google.com中
5，是否还需要继续完善，并改进BUG和优化
6，版本完善(有改进或修复可以增加版本方式进行)

总结
通过上面几个步骤，学会如何制作一个jQuery插件，是不是觉得非常简单，那还等什么，开始你的jQuery插件之旅吧！

 

 

原创文章如转载，请注明：转载自 必优博客 http://www.biuuu.com/

本文链接地址：http://www.biuuu.com/p846.html