为了账号安全,请及时绑定邮箱和手机立即绑定

重构 - 用各种方式优化自己的函数库

有时候,我会想:比我优秀的人,比我更努力。我努力有什么用。但是现在我习惯反过来想这句话,别人为什么会比我优秀,就是因为别人比我更努力。与其拼天赋,更不如比行动。

1.前言

最近有几天时间空闲,也是在学怎么写更有可读性的代码,更简单,方便的API。简单来说就是重构方面的内容。今天简单分享下,对以前一个小项目(ecDo,欢迎大家star)的API重构方式,下面的的代码如无说明,都是选取自我的项目中这个文件:ec-do-3.0.0-beta.1.js 中的 ecDo 这个对象(针对不同的重构目的,只列举1-3个代表实例,不一一列出)。如果大家有什么更好的方式,也欢迎在评论区留下您的建议。

首先说明一点,重构大家不要为重构而重构,要有目的重构。下面的改动,都是针对我原来的实现方式,更换更好的实现方式。主要会涉及在日常开发上,频繁使用的三个设计原则(单一职责原则,开放-封闭原则,最少知识原则),关于API设计的原则,不止三个。还有里式替换原则,依赖倒置原则等,但是这几个日常开发上没有感觉出来,所以这里就不多说了。 然后就是,虽然这几个带有‘原则’的字样,但是这些原则只是一个建议,指导的作用,没有哪个原则是必须要遵守的,在开发上,是否应该,需要遵守这些原则,具体情况,具体分析。

2.单一职责原则

这部分内容,主要就是有些函数,违反了单一职责原则。这样潜在的问题,可能会造成函数巨大,逻辑混乱,导致代码难以维护等。

2-1.getCount

在以前的版本,对这个函数的定义是:返回数组(字符串)出现最多的几次元素和出现次数。

原来实现的方案

/**
 * @description 降序返回数组(字符串)每个元素的出现次数
 * @param arr 待处理数组
 * @param rank 长度 (默认数组长度)
 * @param ranktype 排序方式(默认降序)
 */
getCount(arr, rank, ranktype) {
    let obj = {}, k, arr1 = []
    //记录每一元素出现的次数
    for (let i = 0, len = arr.length; i < len; i++) {
        k = arr[i];
        if (obj[k]) {
            obj[k]++;
        } else {
            obj[k] = 1;
        }
    }
    //保存结果{el-'元素',count-出现次数}
    for (let 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();
    }
    let rank1 = rank || arr1.length;
    return arr1.slice(0, rank1);
},

调用方式

//返回值:el->元素,count->次数
ecDo.getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2])
//默认情况,返回所有元素出现的次数
//result:[{"el":"2","count":6},{"el":"1","count":4},{"el":"3","count":2},{"el":"4","count":1},{"el":"5","count":1},{"el":"6","count":1}]

ecDo.getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3)
//传参(rank=3),只返回出现次数排序前三的
//result:[{"el":"2","count":6},{"el":"1","count":4},{"el":"3","count":2}]

ecDo.getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],null,1)
//传参(ranktype=1,rank=null),升序返回所有元素出现次数
//result:[{"el":"6","count":1},{"el":"5","count":1},{"el":"4","count":1},{"el":"3","count":2},{"el":"1","count":4},{"el":"2","count":6}]

ecDo.getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2],3,1)
//传参(rank=3,ranktype=1),只返回出现次数排序(升序)前三的
//result:[{"el":"6","count":1},{"el":"5","count":1},{"el":"4","count":1}]

这样目前是没有问题,但是这个函数承担了三个职责。统计次数,处理长度,排序方式。而且,处理长度和排序方式,有其他的原生处理方式,在这里写感觉有些鸡肋。

所以,重构这个API,就只保留统计次数这个职。至于长度和排序,有很多方式处理,slice,splice,length,sort等API或者属性都可以处理。

/**
 * @description 降序返回数组(字符串)每个元素的出现次数
 * @param arr
 * @return {Array}
 */
getCount(arr) {
    let obj = {}, k, arr1 = []
    //记录每一元素出现的次数
    for (let i = 0, len = arr.length; i < len; i++) {
        k = arr[i];
        if (obj[k]) {
            obj[k]++;
        } else {
            obj[k] = 1;
        }
    }
    //保存结果{el-'元素',count-出现次数}
    for (let o in obj) {
        arr1.push({el: o, count: obj[o]});
    }
    //排序(降序)
    arr1.sort(function (n1, n2) {
        return n2.count - n1.count
    });
    return arr1;
},
3.开放-封闭原则

3-1.checkType

checkType 检测字符串类型。以前的实现方式是。

