如何用正确的姿势编写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="加载控件" />
        &nbsp;
    <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);
        }
    };

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

优点：

1. 在用一个元素上绑定n次都不会出现错误。
2. 可以自定义取数，从新加载数据。
3. 可以在原型上扩张，自己需要的功能。

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

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