在明河真正讲解jquery插件开发进阶教程前,明河觉得很有必要先来说明下jquery插件开发规范,这些规范是明河学习jquery时不断积累下来的,不一定完全正确,甚至于你在开始编写第一个jquery插件时,觉得这些规范毫无意义。如果你有一天编写jquery时突然发现这些规范很有用处,恭喜你,你的水平上升了一个层次!
一、请给你的代码加上注释
明河以前很不喜欢加注释,嫌太麻烦了,这是个非常糟糕的习惯,幸运的是现在明河已经改正了这个不良习惯。
这个世界不存在百分百的完美的jquery插件,注释不止是给别人看、更重要的是给自己看。
你应该把注释当做你代码的一部分,养成随手加注释的习惯,尤其是编写javascript的时候。
1、在全部代码前加上文件说明注释
以下是明河给自己写的yitip插件加的注释:
- /**
- * $.yitip
- * @extends jquery.1.4.2
- * @fileOverview 创建文字提示框
- * @author 明河共影
- * @email mohaiguyan12@126.com
- * @site wwww.36ria.com
- * @version 0.1
- * @date 2010-07-17
- * Copyright (c) 2010-2010 明河共影
- * @example
- * $("a").yitip();
- */
- (function($){
- .......
- })(jQuery);
这是jsdoc的写法,什么是jsdoc?请点此。jsdoc简单点来说是一种javascript文档工具,使用方法可以点此。现在对jsdoc不理解没关系,你只要创建明河上述类似的说明文档即可。jsdoc的命令请点此查看。
2、函数务必加注释
比如以下代码是yijs.Yitip一个方法setContent:
- yijs.Yitip.prototype = {
- /**
- *向提示框添加内容
- * @param {Object | String} content 内容
- */
- setContent : function(content){
- ...........
- }
- }
依旧遵循jsdoc规范,而不是匆匆加上“//”了事,关于jsdoc,有机会明河会详细讲解。
3、参数务必加注释
比如:
- //默认参数
- $.fn.yitip.defaults = {
- /**目标容器*/
- applyTo : null,
- /**内容*/
- content : "",
- /**提示框位置*/
- position : "topMiddle",
- /**提示框位置偏移*/
- offest : {"left":0,"top":0},
- /**提示框颜色*/
- color : "yellow"
- }
4、函数体内关键代码前加注释
二、javascript变量规范
在javascript世界中,没有真正意义的共有变量、私有变量、常量等概念,当你的javascript代码达到一定数量级时,过段时间你回头看自己的代码,都会把自己搞晕。
1、请在私有变量前加“_”
比如:
2、常量请大写
比如:
- this.DATA_COLOR = "color";
3、jquery对象变量前加“$”
比如:
- this.$applyTo = $(".yitip");
4、object、array变量前加“o”、“a”
很多人喜欢给数组变量加个”s”,这也是可以的,按个人习惯,如果你觉得有必要还可以给函数前加个“fn”。
三、jquery插件开发的一些建议
1、请多使用data()方法
jquery中data()方法非常有用,尤其在jquery插件开发中,因为data()所创建的缓存,可以完整的保存各种数据类型的数据,这是其他缓存机制无法比拟的。
2、请使用bind来绑定事件
很多朋友喜欢以下的代码:
- $(".yitip").click(function(){
- ........
- })
但在jquery插件开发中明河更提倡使用bind:
- $(".yitip").bind('click',function(){
- .........
- })
以后的教程中明河会予以解释。
3、善用typeof
typeof用于判断数据类型,这个方法在参数判断中非常有用处
4、插件名加个独有前缀
jquery插件成千上万,插件撞车时很容易的事,比如提示框插件:
- $.fn.tip = function(options){
- }
但tip的冲突率无疑很高,所以明河加个“yi”前缀,如果你有在网上看到以yi做前缀的插件,那估计就是明河写的,呵呵。
四、其他规范
1、设置版本号
有很多插件作者将版本号作为插件的一个属性,也是一个比较好的做法,比如:
你可以不设置为属性,但在你的文件头务必加上版本注释,比如:
- /**
- * $.yitip
- * @version 0.1
- */
明河喜欢以0.1起始,然后把正式版的插件设置为1.0
2、将插件代码托管到网上
可以去sourceforge注册个账号,新建个开源项目,将代码托管上去,如果你不喜欢sourceforge,可以使用google的代码托管,可以看明河曾发表过的使用Google Code托管代码教程。有机会发篇教程讲述如何在sourceforge上托管代码
分享到:
相关推荐
**通用JQuery插件开发详解** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。由于其简洁的API和丰富的功能,jQuery成为创建交互式网页的强大工具。...
遵循jQuery插件开发规范,定义一个公共方法,如`$.fn.myImageSorter`,并在其中实现筛选和排序的核心逻辑。用户只需在页面加载后调用这个插件,传入相应的参数即可轻松实现图片的筛选与排序。 总结来说,"jquery...
### jQuery插件开发详解 #### 类级别的插件开发 类级别的插件开发,是指在jQuery的全局作用域中增加新的函数或属性,这种方式相当于给jQuery类本身添加了静态方法。这种开发模式允许开发者向jQuery的核心功能集合...
OrgChart遵循jQuery插件开发规范,利用jQuery.fn.extend()扩展jQuery对象,提供链式调用的API。这种模式使得插件易于使用和整合到其他jQuery代码中。开发者可以通过简单的几行代码,快速地在网页上实现组织结构图的...
总结而言,jQuery插件开发中需要关注插件的设计模式、命名规范、上下文维护、事件处理等方面,遵循最佳实践以确保插件的质量和效率。同时,良好设计的文档和兼容性测试也是不可或缺的部分。掌握这些要点,能有助于...
jQuery 插件开发详解 ...通过这个简单的示例,你可以了解到jQuery插件开发的基本思路。在实践中,不断尝试、学习和改进,你将能创建出更多功能强大且用户体验优秀的插件。记住,真正的学习来自于不断的实践和创新。
深入学习jQuery插件开发,你可以参考官方文档(https://learn.jquery.com/plugins/)以及各种在线教程和示例代码。同时,Stack Overflow和GitHub上的社区讨论也是获取帮助和灵感的好地方。 7. **最佳实践** - ...
而"jquery插件"则意味着它可能遵循jQuery插件开发规范,封装了一定的功能,方便其他开发者快速集成到自己的项目中。 在压缩包子文件的文件名称列表中,我们看到了"index.html",这是网页的入口文件,通常包含了HTML...
5. **插件化开发**:jQuery Slidebox往往以插件的形式存在,遵循jQuery插件开发规范,通过扩展jQuery对象的方法来增加新的功能。插件通常包含初始化、配置选项、事件绑定等功能。 6. **数据属性和自定义事件**:...
jQuery插件开发是利用jQuery核心功能进行扩展,以实现更高级、特定的功能或组件。本教程将深入讲解如何开发jQuery插件,帮助你提升网页交互体验,创造出美观而实用的UI元素。 首先,我们了解jQuery插件的基本结构。...
7. **插件结构**:遵循jQuery插件开发规范,封装功能以供外部调用。 了解和使用这个插件,开发者不仅可以提升页面的视觉效果,还能深入理解jQuery插件开发,提升前端技能。对于初学者,这是一次很好的实践机会,...
**jQuery插件是JavaScript库jQuery的强大扩展,它们提供了一系列便捷的功能,用于增强网页的交互性和视觉效果。在“超好用的JQuery插件集合”中,我们可以找到针对不同应用场景的丰富资源,主要包括表单处理和图片...
这些插件通常基于jQuery核心,遵循jQuery插件开发规范,便于集成和使用。 ### 8. 混合使用(Mixing with Other Technologies) jQuery可以很好地与Bootstrap、AngularJS、Vue.js等现代前端框架配合使用,实现复杂的...
该插件可以与其他jQuery插件或后端API无缝集成。例如,你可以在用户提交评分时发送AJAX请求到服务器,更新数据库并返回响应。同时,还可以监听`click`事件,获取用户选择的评分,进行相应的处理。 ### 6. 自定义...
2. **编写自定义插件**:学习如何封装自己的jQuery插件,遵循jQuery插件开发规范。 3. **性能优化**:讨论如何减少DOM操作,使用事件代理,以及延迟加载等内容,提升jQuery应用的性能。 通过这15天的学习,你不仅会...
**jQuery插件库详解** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画设计和Ajax交互。jQuery插件库是这个强大框架的延伸,它提供了丰富的功能,帮助开发者实现各种复杂的网页交互...
jQuery插件的编写通常遵循一定的规范,主要涉及命名空间、参数传递、元素选择以及功能实现等步骤。首先,我们需要创建一个独立的命名空间,避免与其他插件冲突。例如,我们可以这样开始: ```javascript (function...
jQuery插件通常是封装了一些功能的JavaScript代码,它们扩展了jQuery的核心功能,使得开发者能够快速实现特定效果或功能。在这个案例中,插件可能包含了监听事件、修改DOM元素样式以及处理用户交互逻辑等功能。 ...