Loading [MathJax]/jax/output/CommonHTML/config.js
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >重构 - 用各种方式优化自己的函数库

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

作者头像
守候i
发布于 2018-08-22 10:09:35
发布于 2018-08-22 10:09:35
62400
代码可运行
举报
文章被收录于专栏：守候书阁守候书阁
运行总次数：0
代码可运行
关联问题
换一批

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

1.前言

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

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

2.单一职责原则

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

2-1.getCount

在以前的版本，对这个函数的定义是：返回数组（字符串）出现最多的几次元素和出现次数。

原来实现的方案

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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);
},

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
//返回值：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或者属性都可以处理。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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 检测字符串类型。以前的实现方式是。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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;
    }
},

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
ecDo.checkType('165226226326','mobile');
//result:false

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

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

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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;
        }
    }
})(),

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
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 函数实现方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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;
    }
}

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
//去除所有空格
ecDo.trim('  1235asd',1);
//去除左空格
ecDo.trim('  1235 asd ',3);

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

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

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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, "");
}

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
//去除所有空格
ecDo.trim('  123 5asd');
//去除左空格
ecDo.trimLeft('  1235 asd ');

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

4-2.encryptStr

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

原来方案

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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)
    }
},

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
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 。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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('');
},

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
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 合并成一个。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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);
},

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
ecDo.setCookie(cookieName,'守候',1)//设置（有效时间为1天）
ecDo.getCookie(cookieName)//获取
ecDo.removeCookie(cookieName)//删除

新增API

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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);
    }
},

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
ecDo.cookie(cookieName,'守候',1)//设置
ecDo.cookie(cookieName)//获取
ecDo.cookie(cookieName,'守候',-1)//删除(中间的值没有意义了，只要cookie天数设置了-1，就会删除。)

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

5.代码优化

5-1.checkPwdLevel

原来方案

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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;
},

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
console.log(ecDo.checkPwdLevel('asd188AS19663362_.'));
//4

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

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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

原来方案

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @description 数组顺序打乱
 * @param arr
 */
upsetArr(arr) {
    return arr.sort(() => {
         return Math.random() - 0.5
    });
},

