如何写jquery插件

  首页    新文章  联系  管理  订阅 

自己写一个 jQuery 插件

我知道这一天终将会到来，现在，它来了。

 

需求

开发 SharePoint 的 CSOM 应用时，经常需要在网页上输出一些信息。

这种需求和 alert 的弹窗、F12 的断点查看信息的场景是不一样的：在这种场景下，你就是端着杯咖啡靠在那里坐着，看着关于应用程序运行的信息不断的在网页上输出，不用去关闭弹窗、也不用去设置断点。

详细的功能需求如下：

• 输出的信息中自动包含时间
• 输出的信息按照类型显示不同的样式
• 输出的信息类型包括：普通信息、调试信息、警告、错误
• 可选按照时间升序输出信息（稍作修改可以时间降序排列）

 

设计

 

 

原理与实现

首先，来个简单的原理。写一个空的 plugin：

$.fn.message = function () {
    return this;
}

这个 plugin 的用法就是：

var msg = $("#divMessage").message();

 

这里面的关键就是拿到了 this 这个对象，后面的所有代码、功能的实现都依赖于这个对象。

接下来，实现 show 函数来做测试。show 函数将接受消息内容作为参数，然后显示出来：

$.fn.message = function () {
    this.show = function (msg) {
        this.html(msg);
    }
    return this;
}

然后，可以这样用：

<div id="divMessage">Messaeg</div>
<script>
    $(document).ready(function () {
        var msg = $("#divMessage").message();
        msg.show("hello");
    });
</script>

于是，内容就出来了：

接下来，的代码就很简单了（jquery.message.js）：

/* 时间格式化函数 */
jQuery.utility = {
    leading:function (char, width, value) {
        var ret = value.toString();
        while (width > 1) {
            if (value >= (Math.pow(10,width - 1))) {
                break;
            } else {
                ret = char + ret;
            }
            width--;
        }
        return ret;
    },

    now : function () {
        var date = new Date();
        var ret = {};
        ret.hours = $.utility.leading('0', 2, date.getHours());
        ret.minutes = $.utility.leading('0', 2, date.getMinutes());
        ret.seconds = $.utility.leading('0', 2, date.getSeconds());
        return ret;
    }
};

/* 消息插件函数 */
$.fn.message = function () {
    this.show = function (msg) {
        this.html(msg);
    }
    this.clear = function () {
        this.html('');
    }
    this.append = function (tag, msg) {
        var date = $.utility.now();
        var tagContent = "<span class='msg-" + tag + "'>" + tag + "</span><span class='msg-datetime'>" + date.hours + ":" + date.minutes + ":" + date.seconds + "</span>";
        this.html(this.html() + "<br/>" + tagContent + "<span class='msg-message'>" + msg + "</span>");
    }
    this.warning = function (msg) {
        this.append("warning", msg);
    }
    this.error = function (msg) {
        this.append("error", msg);
    }
    this.succeed= function (msg) {
        this.append("succeed", msg);
    }
    this.debug = function (msg) {
        this.append("debug", msg);
    }
    this.info = function (msg) {
        this.append("info", msg);
    }
    return this;
}

当然，少不了 CSS 样式（jquery.message.css）：

.msg-message, .msg-info, .msg-warning, .msg-error, .msg-succeed, .msg-debug, .msg-datetime, .msg-view-link {
    padding:3px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin-right:2px;
    margin-left:2px;
    line-height:2em;
    font-family:Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
    cursor:default;
}
.msg-info, .msg-warning, .msg-error, .msg-succeed, .msg-debug, .msg-datetime {
    box-shadow:rgba(0,0,0,0.2) 1px 1px;
}
.msg-warning {
    border:1px solid yellow;
}
.msg-error {
    border:1px solid red;
}
.msg-succeed {
    border:1px solid green;
}
.msg-debug {
    border:1px solid darkgray;
}
.msg-info {
    border:1px solid blue;
}
.msg-datetime {
    border:1px dotted darkgray;
}

 

部署

很简单，只需要引入 jquery-{version}.js 和 jquery.message.js （上面的 JS 代码即是）、jquery.message.css。

<link rel="stylesheet" href="../Style/jquery.message.css" />
<script type="text/javascript" src="../Reference/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../Library/jquery.message.js"></script>

P.S. 对于 jQuery 这样有开发版和 min 版的 js 组件，可以考虑用 ScriptManager 来根据解决方案的配置动态引用对应版本。

 

应用

好了，下面写几句看看效果：

<link rel="stylesheet" href="../Style/jquery.message.css" />
<script type="text/javascript" src="../Reference/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../Library/jquery.message.js"></script>
<div id="divMessage"></div>
<script>
    $(document).ready(function () {
        var msg = $("#divMessage").message();
        msg.succeed("Host web context ready.");
        msg.debug("List title is 'Data List'.");
        msg.error("List doesn't exist.")
    });
</script>

 

嗯，还不错。看这些消息，你就应该知道在 SharePoint 里面怎么用了吧 ：）