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;
                                }
                            });
                        }

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,211评论 0 4
  • 现在的孩子,一感冒家长们都紧张的不行,除了吃药就是上医院,那我们学中医养生的,怎么样来解决这个问题呢? 首先,我们...
    智慧树731阅读 509评论 2 4
  • 這第一部分,一開頭這樣講, This is a delicious evening, when the whole...
    演維阅读 889评论 0 1
  • 最近我们家的新房子打算开始装修,其实装修的事情和筹备我一直没有问过,都是我老公在筹备,一方面相信他,另一方面其...
    梅韵Eva阅读 161评论 0 2