jQuery技术

jQuery插件的编写技巧

字号+ 作者:H5之家 来源:H5之家 2015-11-15 12:01 我要评论( )

jQuery插件的编写技巧

/*
Hello everybody,让我们来写个jQuery插件,不要一直用jquery,却连插件都不会写。
哈哈哈,开玩笑啦。
当你看到这篇日志,可以肯定的是,你是jQuery的粉丝哦。
话说js是很随意的语言,很随便,想怎么写就怎么写。
且看这段代码
*/
var jQuery = new Object();//或者var jQuery = {};
jQuery.method = function(args){
alert("hello," + args);
}
jQuery.method("Henry");
/*
嘿嘿,太明显了,你会看到"hello,Henry"的弹出信息的。是不是这段代码巨简单。
当然,你自然而然会想到用这种方法。如下:
*/


/*

确实效果如你所愿了。但是不是最好的。因为,一个好的框架一定留给你好的接口了。
最好是使用它的。应该如下:
*/
jQuery.extend({
method: function(){
alert("hello,this is my defined method");
}
});
jQuery.method();
/*
不错吧,效果还是一样的。不过这样是最好的,为什么呢?因为,当你的函数需要
增加参数的时候,如果别人不添加参数,你就需要用默认的参数。这时,你的设计
好处就来了,see it ^.^:
*/

jQuery.extend({
method: function(options){
var defaults = {
name : "Henry",
sex : "male"
};
jQuery.extend(defaults,options);//如此一来,你的所有参数都进来了哦。
alert("hello," + defaults.name + ",you are " + defaults.sex);
}
});
jQuery.method();
jQuery.method({
name : "yourname",
sex : "sex"
});
//无论如何,你都可以调用我写的插件哦。呵呵呵
/*
还有还有哈,欢迎访问柯乐义,需要提醒你的是,如果你看了我写的解析jquery源码或者自己分析过jQuery源码
你将会有不同的感受。上面是静态方法的扩展,也就是你无须选择任何一个元素,直接通过
jQuery类来使用方法。下面介绍一个元素的操作方法。你只需把jQuery.extend()改成
jQuery.fn.extend();就可以了。
*/
jQuery.fn.extend({
method: function(options){
var defaults = {
name : "Henry",
sex : "male"
};
jQuery.extend(defaults,options);//如此一来,你的所有参数都进来了哦。
alert("hello," + defaults.name + ",you are " + defaults.sex);
return $(this);//不要忘记返回自己,实现链接调用。
}
});

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
t