js插件开发规范
2016-07-14 12:03
459 查看
1. 使用闭包:
(function($) {
// Code goes here
})(jQuery);
这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢?
a) 避免全局依赖。
b) 避免第三方破坏。
c) 兼容jQuery操作符'$'和'jQuery '
我们知道这段代码在被解析时会形同如下代码:
var jq = function($) {
// Code goes here
};
jq(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代码:
<script type="text/javascript" src="jquery-1.9.1.min.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>
html代码:
<p>
click here
</p>
(function($) {
// Code goes here
})(jQuery);
这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢?
a) 避免全局依赖。
b) 避免第三方破坏。
c) 兼容jQuery操作符'$'和'jQuery '
我们知道这段代码在被解析时会形同如下代码:
var jq = function($) {
// Code goes here
};
jq(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代码:
<script type="text/javascript" src="jquery-1.9.1.min.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>
html代码:
<p>
click here
</p>
相关文章推荐
- JavaScript设置标题栏或者状态栏动态显示时间
- javascript 组件化
- jsrun和runjs 哪家强?
- 重新学习老是忘记的JS正则表达式
- JavaScript-基本变量和数据类型
- JSFormat插件不可用解决方案
- C# 解析json字符串,讲json字符串转换成类
- 10个小球随机动
- js字符串截取函数slice()、substring()、substr()
- 浅谈 JSON.stringify 方法
- js获得昨天、今天、明天等时间
- 详解 javascript 中的比较
- 【图片】3d鼠标拖动图片360°旋转动画效果 3dEye.js
- 《深入理解javascript原型和闭包系列》 知识点整理
- JavaScript获取子窗口、父窗口的内容(可用于页面之间传递内容)
- Js的eval解析JSON中的注意点
- JavaScript-简介和基本功能
- JS 点击全屏
- Selenium2 入门[2] —— 切换FireFox浏览器语言 , 以及浏览器语言验证
- 保证唯一的一种js提交数据方式,还不错