/**
* @author 阮一峰
* Copyright http://es6.ruanyifeng.com/#docs/style
*/

1.块级作用域

(1)let 取代 var

(2)全局常量和线程安全

在let和const之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量。

原因:

const可以提醒阅读程序的人,这个变量不应该改变;

const比较符合函数式编程思想,运算不改变值,只是新建值,而且这样也有利于将来的分布式运算;

JavaScript 编译器会对const进行优化,所以多使用const,有利于提供程序的运行效率,

2.字符串

静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。

3.解构赋值

使用数组成员对变量赋值时,优先使用解构赋值。

var arr = [1,2,3,4];

const [first,second] = arr;

等价于

const first = arr[0];

const second = arr[1];

函数的参数如果是对象的成员,优先使用解构赋值。

4.对象

单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾。

const a = {k1:v1, k2:v2};
const b = {
k1:v1,
k2:v2,
}

对象尽量静态化,一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用Object.assign方法。

// bad
const a = {};
a.x = 3;

// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });

// good
const a = { x: null };
a.x = 3;

对象的属性和方法,尽量采用简洁表达法,这样易于描述和书写。

var ref = 'some value';

// bad
const atom = {
ref: ref,

value: 1,

addValue: function (value) {
return atom.value + value;
},
};

// good
const atom = {
ref,

value: 1,

addValue(value) {
return atom.value + value;
},
};

5.数组

使用扩展运算符(...)拷贝数组。

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

使用Array.from方法,将类似数组的对象转为数组

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

6.函数

立即执行函数可以写成箭头函数的形式

(()=>{
console.log('hello world')
})

那些需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了this。

//bed
[1,2,3].map(function(x){
return x*x;
})

//good
[1,2,3].map(=>(x){
return x*x
})

//best
[1,2,3].map(x => x*x);

箭头函数取代Function.prototype.bind,不应再用self/_this/that绑定 this。

// bad
const self = this;
const boundMethod = function(...params) {
return method.apply(self, params);
}

// acceptable
const boundMethod = method.bind(this);

// best
const boundMethod = (...params) => method.apply(this, params);

简单的、单行的、不会复用的函数,建议采用箭头函数。如果函数体较为复杂,

行数较多,还是应该采用传统的函数写法

7.Map结构

注意区分Object和Map,只有模拟现实世界的实体对象时,才使用Object。如果只是需要key: value的数据结构,使用Map结构。因为Map有内建的遍历机制。

let map = new Map(arr);

for (let key of map.keys()) {
console.log(key);
}

for (let value of map.values()) {
console.log(value);
}

for (let item of map.entries()) {
console.log(item[0], item[1]);
}

8.Class

总是用Class,取代需要prototype的操作。因为Class的写法更简洁,更易于理解。

// bad
function Queue(contents = []) {
this._queue = [...contents];
}
Queue.prototype.pop = function() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}

//good
class Queue{
constructor(contents = []){
this._queue = [...contens];
}
pop(){
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}

使用extends实现继承,因为这样更简单,不会有破坏instanceof运算的危险。

// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
return this._queue[0];
}

// good
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}

9.模块

首先,Module语法是JavaScript模块的标准写法,坚持使用这种写法。使用import取代require。