/**
 * @description 检测字符串
 * @param str 待处理字符串
 * @param type 待检测的类型
 */
checkType(str, type) {
    switch (type) {
        case 'email':
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
        case 'mobile':
            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 'text':
            return /^\w+$/.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;
    }
},

调用方式

ecDo.checkType('165226226326','mobile');
//result:false

因为 165226226326 不是一个有效的电话格式,所以返回false。但是这样会存在一个问题就是,如果以后我想加什么检测的规则呢?比如增加一个密码的规则。密码可以报错大小写字母,数字,点和下划线。上面的方案,就是只能在增加一个case。这样改违反了开放-封闭原则,而且这样会存在什么问题,我在之前讲策略模式的时候,已经提及,这里不重复。

所以我的做法就是,给它增加扩展性。

/**
 * @description 检测字符串
 */
checkType:(function(){
    let rules={
        email(str){
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
        },
        mobile(str){
            return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
        },
        tel(str){
            return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
        },
        number(str){
            return /^[0-9]$/.test(str);
        },
        english(str){
            return /^[a-zA-Z]+$/.test(str);
        },
        text(str){
            return /^\w+$/.test(str);
        },
        chinese(str){
            return /^[\u4E00-\u9FA5]+$/.test(str);
        },
        lower(str){
            return /^[a-z]+$/.test(str);
        },
        upper(str){
            return /^[A-Z]+$/.test(str);
        }
    };
    return {
        /**
        * @description 检测接口
        * @param str 待处理字符串
        * @param type 待检测的类型
        */
        check(str, type){
            return rules[type]?rules[type](str):false;
        },
        /**
        * @description 添加规则扩展接口
        * @param type 规则名称
        * @param fn 处理函数
        */
        addRule(type,fn){
            rules[type]=fn;
        }
    }
})(),

调用方式

console.log(ecDo.checkType.check('165226226326','mobile'));//false
ecDo.checkType.addRule('password',function (str) {
    return /^[-a-zA-Z0-9._]+$/.test(str);
})
console.log(ecDo.checkType.check('***asdasd654zxc','password'));//false

调用麻烦了一些,但是扩展性有了,以后面对新的需求可以更灵活的处理。

4.最少知识原则

最少知识原则,官方一点的解释是:一个对象应当对其他对象有尽可能少的了解。在下面表现为:尽可能的让用户更简单,更方便的使用相关的API。具体表现看下面的例子

4-1.trim

以前 trim 函数实现方式

/**
 * @description 大小写切换
 * @param str 待处理字符串
 * @param type 去除类型(1-所有空格  2-左右空格  3-左空格 4-右空格)
 */
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;
    }
}

调用方式

//去除所有空格
ecDo.trim('  1235asd',1);
//去除左空格
ecDo.trim('  1235 asd ',3);

这样的方式存在有目共睹,代表 type 参数的1,2,3,4可以说是一个神仙数,虽然对于开发者而言,知道是什么。但是如果有其他人使用,那么这样的 API 就增加了记忆成本和调用的复杂性。

为了解决这个问题,处理方式就分拆 API 。

/**
 * @description 清除左右空格
 */
trim(str) {
    return str.replace(/(^\s*)|(\s*$)/g, "");
},
/**
 * @description 清除所有空格
 */
trimAll(str){
    return str.replace(/\s+/g, "");
},
/**
 * @description 清除左空格
 */
trimLeft(str){
    return str.replace(/(^\s*)/g, "");
},
/**
 * @description 清除右空格
 */
trimRight(str){
    return str.replace(/(\s*$)/g, "");
}

调用方式

//去除所有空格
ecDo.trim('  123 5asd');
//去除左空格
ecDo.trimLeft('  1235 asd ');

这样 API 多了,但是记忆成本和调用简单了。

4-2.encryptStr

下面的 API 在简单使用方便,表现得更为突出

原来方案

/**
 * @description 加密字符串
 * @param str 字符串
 * @param regArr 字符格式
 * @param type 替换方式
 * @param ARepText 替换的字符(默认*)
 */
