首页 > 代码库 > 自己写一个 jQuery 插件

自己写一个 jQuery 插件

2024-07-04 19:11:21   250人阅读

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

 

需求

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

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

详细的功能需求如下：

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

 

设计

jquery.message.js 设计 

 

原理与实现

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

   1: $.fn.message = function () {
   2:     return this;
   3: }

这个 plugin 的用法就是：

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

 

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

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

   1: $.fn.message = function () {
   2:     this.show = function (msg) {
   3:         this.html(msg);
   4:     }
   5:     return this;
   6: }

然后，可以这样用：

   1: <div id="divMessage">Messaeg</div>
   2: <script>
   3:     $(document).ready(function () {
   4:         var msg = $("#divMessage").message();
   5:         msg.show("hello");
   6:     });
   7: </script>

于是，内容就出来了：

image

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

   1: /* 时间格式化函数 */
   2: jQuery.utility = {
   3:     leading:function (char, width, value) {
   4:         var ret = value.toString();
   5:         while (width > 1) {
   6:             if (value >= (Math.pow(10,width - 1))) {
   7:                 break;
   8:             } else {
   9:                 ret = char + ret;
  10:             }
  11:             width--;
  12:         }
  13:         return ret;
  14:     },
  15:  
  16:     now : function () {
  17:         var date = new Date();
  18:         var ret = {};
  19:         ret.hours = $.utility.leading(‘0‘, 2, date.getHours());
  20:         ret.minutes = $.utility.leading(‘0‘, 2, date.getMinutes());
  21:         ret.seconds = $.utility.leading(‘0‘, 2, date.getSeconds());
  22:         return ret;
  23:     }
  24: };
  25:  
  26: /* 消息插件函数 */
  27: $.fn.message = function () {
  28:     this.show = function (msg) {
  29:         this.html(msg);
  30:     }
  31:     this.clear = function () {
  32:         this.html(‘‘);
  33:     }
  34:     this.append = function (tag, msg) {
  35:         var date = $.utility.now();
  36:         var tagContent = "<span class=‘msg-" + tag + "‘>" + tag + "</span><span class=‘msg-datetime‘>" + date.hours + ":" + date.minutes + ":" + date.seconds + "</span>";
  37:         this.html(this.html() + "<br/>" + tagContent + "<span class=‘msg-message‘>" + msg + "</span>");
  38:     }
  39:     this.warning = function (msg) {
  40:         this.append("warning", msg);
  41:     }
  42:     this.error = function (msg) {
  43:         this.append("error", msg);
  44:     }
  45:     this.succeed= function (msg) {
  46:         this.append("succeed", msg);
  47:     }
  48:     this.debug = function (msg) {
  49:         this.append("debug", msg);
  50:     }
  51:     this.info = function (msg) {
  52:         this.append("info", msg);
  53:     }
  54:     return this;
  55: }

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

   1: .msg-message, .msg-info, .msg-warning, .msg-error, .msg-succeed, .msg-debug, .msg-datetime, .msg-view-link {
   2:     padding:3px;
   3:     -moz-border-radius:5px;
   4:     -webkit-border-radius:5px;
   5:     border-radius:5px;
   6:     margin-right:2px;
   7:     margin-left:2px;
   8:     line-height:2em;
   9:     font-family:Consolas, ‘Lucida Console‘, ‘DejaVu Sans Mono‘, monospace;
  10:     cursor:default;
  11: }
  12: .msg-info, .msg-warning, .msg-error, .msg-succeed, .msg-debug, .msg-datetime {
  13:     box-shadow:rgba(0,0,0,0.2) 1px 1px;
  14: }
  15: .msg-warning {
  16:     border:1px solid yellow;
  17: }
  18: .msg-error {
  19:     border:1px solid red;
  20: }
  21: .msg-succeed {
  22:     border:1px solid green;
  23: }
  24: .msg-debug {
  25:     border:1px solid darkgray;
  26: }
  27: .msg-info {
  28:     border:1px solid blue;
  29: }
  30: .msg-datetime {
  31:     border:1px dotted darkgray;
  32: }

 

部署

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

   1: <link rel="stylesheet" href=http://www.mamicode.com/"../Style/jquery.message.css" />
   2: <script type="text/javascript" src=http://www.mamicode.com/"../Reference/jquery/jquery-1.11.1.min.js"></script>
   3: <script type="text/javascript" src=http://www.mamicode.com/"../Library/jquery.message.js"></script>

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

 

应用

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

   1: <link rel="stylesheet" href=http://www.mamicode.com/"../Style/jquery.message.css" />
   2: <script type="text/javascript" src=http://www.mamicode.com/"../Reference/jquery/jquery-1.11.1.min.js"></script>
   3: <script type="text/javascript" src=http://www.mamicode.com/"../Library/jquery.message.js"></script>
   4: <div id="divMessage"></div>
   5: <script>
   6:     $(document).ready(function () {
   7:         var msg = $("#divMessage").message();
   8:         msg.succeed("Host web context ready.");
   9:         msg.debug("List title is ‘Data List‘.");
  10:         msg.error("List doesn‘t exist.")
  11:     });
  12: </script>

image 

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

■

 

 

署名－非商业使用－禁止演绎


联系
我们