这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一 个超棒的jQuery插件,很多开发人员都开发了很多不错的jQuery插件,但是对我们这些插件的使用者来说,很多jQuery插件的使用都不是那么直 接和透明。这里的10个技巧能够帮助你将更好的维和和扩展你的jQuery插件。而且对于插件开发来说,如果你有一个非常好的架构,将会给你的开发带来极大的益处。所以在正式开发前,进过深思熟虑还是非常有必要的。
1. 插件开发需要做到独立
这是jQuery插件开发中最让个伤脑筋的事之一。因为我们需要首先考虑。你的插件应该在不需要额外的配置情况下正常工作。因此最小的缺省初始化你的jQuery插件就应该正常工作,如下:
$("#gbin1-container").wTooltip();
一个非常好的例子就是拥有向前/向后按钮的jQuery幻灯展示插件。 我曾经看到过了一些插件要求你配置div和属性id和class,然后要求你通过插件来参考。这样的配置应该在插件内处理,提供可开关的选项
2. 提供缺省的设置
很少有插件不提供任何的配置设定。和前面观点类似,我们肯定需要提供用户一些选项,这样可以帮助用户自己配置自己需要的效果并且扩展需求,更重要的在于帮助你推广你的插件
var gbin1DefaultSettings = {
mode : 'Pencil',
lineWidthMin : '0',
lineWidthMax : '10',
lineWidth : '2'
};
settings = $.extend({}, gbin1DefaultSettings, settings || {});
3. 保证所有的命名都唯一
当创建你的插件的时候,你需要记住一定要使得任何你的插件的参考都唯一,例如,class,id和插件名称。这样能够保证你不会和已经存在的javascript或者CSS代码冲突。
$("#gbin1container").tooltip(); //避免这样使用
$("#gbin1container").wTooltip(); //推荐这样使用
在上面的例子中我们通过添加w来唯一命名我们插件,这样避免和其它的常规命名冲突。同时我们也需要用这种方式来命名CSS,保证一般使用的词语例如,“tab”和“holder”都唯一
_wPaint_button
_wPaint_holder
我同时也添加下划线来确认不会和其它id和class冲突,这种方式能够保证我们开发的插件更强壮。
4. 标准的简略插件布局
下面是一个标准的jQuery插件代码片段,你将会看到大多数的插件都使用这样的格式。包含了所有你需要开发,维护和更新所需要的重要代码内容。帮助你专注于你的代码开发。你可以看看我的jQuery Tooltip插件代码,我使用了一个最小代码量的代码,能够帮助你了解如何将这些代码有效的结合。
var defaultSettings = {
//settings
};
$.fn.wPaint = function(settings)
{
//check for setters/getters
return this.each(function()
{
var elem = $(this);
//run some code here
elem.data("_wPaint", wPaint);
}
//classes/prototyping
}
这里你需要注意五点:
- 缺省的配置需要在插件外面,这样不需要每次都实例化一次
- setter和getter方式并不是必须的,但是需要在每次运行主循环时做检查
- 返回每个元素不能够破坏jQuery方法链流程
- 保存任何数据都使用data(),我们可能在后面的setter和getter中需要使用
- 最后在主循环外面设置任何class/原型
5. 保持你的代码有组织
可能这点儿非常明显,但是在很多插件中都有很多奇怪的配置。对于一个好的插件代码来说,干净简答的结构能够有效的被阅读
./images/
./includes/
./themes/
./wPaint.js
./wPaint.min.js
./wPaint.css
./wPaint.min.css
非常明显,你很容易的就知道哪里去寻找文件或者jQuery类库。
6. 使用Class原型
这本身就是一个非常大的话题,因此这里我只是简单的介绍一下。基本上这里有俩个主要原因:
不实例化分离的拷贝方法就会更好高效,并且运行速度更快
只参考每一个对象方法并且不在每一个中执行拷贝能够保证节省很多内存
function Canvas(settings)
{
this.canvas = null;
this.ctx = null;
}
Canvas.prototype =
{
generate: function()
{
//generate code
}
}
同时也有效组织的你代码并且更加容易重用。在上面例子中只有Canvas对象得到了实例化,其它原型函数只是参考。
7. 提供setter和getter方法
提供setter和getter方法不是必须的,但是提供给需要的开发人员还是有必要的。我们需要做的只是允许插件调用后能够修改插件。基本如下:
if(typeof option === 'object'){
settings = option;
}else if(typeof option === 'string'){
if(
this.data('_wPaint_canvas') &&
defaultSettings[option] !== undefined
){
var canvas = this.data('_wPaint_canvas');
if(settings){
canvas.settings[option] = settings;
return true;
}else{
return canvas.settings[option];
}
}else return false;
}
所有的我们需要做的就是检查选项被设置而不是其它。如果俩个参数都提供了,说明我们设置了,如果只有一个意味着我们要请求指定的选项。
9. 在所有的浏览器中测试
这对于插件开发来说,绝对的重要。你可能对你的代码并不挑剔,但是你的用户肯定关心,如果他们有很多抱怨,你的插件估计很快被替换。例如,我在我的 jQuery color picker插件中发现了一些bug,使得在IE7下完全无法使用。其实只需要一个简答的修复,因为IE7不支持“inline-block”元素。
这个步骤可能在你完成一个插件后显得微不足道。但是最好保证你会花一天时间对你的插件进行浏览器兼容性测试。这个过程中,可能不单单是测试bug,有可能帮助你提升你的插件的用户体验
10. 上传你的插件
很多类似的服务,我推荐Google和Github
可能你不希望公开你的插件,特别如果它是为一个内部项目开发的,但是也需要使用你的内部版本控制软件,以便更好的维护文章和版本。
当然,如果你可以公开你的插件,以上俩个地方是不错的选择,你可以有效的跟踪问题,查看活跃的feed及其下载数量。帮助你有效的和你的用户互动。
分享到:
相关推荐
帮助你生成全屏视频背景的超棒jQuery插件实例,附带源代码
可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里收集了10个超棒超实用的jQuery表单处理代码,希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题,希望...
允许你创建定制的 Tool tips 的 jQuery 插件。 3. EZPZ Tooltip 非常简单的使用边框的 tooltip,同样也可以跟随鼠标。 4. BsTip 各种简单的 tooltips,使用淡入和淡出效果,并且也有边框环绕。 5....
Uploadify是JQuery的一个上传插件,实现的效果非常不错,文档内容详细有条理 特别适合Uploadify初学者 api丰富
NULL 博文链接:https://justcoding.iteye.com/blog/2074425
jQuery超棒动态表单验证效果.zip
超棒的环形菜单效果jQuery插件,效果不错,适合做图片查看
Snippet 是一款超棒的代码高亮插件,支持15种流行语言,有数十种配色方案供选择,酷! Apple-like Retina Effect With jQuery ( 演示 | 下载 ) 使用 jQuery 实现的苹果 Retina 效果插件,很棒! Animate ...
对于初学者来说,有的时候很难找到一个好...非常棒的一个 jQuery 资源和教程网站,帮助你成长为 jQuery 高手。 4. 15 Days of jQuery 这个网站虽然更新不定时,你仍然可以从他们的文章中学到很多东西。 5. jQuery4u
kinetic 是一款超棒的 JavaScript 动态滚动系列的示例和教程集合。在线演示 标签:jQuery
超级棒的前端点赞功能,方便且实用
随着页面扁平化的普及,越来越多的网站都开始使用响应式布局,作为一个优秀的前端工作者,必须要精通的,这里给大家推荐一款响应式布局的jQuery插件。
人物图片皮肤修复工具,效果超棒,更多选项,请下载试用,设计师的必备PHOTOSHOP 插件
有趣的jquery搜索框插件zySearch是一款用户体验超棒,搞笑,新颖搜索框代码。
jQuery插件旋转器 Rotator是一个轻巧且可自定义的jQuery插件,用于通过超棒CSS3动画来旋转文本和文本中的某些单词。 依存关系:
非常实用的特效代码,可以完美运行,可以二次修改!
KINGMAX的超棒U盘,2G大小的,使用的IC是UT165的,慧荣,PID 1307,使用这一个量产工具。运行后在左上角产生好几个按钮,第三个还是第四个,鼠标放上去以后变成CDROM的样子,就那个就是创建USB-CDROM的。