自己寫一個 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 里面怎么用了吧 ：）

■