`

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插件开发详解** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。由于其简洁的API和丰富的功能,jQuery成为创建交互式网页的强大工具。...

    jquery筛选并控制图片排序插件

    遵循jQuery插件开发规范,定义一个公共方法,如`$.fn.myImageSorter`,并在其中实现筛选和排序的核心逻辑。用户只需在页面加载后调用这个插件,传入相应的参数即可轻松实现图片的筛选与排序。 总结来说,"jquery...

    jQuery插件开发教程

    ### jQuery插件开发详解 #### 类级别的插件开发 类级别的插件开发,是指在jQuery的全局作用域中增加新的函数或属性,这种方式相当于给jQuery类本身添加了静态方法。这种开发模式允许开发者向jQuery的核心功能集合...

    jQuery组织结构图表插件OrgChart.zip

    OrgChart遵循jQuery插件开发规范,利用jQuery.fn.extend()扩展jQuery对象,提供链式调用的API。这种模式使得插件易于使用和整合到其他jQuery代码中。开发者可以通过简单的几行代码,快速地在网页上实现组织结构图的...

    总结jQuery插件开发中的一些要点

    总结而言,jQuery插件开发中需要关注插件的设计模式、命名规范、上下文维护、事件处理等方面,遵循最佳实践以确保插件的质量和效率。同时,良好设计的文档和兼容性测试也是不可或缺的部分。掌握这些要点,能有助于...

    jQuery 插件开发详解.pdf

    jQuery 插件开发详解 ...通过这个简单的示例,你可以了解到jQuery插件开发的基本思路。在实践中,不断尝试、学习和改进,你将能创建出更多功能强大且用户体验优秀的插件。记住,真正的学习来自于不断的实践和创新。

    Dreamware的jquery插件

    深入学习jQuery插件开发,你可以参考官方文档(https://learn.jquery.com/plugins/)以及各种在线教程和示例代码。同时,Stack Overflow和GitHub上的社区讨论也是获取帮助和灵感的好地方。 7. **最佳实践** - ...

    jQuery长按按钮图片画中画展示效果.zip

    而"jquery插件"则意味着它可能遵循jQuery插件开发规范,封装了一定的功能,方便其他开发者快速集成到自己的项目中。 在压缩包子文件的文件名称列表中,我们看到了"index.html",这是网页的入口文件,通常包含了HTML...

    jquery slidebox jquery slidebox

    5. **插件化开发**:jQuery Slidebox往往以插件的形式存在,遵循jQuery插件开发规范,通过扩展jQuery对象的方法来增加新的功能。插件通常包含初始化、配置选项、事件绑定等功能。 6. **数据属性和自定义事件**:...

    jquery插件开发

    jQuery插件开发是利用jQuery核心功能进行扩展,以实现更高级、特定的功能或组件。本教程将深入讲解如何开发jQuery插件,帮助你提升网页交互体验,创造出美观而实用的UI元素。 首先,我们了解jQuery插件的基本结构。...

    基于jquery.kinMaxShow的焦点图代码.rar

    7. **插件结构**:遵循jQuery插件开发规范,封装功能以供外部调用。 了解和使用这个插件,开发者不仅可以提升页面的视觉效果,还能深入理解jQuery插件开发,提升前端技能。对于初学者,这是一次很好的实践机会,...

    超好用的Jquery插件集合

    **jQuery插件是JavaScript库jQuery的强大扩展,它们提供了一系列便捷的功能,用于增强网页的交互性和视觉效果。在“超好用的JQuery插件集合”中,我们可以找到针对不同应用场景的丰富资源,主要包括表单处理和图片...

    jQuery 3.1 参考手册.CHM_语法_

    这些插件通常基于jQuery核心,遵循jQuery插件开发规范,便于集成和使用。 ### 8. 混合使用(Mixing with Other Technologies) jQuery可以很好地与Bootstrap、AngularJS、Vue.js等现代前端框架配合使用,实现复杂的...

    jquery 星级评分插件

    该插件可以与其他jQuery插件或后端API无缝集成。例如,你可以在用户提交评分时发送AJAX请求到服务器,更新数据库并返回响应。同时,还可以监听`click`事件,获取用户选择的评分,进行相应的处理。 ### 6. 自定义...

    15天学会JQuery

    2. **编写自定义插件**:学习如何封装自己的jQuery插件,遵循jQuery插件开发规范。 3. **性能优化**:讨论如何减少DOM操作,使用事件代理,以及延迟加载等内容,提升jQuery应用的性能。 通过这15天的学习,你不仅会...

    Jquery 插件库

    **jQuery插件库详解** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画设计和Ajax交互。jQuery插件库是这个强大框架的延伸,它提供了丰富的功能,帮助开发者实现各种复杂的网页交互...

    jquery插件flash上传

    jQuery插件的编写通常遵循一定的规范,主要涉及命名空间、参数传递、元素选择以及功能实现等步骤。首先,我们需要创建一个独立的命名空间,避免与其他插件冲突。例如,我们可以这样开始: ```javascript (function...

    jquery插件库-jquery显示隐藏密码插件.zip

    jQuery插件通常是封装了一些功能的JavaScript代码,它们扩展了jQuery的核心功能,使得开发者能够快速实现特定效果或功能。在这个案例中,插件可能包含了监听事件、修改DOM元素样式以及处理用户交互逻辑等功能。 ...

Global site tag (gtag.js) - Google Analytics