如何让你的代码变得更优雅?这些代码规范和技巧必须知道(进阶必备,建议收藏)

Posted 欧阳呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何让你的代码变得更优雅?这些代码规范和技巧必须知道(进阶必备,建议收藏)相关的知识,希望对你有一定的参考价值。


在这里插入图片描述

1. 看你的代码就知道你几斤几两

1.1 面试常会犯的错

💂‍♂️:面试者
👨‍⚖️:面试官

  • 面试前

💂‍♂️:先把简历写好,机构老师特别交代:一出去就要说三年工作经验👲
💂‍♂️:面试题要背,工资不能要低了~
💂‍♂️:包装一下
💂‍♂️:…

  • 面试中

👨‍⚖️:问题回答的不错,可以看看你最近做的项目么?
💂‍♂️:这这这…
👨‍⚖️:或者你写的一些东西,github上有么
💂‍♂️(犹豫良久,拿出一个项目):您看下
👨‍⚖️(皱起了眉):这代码写的不对啊,考虑的不够完善…
💂‍♂️:呃呃呃…
👨‍⚖️(诧异):这里也有很明显的漏洞,这不像是一个三年经验的人写出的代码吧
💂‍♂️(满头大汗):这这这…
👨‍⚖️: 回去等通知吧(面试基本完犊子~)

  • 很多小伙伴面试都只注重“面子”,不注重“里子
  • 简历搞的高大上,牛皮吹的震天响
  • 一看代码,提几个问题,立马原形毕露
  • 实际上,我们写的每一行代码就是我们实力的最好证明,你的经验,你的技巧,你的习惯,都会在代码中展现。
  • 所以,想要提升,想升职加薪迎娶白富美,必须从改善代码习惯开始
    在这里插入图片描述

1.2 Javascript编码标准

  • 实际上,编码标准是有争议的,每个人可能都有自己的标准,但对标准应该是什么样的,则似乎很少能达成共识。
  • 但编码标准意味着,通过共同语言和一致的结构,把开发人员从无意义的工作中解放出来。把重心放在功能逻辑上去。
  • 一个好的标准能提供清晰明了的意图,是有效工作所必需的。

