如何用正确的姿势编写jQuery插件

在园子里有很多关于jQuery插件的文章，尤其 以下2篇文章:

不定义JQuery插件，不要说会JQuery

jQuery插件开发精品教程，让你的jQuery提升一个台阶

这2位大神基础讲的很清楚，在这里就不多说了，主要那个小需求来练练：

需求说明：一个标题插件，可以通过后端取数，自定义标题，自定义样式

讨论：插件通常不都是加载一下就不操作了，比如表格插件，加载数据，刷新等等。

今天练习的控件就简单给大家理理写控件的思路，（有问题，有意见大家指出。）

; (function ($) {
$.fn.cyTitle = function (options) {
//一些操作
return new cyTitle(options);
}
function cyTitle(Options) {
//这里定义插件属性
$.extend(this, Options);
this.init(Options);
}
cyTitle.prototype = {
init: function () {
//这里构建插件内容
}
}
})(jQuery)

每个插件都应该包含以上部分，这个就不多说了(上面2为大神的文章说的很清楚)，从实际编写出发。 (demo)

点击加载控件列出标题(未定义标题)，点击刷新更改标题（ajax取数）。

下面一步步看代码:

（本来请求txt的结果发现博客园不能上传和请求，放着runjs上也只能是js文件了。。。）

<div style="border: 1px dotted #888; width: 300px; height: 100px;">
<input type="button" class="cyTitleCore" title="load" value="加载控件" />
 
<input type="button" class="cyTitleCore" title="ref" value="刷新" />
<div id="div1cyTitle"></div>
</div>
<script type="text/javascript">
$(function () {
$(".cyTitleCore").click(function () {
core[$(this).attr("title")]();
})
var core = {
load: function () {
this.list = $("#div1cyTitle").cyTitle({
background: "#888"
});
},
ref: function () {
//这里直接调用插件的ref方法来刷新取数
if (this.list) {
this.list.ondatabind = function (that, e) {
e.url = "Service.js"; //指定取数的url
e.params = { //指定取数的参数
"id": (+new Date())
};
}
this.list.ref();
}
}
}
})
</script>

上面是加载控件和刷新的调用；

首先点击加载按钮可以看到是调用了插件cyTitle，并且指定背景色。先不看刷新，来看看插件到底怎么写的！

$.fn.cyTitle = function (options) {
options = options || {};
var domEl = this.get(0); //获得绑定元素的dom对象
if (!domEl) throw "未找到绑定元素!";
if (domEl["cyTitle"]) {  //这里如果调用元素的dom对象上有这个控件就直接返回 (避免了在同一个元素上多次调用出BUG)
return domEl["cyTitle"];
}
options.el = domEl; //这里在构建插件的时候直接用this.el就能访问元素的dom对象

return new cyTitle(options);
}

function cyTitle(Options) {
//这里定义插件属性
$.extend(this, Options);
this.ajaxType = "get";
this.el.cyTitle = this; //把控件放着dom元素的cyTitle属性上
this.ondatabind = null; //ajax取数的绑定方法
this.init(Options);
}

cyTitle.prototype = {
init: function () {
this.load(); //加载控件
},
load: function () {
$(this.el).append("<h1>" + (this.text || "未知") + "</h1>"); //如果指定了Options.text就显示指定的内容
this.ref(); //调用ajax取数(类似与表格插件第一次加载)
},
ref: function () {
this.bgCss();
var e = {
url: null
};
this.doEvt("ondatabind", e); //这里调用前面定义的取数方法的内容（url, params）
//依次类推我们可以写绑定前（在绑定方法前面调用），绑定后（执行异步后调用） 等等
if (e.url) {
var my = this;
$[this.ajaxType](e.url, e.params, function (res) {
if (res) {
$(my.el).find("h1").text(res);
}
},'html');
}
},
doEvt: function (name, p) {
if (this[name]) {
this[name](this, p);
}
return this;
},
bgCss: function () {
$(this.el).css("background", this.background);
}
};

以上就是整个插件的内容，

优点：

在用一个元素上绑定n次都不会出现错误。

可以自定义取数，从新加载数据。

可以在原型上扩张，自己需要的功能。

用一个demo练习编写插件，才知道其中的乐趣，先说到这里。谢谢

实在忙，最近搞了个girhub.io博客写了个滚动条插件。有兴趣的可以看看内涵demo