js/jQuery插件开发及规范
- - JavaScript - Web前端 - ITeye博客当我们画出了UI之后就可以正式编写jQuery插件代码了，不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解. 这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢. c) 兼容jQuery操作符'$'和'jQuery'. 我们知道这段代码在被解析时会形同如下代码：.
js/jQuery插件开发及规范
标签：
js
jquery
插件
| 发表时间：2014-05-14 15:12 | 作者：slbszq
出处：http://www.iteye.com
当我们画出了UI之后就可以正式编写jQuery插件代码了，不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解。
1. 使用闭包：
(function($){
//Code goes here
})(jQuery);
这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？
a) 避免全局依赖。
b) 避免第三方破坏。
c) 兼容jQuery操作符'$'和'jQuery'
我们知道这段代码在被解析时会形同如下代码：
var fun = function($) {
//Code goes here
};
fun(jQuery);
这样效果就一目了然了。
2. 扩展
jQuery提供了2个供用户扩展的‘基类’ - $.extend和$.fn.extend.
$.extend 用于扩展自身方法，如$.ajax, $.getJSON等，$.fn.extend则是用于扩展jQuery类，包括方法和对jQuery对象的操作。为了保持jQuery的完整性，我比较 趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend.
3. 选择器
jQuery提供了功能强大，并兼容多种css版本的选择器，不过发现很多同学在使用选择器时并未注重效率的问题。
a) 尽量使用Id选择器，jQuery的选择器使用的API都是基于getElementById或getElementsByTagName，因此可以知道 效率最高的是Id选择器，因为jQuery会直接调用getElementById去获取dom，而通过样式选择器获取jQuery对象时往往会使用 getElementsByTagName去获取然后筛选。
b) 样式选择器应该尽量明确指定tagName, 如果开发人员使用样式选择器来获取dom，且这些dom属于同一类型，例如获取所有className为jquery的div，那么我们应该使用的写法 是$('div.jquery')而不是$('.jquery')，这样写的好处非常明显，在获取dom时jQuery会获取div然后进行筛选，而不是 获取所有dom再筛选。
c) 避免迭代，很多同学在使用jQuery获取指定上下文中的dom时喜欢使用迭代方式，如$('.jquery .child')，获取className为jquery的dom下的所有className为child的节点，其实这样编写代码付出的代价是非常大 的，jQuery会不断的进行深层遍历来获取需要的元素，即使确实需要，我们也应该使用诸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2)之类的方式。
js插件开发的一种方法：
js代码：
<html>
<script language="javascript" src="jquery.js"></script>
<script type="text/javascript">
(function ($) {
//默认参数(放在插件外面, 避免每次调用插件都调用一次, 节省内存)
var defaults = {
color: '红色'
};
//扩展
$.fn.extend({
//插件名称
height: function(options) {
//覆盖默认参数
var opts = $.extend(defaults, options);
//主函数
return this.each(function(){
//激活事件
var obj = $(this);
obj.click(function(){
alert(opts.color);
});
});
}
});
})(jQuery);
$(function(){
$("p").height({color: 'black'});
});
</script>
<body>
<p>
click here
</p>
</body>
<html>
参考：http://www.360doc.com/content/14/0307/09/15605563_358431277.shtml
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [js jquery 插件] 推荐：
10个用来处理键盘事件的JQuery插件和JS类库
- - JavaScript - Web前端 - ITeye博客通常在web应用或者网站中，我们使用鼠标来控制元素或者执行导航，相对于桌面应用来说，使用web应用的快捷键次数可能会相对比较少，但是对于熟 练的专业人员来说，使用键盘可能更加容易并且更加快速，在今天这篇文章中，我们收集了10个jQuery的插件，帮助你创建各种基于键盘事件的web应 用，相信大家会喜欢的.
jquery 插件
- - JavaScript - Web前端 - ITeye博客 jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.
js Grid - 列表插件
- Bloger - 博客园-首页原创精华区 js Grid - 列表插件. 1）Sponsor Flip Wall With jQuery & CSS一个非常不错的显示数据到网格里的插件. 点击后，缩略图会翻转，然后显示更多信息. 2）TableTree4J 是一个开源的基于javascript的树状菜单和表格控件，实用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单.
常用JQuery插件整理
- xxg - 博客园-首页原创精华区 虽然自己也写过插件，但JQuery插件种类的繁多，大多时候，我还是使用别人写好的插件，这些都是我用了同类插件里较为不错的一些，今天就整理一下公开放出来. jquery.HooRay（哈哈，自己写的插件是必须有的）. jquery UI（官方的UI插件，功能很多，但我只用少数几个）. artDialog（很欣赏这个插件，又强大又美观）.
2010年最佳jQuery插件
- seenxu - 博客园新闻频道在2010年，JavaScript框架继续日渐普及，这使得大量的插件被开发出来. WDL的作者从大量的优秀 jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best. 2010年最佳jQuery插件（排名不分先后）：. 一个加载设置拥有9种过度效果的超级smooth slider，它还支持如链接图像和键盘导航等内容.
[原]jQuery ListBox Plugin(ListBox插件)
- We_Get - 博客园-首页原创精华区转载请注明作者(think8848)和出处(http://think8848.cnblogs.com). 未经作者同意，请勿擅自修改本文内容. 这两天项目中要用到类似于ListBox的功能了，本以为有很多jQuery插件，没有想到的是，居然没有搜到好用的，咋办呢，自已动手丰衣足食吧，于是花了一个晚上的时间做出来一个，上效果图：.
JQuery图表插件——Highcharts
- We_Get - 博客园-首页原创精华区因为项目中需要用到图表生成，所有Google了下，找到了这个插件，顺带写了个DEMO. 先上三个图，分别是曲线、柱状、扇形. 图表中的数据纯属于DEMO的测试数据，没有实际用意. 第一步，下载并且引用JS包（highcharts.js），theme顾名思义是放皮肤的. 可以下载DEMO逐一试试就知道效果怎么样了，上图就应用了两个样式.
jquery Dialog - 弹出窗插件
- Bloger - 博客园-首页原创精华区 分享几个jquery Dialog弹出窗插件. 1)Zebra_Dialog是一个可灵活配置的对话框jQuery插件，大小只有4KB，要求jQuery 1.5.2+支持. 可用于替换JavaScript原始的“alert” 和“confirmation”对话框. 这个插件使用jQuery Plugin Boilerplate构建.
jQuery 插件autocomplete 应用
- Bloger - 博客园-首页原创精华区 项目中有时会用到自动补全查询，就像Google搜索框、淘宝商品搜索功能，输入汉字或字母，则以该汉字或字母开头的相关条目会显示出来供用户选择， autocomplete插件就是完成这样的功能. autocomplete官网 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ （可下载jQuery autocomplete插件）.