比较好的Javascript编码应该符合以下标准:

  • 编码错误的可能性降至最低(做好容错处理)
  • 代码适合大规模的项目和团队(一致的、可读的、可扩展的、可维护的)
  • 鼓励编码的效率、效果和复用(低耦合,高复用
  • 鼓励使用javascript的优点,避免使用它的缺点(缺点还是不少的,扬长避短)
  • 开发团队通用,无排他性

2. 编程标准

2.1 使用一致的缩进和行长

  • 代码被阅读的次数比编写它的次数要多得多
  • 所以维护性、可读性是第一的(如果你不想被后面接手的人骂娘的话,就要做好这点
  • 不知道大家有没有发现,报纸上的文本列都在50~80个字符的长度之间
  • 对人类的眼睛来说,超过80个字符的某一行,看起来会逐渐变得吃力(有相关科学研究表明)

所以我们得出来的结论是:

  • 每级代码缩进两个空格
  • 每行限制为78个字符
  • 这也是大厂通用写法,最为标准, 代码示例:
class Index extends Component {
  state = {
    navList: [
      { name: '全部', index: 0, key: 'all' },
      { name: '展示中', index: 1, key: 'sell' },
      { name: '已下架', index: 2, key: 'out' },
    ],
    pageTop: 0,
    navActive: 0,
    currentKey: 'all',
    page: 1,
    goodsData: {},
    hasMore: true,
    listLoading: false
  }
}

在这里插入图片描述

2.2 按段落组织代码

在编排代码的时候,要以清晰明白为目标,而不是减少代码的字节数
该有的空格、空白都不能少

  • 按逻辑段落组织代码,段落之间要空行
  • 每一行最多只包含一条语句或赋值语句,但是允许每行同时声明多个变量
  • 运算符和变量之间要有空格,更容易地识别变量
  • 每个逗号之后要有空格
  • 在段落内,相似的运算符要对齐
  • 缩进注释,缩进量和所解释的代码相同
// 把一个或多个声明放在一行上,但每行只有一条赋值语句
let 
	z, x, c, v, d,
	a = l,
	b = 2,
	arr = [1, 2, 3],
	obj = {aa: 1, bb: ''张三"},
	name = "法外狂徒张三"
	;

// 在下一行段落的前面添加空行
// 函数将文本写入消息容器
print_msg = function ( msg_text ){
  // 缩进注释,和它所描述的段落层级一致
  // .text() 防止xss注入
  $('#sl').text( msg_text );
};

// 函数返回随机数
get_rangdom = function ( num_arg ){
  return Math.random() * numn_arg;
};

// 初始化值
x = get_random(  10 );
y = get_random(  20 );
r = get_random( 360 );

// 添加空白,对齐相似的元素,相似的语句更容易阅读
x += 10 + num;
y -= 20 - num;

2.3 换行要一致

  • 在运算符的前面换行,开发者检查更加方便
  • 把后续的语句缩进一个层次,比如使用两个空格
  • 在逗号分隔符的后面换行
  • 方括号或者括号单独占一行。清楚地表明这是语句的结尾,不会迫使读者横向扫寻分号
// 将运算符放在左边,排成一列
let str = '我知道你也在向我靠近,' 
		+ '星河万顷都是你的见面礼。'
		+ '所以我也走向了你,'
		+ '暮色千里皆是我的回礼。'
		+ '今夜星光月夜皆归你,我也归你~'

// 方括号单独占一行,下一条语句就容易识别了
// 使用尾部逗号,更容易维护
let addressArr = [
  '湖南省',  '湖北省',  '广西省',
  '江西省',  '江苏省',  '内蒙古自治区',
  '台湾省',  '澳门,  '香港',
];

在这里插入图片描述

3. 命名规范

3.1 变量

命名规则

  • 变量名使用a - z、A - Z、0 - 9、下划线和$符号
  • 变量名不要以数字开头
  • 语义化(看其名,知其意)

作用域

  • 当变量作用域是整个模块时使用驼峰式(模块名字空间的所有地方都可以访问该变量)
  • 当变量作用域不是整个模块时使用下划线 (模块名字空间内的某个函数的局部变量)
  • 确保所有模块作用域内的变量至少有两个音节,这样作用域就会很清晰(例如下:)
    • 用户中心 ⇒ userCenter
    • 商品列表 ⇒ goodsList
    • 消息通知 ⇒ messageInfo
  • 再来一组例子:
变量初始名局部作用域模块作用域
strdirection_strdirectionStr
idgoods_idgoodsId
msguser_msguserMsg
  • 全局变量用 const 定义,常量性质,字母全部大写(尽量少定义)

3.2 命名空间

  • 早期的JavaScript代码比较简单,单独在一张页面上使用,所以大部分时间不需要考虑命名空间的问题,使用全局变量,而不会有什么影响。
  • 但是随着JavaScript应用的蓬勃发展和第三方类库的普遍使用,全局变量的数据可能会急剧上升
  • 地域之门从此便开启了。(比如,当两个代码库声明了相同的全局变量时)
  • 使用单一的全局函数,把其他所有变量的作用域限制在该函数里面,就可以极大地减少这种问题
// 模拟一个第三方库 => jQuery 
(function(window){
	// 此变量只会在此区域生效,使用完之后垃圾回收机制自动回收
	// 不会污染全局变量
	let jquery = {};
})(window)
  • 命名空间的细粒度划分
// 在 jquery.js 中
let jquery = (function () {
  // some code here 
}());

// 在 jquery.dom.js 中
let jquery.dom= (function () {
  // some code here 
}());

// 在 jquery.css.js 中
let jquery.css = (function () {
  // some code here 
}());

在这里插入图片描述

4. 松耦合,高复用

4.1 什么叫耦合?

  • 指一程序中,模块及模块之间信息或参数依赖的程度(官方解释)
  • 举个例子:
    • 多个零件在一起,组成了一辆车,各零件之间存在耦合
    • 电脑主机与显示屏,存在耦合
  • 在程序语言中,也会有耦合,比如A模块依赖于B模块
  • 我们通常是不需要耦合度很高的,除非特定组件,这样才可以达到高复用
    • 举个例子,比如布加迪的轮胎,是找米其林高度定制的,只能适用于布加迪车型,其它品牌车型是用不了的(耦合度越高,复用性越低
    • 在这里插入图片描述
    • 而电脑主机与显示器,一般耦合度就很低了,A品牌电脑主机可以用B,C,D品牌各型号的显示器,所以复用性高,可以自由组合。
    • 在这里插入图片描述

4.2 松耦合

  • 当修改一个组件而不需要更改其他组件时,就做到了松耦合
  • 耦合度视情况而定,复用性组件必须低耦合

如何松耦合?

  • 将JS从CSS中抽离:不要使用CSS表达式
//不好的做法
.box{width: expression(document.body.offsetWidth + ’px')}
  • 将CSS从JS中抽离:通过JS修改CSS样式时,使用className或classList,不要逐条修改style样式
//不好的做法一
ele.style.color = 'red';
ele.style.left= '10px';
//不好的做法二
ele.style.cssText ='color:red;left:10px;';
.reveal{color:red;left:10px;}
//好的做法一
ele.className += 'reveal';
//好的做法二
ele.classList.add('reveal');
  • 将JS从html中抽离:从JS文件放入外置文件中
  • 将HTML从JS中抽离:不要在innerHTML中拼接DOM结构,而是使用字符串模板,如handlerbars
    在这里插入图片描述

5. 函数优化

5.1 提炼函数

  • 在javascript开发中,大部分时间都在与函数打交道,所以希望这些函数有着良好的命名,函数体内包含的逻辑清晰明了
  • 如果一个函数过长,不得不加上若干注释才能让这个函数显得易读一些,那这些函数就很有必要进行重构
  • 如果在函数中有一段代码可以被独立出来,那最好把这些代码放进另外一个独立的函数中,这是一种很常见的优化工作。
  • 项目越大,必须拆分得越细,好维护(函数也是如此)
  • 千万不要一个函数从奶奶家写到外婆家去了

这样做的好处主要有以下几点:

  • 避免出现超大函数
  • 独立出来的函数有助于代码复用
  • 独立出来的函数更容易被覆写
  • 独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用

比如在一个负责取得用户信息的函数里面,还需要打印跟用户信息有关的信息,那么打印的语句就可以被封装在一个独立的函数里:

let getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        console.log( 'userId: ' + data.userId );
        console.log( 'userName: ' + data.userName );
        console.log( 'nickName: ' + data.nickName );
    });
};
//改成:
let getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        printDetails( data );
    });
};
let printDetails = function( data ){
    console.log( 'userId: ' + data.userId );
    console.log( 'userName: ' + data.userName );
    console.log( 'nickName: ' + data.nickName );
};

