javascript 常用方法（一）

原生js 闭包

tips：

在项目中，我们经常遇到一些方法，原生js并没有提供现成的相关的方法，因此我们只能自己定义自己要用到的方法，并将其挂在到全局作用域的变量上，这样在函数解释执行过后，在项目中的任何位置都可以调用封装好的方法。本次主要封装了：获取url链接参数、获取格式化时间、localstorage的相关操作

1 获取url参数方法

tips：网上有用正则表达式写的函数，我是用解析url链接参数方式获取个参数

1.1 函数代码

function getUrlParam(){
        /**
        git Test
        hhh
        哦呵呵呵
        branch master-dev tijiao-issue101
        1、判断url参数个数，为空则直接返回空；
        2、判断传入的参数是否为空，
                为空：判断url参数个数，个数为1，则返回参数值；个数不为1，则返回空；
                不为空：判断url参数个数，
                        个数为1，且对应参数无参数名只有参数值，则直接返回参数值；如果对应参数包含参数名则比对参数名，一致则返回参数值，否则返回空
                        个数不为1，则遍历参数数组，寻找与参数名对应的参数值，找到则返回相应的参数值，否则返回空
        */
        let str = '';
        let url = location.href;
        let param_str = url.split('?')[1];
        if(!param_str)return;
        let key_value = param_str.split('&');
        let arg = arguments;
        if(!arg || arg.length === 0){
            if(key_value.length === 1){
                if(key_value[0].indexOf('=') === -1){
                    return key_value[0];
                }
                else{
                    return key_value[0].split('=')[1];
                }
            }
            return;
        }
        else{
            str =arguments[0].toString();
        }
        if(!key_value || key_value.length <= 0)return;
        else{
            if(key_value.length == 1){
                if(key_value[0].indexOf('=') === -1){
                    return key_value[0];
                }
                else if(key_value[0].split('=').length == 2){
                    if(key_value[0].split('=')[0] == str){
                        return key_value[0].split('=')[1];
                    }
                    else{
                        return;
                    }
                }               
            }           
            else{
                for(let i = 0; i < key_value.length; i++){
                    let param = key_value[i].split('=');
                    if(param[0] == str){
                        return param[1];
                    }
                }
                return;
            }
        }
    }

1.2 函数调用

getUrlParam()   //当url链接参数只有一个的时候，可以不指定参数名，直接返回参数值
getUrlParam（str）  //返回指定参数名对应的参数值，没有则返回空值

2 获取格式化时间

2.1 函数代码

function getFormatDate(){
        /*
            1、参数1代表传进来的日期格式，可以是日期对象，也可以是日期的value数值
            2、参数2代表最终返回结果，year、month、day、hour、minute、second 分表表示精确到对应位，week表示输出星期几
            3、参数1不传表示默认当前日期；参数2不传默认输出精确到秒
        */
        let arg = arguments[0];
        let str = arguments[1];
        let date = null;
        let weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        if(!arg){
            date = new Date();
        }
        else{
            if(typeof arg === 'object'){
                date = arg;
            }
            else{
                date = new Date(arg);
            }
        }
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
        let week = date.getDay();
        month = month > 9 ? month : ('0'+month);
        day = day > 9 ? day : ('0'+day);
        hour = hour > 9 ? hour : ('0'+hour);
        minute = minute > 9 ? minute : ('0'+minute);
        second = second > 9 ? second : ('0'+second);
        switch(str){
            case 'year': return year;
            case 'month': return year+'-'+month;
            case 'day': return year+'-'+month+'-'+day;
            case 'hour': return year+'-'+month+'-'+day+' '+hour;
            case 'minute': return year+'-'+month+'-'+day+' '+hour+':'+minute;
            case 'second': return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
            case 'week': return weeks[week];
            default: return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
        }
    }

2.2 函数调用

getFormatDate()     //获取当前时间，精确到秒
getFormatDate(arg)      //arg可以为时间戳也可以为日期对象，返回指定日期的时间，精确到秒
getFormatDate(arg1,arg2)    //arg1时间参数，arg2返回的日期格式，具体看代码首部注释

3 localStorage方法再封装

tips:

H5自带的localstorage方法，相较于cookie，极大的简化了本地存储参数。但是，其本身对localstorage封装的方法过于简单，只提供了基本功能，因此在使用过程中还是有些许不便。

3.1 setLocal 方法

tips:设置参数的同时，设置一个参数过期参数

3.1.1 函数代码

function setLocal(key,value,expire){
        let key_timestamp = key + 'TimeStamp';
        let now_timestamp = (new Date()).valueOf();
        let time = expire ? (now_timestamp + expire*24*60*60*1000) : (now_timestamp + 24*60*60*1000);
        window.localStorage[key] = value;
        window.localStorage[key_timestamp] = time;
    }

3.1.2 函数调用

setLocal(key,value,expire)      //key参数名（必传），value参数值（必传），expire参数过期时间，不传则表示1天后过期

3.2 removeLocal 方法

tips:删除参数的同时，删除对应的过期参数

3.2.1 函数代码

function removeLocal(key){
    window.localStorage.removeItem(key);
    window.localStorage.removeItem(key+'TimeStamp');
}

3.2.2 方法调用

removeLocal(key)        //删除对应的参数及过期参数

3.3 getLocal 方法

tips:获取对应的参数之前，比对对应的过期参数的时间戳与当前时间戳，如果过期则删除对应的参数以及过期参数，否则返回参数值

3.3.1 函数代码

function getLocal(key){
    let now_timestamp = (new Date()).valueOf();
    let key_timestamp = window.localStorage[key+'TimeStamp'];
    if(now_timestamp > key_timestamp){
        removeLocal(key);
        return undefined;
    }
    else{
        return window.localStorage[key];
    }
}

3.3.2 函数调用

getLocal(key)       //获取指定的参数值

4 将函数定义为全局

tips:将封装好的参数添加到全局变量里面，再置于闭包里面

(function(){
    function getUrlParam(){
        //...
    }
    function getFormatDate(){
        //...
    }
    function setLocal(key,value,expire){
        //...
    }
    function removeLocal(key){
        //...
    }
    function getLocal(key){
        //...
    }
    window.util = {
        'getUrlParam': getUrlParam,
        'getFormatDate': getFormatDate,
        'setLocal': setLocal,
        'getLocal': getLocal,
        'removeLocal': removeLocal
    };
    console.log(window.util);   //输出对应变量
})();

4.1 调用

将以上代码引入主页面，之后就可以通过window.util[str]或window.util.方式调用指定方法