javascript狂想曲(二)

今天带大家轻松一下，分享一下我们在日常开发中会经常用到的工具函数，绝对是干货，之后我会push到我的github仓库，供大家学习分享。

1 字符串操作

1-1 去除字符串空格

//去除空格  type 1-所有空格  2-前后空格  3-前空格 4-后空格
function trim(str,type){
    switch (type){
        case 1:return str.replace(/\s+/g,"");
        case 2:return str.replace(/(^\s*)|(\s*$)/g, "");
        case 3:return str.replace(/(^\s*)/g, "");
        case 4:return str.replace(/(\s*$)/g, "");
        default:return str;
    }
}

1-2 字母大小写切换

/*type
1:首字母大写   
2：首页母小写
3：大小写转换
4：全部大写
5：全部小写
 * */
//changeCase('asdasd',1)
//Asdasd
function changeCase(str,type)
{
    function ToggleCase(str) {
        var itemText = ""
        str.split("").forEach(
            function (item) {
                if (/^([a-z]+)/.test(item)) {
                    itemText += item.toUpperCase();
                }
                else if (/^([A-Z]+)/.test(item)) {
                    itemText += item.toLowerCase();
                }
                else{
                    itemText += item;
                }
            });
        return itemText;
    }

    switch (type) {
        case 1:
            return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
                return v1.toUpperCase() + v2.toLowerCase();
            });
        case 2:
            return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
                return v1.toLowerCase() + v2.toUpperCase();
            });
        case 3:
            return ToggleCase(str);
        case 4:
            return str.toUpperCase();
        case 5:
            return str.toLowerCase();
        default:
            return str;
    }

1-3 字符串指定替换

//replaceStr(字符串,字符格式, 替换方式,替换的字符（默认*）)
function replaceStr(str, regArr, type,ARepText) {
    var regtext = '', Reg = null,replaceText=ARepText||'*';
    //replaceStr('18819322663',[3,5,3],0)
    //188*****663
    //repeatStr是在上面定义过的（字符串循环复制），大家注意哦
    if (regArr.length === 3 && type === 0) {
        regtext = '(\\w{' + regArr[0] + '})\\w{' + regArr[1] + '}(\\w{' + regArr[2] + '})'
        Reg = new RegExp(regtext);
        var replaceCount = repeatStr(replaceText, regArr[1]);
        return str.replace(Reg, '$1' + replaceCount + '$2')
    }
    //replaceStr('asdasdasdaa',[3,5,3],1)
    //***asdas***
    else if (regArr.length === 3 && type === 1) {
        regtext = '\\w{' + regArr[0] + '}(\\w{' + regArr[1] + '})\\w{' + regArr[2] + '}'
        Reg = new RegExp(regtext);
        var replaceCount1 = repeatSte(replaceText, regArr[0]);
        var replaceCount2 = repeatSte(replaceText, regArr[2]);
        return str.replace(Reg, replaceCount1 + '$1' + replaceCount2)
    }
    //replaceStr('1asd88465asdwqe3',[5],0)
    //*****8465asdwqe3
    else if (regArr.length === 1 && type == 0) {
        regtext = '(^\\w{' + regArr[0] +  '})'
        Reg = new RegExp(regtext);
        var replaceCount = repeatSte(replaceText, regArr[0]);
        return str.replace(Reg, replaceCount)
    }
    //replaceStr('1asd88465asdwqe3',[5],1,'+')
    //"1asd88465as+++++"
    else if (regArr.length === 1 && type == 1) {
        regtext = '(\\w{' + regArr[0] +  '}$)'
        Reg = new RegExp(regtext);
        var replaceCount = repeatSte(replaceText, regArr[0]);
        return str.replace(Reg, replaceCount)
    }
}

1-4 检测字符串