5.2 尽量减少参数

  • 调用一个函数时需要传入多个参数,那这个函数是让人望而生畏的(甚至调用起来还会骂娘~)
  • 必须搞清楚这些参数代表的含义,必须小心翼翼地把它们按照顺序传入该函数。
  • 在实际开发中,向函数传递参数不可避免,但应该尽量减少函数接收的参数数量

比如我们需要封装一个CSS操作库:

  • 第一版的代码
function cssTransform(ele, attr, val){
    // ele 要操作的元素
    // attr 运动属性 缩放,旋转
    // val 具体值
    if(!ele.transform){
        ele.transform = {};
    }
    if(typeof val === "undefined"){
        // 取值阶段
        // 取不到 设置默认值
        if(typeof ele.transform[attr] === "undefined"){
            switch(attr){
                case "scale":
                case "scaleX":    
                case "scaleY":    
                case "scaleZ":
                    // attr是scale 默认值是1 其它都是0
                    ele.transform[attr] = 1;
                    break;   
                default:
                    ele.transform[attr] = 0;     
            }
        }
        // 取值完毕 返回该值
        return ele.transform[attr];
    }else{
        // 赋值阶段
        ele.transform[attr] = val;      // 设置属性 方便取值
        let transformVal = "";

        for(var s in ele.transform){
            switch(s){
                case "scale":
                case "scaleX":    
                case "scaleY":    
                case "scaleZ":
                    transformVal += " " + s + "("+(ele.transform[s])+")";
                    break;
                case "rotate":
                case "rotateX":    
                case "rotateY": 
                case "rotateZ": 
                case "skewX":
                case "skewY":    
                    transformVal += " " + s + "("+(ele.transform[s])+"deg)";
                    break;
                default:
                    transformVal +=  " " + s + "("+(ele.transform[s])+"px)";    
            }
            ele.style.WebkitTransform = ele.style.transform = transformVal;
        }
    }
}
  • 我们需要传入三个参数,这就导致了传参的复杂性
  • 可以将它绑定到HTML元素上,减少传参
