作为一个java后台攻城狮,有的时候对自己的想法无法用前端展现出来,总感觉挺遗憾的。所以了解一定的前端知识与主流的前端技术,也是一个后台攻城狮的基本素养。最近刚好做相关学习,就以此为切入点。
JQuery是一个优秀的javascript库,它是可扩展的,自定义插件就是在扩展JQuery库。
直接上代码:
$.fn.pluginName = function(){
//some codes
}
上面代码定义了一个名称为pluginName的插件。
不过在使用多种javascript库时,$可能会遭遇冲突,为了避免这种情况的发生,我们需要一个包装器。
(function($){
$.fn.pluginName = function(){
//some codes
}
})(JQuery);
就像代码展示的一样,其实这个包装器就是一个匿名函数,将JQuery做为参数调用,将插件包在内部。
这样做的好处就是形成了闭包(闭包会在以后博文中提到),简单来说,形成了作用域的概念,就类似java的私有变量一样,是防止变量污染的有效手段。
是不是有一种java的即视感;)
可是你应该会马上想到,含参的情况怎么办?
Defaults & options
(function($){
$.fn.say = function(options){
defaults = {
message : "Hello World!",
another : "good"
};
var setting = $.extend(defaults,options);
alert(setting.message);
alert(setting.another);
}
})(JQuery);
<div id="test"></div>
$('#test').say({another:"better"});
如上面代码展现的一样,options
作为参数传入,defaults
则可以为参数设定一个初始s值。$.extend(defaults,options)
的作用是将参数赋值给defaults
。运行代码可以看到,弹出框显示的内容是Hello World!
和better
,而不是good
。
关于扩展JQuery自定义插件,了解javascript的prototype是必须的。
在javascript中,每个对象都有prototype属性,称为对象类型原型的引用。
事实上$.fn就是在使用prototype,这点需要明白,而prototype需要另外详细讨论与学习的了,这里暂不叙述。
最后,放上一个图片轮播banner的实现,Chrome与IE8+测试可用(这里作为demo兼容了IE,不过说实在的,作为有节操的程序猿,还是放弃IE吧; )
github:Jquery_plugin_banner_demo