Javascript最佳实践

Posted 2021-02-28 进心进利

ES6赋值语句

• 不佳的写法   （写法上啰嗦了一些）

let count = 5
let color = "blue"
let values = [1,2,3]
let now = new Date()

• 改进如下：↓

let [count, color, values, now] = [5, ‘blue‘, [1,2,3], new Date()]

 模块化编程

• 不佳的写法
• 写法缺陷：1、相关代码没有高内聚。 2、申请了过多的全局变量
  

const name = "Nicholas";
const age = ‘18‘
function sayName(){
    console.log(‘名字是：‘ + name + ‘ 年龄：‘ + age)
}

• 改进如下：↓

const myInfo = {
    name: ‘Nicholas‘,
    age: ‘18‘,
    sayName: function () {
        console.log(‘名字是：‘ + this.name + ‘ 年龄：‘ + this.age)
    }
}

• emm...已经有明显改观。但是如果， 函数过多，会导致对象写的很长， 可读性不佳
• 进一步改进如下：↓     （合理的将复杂的函数分离出来甚至分割到其他文件中再引入。虽然多加了一个变量，但增强代码可读性，易维护。）

const sayName = function sayName(){
    console.log(‘名字是：‘ + name + ‘ 年龄：‘ + age)
}
const myInfo = {
    name: ‘Nicholas‘,
    age: ‘18‘,
    sayName
}

 合理的类型校验

• 不佳的写法

function sortArray(values){
    if (values != null){    //避免！
        values.sort(comparator);
    }
}

• 上述写法， 虽然保证了value值不是null， 但是无法保证value是一个数组类型。因此直接调用数组的原型方法， 存在报错风险
• 改进如下：↓

function sortArray(values){
    if (values instanceof Array){    //推荐    当然，判断方式还有如：Object.prototype.toString.call(values).slice(8, -1) === ‘Array‘
        values.sort(comparator);
    }
}

使用常量

• 不佳的写法
• 缺陷： 1、常量定义应该使用const     2、常量命名应该使用大写字母    3、定义了太多的全局变量

const invalid_value_msg = ‘Invalid value!‘
const incalid_value_url = ‘/errors/invalid.php‘
function validate(value){
    if (!value){
        alert(invalid_value_msg)
        location.href = incalid_value_url
    }
}

• 改进如下：↓

const Constants = {
    INVALID_VALUE_MSG: "Invalid value!",
    INVALID_VALUE_URL: "/errors/invalid.php"
}
function validate(value){
    if (!value){
        alert(Constants.INVALID_VALUE_MSG)
        location.href = Constants.INVALID_VALUE_URL
    }
}

避免不必要的属性查找

• 不佳的写法

const query = window.location.href.substring(window.location.href.indexOf("?"))  //此版本查找了6次

• 改进如下：↓

const url = window.location.href
const query = url.substring(url.indexOf("?")) //此版本只查找了4次