工作中使用javascript的一些小结

发布于 2020-8-28 20:21
浏览
0收藏

不知不觉,正式工作马上两年了,待了两家公司,做过的项目也不少了,总结一下自己在写代码上的经验累积。
1. 确定变量的类型
不要使用==,使用===
JS是弱类型语言,类型检查不严格。在判断两个变量是否相等的时候,使用==会进行隐式的类型转换。比如:

['a'] == 'a'; // true;
1 == '1'; // true;
在前端项目日益复杂的今天,早已不再是后端吐出数据,前端直接展示就行了。一些计算是需要放在前端进行的。前端要进行计算,那么变量的类型在整个过程中,就必须是明确的。不然很容易出一些bug。举个最简单的例子,

var a = '0.1'; 
var b;
if(a == 0.1) {
    b = a.toFixed(3); // 出错,因为字符串没有toFixed方法。
}
多使用const声明变量
声明一个变量的时候,首先明确这个变量的类型,用const 进行声明。这样后续写代码过程中,能够清晰的知道这个变量的类型,避免对变量进行不合法的操作或者一不小心对变量进行了修改,出现bug。并且,一开始使用const声明变量,后续review代码时,思路能稍微清晰一点(这个变量就是用来干这个事情的,它是不会改变的)。而let用来声明一些根据判断条件会发生变化的变量。

使用大写的变量名来定义常量
使用const来声明变量后,那用什么来声明常量,并且可以避免和const声明的变量混淆呢?可以采用大写变量名来声明常量。比如圆周率

const PI =3.1415926535;

在代码中,看到名字大写的变量是,我就知道了,这是一个全局的常量。

2. 多使用纯函数
纯函数,就是不会产生副作用的函数。举一个例子,

const fn = arr => { // 非纯函数
    arr.push(1);
}

const pureFn = arr => {  // 纯函数
    return [].slice.call(arr).push(1);
}

const oldArr = [2,3];
fn(oldArr); // fn修改了原数组,不纯

const newArr = pureFn(oldArr); // pureFn返回了一个新数组,没有修改原数组。

使用纯函数的好处是,函数的输出仅仅依赖输入,不会受外部条件影响,并且不会影响到外部的环境。调试代码时,可以以函数为单位来验证、测试。

像上面的例子,我们在函数fn中修改了oldArr, 如果我们在另外一个地方又需要操作oldArr的时候, 我们能100%的保证知道这个oldArr已经被修改过了嘛?当业务逻辑变得复杂的时候,我们很容易就忽略了这个问题,导致出现莫名其妙的bug。而纯函数就不会有这种问题,我们只需要关注其输入和输出就行。

再考虑一种情况,在使用vue或者react进行开发的时候,经常会遇到我明明更新了这个数组,可是页面没有重新渲染的问题。这是因为,vue和react在进行数据的diff时,对于数组(引用数据类型),都没有采用深比较。如果我仅仅只改变了数组中的一个元素时,数组其实并没有变化,vue和react发现没有diff,当然不会重新渲染。使用纯函数就不会有这个问题,因为每次都是返回一个全新的数组。

3. 函数中尽量避免if、else的嵌套
if 、else是十分常见的一种逻辑。如果在代码中,出现了复杂的嵌套,会降低代码可读性,并且容易出错。比如下面的代码:

function fn (a,b,c){
    if(a>1){
        if(b === c){
            return true;
        } else {
            return false;
        }
    } else {
        return true;
    }
}


以上代码可以改写为,避免了多层的嵌套,代码的可读性得到了增强。

function fn(a,b,c){
    if(a <= 1) {
        return true;
    }
    if(b === c){
        return true;
    }
    return false;
}


同时,还可以多使用短路,减少if 、 else的使用

var b;
if(condition) {
    b = 1;
}

// 可以改写成
var b;
condition && (b = 1);


4. 熟练使用数组的各种操作方法
Array.forEach、Array.map、Array.filter、Array.reduce等等,都是特别好用的数组操作方法,几乎可以满足各种的遍历需要了,比for循环来得优雅。

Array.forEach仅对原数组进行一次遍历。
Array.map对原数组进行遍历,返回一个新数组。
Array.filter对原数组进行过滤,同时返回一个新数组。
Array.reduce对原数组进行一次遍历,可以进行累加。
但其实for循环有一个以上方法都没有的优点,for循环可以随时中止数组的遍历,break一下就行。

可以根据不同场景采用不同的遍历方法。

5. 减少对jQuery、zepto的依赖,积累自己的小工具库
如今写代码已经很少使用jQuery和zepto了。jQuery和zepto确实给我们带来了很大的方便,但很多时候,使用jQuery或者zepto只是为了使用选择器,发送请求,简单动画。选择器完全可以用querySelector等代替了,发送网络请求,不管是ajax或者jsonp,自己封装一个就行,没有必要为了这一个功能,引入一个完整的jQuery或zepto。当然,使用专门的http请求库也是很好的选择。简单动画使用css3就可以完成了,并不需要使用js操作DOM。

在业务中,一些经常使用的小的功能,比如获取dom元素距离页面顶部的高度,获取url中的参数,判断变量类型,函数防抖,函数节流等等,完全可以封装进自己的小工具库,在多个项目中使用。

写在最后
工作时间还不够长,代码量也还不够,对于javascript的一些高级应用,编程技巧,各种设计模式在项目中的应用,项目的整体架构等还没有很深入的理解,react、vue等框架也只是会用而已,并没有很深入的研究。

以上总结仅仅是个人对于工作中的一些细节上的经验之谈。欢迎交流。

收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