常用的JavaScript编程风格

时间: 2019-03-13阅读: 32标签: 规范

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


变量的声明

使用let和const代替var(var存在变量提升等副作用),声明常量使用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循环想得到的效果
以上就是平时比较常见的编程风格,还有很多没列出来,更多的请参考编程风格  


谷歌的JavaScript编写风格中 13点值得我们注意的!

对于那些还不熟悉JavaScript的编写风格的人,谷歌提供了编写JavaScript的编写风格指南,谷歌风格指南 其中列出了编写干净、可理解代码的最佳风格实践。

css3代码书写规范

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

W3C 代码标准规范

W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。

CommonJS 规范中的 module、module.exports 区别

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。module.exports属性表示当前模块对外输出的接口

编码规范_html代码规范化编写

嵌套的节点应该缩进;在属性上,使用双引号,不要使用单引号;属性名全小写,用中划线做分隔符;不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);不要忽略可选的关闭标签;

web前端js中ES6的规范写法

引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...

Node.js的模块加载机制(CommonJS规范)

为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。在Node环境中,一个.js文件就称之为一个模块(module)

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

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

js中箭头函数的编码规范,如何更好的使用箭头函数

当您必须使用匿名函数,请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。

web开发,前后分离接口规范

目前我们现在用的前后端分离模式属于第一阶段,下一阶段可以在前端工程化方面,对技术框架的选择、前端模块化重用方面,可多做考量。也就是要迎来“==前端为主的 MV* 时代==”。

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全