/checkType('165226226326','phone')
//false
//大家可以根据需要扩展
function checkType (str, type) {
    switch (type) {
        case 'email':
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
        case 'phone':
            return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
        case 'tel':
            return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
        case 'number':
            return /^[0-9]$/.test(str);
        case 'english':
            return /^[a-zA-Z]+$/.test(str);
        case 'chinese':
            return /^[\u4E00-\u9FA5]+$/.test(str);
        case 'lower':
            return /^[a-z]+$/.test(str);
        case 'upper':
            return /^[A-Z]+$/.test(str);
        default :
            return true;
    }
}

1-5金额转换

 //金额格式化
//formatMoney(1234567.456)  1,234,567.46
        var formatMoney = function(money, digit){
            var tpMoney = new Number(money);
            if(isNaN(tpMoney)){
                return '0.00';
            }

            tpMoney = tpMoney.toFixed(digit) + '';
            var re = /^(-?\d+)(\d{3})(\.?\d*)/;

            while(re.test(tpMoney)){
                tpMoney = tpMoney.replace(re, "$1,$2$3")
            }
            return tpMoney;
        }

1-6 获取location的参数

//getParam('www.miracle.com?name=qwe&&gender=male',gender)  male
var getParam = function(name) {
        var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
        if (reg.test(location.href)) {
            return unescape(RegExp.$2.replace(/\+/g, " "))
        } else {
            return null
        }
    };

2 数组操作

2-1 去重

//removeRepeatArray([1,1,2,2,3,3])  [1,2,3]
function removeRepeatArray(arr){
    return Array.from(new Set(arr))
}

2-2 返回数组（字符串）出现最多的几次元素和出现次数

//arr, rank->长度，默认为数组长度，ranktype，排序方式，默认降序
function getCount(arr, rank，ranktype){ 
    var obj = {}, k, arr1 = []
    //记录每一元素出现的次数
    for (var i = 0, len = arr.length; i < len; i++) {
        k = arr[i];
        if (obj[k]) {
            obj[k]++;
        }
        else {
            obj[k] = 1;
        }
    }
    //保存结果{el-'元素'，count-出现次数}
    for (var o in obj) {
        arr1.push({el: o, count: obj[o]});
    }
    //排序（降序）
    arr1.sort(function (n1, n2) {
        return n2.count - n1.count
    });
    //如果ranktype为1，则为升序，反转数组
    if(ranktype===1){
        arr1=arr1.reverse();
    }
    var rank1 = rank || arr1.length;
    return arr1.slice(0,rank1);
}

2-3 筛选数组

/删除值为'val'的数组元素
//removeArrayForValue(['test','test1','test2','test','aaa'],'test','%')
//["aaa"]   带有'test'的都删除
    
//removeArrayForValue(['test','test1','test2','test','aaa'],'test')
//["test1", "test2", "aaa"]  //数组元素的值全等于'test'才被删除
function removeArrayForValue(arr,val,type){
    arr.filter(function(item){return type==='%'?item.indexOf(val)!==-1:item!==val})
}

2-4 对象数组的排序

//var arr=[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:5,b:9},{a:4,b:2,c:5},{a:4,b:5,c:7}]
//arraySort(arr2,'a,b') a是第一排序条件，b是第二排序条件
//[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:4,b:2,c:5},{a:4,b:5,c:7},{a:5,b:9}]
arraySort: function (arr, sortText) {
 if (!sortText) {
 return arr
 }
 var _sortText = sortText.split(',').reverse(), _arr = arr.slice(0);
 for (var i = 0, len = _sortText.length; i < len; i++) {
 _arr.sort(function (n1, n2) {
 return n1[_sortText[i]] - n2[_sortText[i]]
 })
 }
 return _arr;
}

3 番外篇

适配rem的解决方案

