前端项目javascript 笔记（一） 持续更新

前端项目中经常会有一个全局的js，现下给大家分享一下我最近项目中常用到的函数

一、针对地址栏操作

1. 获取地址栏某一参数

$.getUrlParam = function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
};

/*测试 假设 当前地址url='https://so.csdn.net/so/search/s.do?q=javascript&t=2018&u=username'   */
console.log($.getUrlParam('q'),$.getUrlParam('t'),$.getUrlParam('u'));  //javascript   2018  username

2. 修改地址栏某一参数

$.changeURLArg(url, arg, arg_val) {
    var pattern = arg + '=([^&]*)';
    var replaceText = arg + '=' + arg_val;
    if (url.match(pattern)) {
        var tmp = '/(' + arg + '=)([^&]*)/gi';
        tmp = url.replace(eval(tmp), replaceText);
        return tmp;
    } else {
        if (url.match('[\?]')) {
            return url + '&' + replaceText;
        } else {
            return url + '?' + replaceText;
        }
    }
    return url + '\n' + arg + '\n' + arg_val;
};

/*测试 假设 当前地址  */

var url='https://so.csdn.net/so/search/s.do?q=javascript&t=2018&u=username' ;
$.changeURLArg(url, 't', Date.parse(new Date())) ;
console.log(url) ;    //https://so.csdn.net/so/search/s.do?q=javascript&t=1545014248000&u=username;

3. 访问地址 （主要结合下面的数据请求使用）；

$.getURL = function (host, URI) {
    URI = String(URI);
    var indexOf = URI.indexOf('http');
    if (Math.abs(indexOf) === indexOf) {
        return URI;
    } else {
        return host + URI;
    }
};
$.getApiHeader = function (URI) {
    return $.getURL(window.ApiHeader, URI);
};

二、数据请求

1. ajax请求
   由于我常用项目中post 用到情况比较多，这里直接使用’POST’，各位可以结合项目自定义type

$.request = function (url, data, callback, type) {
    var full_url = $.getApiHeader(url);   //调用 上面3的函数
    data = JSON.stringify(data);  //data序列化
    $.ajax({
        type: 'POST',
        url: full_url,
        data: data,
        dataType: type,
        contentType: 'application/json;charset=UTF-8',
        success: function (res) {
        //这里还能添加后端常规的返回错误信息提示，如未登录，登录超时等
            callback(res);
        },
    });
};

2. 封装表单提交

$.fn.extend({
    //封装表单生成json方法
    serializeJson: function () {
        var data = $(this).serializeArray();
        var values = {};
        var dlen = data.length;
        for (var i = 0; i < dlen; i++) {
            var item = data[i];
            values[item.name] = item.value;
        }
        return values;
    }
});

三、封装存储

1.localStorage

/*存入*/
$.add = function (menuList, dataval) {
    dataval = dataval || [];
    localStorage.setItem(menuList, JSON.stringify(dataval));
};
/*读取*/
$.get = function (menuList) {
    return JSON.parse(localStorage.getItem(menuList));
};
/*删除某一项*/
$.remove = function (menuList) {
    localStorage.removeItem(menuList);
};
/*清空*/
$.clear = function () {
    localStorage.clear();
};

2. cookie

var Cookie = {};
/*存入*/
Cookie.setCookie = function (name, value, option) {
    var str = name + '=' + escape(value);
    if (option) {
        if (option.expireHours) {
            var d = new Date();
            d.setTime(d.getTime() + option.expireHours * 3600 * 1000);
            str += '; expires=' + d.toGMTString();
        }
        if (option.path) str += '; path=' + option.path;
        if (option.domain) str += '; domain=' + option.domain;
        if (option.secure) str += '; true';
    }
    document.cookie = str;
};
/*获取某一项*/
Cookie.getCookie = function (name) {
    var arr = document.cookie.split('; ');
    if (arr.length == 0) return '';
    for (var i = 0; i < arr.length; i++) {
        tmp = arr[i].split('=');
        if (tmp[0] == name) return unescape(tmp[1]);
    }
    return '';
};
/*删除某一项*/
Cookie.delCookie = function (name) {
    this.setCookie(name, '', {
        expireHours: -1,path:'/'
    });
};
/*检查是否存在*/
Cookie.chkCookie = function (name) {
    var c = document.cookie.indexOf(name + "=");
    if (c != -1) {
        return true;
    } else {
        return false;
    }
};

后面还会不定期更新，对于开发之路尚才开始，希望各位大牛能提出一些意见，以及补充，谢谢！