encryptStr(str, regArr, type = 0, ARepText = '*') {
    let regtext = '',
        Reg = null,
        replaceText = ARepText;
    //repeatStr是在上面定义过的(字符串循环复制),大家注意哦
    if (regArr.length === 3 && type === 0) {
        regtext = '(\\w{' + regArr[0] + '})\\w{' + regArr[1] + '}(\\w{' + regArr[2] + '})'
        Reg = new RegExp(regtext);
        let replaceCount = this.repeatStr(replaceText, regArr[1]);
        return str.replace(Reg, '$1' + replaceCount + '$2')
    }
    else if (regArr.length === 3 && type === 1) {
        regtext = '\\w{' + regArr[0] + '}(\\w{' + regArr[1] + '})\\w{' + regArr[2] + '}'
        Reg = new RegExp(regtext);
        let replaceCount1 = this.repeatStr(replaceText, regArr[0]);
        let replaceCount2 = this.repeatStr(replaceText, regArr[2]);
        return str.replace(Reg, replaceCount1 + '$1' + replaceCount2)
    }
    else if (regArr.length === 1 && type === 0) {
        regtext = '(^\\w{' + regArr[0] + '})'
        Reg = new RegExp(regtext);
        let replaceCount = this.repeatStr(replaceText, regArr[0]);
        return str.replace(Reg, replaceCount)
    }
    else if (regArr.length === 1 && type === 1) {
        regtext = '(\\w{' + regArr[0] + '}$)'
        Reg = new RegExp(regtext);
        let replaceCount = this.repeatStr(replaceText, regArr[0]);
        return str.replace(Reg, replaceCount)
    }
},

调用方式

ecDo.encryptStr('18819322663',[3,5,3],0,'+')
//result:188+++++663
ecDo.encryptStr('18819233362',[3,5,3],1,'+')
//result:+++19233+++
ecDo.encryptStr('18819233362',[5],0)
//result:*****233362
ecDo.encryptStr('18819233362',[5],1)
//result:"188192*****"

这个 API 存在的问题也是一样,太多的神仙数,比如[3,5,3],1,0等。相对于4-1的例子,这个对使用这造成的记忆成本和调用复杂性更大。甚至很容易会搞晕。如果是阅读源码,if-else的判断,别说是其他人了,就算是我这个开发者,我都会被搞蒙。

处理这些问题,也类似4-1。拆分 API 。

/**
 * @description 加密字符串
 * @param regIndex 加密位置  (开始加密的索引,结束加密的索引)
 * @param ARepText 加密的字符 (默认*)
 */
encryptStr(str, regIndex, ARepText = '*') {
    let regtext = '',
        Reg = null,
        _regIndex=regIndex.split(','),
        replaceText = ARepText;
    //repeatStr是在上面定义过的(字符串循环复制),大家注意哦
    _regIndex=_regIndex.map(item=>+item);
    regtext = '(\\w{' + _regIndex[0] + '})\\w{' + (1+_regIndex[1]-_regIndex[0]) + '}';
    Reg = new RegExp(regtext);
    let replaceCount = this.repeatStr(replaceText, (1+_regIndex[1]-_regIndex[0]));
    return str.replace(Reg, '$1' + replaceCount);
},
 /**
 * @description 不加密字符串
 * @param regIndex 不加密位置  (开始加密的索引,结束加密的索引)
 * @param ARepText 不加密的字符 (默认*)
 */
encryptUnStr(str, regIndex, ARepText = '*') {
    let regtext = '',
        Reg = null,
        _regIndex=regIndex.split(','),
        replaceText = ARepText;
    _regIndex=_regIndex.map(item=>+item);
    regtext = '(\\w{' + _regIndex[0] + '})(\\w{' + (1+_regIndex[1]-_regIndex[0]) + '})(\\w{' + (str.length-_regIndex[1]-1) + '})';
    Reg = new RegExp(regtext);
    let replaceCount1 = this.repeatStr(replaceText, _regIndex[0]);
    let replaceCount2 = this.repeatStr(replaceText, str.length-_regIndex[1]-1);
    return str.replace(Reg, replaceCount1 + '$2' + replaceCount2);
},
/**
 * @description 字符串开始位置加密
 * @param regIndex 加密长度
 * @param ARepText 加密的字符 (默认*)
 */
encryptStartStr(str,length,replaceText = '*'){
    let regtext = '(\\w{' + length + '})';
    let Reg = new RegExp(regtext);
    let replaceCount = this.repeatStr(replaceText, length);
    return str.replace(Reg, replaceCount);
},
/**
 * @description 字符串结束位置加密
 * @param regIndex 加密长度
 * @param ARepText 加密的字符 (默认*)
 */
encryptEndStr(str,length,replaceText = '*'){
    return this.encryptStartStr(str.split('').reverse().join(''),length,replaceText).split('').reverse().join('');
},

调用方式

console.log(`加密字符 ${ecDo.encryptStr('18819233362','3,7','+')}`)
//result:188+++++362
console.log(`不加密字符 ${ecDo.encryptUnStr('18819233362','3,7','+')}`)
//result:+++19233+++
console.log(`字符串开始位置加密 ${ecDo.encryptStartStr('18819233362','4')}`)
//result:****9233362
console.log(`字符串结束位置加密 ${ecDo.encryptEndStr('18819233362','4')}`)
//result:1881923****

