Javascript最佳实践

2021-02-12 14:22

阅读:508

标签:ack   const   invalid   alert   其他   大写   type   inf   判断   

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次

Javascript最佳实践

标签:ack   const   invalid   alert   其他   大写   type   inf   判断   

原文地址:https://www.cnblogs.com/jxjl/p/12730751.html


评论


亲,登录后才可以留言!