//bed
const moduleA = require('ModuleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;

//good
import {func1,func2} form 'ModuleA';

使用export取代module.exports。

//CommonJs的写法
var React = require('react');
var Breadcrumbs = React.createClass({
render({
return <nav />
})
})
moudle.exports = Breadcrumbs;

//ES6的写法

import React form 'react';

class Breadcrumbs extends React.Component{
render({
return <nav />
})
}

exports default Breadcrumbs;

如果模块只有一个输出值,就使用export default,如果模块有多个输出值,

就不使用export default,export default与普通的export不要同时使用。

如果模块默认输出一个函数,函数名的首字母应该小写。

function makeStyleGuide() {
}

export default makeStyleGuide;

如果模块默认输出一个对象,对象名的首字母应该大写。

const StyleGuide = {
es6: {
}
};

export default StyleGuide;

转载于:https://www.cnblogs.com/jannryguo/p/7156131.html

javascript编程风格相关推荐

  1. [Javascript]编程风格

    作者: 阮一峰 日期: 2012年4月27日 Douglas Crockford是Javascript权威,Json格式就是他的发明. 去年11月他有一个演讲(Youtube),谈到了好的Javasc ...

  2. javascript编程风格(粗略笔记)

    1.空格 紧凑型: project.MyClass = function(arg1, arg2){ 松散型: for( i = 0; i < length; i++ ){ 2.代码行长度 最多8 ...

  3. JavaScript——编程风格

    本篇文章我们将讨论如何将新的语法应用在编码实践当中,与传统的 JavaScript 语法结合在一起,写出合理的.易于阅读和维护的代码. 所谓"编程风格",指的是编写代码的规则.不同 ...

  4. 我喜欢的JavaScript编程风格

    本文为<编写可维护的JavaScript>读书笔记 1.变量 变量名遵守驼峰大小写命名法 命名前缀可为名词,这样可与函数名区分 常量利用大写字母和下划线(用来分隔单词)来命名 所有变量声明 ...

  5. javascript --- 编程风格

    字符串 const a = 'foobar'; const b = `foo${a}bar`; // 此处是反引号(tab键上) const c = 'foobar'; 解构赋值 const [fir ...

  6. 规范自己的JavaScript书写 – Dojo Javascript 编程规范

    前言 良好的JavaScript书写习惯的优点不言而喻,今天彬Go向大家推荐Dojo Javascript 编程规范,相当不错的 Javascript 编程风格规范,建议大家可以借鉴一下此规范编写 J ...

  7. JavaScript的编程风格的见解

    编程风格 1.尽量少使用伪协议,JavaScript:function(): 2.在url属性上有值 3.将JavaScript代码与HTML文档结构分离,例如:不要把事件的调用嵌套在文档结构·里 4 ...

  8. JavaScript编码风格指南

    首次发表在个人博客 前言 程序语言的编码风格指南对于一个长期维护的软件而言是非常重要的;好的编程风格有助于写出质量更高.错误更少.更易于 维护的程序. 团队合作需要制定一些代码规范还有利用一些工具来强 ...

  9. 谷歌 Java 编程风格指南

    点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | http://hawstein.com/201 ...

最新文章

  1. 重拾CCNA,学习笔记持续更新ing......(4)
  2. php 单词替换,如何在PHP中替换字符串中的单词?
  3. 关于医网联影像工作站3.0(ProDicom Workstation 3.0)的版权及注册问题说明
  4. Word Embedding List|ACL 2020 词嵌入长文汇总及分类
  5. 使用python实现简单的爬虫
  6. 什么是CRM Sales category
  7. 前端学习(1656):前端系列实战课程之天猫吸顶条实现思路
  8. Tokenisation word segmentation sentence segmentation
  9. 信息系统开发平台OpenExpressApp - ClickOnce智能部署
  10. Ubuntu8.04安置XCrysDen
  11. web sevice 生成代理类及使用
  12. 聚类:Python遗传算法
  13. c语言人工智能程序,怎么程序编程语言 怎么用C语言编写人工智能程序?
  14. 东芝B-SX5T标签打印机安装过程
  15. 儿童编程软件python-一款儿童编程入门的理想工具——PythonTurtle
  16. 3dsMax一渲染就卡住、3DMAX渲染完卡死怎么办?解决方法来了
  17. 为什么计算机三分技术七分管理,如何理解“七分管理,三分技术,运作贯穿始终”?...
  18. 问题 Q(1208): 【基础算法】倒酒问题
  19. 深入浅出移动直播技术之帧率、码率和分辨率
  20. macbook pro的漏电

热门文章

  1. html 移动设备不显示,IT兄弟连 HTML5教程 在移动设备上设置原始大小显示
  2. mysql基础sql语句_SQL基础语句汇总
  3. Challenges(分组、聚合、连接)
  4. LeetCode First Missing Positive
  5. UVa213 - Message Decoding
  6. Qt Model/View 学习笔记 (四)
  7. 题目1095:2的幂次方
  8. rest-framework 版本控制
  9. sersync+rsync做实时同步
  10. Leetcode 70