jquery封裝公用類和方法

項目UI框架采用ZUI，官方地址是這里：http://zui.sexy/。是一個仿bootstrap風格的框架，對各大瀏覽器的支持度都很好，而且樣式很nice。

 

1，封裝公用方法

如果想顯示一個漂浮消息時，我們可以這樣：

// 點擊按鈕時顯示漂浮消息
$('.btn').on('click', function() {
    new $.zui.Messager('這是一個浮動消息。', {
 type:'success', //定義消息類型
        icon: 'bell' // 定義消息圖標
    }).show();
});

但是，這樣是不是太繁瑣了呢？是不是希望alert那樣簡潔呢？

我們可以用一個很經典的自執行函數來封裝。

(function(w, $) {
      function _showSuccessMsg(msg, opt) {
        new $.zui.Messager(msg, $.extend({
          type:'success',
          icon: 'check',
          time: 2000
        }, opt || {})).show();
      }

      w.WMsg = {
        showSuccessMsg: _showSuccessMsg
      };
 })(window, jQuery);

 

在調用時就非常簡單了：

WMsg.showSuccessMsg('ok');

 

2，封裝公用類

后台管理系統最多的各種表單了，需要的校驗也是非常復雜，為了解放生產力，適度的封裝是非常必要滴，來演示下如何封裝一個校驗表單的類。

<form id="formTest">
    <div class="form-group">
      <label for="title">title</label>
      <input type="text" data-check-form="notNull" name="title">
    </div>
    <div class="form-group">
      <label for="num">num</label>
      <input type="text" data-check-form="posInteger" name="num">
    </div>
    <div class="form-group">
      <label for="none">none</label>
      <input type="text" name="none" class="no-validate">
    </div>
  </form>
  <input type="text" name="outer">
  <button id="btn">按鈕</button>

 

(function(w, $){
      function ValidateForm(ele, opt) {
        opt = opt || {};
        if(!ele) return ;
        this.ele = ele || $('form');
        this.reg = {
          notNull: '不能為空',
          posInteger: '必須為正整數'
        };
      }

      ValidateForm.prototype.validate = function() {
        var flag = true;
        // 文本輸入框為例
        var inputs = $(this.ele).find('input:visible:not(.no-validate)');
        for(var i = 0; i < inputs.length; i++) {
          var regType = $(inputs[i]).attr('data-check-form');
          var label = $(inputs[i]).siblings('label').text();
          var val = $(inputs[i]).val();
          var target = null;
          switch(regType) {
            case 'notNull':
              if(!$.trim(val)) flag = false;
              if(!flag) target = 'notNull';
              break;
            case 'posInteger':
              flag = /^[0-9]*[1-9][0-9]*$/.test(val);
              if(!flag) target = 'posInteger';
              break;
          }
          if(!flag) {
            WMsg.showErrorMsg(label+this.reg[target]);
            return false;
          }
        }
      };

// 掛載到原型上
      $.fn.validateForm = function(opt){
        var v = new ValidateForm(this, opt);
        return v.validate();
      };
    })(window, jQuery);

// 使用
$('#btn').click(function() {
        if(!$('#formTest').validateForm()) {
          return ;
        }
 });

 

怎么樣，是不是很酸爽? 后續如select，radio，checkbox可以繼續在此基礎上添加，妥妥的解放生產力哦。