资讯专栏INFORMATION COLUMN

前端开发 通用JS工具的封装

plokmju88 / 3336人阅读

摘要:网络请求工具请求,服务器地址配置路径工具模板渲染工具字段验证通用提示统一跳转定义模块化对象网络数据请求功能存入对象从中取方法,如果没有默认方法默认空数据类型请求时需要的数据请求成功时的方法处理请求成功无登录状态,需强制登录请求数据错误获取服

网络请求工具(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 /^1d{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;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84499.html

相关文章

  • 前后端架子搭建

    摘要:开发语言前端前端这里使用,打包工具是后端后端使用的语言依旧是熟悉的,使用搭建后端框架。 前言 作为一名前端开发者,了解一些后端语言,成为半个全栈工程师也是最基本的(23333),就本篇文章,给大家介绍一下我的前后端目录结构,不喜勿喷,也希望各位给我一些意见,哈哈哈。 开发语言 前端 前端这里使用react.js,打包工具是parcel 后端 后端使用的语言依旧是熟悉的node.js,使...

    mikyou 评论0 收藏0
  • 如何更有效率和质量地开发Vue项目

    摘要:前言自总结完了上篇前端工程化的思想,并在全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发项目,以及其中踩过的一个个坑。。。 前言 自总结完了上篇前端工程化的思想,并在vue全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发vue项目,以及其中踩过的一个个坑。。。 基于vue-cli的自定义模板(Custom Templates) 小伙伴们的vue项目应该都...

    ShevaKuilin 评论0 收藏0

发表评论

0条评论

plokmju88

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<