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可以继续在此基础上添加，妥妥的解放生产力哦。