常用的JavaScript编程风格

更新日期: 2019-03-13阅读量: 1022标签: 规范

工作中好的编程风格会更友好,不好的编程风格会让队友难受


变量的声明

使用let和const代替varvar存在变量提升等副作用),声明常量使用const  

// bad
var name = 'zero'
// good
let name = 'zero'
// bad
var MAX = 100
// good
const MAX = 100


命名规范

使用小驼峰命名,变量名可读性好  

// bad
let l_name = 'zero'
// good
let lastName = 'zero'


使用变量说明

不要出现让人觉得晦涩难懂的变量  

// bad
if (time < 120) {
    todo()
}
// good
const MINUTES_IN_TWO_HOUR = 120;
if (time < MINUTES_IN_TWO_HOUR) {
    todo()
}


不要重复命名

当一个对象名有意义的时候,对象里面的key的命名不需要重复对象名  

// bad
let Student = {
    studentName = 'zero',
    studentAge = 18
}
// good
let Student = {
    name = 'zero'
    age = 18
}


字符串命名

静态字符串使用单引号,动态字符串使用反引号  

// bad
let name = "zero"
let myName = 'my name is ' + name
// good
let name = 'zero'
let myName = `my name is ${name}`


使用解构赋值

使用数组或者对象给变量赋值的时候,使用解构赋值  

let arr = [1, 2, 3, 4]
let obj = {
    name:'zero',
    age:18
}
// bad
let first = arr[0]
let second = arr[1]
let name = obj.name
let age = obj.age
// good
let [first, second] = arr
let {name,age} = obj


使用Object.assign

当给对象赋多个值得时候,使用Object.assign  

let obj = {}
// bad
obj.name = 'zero'
obj.age = 18
// good
Object.assign(obj,{
    name:'zero',
    age:18
})


函数参数

函数参数较多的情况,使用对象进行传参  

// bad
function Student(name,age,sex){
    //...
}
// good
let studentConfig = {
    name:'zero',
    age:18,
    sex:'man'
}
function Student(studentConfig){
    //...
}


封装判断条件

判断条件过多的情况可以封装成一个函数  

// bad
if(a===1 && b===2){
    //...
}
// good
function isTure(a,b){
    return a===1 && b===2
}
if(isTrue(a,b)){
    //...
}


其他
1.使用函数的默认传参来避免对函数参数的判断
2.函数名要表达出函数是干什么的,比如 isEmail(),让人一看就知道是判断email的,而且返回值是布尔类型
3.对于数组,少用for循环,Array.forEach,Array.every,Array.some,Array.map,Array.filter基本可以满足for循环想得到的效果
以上就是平时比较常见的编程风格,还有很多没列出来,更多的请参考编程风格  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/2868

Web 前端开发代码规范(基础)

对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。

css3代码书写规范

不要使用 @import 与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

对接口规范的一些思考

团队中如果不同的项目,不同的人员可能在接口设计上有许多不统一的地方。导致了开发效率低下的问题。由于我在工作中遇到了,所以整理下来,说一说自己的一些看法。

stylelint 规范你的 css

一个强大、现代的 linter 帮助团队避免规则错误,统一代码风格。和 eslint 类似可以继承开源社区的 config、自定义配置、写个性化的 rules 。

CSS的书写规范和顺序

关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验。这里总结了一个CSS书写规范、CSS书写顺序供大家参考

CSS团队协作规范

命名禁止缩写,禁止在非特殊情况下写!important,img请让它自动缩放,不可直接over write或在原本框架的class增加内容,设计RWD网站,请遵循移动设备优先原则

为什么有的编程规范要求用 void 0 代替 undefined?

Undefined 类型表示未定义,它的类型只有一个值,就是 undefined。任何变量在被赋值前它的值都是 undefined,但是在 JavaScript 引擎中,undefined 是一个变量而非关键字。

前端开发Js变量命名规范

JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。本文的出现相信能够解决大部分烦恼,让你轻松写出符合规范、易读、简短的代码

Commit message 代码提交规范

在多人协作项目中,如果代码风格统一、代码提交信息的说明准确,那么在后期协作以及Bug处理时会更加方便。Git 每次提交代码,都要写 Commit message(提交说明),否则就不允许提交

数据库使用规范

关于MySQL数据库规范,相信大家多少看过一些文档。本篇文章给大家详细分类总结了数据库相关规范,从库表命名设计规范讲起,到索引设计规范,后面又给出SQL编写方面的建议

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!