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

  • 網絡請求工具(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;
相關文章
相關標籤/搜索