调用方式

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
ecDo.upsetArr([1,2,3,4,5,6,7,8,9]);

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

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/**
 * @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 欢迎在评论区浏览，大家多交流，多学习。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
其他

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

其他
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
3817
Go 开发者必备：Protocol Buffers 入门指南
2247
10分钟带你彻底搞懂分布式链路跟踪
1584
多租户的 4 种常用方案
3370
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
2343
60页PPT全解：DeepSeek系列论文技术要点整理
3672
大道至简--API设计的美学
其他
对于前端开发而言，肯定会和API打交道，大家也都会想过怎么设计自己的API。优秀的 API 之于代码，就如良好内涵对于每个人。好的 API 不但利于使用者理解，开发时也会事半功倍，后期维护更是顺风顺水。至于怎么设计API，今天就提下我自己的一些建议。如果大家有什么好的想法，欢迎指点。
守候i
2018/08/22
5590
大道至简--API设计的美学
编写自己的代码库（javascript常用实例的实现与封装）
其他
因为公司最近项目比较忙，没那么多空余的事件写文章了，所以这篇文章晚了几天发布。但是这也没什么关系，不过该来的，总是会来的。 好了，其他的不多说的，大家在开发的时候应该知道，有很多常见的实例操作。比如数组去重，关键词高亮，打乱数组等。这些操作，代码一般不会很多，实现的逻辑也不会很难，下面的代码，我解释就不解释太多了，打上注释，相信大家就会懂了。但是，用的地方会比较，如果项目有哪个地方需要用，如果重复写的话，就是代码沉余，开发效率也不用，复用基本就是复制粘贴！这样是一个很不好的习惯，大家可以考虑一下把一些常见的操作封装成函数，调用的时候，直接调用就好！ 源码都放在github上了，大家想以后以后有什么修改或者增加的，欢迎大家来star一下ec-do。
守候i
2018/08/22
1.4K0
编写自己的代码库（javascript常用实例的实现与封装）
重构 - 改善代码的各方面问题
其他
做前端开发有一段时间了，在这段时间里面，对于自己的要求，不仅仅是项目能完成，功能正常使用这一层面上。还尽力的研究怎么写出优雅的代码，性能更好，维护性更强的代码，通俗一点就是重构。这篇文章算是我一个小记录，在此分享一下。该文章主要针对介绍，例子也简单，深入复杂的例子等以后有适合的实例再进行写作分享。如果大家对怎么写出优雅的代码，可维护的代码，有自己的见解，或者有什么重构的实力，欢迎指点评论。
守候i
2018/04/23
1.2K3
重构 - 改善代码的各方面问题
框架设计续集（五）
其他
==之前的选择器函数都是基本选择器，怎么实现组合，兄弟，后代，过滤等等== <!--组合选择器的实现--> /** * Created by Administrator on 2017/11/26. */ //假设context是一个选择器字符串 //只需要将选择器字符串转化为dom伪数组 //需要改变得就是在获取元素的上下文做相应的更改 /*对浏览器能力检测模块B*/ var support ={}; support.getElementsByClassName = (function(){
天天_哥
2018/09/29
3100
正则表达式基础
正则表达式编程算法
正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。
不愿意做鱼的小鲸鱼
2022/08/24
2210
正则表达式基础
JavaScript 总结（前端常用工具类的封装）
javascript
JavaScript （class是ES6的新东西，看着不爽可以变，但主要还是里面的方法） 1. type 类型判断 class TypeFn { isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } isNumber (o) { //是否数字 return Object.prototype.toString.call(o
纪莫
2018/04/19
2.5K1
100个常用的 JS 代码片段分享，值得你收藏
javanode.jsandroididephp
function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = str.substr(i, 1); if (patrn.exec(temp) == null) { icount = icount + 1 } else { icount = icount + 2 } strre += temp } else { break } } return strre + "..." }
前端达人
2021/10/08
2.4K0
前端60余种工具方法，值得收藏
php编程算法网站
“ 关注 前端开发社区 ，回复 '领取资源'，免费领取Vue，小程序，Node Js，前端开发用的插件以及面试视频等学习资料，让我们一起学习，一起进步
前端老道
2020/05/27
9620
前端60余种工具方法，值得收藏
快来领取，33个常用JavaScript功能已封装成方法，拿来即用
php编程算法
在实际开发中，为了提高开发的效率，我们会把常用到的功能封装成方法，这样后期开发需要，拿来即用。
艾编程
2022/12/04
2.9K0
快来领取，33个常用JavaScript功能已封装成方法，拿来即用
JS 活学活用正则表达式
其他
网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~
前端下午茶
2018/10/22
2.4K0
第五节正则
其他
----------------------------------正则的作用------------------------------------------- 正则：就是一个规则，用来处理字符串的一个规则（正则是用来处理字符串的） 处理： 1>匹配 判断一个字符串是否符合我们制定的规则 var reg = /\d/; console.log(reg.test("张")); console.log(reg.test("张3")); 2>捕获 把字符串中符合我们正则规则的
河湾欢儿
2018/09/06
4190
编写自己的代码库（javascript常用实例的实现与封装--续）
其他
这个系列的上一篇文章（编写自己的代码库（javascript常用实例的实现与封装））总结了34个常见的操作。但是在开发中，常见的实例又何止这么多个，经过这些日子的探索，以及他人的意见，现在得追加一些操作实例了。希望能帮到大家，也希望如果大家觉得有什么需要追加的，觉得我哪里写得不好或者写错了，欢迎评论或者私信我！另外，项目仍然是之前的那个，代码已经上传上去了，也欢迎大家在github上面star一下ec-do！ 好，下面正式进入正文！
守候i
2018/08/22
8510
js知识点总结--这些你都了解了吗？
xmljavajson编程算法javascript
js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言。也是一种广泛用于web客户端开发的脚本语言，常用来给html网页添加动态功能，如响应用户的各种操作。想了解更多加群1075083208主要的目的是为了解决服务器端语言遗留的速度问题，为客户提供更流畅的浏览效果。
7537367
2020/08/03
6360
最全字符串函数，总有你用到的~
javascript编程算法
在日常开发中，我们难免要和字符串打交道，各种各样的功能都可能用到上面的字符串函数，本文参考网上文章，W3C资料，以及自己平常开发中的高频需求整理形成，希望能够帮到有需要的人。
前端老王
2020/11/26
3810
大佬日常必备的JS工具函数大全
php编程算法css网络安全
前面我们分享过一篇：前端常用的60多种JavaScript工具方法，很多人觉得有用，今天再分享一篇类似的东西，如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的最大动力
前端开发博客
2020/11/04
1.6K0
JavaScript常用的工具函数，不全面大家补充哦
编程算法php文件存储javascript微信
JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中等等。
苏州程序大白
2021/12/15
3650
JavaScript常用的工具函数，不全面大家补充哦
关于JavaScript常用的工具函数汇总
编程算法php网站
前言 随着开发经验的积累，很多人会有自己的常用站点，一些网址收藏，自己造的轮子或者别人的轮子，工具函数库等等。 这里提供一些常用的工具函数，如果你也有一些觉得挺不错的库，欢迎在下方评论💓。 格式化时间戳 export function formatDateTimeStamp(date, fmt) { // 格式化时间戳 : formatDateTimeStamp(new Date(time),'yyyy-MM-dd hh:mm:ss') if (/(y+)/.test(fmt)) {
唐志远
2022/10/27
5750
js工具函数大全 || 实用篇
编程算法phpipv6tcp/ip
“ 关注 前端开发社区 ，回复 '领取资源'，免费领取Vue，小程序，Node Js，前端开发用的插件以及面试视频等学习资料，让我们一起学习，一起进步
前端老道
2020/05/29
4.8K0
js工具函数大全 || 实用篇
36个工作中常用的JavaScript函数片段
编程算法https网络安全githubunix
文章同步持续更新，往期文章收录在https://github.com/Wscats/art...
wscats
2022/05/05
5240
前端速记
闭包对象函数前端数组
日常记录一些 js/css 相对实用的小笔记，本笔记保持长期更新，如有错误或更好的方案留言反馈
2Broear
2024/03/12
2210
前端速记
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪多租户的 4 种常用方案亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？60页PPT全解：DeepSeek系列论文技术要点整理
相关讨论
老旧架构是边造轮子边优化，还是直接重构?必须用自己现成的业务代码去优化吗？自己的腾讯云被公司用会有风险吗？
相关课程
腾讯云WeData大数据开发与治理训练营腾讯云向量数据库快速上手训练营数字化IT从业者知识体系
大道至简--API设计的美学
5590
编写自己的代码库（javascript常用实例的实现与封装）
1.4K0
重构 - 改善代码的各方面问题
1.2K3
框架设计续集（五）
3100
正则表达式基础
2210
JavaScript 总结（前端常用工具类的封装）
2.5K1
100个常用的 JS 代码片段分享，值得你收藏
2.4K0
前端60余种工具方法，值得收藏
9620
快来领取，33个常用JavaScript功能已封装成方法，拿来即用
2.9K0
JS 活学活用正则表达式
2.4K0
第五节正则
4190
编写自己的代码库（javascript常用实例的实现与封装--续）
8510
js知识点总结--这些你都了解了吗？
6360
最全字符串函数，总有你用到的~
3810
大佬日常必备的JS工具函数大全
1.6K0
JavaScript常用的工具函数，不全面大家补充哦
3650
关于JavaScript常用的工具函数汇总
5750
js工具函数大全 || 实用篇
4.8K0
36个工作中常用的JavaScript函数片段
5240
前端速记
2210
相关推荐
大道至简--API设计的美学
更多 >
守候i0
LV.0
广州找原料web前端开发
文章
61
获赞
186
专栏
1
作者相关精选
换一批
加入讨论
的问答专区 >
小明互联网技术分享社区0
1Java工程师擅长4个领域
相关课程
一站式学习中心 >
腾讯云WeData大数据开发与治理训练营
1498人在学
数据开发治理平台 WeData
腾讯云向量数据库快速上手训练营
1117人在学
向量数据库
数字化IT从业者知识体系
437人在学
CODING DevOps
软件开发
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
1
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验