自定义JQuery插件(附图片轮播banner实现)

作为一个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