`

jquery插件开发规范

阅读更多

在明河真正讲解jquery插件开发进阶教程前,明河觉得很有必要先来说明下jquery插件开发规范,这些规范是明河学习jquery时不断积累下来的,不一定完全正确,甚至于你在开始编写第一个jquery插件时,觉得这些规范毫无意义。如果你有一天编写jquery时突然发现这些规范很有用处,恭喜你,你的水平上升了一个层次!

一、请给你的代码加上注释

明河以前很不喜欢加注释,嫌太麻烦了,这是个非常糟糕的习惯,幸运的是现在明河已经改正了这个不良习惯。

这个世界不存在百分百的完美的jquery插件,注释不止是给别人看、更重要的是给自己看。

你应该把注释当做你代码的一部分,养成随手加注释的习惯,尤其是编写javascript的时候。

1、在全部代码前加上文件说明注释

以下是明河给自己写的yitip插件加的注释:

  1. /**
  2. * $.yitip
  3. * @extends jquery.1.4.2
  4. * @fileOverview 创建文字提示框
  5. * @author 明河共影
  6. * @email mohaiguyan12@126.com
  7. * @site wwww.36ria.com
  8. * @version 0.1
  9. * @date 2010-07-17
  10. * Copyright (c) 2010-2010 明河共影
  11. * @example
  12. *    $("a").yitip();
  13. */
  14. (function($){
  15. .......
  16. })(jQuery);

这是jsdoc的写法,什么是jsdoc?请点此。jsdoc简单点来说是一种javascript文档工具,使用方法可以点此。现在对jsdoc不理解没关系,你只要创建明河上述类似的说明文档即可。jsdoc的命令请点此查看。

2、函数务必加注释

比如以下代码是yijs.Yitip一个方法setContent:

  1. yijs.Yitip.prototype = {
  2.         /**
  3.          *向提示框添加内容
  4.          * @param {Object | String} content 内容
  5.          */
  6.         setContent : function(content){
  7.                         ...........               
  8.         }    
  9. }

依旧遵循jsdoc规范,而不是匆匆加上“//”了事,关于jsdoc,有机会明河会详细讲解。

3、参数务必加注释

比如:

  1. //默认参数
  2.     $.fn.yitip.defaults = {
  3.         /**目标容器*/
  4.         applyTo : null,
  5.         /**内容*/
  6.         content : "",
  7.         /**提示框位置*/
  8.         position : "topMiddle",
  9.         /**提示框位置偏移*/
  10.         offest : {"left":0,"top":0},
  11.         /**提示框颜色*/
  12.         color : "yellow"
  13.          }

4、函数体内关键代码前加注释

二、javascript变量规范

在javascript世界中,没有真正意义的共有变量、私有变量、常量等概念,当你的javascript代码达到一定数量级时,过段时间你回头看自己的代码,都会把自己搞晕。

1、请在私有变量前加“_”

比如:

  1. var _pos = this.pos;

2、常量请大写

比如:

  1. this.DATA_COLOR = "color";

3、jquery对象变量前加“$”

比如:

  1. this.$applyTo  = $(".yitip");

4、object、array变量前加“o”、“a”

很多人喜欢给数组变量加个”s”,这也是可以的,按个人习惯,如果你觉得有必要还可以给函数前加个“fn”。

三、jquery插件开发的一些建议

1、请多使用data()方法

jquery中data()方法非常有用,尤其在jquery插件开发中,因为data()所创建的缓存,可以完整的保存各种数据类型的数据,这是其他缓存机制无法比拟的。

2、请使用bind来绑定事件

很多朋友喜欢以下的代码:

  1. $(".yitip").click(function(){
  2.         ........
  3.     })

但在jquery插件开发中明河更提倡使用bind:

  1. $(".yitip").bind('click',function(){
  2.               .........
  3.      })

以后的教程中明河会予以解释。

3、善用typeof

typeof用于判断数据类型,这个方法在参数判断中非常有用处

4、插件名加个独有前缀

jquery插件成千上万,插件撞车时很容易的事,比如提示框插件:

  1. $.fn.tip = function(options){
  2. }

但tip的冲突率无疑很高,所以明河加个“yi”前缀,如果你有在网上看到以yi做前缀的插件,那估计就是明河写的,呵呵。

四、其他规范

1、设置版本号

有很多插件作者将版本号作为插件的一个属性,也是一个比较好的做法,比如:

  1. $.fn.yitip.version = 0.1

你可以不设置为属性,但在你的文件头务必加上版本注释,比如:

  1. /**
  2. * $.yitip
  3. * @version 0.1
  4. */

明河喜欢以0.1起始,然后把正式版的插件设置为1.0

2、将插件代码托管到网上

可以去sourceforge注册个账号,新建个开源项目,将代码托管上去,如果你不喜欢sourceforge,可以使用google的代码托管,可以看明河曾发表过的使用Google Code托管代码教程。有机会发篇教程讲述如何在sourceforge上托管代码

分享到:
评论

相关推荐

    jquery插件使用方法大全

    这一版能够支持对效果的更灵活定制,而且借助新增的命名空间事件,也使插件开发变得更容易。 jQuery UI(2007年9月):这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含...

    jQuery插件解析RSS20规范它是基于jFeed

    jQuery插件解析RSS(2.0规范),它是基于jFeed

    时间选择器jQuery插件基于HTML5规范

    时间选择器jQuery插件基于HTML5规范。只是一个简单的下拉显示时间。具有输入验证和纠正。

    一个简单的jQuery插件制作 学习过程及实例

    这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢? a) 避免全局依赖。 b) 避免第三方破坏。 c) 兼容jQuery操作符’$’和’jQuery ‘ 二,有了闭包,在其中加入插件的骨架 代码如下: $.fn.dBox...

    常用的jquery模板插件——jQuery Boilerplate介绍

    如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的“迷惘”那该多好!在这里主要介绍下一个在实际开发中最常用的jquery模板插件——jQuery Boilerplate jQuery Boilerpl

    jQuery权威指南-源代码

    7.9.2 插件开发要点/225 7.9.3 开发插件示例/226 7.10 综合案例分析—使用uploadify插件实现文件上传功能 /232 7.10.1 需求分析/232 7.10.2 效果界面/233 7.10.3 功能实现/234 7.10.4 代码分析/236 7.11 本章...

    基于HTML5新特性新规范的表单验证jQuery插件.zip

    html5开发

    jQuery权威指南366页完整版pdf和源码打包

    6.5 综合案例分析—用ajax实现新闻点评即时更新 6.5.1 需求分析 6.5.2 效果界面 6.5.3 功能实现 6.5.4 代码分析 6.6 本章小结 第7章 jquery常用插件 7.1 jquery插件概述 7.2 验证插件validate 7.3...

    jQuery插件DataTables分页开发心得体会

    写Blog目的:不是为人气,只是留...在此之前有用到过DataTables(更多的是easyui中的Datagrid,另之前服务端是PHP),因此想着前端/客户端差异不大,服务端反正都是按规范格式返回JSON串(Django的代码后续再整理)。另

    jquery-slides:一个非常灵活且高度可定制的 jQuery 幻灯片手风琴插件

    开始开发这个插件的主要原因是我一直在开发的网站需要一组特定的规范和自定义,以上都没有提供。 所以这里是这个插件提供的这些规范和功能 - 以及其他一些(我有点参与其中): 幻灯片无需 javascript 即可调整...

    jQuery日历插件datepicker用法详解

    jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件。 一般MIS系统的前端,尤其是用户注册页面,都会有诸如...

    jquery datepicker使用详解

    jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件。

    jquery-hive:jQuery插件,用于在各种实现中创建和管理Web Worker。 包括Hive.Pollen.js-线程安全的实用程序库,用于将工作线程连接到Hive

    输入jQuery.Hive 简化客户端/主页工作程序设置API 用jQuery开发人员熟悉的语法包装Worker构造函数和函数规范交叉实现的不一致; 消息序列化/反序列化员工对员工直接消息传递工人记忆饲料工人与花粉提供轻巧,可重用...

    Javashop开发规范V2.2

    Javashop开发规范V2.2 版本 说明 提交人 V1.0 初稿 定义了包名、异常、事务、和路径的规范 王峰 V2.0 1. 重新整理了命名规范 2. 增加常用命词对照表 王峰 V2.1 1.增加数据库操作的说明 2.增加常用方法介绍 王峰 V...

    ybox 一个使用jQuery的弹出层窗口插件

    摘要:脚本资源,jQuery,弹出窗口 一个使用jQuery的弹出层窗口插件,YBOX,第一次写的jquery插件,本插件仅仅在百度上搜索了几篇文章稍微看了下插件开发基本格式,然后再按照自己理解写的,效果是达到了,更多功能...

    Pro ASP.NET Core MVC 2,第7版

    在本书中,您将会发现jQuery代码的表现力和简洁性,以及使用jQuery可以更快更高效地进行开发。从jQuery开始,您可以从开始使用jQuery的基本知识,直到通过编写自己的插件来扩展jQuery。您将发现可以遵循的最佳实践,...

    Bootstrap v2.3.2(Web前端CSS框架)

    Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。 Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    软件目录结构规范 本周作业 第5周 心灵分享 ATM存钱取钱案例剖析 模块定义、导入、优化详解 内置模块详解之time与datetime模块 内置模块详解之Range模块 内置模块详解之OS模块 内置模块详解之Sys模块 内置模块详解...

    《DoitPHP编码规范》

    四、集成了JQUERY及THICKBOX、TABS、JQUERY FORM、LAZYLOAD等JQUERY插件,使前端页面开发中实现AJAX LOADING图片加载效果、灯箱效果(锁屏效果)、TAB菜单.、CHECKBOX的全选或反选效果以及图片的惰性加载效果等,让其...

    jquery-perspectives

    例如,在同一文档中嵌入和插入“开发人员”和“管理员”注释,同时允许查看者专注于他们需要的信息。 限制 当前的实现仅限于单一视角选择。 下一个版本将包括一次启用多个视角的能力。 透视内容规范被认为是完整的...

Global site tag (gtag.js) - Google Analytics