您的位置：首页 > Web前端 > JQuery

[js]jQuery插件开发总结

2012-09-06 15:48 453 查看
最近开发了用了jQuery，也玩了玩jQuery的插件。上次使用jQuery是一年前，从没弄过jQuery插件，下次在用jQuery也不知道是什么时候，不如现在总结一下。再从聪明的脑袋也抗不如岁月的冲刷，总结，总结，总结~

1，插件的定义

首先，何为插件？

“插件是一种遵循一定规范的应用程序接口编写出来的程序。很多软件都有插件，插件有无数种。”

---------百度百科

jQuery插件也同样，遵循一定的规范，能够融入jQuery Library。

2，开发插件的好处

如果做一件事情没有意义，那么还做他干什么呢？所以，开发一个jQuery插件有什么好处呢？

1) 抽象

谈谈我对抽象的理解。

以按钮为例，决定一个东西是个按钮的，不是什么样子的文字，什么样子的皮肤，点击之后是提交表单还是翻到下一页。我认为一个东西称之为按钮须具备一下特点：能够鼠标交互—mouseout,mouseover,mousedown,交互对应的四种状态--up over down disabled以及按下去能够触发一定的行为。当然了，你心中的按钮的样子可能和我的不一样，但是这不重要，只是我们抽象能力和目标的区别。我认为抽象的关键问题是找出不变，以不变应万变。jQuery插件也正是基于这种抽象的思想。

2)可复用

将常用的功能封装到一个插件中，能够提高这些代码的便携性。以后遇到同样的需求，可以很方便的移植。

3）约束

开发jQuery插件所要遵循的模式，你够约束你的代码，减少作用域/命名空间冲突的可能性。

想要了解更多可以参考：Why create a jQuery plugin?

3，如何开发jquery插件呢？

既然知道什么是jquery插件，用它有什么好处，那么接下的问题是如何开发jquery的插件呢？

开发一个jQuery插件是很容易的，是jQuery插件,jQuery UI插件不做考虑。 只需要一句话：

jQuery.fn.pluginName=function(){};

这个就是第一部分中说到的所要遵循的标准，jQuery插件的标准。比如，开发一个按钮插件，就可以这样写：

jQuery.fn.customButton=function(){};

而且可以这样在网页中添加一个按钮：

$('<div/>').customButtion();

这种用法似曾相识吗？

当然，如果你用过JQuery的话，在jQuery中，$('#myDiv').addClass(),$('#myDiv').bind('click'),$('#myDiv').attr(),其中的addClass,bind,attr都是jQuery的方法，现在，我们刚才定义的customButtion也成为其中的一员了，这就是自定义的插件，实现简单，使用方便。

但是，想要开发一个robust 的jQuery插件，尤其是应对各种情况，满足各种需求的插件，我们还需要更深入的了解。

首先，JQuery.fn.customButton=function(){}是什么意思？为什么这么做就可以了呢？

$(‘<div />’)返回一个JQuery object，而jQuery.fn就是JQuery.prototype（可以去看jQuery的源代码），所以任何的jQuery object都可以调用这个插件方法。

然后，如何开发一个好的插件的？

先看JQuery官方的这篇文章：Plugins/Authoring

这篇文章系统的讲述了开发一个插件的基本流程以及如何开发一个好的插件。

看完了基础的，可以再来点高级的，Essential jQuery Plugin Patterns

这篇文章讲述了几种jQuery插件设计模式。这篇文章真的很高级，真心没看懂~

现在关于JQuery插件的资料真的很多，真的没有必要再赘述了，下面再提供一个网址，这个页面总结了jQuery插件相关的资料：

10 tutorlas for beginers

4，一个按钮的jQuery插件

下面是我自己的写的一个算是按钮的东西的插件吧，虽然不能算是很正规的按钮，但是在一个项目中的任何需要鼠标悬停上去一个样子，离开一个样子，需要设置是否disabled的地方，都可以，真的很方便。

(function($) {
$.fn.button = function(options) {
var $this = this;

//设置是否可用状态的函数
var ableMethods={
setEnable:function(){
$this.attr('class', $this.data('states')['out']);
$this.data('isAvailable',true);
bindHoverEvent();
},
setDisable:function(){
$this.attr('class', $this.data('states')['disabled']);
$this.data('isAvailable',false);
unbindHoverEvent();
}
};

if(ableMethods[options]){
ableMethods[options].apply(this);
}
else if( typeof options === 'object'){
init(options);
}
else{
console.log('illegal parameter');
}

function init(options) {
$this.text(options.text||'');
$this.data({states:options.states,isAvailable:true});
bindHoverEvent();
}

function bindHoverEvent() {
$this.bind('mouseover', function() {
$this.attr('class', $this.data('states')['in']);
});
$this.bind('mouseout', function() {
$this.attr('class', $this.data('states')['out']);
});
}

function unbindHoverEvent() {
$this.unbind('mouseover');
$this.unbind('mouseout');
}
return this;
}
})(jQuery);


.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

使用的方法：

<html>
<head>
<style>
div#show1 span,div#show1 span.normal{
margin:20px;
background-color:#333;
color:#fff;
padding:5px 10px;
}
div#show1 span.hover{
background-color:#666;
}
div#show1 span.disabled{
background-color:#999;
}
</style>
<script src="jquery-1.8.0.min.js"></script>
<script src="commonButton.js"></script>
</head>
<body>
<div id="show1">

</div>
<script>
var myBt=$('<span/>').button(
{
text:'button',
states:{'in':'hover','out':'normal','disabled':'disabled'}
}).appendTo('#show1');
myBt.button('setDisable');
</script>

</body>
</html>




我第一次传入了的参数是一个对象，设置按钮显示的文字和三种状态对应的css 类名。第二次调用button则是传入了一个函数的名称的字符串，是为了禁用这个按钮。


.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航