前端開發 通用JS工具的封裝

weixin_33807284發表於2017-07-31
  • 網路請求工具(Ajax請求,伺服器地址配置)
  • URL路徑工具
  • 模板渲染工具
  • 欄位驗證&&通用提示
  • 統一跳轉
'use strict'
var conf = {serverHost : ''};
// 定義模組化物件
var _mm = 
{
    // 網路資料請求功能
    request : function(param)
    {
        var _this = this;        //存入mm物件
        $.ajax({
            type        : param.method || 'get',        // 從param中取方法,如果沒有預設get方法
            url         : param.url    || '',           // 預設空
            dataType    : param.type   || 'json'        // 資料型別 
            data        : param.data   || '',           // 請求時需要的資料
            // 請求成功時的方法處理
            success     : function(res)
            {
                // 請求成功
                if(0 === res.status)
                {
                    typeof param.success === 'function' && param.success(res.data, res.msg);
                }
                // 無登入狀態,需強制登入
                else if (10 === res.status)
                {
                    _this.doLogin();
                }
                // 請求資料錯誤
                else if(1 === res.status)
                {
                    typeof param.error=== 'function' && param.error(res.msg);
                }
            },                                          
            error       : function(err)
            {
                typeof param.error=== 'function' && param.error(err.statusText);
            }
        });
    },
    
    // 獲取伺服器地址
    getServerUrl : function(path)
    {
        return conf.serverHost + path;
    },
    
    // 獲取url引數
    getUrlParam : function(name)
    {
        // happymall.com/product/list?keyword=xxx&page=1
        // 提取keyword步驟:1.擷取?後引數;2.按&分開每一組keyword與value
        // 定義正規表示式
        var reg     = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        // window的location物件;search得到的是url中query部分(?keyword=xxx&page=1);substr()返回一個從指定位置開始的指定長度的子字串,設定為1,是為了把url中的?號去掉()
        var result  = window.location.search.substr(1).match(reg);
        return result ? decodeURIComponent(result[2]) : null;
    },
    
    // 渲染html模板
    renderHtml : function(htmlTemplate, data)        // 傳入模板和資料
    {
        var template    = Hogan.compile(htmlTemplate),
            result      = template.render(data);
        return result;
    },
    
    // 成功提示
    successTips : function(msg)
    {
        alert(msg || '操作成功!');
    },
    
    // 錯誤提示
    errorTips : function(msg)
    {
        alert(msg || '哪裡不對了~');
    },
    
    // 欄位的驗證,支援非空、手機、郵箱的判斷
    validate : function(value, type)
    {
        var value = $.trim(value);
        // 非空驗證,require表示必須有值
        if('require' === type)
        {
            // 返回boolean值
            return !!value;
        }
        // 手機號驗證
        if('phone' === type)
        {
            // 1開頭的11位數字
            return /^1\d{10}$/.test(value);
        }
        // 郵箱格式驗證
        if('email' === type)
        {
            return /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(value);
        }
    },
    
    // 統一登入處理
    doLogin : function()
    {
        window.location.href = './user-login.html?redirect=' + encodeURIComponent(window.location.href);        // 登入完跳回當前頁面
    },
    goHome : function()
    {
        window.location.href = './index.html';
    }
};

// 輸出模組化物件
module.exports = _mm;

相關文章