JavaScript编码规范

作者: 恍若如梦hzpeng | 来源:发表于2019-06-14 20:23 被阅读0次

一个人的一生应该是这样度过的:当他回首往事的时候,他不会因为虚度年华而悔恨,也不会因为碌碌无为而羞耻;这样,在临死的时候,他就能够说:“我的整个生命和全部精力都已经献给世界上最壮丽的事业——为人类的解放而斗争。” ——《钢铁是怎样炼成的》

作为一名程序开发人员,我觉得规范和良好的编码习惯有非常有必要的。每次看到不规范的编码,总是忍不住想动手改过来。所以就想着写一篇js编码规范的文章,一来方便自己不断总结,二是希望有不足的地方能被指正。

  • 变量名

变量名使用驼峰法(camelCase)命名

var firstName = 'Tom';  // 推荐
var firstname = 'Tom';  // 不推荐
var Firstname = 'Tom';  // 不推荐

尽量用let取代var,如果可以用const代替let
const用来定义常量
命名语义化,变量是名词,函数是动词

let username = 'Jack';  // 推荐
let sayHello = 'hello';  // 不推荐

function username() {          // 不推荐
    alert('my name is Jack');
}
function sayHello() {          // 推荐
    alert('hello world');
}
  • 空格与运算符

运算符前后留一个空格

let x = a + b;  // 推荐
for (let i = 0; i <= 10; i++) {    // 推荐
    console.log(i);
}
for (let i=0;i<=10;i++) {    // 不推荐
    console.log(i);
}
let y=c+d;  // 不推荐
  • 语句规则
    一条语句通常以分号作为结束符
let list = ['a', 'b', 'c'];
const Person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

复杂语句规则:

  • 将左花括号放在第一行的结尾。
  • 左花括号前添加一空格。
  • 将右花括号独立放在一行。
  • 不要以分号结束一个复杂的声明。
// 函数
function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

// 循环
for (i = 0; i < 5; i++) {
    x += i;
}

// 条件语句
if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}
  • 判断
    尽量使用精确判断
name === 'Tom'    // 推荐
code !== '200'    // 推荐
name == 'Tom'    // 不推荐
code != '200'    // 不推荐
  • 字符串
    静态字符串使用反引号或单引号,不使用双引号。动态字符串使用反引号
// bad
const a = "foobar";
const b = 'foo' + a + 'bar';

// acceptable
const c = `foobar`;

// good
const a = 'foobar';
const b = `foo${a}bar`;
  • 使用箭头函数

对一些简单的函数使用箭头函数替代

setTimeout(() => {
    alert('hello');
}, 1000)

使用箭头函数绑定this

const _this = this;
const sayHello = function() {
    return _this.a;
}

// 使用箭头函数替代
const sayHello = () => ( this.a )
  • 构造函数和类名首字母大写
function Person() {
    ...
}

class Person() {
  ...
}

尽量使用class

更多关于ES6的编程风格:http://es6.ruanyifeng.com/#docs/style
菜鸟教程Javascript编码规范:https://www.runoob.com/w3cnote/javascript-coding-standard.html

相关文章

  • 前端开发文档规范

    HTML 编码规范 请查看HTML编码规范 CSS 编码规范 请查看CSS编码规范 JavaScript 编码规范...

  • 前端开发规范(实验室版)

    前端编码规范—— HTML 篇 前端编码规范—— CSS 篇 前端编码规范—— JavaScript 篇 这几天和...

  • 代码规范

    JavaScript 编码规范(草案) 该规范改编自 Airbnb JavaScript Style Guide[...

  • React最佳实践

    tags:开发随笔 代码风格 用ES6,遵循Airbnb的React编码规范和javascript 编码规范。两个...

  • JavaScript编码规范

    JavaScript编码规范 1 前言 2 代码风格 2.1 文件 2.2 结构 2.2.1 缩进 2.2.2 空...

  • JavaScript 编码规范

    1 前言 JavaScript在百度一直有着广泛的应用,特别是在浏览器端的行为管理。本文档的目标是使JavaScr...

  • JavaScript编码规范

    1 结构 1.1 缩进 [强制]使用4个空格作为一个缩进层级 [强制] switch 下的 case 和 defa...

  • JavaScript编码规范

    JavaScript编码规范 1 前言 2 代码风格 2.1 文件 2.2 结构 2.2.1 缩进 2.2.2 空...

  • Javascript编码规范

    1. 缩进 永远不要混用空格和Tab。 为了可读性,部门统一建议使用2个空格宽度的缩进。 2. 语法 A. 变量命...

  • JavaScript编码规范

    JavaScript编码规范 1 前言 JavaScript 在百度一直有着广泛的应用,特别是在浏览器端的行为管理...

网友评论

    本文标题:JavaScript编码规范

    本文链接:https://www.haomeiwen.com/subject/cxcpfctx.html