HTMLElement.prototype.cssTransform = function (prop, value){
    var transform,
        transformValue = "";
        if(this.transform === undefined) {
            this.transform = transform = Object.create(null);
        }
        if(value !== undefined){
            // 赋值阶段
            this.transform[prop] = value;
            transform = this.transform;
            for(var name in transform){
                switch(name){
                    case "scale":
                    case "scaleX":    
                    case "scaleY":    
                    case "scaleZ":
                        transformValue += " " + name + "("+ transform[name]+")";
                        break;
                    case "rotate":
                    case "rotateX":    
                    case "rotateY": 
                    case "rotateZ": 
                    case "skewX":
                    case "skewY":    
                        transformValue += " " + name + "("+ transform[name] + "deg)";
                        break;
                    default:
                        transformValue +=  " " + name + "("+ transform[name] + "px)";    
                }
                this.style.WebkitTransform = this.style.transform = transformValue;
            }
        }else{
            // 取值
            return this.transform[prop];
        }
}
  • 现在就只需要两个参数了
  • 核心代码没变,事件直接绑定在元素上,每一个html都拥有这个原型方法
  • 调用更加方便,传参更加简单
    在这里插入图片描述

6.条件优化

6.1 合并条件判断

  • 如果一个函数体内有一些条件分支语句,而这些条件分支语句内部散布了一些重复的代码,那么就有必要进行合并去重工作。
  • 假如有一个分页函数paging(),该函数接收一个参数currPage,currPage表示即将跳转的页码。
  • 在跳转之前,为防止currPage传入过小或者过大的数字,要手动对它的值进行修正,详见如下代码
let paging = function( currPage ){
    if ( currPage == 0 ){
        currPage = 0;
        jump( currPage ); // 跳转
    }else if ( currPage == totalPage ){
        currPage = totalPage;
        jump( currPage ); // 跳转
    }else{
        jump( currPage ); // 跳转
    }
};
  • 可以看到,负责跳转的代码jump(currPage)在每个条件分支内都出现了,所以完全可以把这句代码独立出来
let paging = function( currPage ){
    if ( currPage == 0 ){
        currPage = 0;
    }else if ( currPage == totalPage ){
        currPage = totalPage;
    }
    jump( currPage ); // 把jump 函数独立出来
};

6.2 条件语句过多,提炼成函数

  • 在程序设计中,复杂的条件分支语句是导致程序难以阅读和理解的重要原因,而且容易导致一个庞大的函数
  • 假设现在有一个需求是编写一个计算商品价格的 getPrice(),商品的计算只有一个规则:如果当前正处于夏季,那么所有冬装将以5折出售
let getPrice = function( price ){
    let date = new Date();
    if ( date.getMonth() > 6 &&  date.getMonth() < 10 ){ // 冬天
        return price * 0.5;
    }
    return price;
};
  • 判断是否处于夏季
