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

jquery插件编写

2014-02-10 17:45 435 查看

以前要实现一个功能效果我一般写一个函数就搞定了，后来写的东西多了，发现经常写到一些以前用到的功能，想把原来的代码粘贴过来吧还得改很多变量甚至结构，而且后期想扩展一下功能什么的，也很麻烦，后来果断写成插件的形式，其实写成插件有很多好处，不多说，下面以jquery插件的编写为例，说一下插件的一般形式，

在jquery官方博客中推荐使用对象级别的方式编写插件（还可以在类级别上开发插件），并给出一个模板参考：

<span style="font-size:14px;">;(function($){ //为了避免一些不必要的麻烦，最前加了一个分号

$.fn.demo=function(options){
var defaults={
//默认参数
}

//将用户传进来的参数扩展覆盖默认参数
var options=$.extend({},defaults,options);

this.each(function(){
//实现功能的代码 ，this代表调用本插件的对象

});

return this; //使之能够链式操作
}

})(jQuery); //将jQuery作为参数传入</span>

举个例子：要实现这样一个功能，设置元素背景颜色，

<span style="font-size:14px;">;(function($){

$.fn.demo=function(options){
var defaults={
color:'green'
}

var options=$.extend(defaults,options);

this.each(function(){
$(this).css('background',options.color);
});
return this;
}

})(jQuery);   //这个插件保存为demo.js</span>

在html中使用插件：

<span style="font-size:14px;"><head>
<title>demo</title>
<script src="jquery.js"></script>
<script src="demo.js"></script>  //载入插件文件
</head>
<body>
<div id="div1">
demo
</div>
<script>
$("#div1").demo({    //调用方式
color:'black'   //如果用户不传递参数就使用默认参数
});
</script>
</body></span>

这个例子只是介绍怎么去开发jquery插件，没有什么功能，如果想写出功能丰富的插件，可以在功能代码那里自由发挥
官方推荐插件的命名是这样的，我刚刚写的那个名字(demo.js)就不标准,标准写法是jquery.demo.v1.0.js或者jquery-demo-v1.0.js(jquery.插件名.版本号.js);

文章开头我说了这是官方推荐的对象级别的插件开发，还有类级别的插件开发(一般是jquery官方使用，第三方开发插件用这种方式的话意义不大，对象级别的优势明显突出，本文不讨论这两者的优劣，仅写出来了解一下，总之推荐使用对象级别开发)

类级别的开发有三种方式：

1、直接给jQuery添加静态函数

jQuery.demo=function(){
//功能代码
}

//调用方式：
$.demo();

2、使用extend()方法

<span style="font-size:14px;">jQuery.extend({
demo1:function(){
//功能代码
}
demo2:function(){
//功能代码
}
});

// 调用方式：

$.demo1();
$.demo2();</span>

3、使用命名空间

<span style="font-size:14px;">jQuery.kongjian={
demo:function(){

}
}

// 调用方式：
$.kongjian.demo();</span>

懂了写插件的一般方法不一定能写出好的插件，应该多看看官网上的那些优秀插件，除了分析功能实现，还要看看别人是怎么优化代码的，关键是思想

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航