结果一样,但是调用就比之前简单了,也不需要记忆太多东西。

类似4-1和4-2的改动还有几个实例,在这里就不列举了!

4-3.cookie

这个实例与上面两个实例不太一样,上面两个 API 为了简化使用,把一个 API 拆分成多个,但是这个 API 是把多个 API 合并成一个。

/**
 * @description 设置cookie
 * @param name cookie名称
 * @param value 值
 * @param iDay 有效时间(天数)
 */
setCookie(name, value, iDay) {
    let oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay);
    document.cookie = name + '=' + value + ';expires=' + oDate;
},
/**
 * @description 获取cookie
 * @param name cookie名称
 */
getCookie(name) {
    let arr = document.cookie.split('; '),arr2;
    for (let i = 0; i < arr.length; i++) {
        arr2 = arr[i].split('=');
        if (arr2[0] == name) {
            return arr2[1];
        }
    }
    return '';
},
/**
 * @description 删除cookie
 * @param name cookie名称
 */
removeCookie(name) {
    this.setCookie(name, 1, -1);
},

调用方式

ecDo.setCookie(cookieName,'守候',1)//设置(有效时间为1天)
ecDo.getCookie(cookieName)//获取
ecDo.removeCookie(cookieName)//删除

新增API

/**
 * @description 操作cookie
 * @param name cookie名称
 * @param value 值
 * @param iDay 有效时间(天数)
 */
cookie(name, value, iDay){
    if(arguments.length===1){
        return this.getCookie(name);
    }
    else{
        this.setCookie(name, value, iDay);
    }
},

调用方式

ecDo.cookie(cookieName,'守候',1)//设置
ecDo.cookie(cookieName)//获取
ecDo.cookie(cookieName,'守候',-1)//删除(中间的值没有意义了,只要cookie天数设置了-1,就会删除。)

这样调用,使用方法的记忆成本增加了,但是不需要记3个API,只需要记一个。

5.代码优化

5-1.checkPwdLevel

原来方案

/**
 * @description 检测密码强度
 */
checkPwdLevel(str) {
    let nowLv = 0;
    if (str.length < 6) {
        return nowLv
    }
    if (/[0-9]/.test(str)) {
        nowLv++
    }
    if (/[a-z]/.test(str)) {
        nowLv++
    }
    if (/[A-Z]/.test(str)) {
        nowLv++
    }
    if (/[\.|-|_]/.test(str)) {
        nowLv++
    }
    return nowLv;
},

调用方式

console.log(ecDo.checkPwdLevel('asd188AS19663362_.'));
//4

这样写没问题,但是想必大家和我一样,看到if有点多,而且if为true的时候,做的事情还是一样的,就忍不住要折腾了。就有了下面的方案。

/**
 * @description 检测密码强度
 */
checkPwdLevel(str) {
    let nowLv = 0;
    if (str.length < 6) {
        return nowLv
    }
    //把规则整理成数组,再进行循环判断
    let rules=[/[0-9]/,/[a-z]/,/[A-Z]/,/[\.|-|_]/];
    for(let i=0;i<rules.length;i++){
        if(rules[i].test(str)){
            nowLv++;
        }
    }
    return nowLv;
},

这样写,处理的事情是一样的,性能方面可以忽略不计,但是看着舒服。

5-2.upsetArr

原来方案

/**
 * @description 数组顺序打乱
 * @param arr
 */
upsetArr(arr) {
    return arr.sort(() => {
         return Math.random() - 0.5
    });
},

调用方式

ecDo.upsetArr([1,2,3,4,5,6,7,8,9]);

这种方式没错,但是有个遗憾的地方就是不能实现完全乱序,就是乱的不够均匀。所以换了一种方式。

/**
 * @description 数组顺序打乱
 * @param arr
 * @return {Array.<T>}
 */
upsetArr(arr) {
    let j,_item;
    for (let i=0; i<arr.length; i++) {
        j = Math.floor(Math.random() * i);
        _item = arr[i];
        arr[i] = arr[j];
        arr[j] = _item;
    }
    return arr;
},

原理就是遍历数组元素,然后将当前元素与以后随机位置的元素进行交换,这样乱序更加彻底。

6.小结

关于重构我自己的代码库,暂时就是这么多了,这些实例只是部分,还是一些 API 因为重构的目的,实现方式都基本一样,就不重复举例了。需要的到 github (ec-do-3.0.0-beta.1.js)上面看就好,关于我重构的这个文件,现在也只是一个 demo ,测试的阶段,以后还是继续的改进。如果大家有什么建议,或者需要增加什么 API 欢迎在评论区浏览,大家多交流,多学习。

点击查看更多内容
6人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.7万
获赞与收藏
966

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消