if ( date.getMonth() > 6 &&  date.getMonth() < 10 )
  • 这句代码要表达的意思很简单,就是判断当前是否正处于夏天(7 - 9月)。
  • 尽管这句代码很短小,但代码表达的意图和代码自身还存在一些距离,阅读代码的人必须要多花一些精力才能明白它传达的意图。
  • 其实可以把这句代码提炼成一个单独的函数,既能更准确地表达代码的意思,函数名本身又能起到注释的作用
let isSummer = function(){
    let date = new Date();
    return date.getMonth() > 6 && date.getMonth() < 10;
};

let getPrice = function( price ){
    if ( isSummer() ){ // 夏天
        return price * 0.5;
    }
    return price;
};

在这里插入图片描述

7. 循环优化

7.1 高效循环

  • 在函数体内,如果有些代码实际上负责的是一些重复性的工作
  • 合理利用循环不仅可以完成同样的功能,还可以使代码量更少
  • 以for循环为例,最常规写法
for (let i = 0; i < arr.length; i++) {
    // do something...
}
  • 大多数人都是这种写法,这种写法的缺点在于,每次循环都要去读取一次数组的长度,性能上并不友好
  • 变量情况的优化写法
for (let i = 0, j = arr.length; i < j; i++) {
    // do something...
}
  • 将长度进行存储,之后循环无需再去读取长度
  • 这只是上面写法的一种变体,另一种写法而已,谈不上优化。因为无块级作用域,所以和上面的效果是一样的
  • 优化版
for (let i = arr.length - 1; i >= 0; i--) {
    // do something...
}
  • 推荐的写法,它在第上面的基础上节约了一个变量
    在这里插入图片描述

8. 如何提升js性能

8.1 性能至关重要

  • 性能是创建网页或应用程序时最重要的一个方面,特别是加载性能,如果让用户等久了,别人干脆不等了,会造成用户流失
  • 用户对于应用的体验普遍要求提高了(现在来说,2s 内打不开网页的都是不合格的网站)
  • 应用的性能瓶颈,依然是在js上

8.2 优化方向

1. 删除未使用的js代码

  • 未使用的功能性代码以及与之相关的代码(它一样的会编译,运行)
  • 多余的依赖(不需要的及时删除)

2. 数组与对象避免使用构造函数

  • 构造函数是啥?
  • new Array(), new Object()等
demoObj = () => {
    let obj = new Object()
    obj.name = '朱小明'
    obj.age = 10
    obj.sex = '男'
    return obj
}
  • 推荐写法
demoObj = () => {
    let obj = {
        name: '朱小明',
        age: 10,
        sex: '男'
    }
    return obj
}

3. 避免全局变量

  • js 的垃圾回收机制是不会销毁全局变量的
  • 所以它会常驻内存

4. 合理使用闭包

  • 闭包可以提供面向对象编程的便利,有私有属性和方法
  • 由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存
  • 过度使用闭包可能会导致内存占用过多的问题
  • 所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露

5. 减少循环中的活动

  • 循环本来就耗性能(特别是数据量大的)
  • 方法尽量不要放在循环中执行(执行多次,特别是逻辑复杂的方法,后果可想而知)

1. 如有错误,敬请指出
2. 原创不易,万字长文的总结差不多要一整天时间(熬夜肝文)
3. 如果帮到大家,请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)

3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我

在这里插入图片描述

以上是关于如何让你的代码变得更优雅?这些代码规范和技巧必须知道(进阶必备,建议收藏)的主要内容,如果未能解决你的问题,请参考以下文章

让你的JS更优雅的小技巧

9个小技巧让你的 if else看起来更优雅

分享几个简单的技巧让你的 vue.js 代码更优雅

9个小技巧让你的 if else看起来更优雅

9个小技巧让你的 if else看起来更优雅

怎么让你的代码更Pythonic?光有技巧可不行,你还需要看这些