js插件开发规范

以前用过许多jQuery插件,都只是在关注功能和效果的层面上,最近突然有想自己写一个独立功能的插件,所以先打好桩。学习一下插件开发的规范写法,以免形成不好的习惯。
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)classNamejquerydomclassNamechildjQuery使使 (selector,context), (selector1>selecotr2), (selector1).children(selector2),$(selector1).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</p>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值