function getFontSize(){
    var doc=document,win=window;
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        //如果屏幕大于750（750是根据我效果图设置的，具体数值参考效果图），就设置clientWidth=750，防止font-size会超过100px
        if(clientWidth>750){clientWidth=750}
        //设置根元素font-size大小
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
    //屏幕大小改变，或者横竖屏切换时，触发函数
    win.addEventListener(resizeEvt, recalc, false);
    //文档加载完成时，触发函数
    doc.addEventListener('DOMContentLoaded', recalc, false);
}
//使用方式很简单，比如效果图上，有张图片。宽高都是100px;
//样式写法就是
img{
    width:1rem;
    height:1rem;
}
//这样的设置，比如在屏幕宽度大于等于750px设备上，1rem=100px；图片显示就是宽高都是100px
//比如在iphone6(屏幕宽度：375)上，375/750*100=50px;就是1rem=50px;图片显示就是宽高都是50px;

封装抖动函数

//运动的dom元素  属性 结束回调
function shake(obj,attr,endfn) {
        var arr = [];
        for (var i = 20; i > 0; i -= 2)
        {
            arr.push(i,-i);
        }
        arr.push(0);
        clearInterval(obj.shaker);
        var index = 0 ;
        obj.shaker = setInterval(function(){
            var speed = (parseInt(getStyle(obj,attr))+arr[index]);
            obj.style[attr] = speed +"px";
            ++index;
            if(index==arr.length)
            {
                clearInterval(obj.shaker);
                endfn&&endfn();
            }
        },10)
    }

封装一个ajax轮询：

(function(host, name, Event, undefined){
    var defConfig = {
        url:'/message.php',
        dataType:'json',
        method:'post',
        //间隔时间
        looptime:5 * 1000
    };
    Games = host.Games;

    var pros = {
        //初始化
        init: function(cfg){
            var me = this;
            me.timer = null;
        },
        start:function(){
            var me = this,cfg = me.defConfig,ajaxCfg = {};
            ajaxCfg = $.extend({}, cfg);
            ajaxCfg['success'] = function(data){
                me.fireEvent('beforeSuccess', data);
                me.success(data);
                me.fireEvent('afterSuccess', data);
            };
            ajaxCfg['error'] = function(xhr, type){
                me.fireEvent('beforeError', xhr ,type);
                me.error(xhr, type);
                me.fireEvent('afterError', xhr ,type);
            };
            ajaxCfg['complete'] = function(){
                me.fireEvent('beforeComplete');
                me.complete();
                me.fireEvent('afterComplete');
            };
            ajaxCfg['data'] = me.getParams();
            //console.log(me.getParams());
            $.ajax(ajaxCfg);
        },
        pause:function(){
            clearTimeout(this.timer);
        },
        loop:function(){
            var me = this,cfg = me.defConfig;
            if(cfg.looptime > 0){
                clearTimeout(me.timer);
                me.timer = setTimeout(function(){
                    me.start();
                }, cfg.looptime);
            }
        },
        getParams:function(){
            var params = [
                    {
                        'type':'account'
                    },
                    {
                        'type':'bets'
                    },
                    {
                        'type':'traces'
                    }
            ];
            return {'params':params};
        },
        success:function(data){
            this.loop();
        },
        error:function(xhr, type){
            this.loop();
        },
        complete:function(){

        }
    }

    var Main = host.Class(pros, Event);
        Main.defConfig = defConfig;
    host[name] = Main;

})(bomao, "Alive",  bomao.Event);

这个可是我们的内部代码。。。
如何使用：

var MSG = new bomao.Alive({
                        url: Games.getCurrentGame().getGameConfig().getInstance().getPollBetInfoUrl(),
                        cache:false,
                        dataType:'json',
                        method:'get',
                        // looptime:5 * 1000
                        looptime:10 * 1000
                });

                MSG.addEvent('afterSuccess', function(e, data){
                    var me = this,cfg = me.defConfig;
                        if(!checkUserTimeout(data)){
                            return;
                        }
                        if(Number(data['isSuccess']) == 1){
                            var results = data['data'];
                            $.each(results, function(){
                                switch(this['type']){
                                    case 'bets':
                                        updateBets(this['data']);
                                    break;
                                    case 'traces':
                                        updateTraces(this['data']);
                                    break;
                                    default:
                                    break;
                                }
                            });
                        }

好了，稍后我会把地址传上来。。。