From ad37ee9feb8b23b714d47e5bbdfcd29c206b2184 Mon Sep 17 00:00:00 2001 From: Gothic Date: Wed, 15 Oct 2014 20:28:18 +0800 Subject: [PATCH 01/56] Update package.md --- package.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.md b/package.md index 22e2fd0..d64bef8 100644 --- a/package.md +++ b/package.md @@ -96,7 +96,7 @@ require.config({ ### 示例 - ```javascript + ```JavaScript { "name": "zrender", "version": "0.0.1", @@ -112,7 +112,8 @@ require.config({ "uglify-js": "*" } } - ``` +``` + ## 包目录结构 From 7922f250bd77d592c32fb919401fdc2741d60047 Mon Sep 17 00:00:00 2001 From: GU Yiling Date: Fri, 24 Oct 2014 14:50:08 +0800 Subject: [PATCH 02/56] Update less-code-style.md Comform to CSS Style Guide. --- less-code-style.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/less-code-style.md b/less-code-style.md index 14186b8..861481a 100644 --- a/less-code-style.md +++ b/less-code-style.md @@ -1,10 +1,10 @@ -# Less 编码规范 (1.0) +# Less 编码规范 (1.1) ## 简介 该文档主要的设计目标是提高 Less 文档的团队一致性与可维护性。 -Less 代码的基本规范和原则与 [HTML 与 CSS 编码规范](https://github.com/ecomfe/spec/blob/master/html-and-css-code-style.md)中的 CSS 部分保持一致。 +Less 代码的基本规范和原则与 [CSS 编码规范](https://github.com/ecomfe/spec/blob/master/css-style-guide.md) 保持一致。 ### 编撰 @@ -20,7 +20,7 @@ erik、顾轶灵、黄后锦、李玉北、赵雷。 ## 编码 -使用UTF-8编码。HTML、CSS、模板等文件*不得*（MUST NOT）包含BOM信息。 +使用UTF-8编码。*不得*（MUST NOT）包含BOM信息。 *** @@ -183,7 +183,7 @@ margin-top: 0; ### 颜色 -颜色定义*必须*（MUST）使用 `#RRGGBB` 格式定义，并在可能时*尽量*（SHOULD）缩写为 `#RGB` 形式，且避免直接使用颜色名称与 `rgb()` 表达式。 +颜色定义*必须*（MUST）使用 `#rrggbb` 格式定义，并在可能时*尽量*（SHOULD）缩写为 `#rgb` 形式，且避免直接使用颜色名称与 `rgb()` 表达式。 ```less // ✗ @@ -191,8 +191,8 @@ border-color: red; color: rgb(254, 254, 254); // ✓ -border-color: #F00; -color: #FEFEFE; +border-color: #f00; +color: #fefefe; ``` ### 私有属性前缀 @@ -365,7 +365,7 @@ Mixin 的参数分隔符使用 `,` 和 `;` 均可，但在同一项目中*必须 在进行字符串转义时，使用 `~""` 表达式与 `e()` 函数均可，但在同一项目中*必须*（MUST）保持一致。 -字符串两侧的引号*可以*（MAY）使用 `'` 或 `"`，但在同一项目中*必须*（MUST）保持一致。 +字符串两侧的引号*必须*（MUST）使用 `"`。 ## JS 表达式 From e02a2d6f7a55be55dc5f52c6231228b50f072493 Mon Sep 17 00:00:00 2001 From: GU Yiling Date: Tue, 4 Nov 2014 11:23:01 +0800 Subject: [PATCH 03/56] Update README.md Fix version for Less code style --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9601a4f..3e5739a 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ This repository contains the specifications. - [Javascript编码规范](javascript-style-guide.md) [1.3] - [HTML编码规范](html-style-guide.md) [1.2] - [CSS编码规范](css-style-guide.md) [1.2] -- [Less编码规范](less-code-style.md) [1.0] +- [Less编码规范](less-code-style.md) [1.1] - [E-JSON数据传输标准](e-json.md) [1.0] - [模块和加载器规范](module.md) [1.1] - [包结构规范](package.md) [1.1] From ebb01a83870d5b5a57759c4f3f19f35ed3a53299 Mon Sep 17 00:00:00 2001 From: erik Date: Wed, 5 Nov 2014 11:14:45 +0800 Subject: [PATCH 04/56] update example code --- javascript-style-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript-style-guide.md b/javascript-style-guide.md index 959a5dd..a94cef1 100644 --- a/javascript-style-guide.md +++ b/javascript-style-guide.md @@ -1431,7 +1431,7 @@ Bar.prototype.baz = function () { 示例： ```javascript -function foo(p1, p2, opt_p3) { +function foo(p1, p2) { // 这里对具体内部逻辑进行说明 // 说明太长需要换行 for (...) { From 048b4f54231506db25f54f1076bb10bbe9f3bfea Mon Sep 17 00:00:00 2001 From: yibuyisheng Date: Tue, 10 Feb 2015 10:29:06 +0800 Subject: [PATCH 05/56] =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- javascript-style-guide.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/javascript-style-guide.md b/javascript-style-guide.md index a94cef1..9adcfb8 100644 --- a/javascript-style-guide.md +++ b/javascript-style-guide.md @@ -4,7 +4,7 @@ -[1 前言](#1-%E5%89%8D%E8%A8%80) +[1 前言](#1) [2 代码风格](#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC) @@ -120,7 +120,7 @@ -## 1 前言 +## 1 前言 JavaScript在百度一直有着广泛的应用，特别是在浏览器端的行为管理。本文档的目标是使JavaScript代码风格保持一致，容易被理解和被维护。 From 1980cd3e9cf1e6d5395f0621955e0089a71c23f4 Mon Sep 17 00:00:00 2001 From: yibuyisheng Date: Tue, 10 Feb 2015 10:48:50 +0800 Subject: [PATCH 06/56] Update javascript-style-guide.md --- javascript-style-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript-style-guide.md b/javascript-style-guide.md index 9adcfb8..36aca84 100644 --- a/javascript-style-guide.md +++ b/javascript-style-guide.md @@ -120,7 +120,7 @@ -## 1 前言 +## 1 前言 JavaScript在百度一直有着广泛的应用，特别是在浏览器端的行为管理。本文档的目标是使JavaScript代码风格保持一致，容易被理解和被维护。 From 7388874296f46b8ed61708deaca7eac795c566eb Mon Sep 17 00:00:00 2001 From: yibuyisheng Date: Tue, 10 Feb 2015 10:52:04 +0800 Subject: [PATCH 07/56] Update javascript-style-guide.md --- javascript-style-guide.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/javascript-style-guide.md b/javascript-style-guide.md index 36aca84..2debd0f 100644 --- a/javascript-style-guide.md +++ b/javascript-style-guide.md @@ -4,7 +4,7 @@ -[1 前言](#1) +[1 前言](#user-content-1-前言) [2 代码风格](#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC) @@ -120,7 +120,7 @@ -## 1 前言 +## 1 前言 JavaScript在百度一直有着广泛的应用，特别是在浏览器端的行为管理。本文档的目标是使JavaScript代码风格保持一致，容易被理解和被维护。 From 70dfadce15b61c24a806547dd0693fc6a0c11074 Mon Sep 17 00:00:00 2001 From: yibuyisheng Date: Tue, 10 Feb 2015 11:06:21 +0800 Subject: [PATCH 08/56] =?UTF-8?q?=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- javascript-style-guide.md | 108 +++++++++++++++++++------------------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/javascript-style-guide.md b/javascript-style-guide.md index 2debd0f..9355fe8 100644 --- a/javascript-style-guide.md +++ b/javascript-style-guide.md @@ -6,115 +6,115 @@ [1 前言](#user-content-1-前言) -[2 代码风格](#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC) +[2 代码风格](#user-content-2-代码风格) -　　[2.1 文件](#21-%E6%96%87%E4%BB%B6) +　　[2.1 文件](#user-content-21-文件) -　　[2.2 结构](#22-%E7%BB%93%E6%9E%84) +　　[2.2 结构](#user-content-22-结构) -　　　　[2.2.1 缩进](#221-%E7%BC%A9%E8%BF%9B) +　　　　[2.2.1 缩进](#user-content-221-缩进) -　　　　[2.2.2 空格](#222-%E7%A9%BA%E6%A0%BC) +　　　　[2.2.2 空格](#user-content-222-空格) -　　　　[2.2.3 换行](#223-%E6%8D%A2%E8%A1%8C) +　　　　[2.2.3 换行](#user-content-223-换行) -　　　　[2.2.4 语句](#224-%E8%AF%AD%E5%8F%A5) +　　　　[2.2.4 语句](#user-content-224-语句) -　　[2.3 命名](#23-%E5%91%BD%E5%90%8D) +　　[2.3 命名](#user-content-23-命名) -　　[2.4 注释](#24-%E6%B3%A8%E9%87%8A) +　　[2.4 注释](#user-content-24-注释) -　　　　[2.4.1 单行注释](#241-%E5%8D%95%E8%A1%8C%E6%B3%A8%E9%87%8A) +　　　　[2.4.1 单行注释](#user-content-241-单行注释) -　　　　[2.4.2 多行注释](#242-%E5%A4%9A%E8%A1%8C%E6%B3%A8%E9%87%8A) +　　　　[2.4.2 多行注释](#user-content-242-多行注释) -　　　　[2.4.3 文档化注释](#243-%E6%96%87%E6%A1%A3%E5%8C%96%E6%B3%A8%E9%87%8A) +　　　　[2.4.3 文档化注释](#user-content-243-文档化注释) -　　　　[2.4.4 类型定义](#244-%E7%B1%BB%E5%9E%8B%E5%AE%9A%E4%B9%89) +　　　　[2.4.4 类型定义](#user-content-244-类型定义) -　　　　[2.4.5 文件注释](#245-%E6%96%87%E4%BB%B6%E6%B3%A8%E9%87%8A) +　　　　[2.4.5 文件注释](#user-content-245-文件注释) -　　　　[2.4.6 命名空间注释](#246-%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%E6%B3%A8%E9%87%8A) +　　　　[2.4.6 命名空间注释](#user-content-246-命名空间注释) -　　　　[2.4.7 类注释](#247-%E7%B1%BB%E6%B3%A8%E9%87%8A) +　　　　[2.4.7 类注释](#user-content-247-类注释) -　　　　[2.4.8 函数/方法注释](#248-%E5%87%BD%E6%95%B0/%E6%96%B9%E6%B3%95%E6%B3%A8%E9%87%8A) +　　　　[2.4.8 函数/方法注释](#user-content-248-函数/方法注释) -　　　　[2.4.9 事件注释](#249-%E4%BA%8B%E4%BB%B6%E6%B3%A8%E9%87%8A) +　　　　[2.4.9 事件注释](#user-content-249-事件注释) -　　　　[2.4.10 常量注释](#2410-%E5%B8%B8%E9%87%8F%E6%B3%A8%E9%87%8A) +　　　　[2.4.10 常量注释](#user-content-2410-常量注释) -　　　　[2.4.11 复杂类型注释](#2411-%E5%A4%8D%E6%9D%82%E7%B1%BB%E5%9E%8B%E6%B3%A8%E9%87%8A) +　　　　[2.4.11 复杂类型注释](#user-content-2411-复杂类型注释) -　　　　[2.4.12 AMD 模块注释](#2412-amd-%E6%A8%A1%E5%9D%97%E6%B3%A8%E9%87%8A) +　　　　[2.4.12 AMD 模块注释](#user-content-2412-amd-模块注释) -　　　　[2.4.13 细节注释](#2413-%E7%BB%86%E8%8A%82%E6%B3%A8%E9%87%8A) +　　　　[2.4.13 细节注释](#user-content-2413-细节注释) -[3 语言特性](#3-%E8%AF%AD%E8%A8%80%E7%89%B9%E6%80%A7) +[3 语言特性](#user-content-3-语言特性) -　　[3.1 变量](#31-%E5%8F%98%E9%87%8F) +　　[3.1 变量](#user-content-31-变量) -　　[3.2 条件](#32-%E6%9D%A1%E4%BB%B6) +　　[3.2 条件](#user-content-32-条件) -　　[3.3 循环](#33-%E5%BE%AA%E7%8E%AF) +　　[3.3 循环](#user-content-33-循环) -　　[3.4 类型](#34-%E7%B1%BB%E5%9E%8B) +　　[3.4 类型](#user-content-34-类型) -　　　　[3.4.1 类型检测](#341-%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B) +　　　　[3.4.1 类型检测](#user-content-341-类型检测) -　　　　[3.4.2 类型转换](#342-%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2) +　　　　[3.4.2 类型转换](#user-content-342-类型转换) -　　[3.5 字符串](#35-%E5%AD%97%E7%AC%A6%E4%B8%B2) +　　[3.5 字符串](#user-content-35-字符串) -　　[3.6 对象](#36-%E5%AF%B9%E8%B1%A1) +　　[3.6 对象](#user-content-36-对象) -　　[3.7 数组](#37-%E6%95%B0%E7%BB%84) +　　[3.7 数组](#user-content-37-数组) -　　[3.8 函数](#38-%E5%87%BD%E6%95%B0) +　　[3.8 函数](#user-content-38-函数) -　　　　[3.8.1 函数长度](#381-%E5%87%BD%E6%95%B0%E9%95%BF%E5%BA%A6) +　　　　[3.8.1 函数长度](#user-content-381-函数长度) -　　　　[3.8.2 参数设计](#382-%E5%8F%82%E6%95%B0%E8%AE%BE%E8%AE%A1) +　　　　[3.8.2 参数设计](#user-content-382-参数设计) -　　　　[3.8.3 闭包](#383-%E9%97%AD%E5%8C%85) +　　　　[3.8.3 闭包](#user-content-383-闭包) -　　　　[3.8.4 空函数](#384-%E7%A9%BA%E5%87%BD%E6%95%B0) +　　　　[3.8.4 空函数](#user-content-384-空函数) -　　[3.9 面向对象](#39-%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1) +　　[3.9 面向对象](#user-content-39-面向对象) -　　[3.10 动态特性](#310-%E5%8A%A8%E6%80%81%E7%89%B9%E6%80%A7) +　　[3.10 动态特性](#user-content-310-动态特性) -　　　　[3.10.1 eval](#3101-eval) +　　　　[3.10.1 eval](#user-content-3101-eval) -　　　　[3.10.2 动态执行代码](#3102-%E5%8A%A8%E6%80%81%E6%89%A7%E8%A1%8C%E4%BB%A3%E7%A0%81) +　　　　[3.10.2 动态执行代码](#user-content-3102-动态执行代码) -　　　　[3.10.3 with](#3103-with) +　　　　[3.10.3 with](#user-content-3103-with) -　　　　[3.10.4 delete](#3104-delete) +　　　　[3.10.4 delete](#user-content-3104-delete) -　　　　[3.10.5 对象属性](#3105-%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7) +　　　　[3.10.5 对象属性](#user-content-3105-对象属性) -[4 浏览器环境](#4-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83) +[4 浏览器环境](#user-content-4-浏览器环境) -　　[4.1 模块化](#41-%E6%A8%A1%E5%9D%97%E5%8C%96) +　　[4.1 模块化](#user-content-41-模块化) -　　　　[4.1.1 AMD](#411-amd) +　　　　[4.1.1 AMD](#user-content-411-amd) -　　　　[4.1.2 define](#412-define) +　　　　[4.1.2 define](#user-content-412-define) -　　　　[4.1.3 require](#413-require) +　　　　[4.1.3 require](#user-content-413-require) 　　[4.2 DOM](#42-dom) -　　　　[4.2.1 元素获取](#421-%E5%85%83%E7%B4%A0%E8%8E%B7%E5%8F%96) +　　　　[4.2.1 元素获取](#user-content-421-元素获取) -　　　　[4.2.2 样式获取](#422-%E6%A0%B7%E5%BC%8F%E8%8E%B7%E5%8F%96) +　　　　[4.2.2 样式获取](#user-content-422-样式获取) -　　　　[4.2.3 样式设置](#423-%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE) +　　　　[4.2.3 样式设置](#user-content-423-样式设置) -　　　　[4.2.4 DOM 操作](#424-dom-%E6%93%8D%E4%BD%9C) +　　　　[4.2.4 DOM 操作](#user-content-424-dom-操作) -　　　　[4.2.5 DOM 事件](#425-dom-%E4%BA%8B%E4%BB%B6) +　　　　[4.2.5 DOM 事件](#user-content-425-dom-事件) From a8979a4ec31e10f00dcd10f52323068d0d8246d2 Mon Sep 17 00:00:00 2001 From: yibuyisheng Date: Tue, 10 Feb 2015 11:11:03 +0800 Subject: [PATCH 09/56] =?UTF-8?q?html=20style=20guide=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-style-guide.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/html-style-guide.md b/html-style-guide.md index 2280a55..4a71d76 100644 --- a/html-style-guide.md +++ b/html-style-guide.md @@ -4,47 +4,47 @@ -[1 前言](#1-%E5%89%8D%E8%A8%80) +[1 前言](#user-content-1-前言) -[2 代码风格](#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC) +[2 代码风格](#user-content-2-代码风格) -　　[2.1 缩进与换行](#21-%E7%BC%A9%E8%BF%9B%E4%B8%8E%E6%8D%A2%E8%A1%8C) +　　[2.1 缩进与换行](#user-content-21-缩进与换行) -　　[2.2 命名](#22-%E5%91%BD%E5%90%8D) +　　[2.2 命名](#user-content-22-命名) -　　[2.3 标签](#23-%E6%A0%87%E7%AD%BE) +　　[2.3 标签](#user-content-23-标签) -　　[2.4 属性](#24-%E5%B1%9E%E6%80%A7) +　　[2.4 属性](#user-content-24-属性) -[3 通用](#3-%E9%80%9A%E7%94%A8) +[3 通用](#user-content-3-通用) -　　[3.1 DOCTYPE](#31-doctype) +　　[3.1 DOCTYPE](#user-content-31-doctype) -　　[3.2 编码](#32-%E7%BC%96%E7%A0%81) +　　[3.2 编码](#user-content-32-编码) -　　[3.3 CSS和JavaScript引入](#33-css%E5%92%8Cjavascript%E5%BC%95%E5%85%A5) +　　[3.3 CSS和JavaScript引入](#user-content-33-css和javascript引入) [4 head](#4-head) -　　[4.1 title](#41-title) +　　[4.1 title](#user-content-41-title) -　　[4.2 favicon](#42-favicon) +　　[4.2 favicon](#user-content-42-favicon) -　　[4.3 viewport](#43-viewport) +　　[4.3 viewport](#user-content-43-viewport) -[5 图片](#5-%E5%9B%BE%E7%89%87) +[5 图片](#user-content-5-图片) -[6 表单](#6-%E8%A1%A8%E5%8D%95) +[6 表单](#user-content-6-表单) -　　[6.1 控件标题](#61-%E6%8E%A7%E4%BB%B6%E6%A0%87%E9%A2%98) +　　[6.1 控件标题](#user-content-61-控件标题) -　　[6.2 按钮](#62-%E6%8C%89%E9%92%AE) +　　[6.2 按钮](#user-content-62-按钮) -　　[6.3 可访问性 (A11Y)](#63-%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7-a11y) +　　[6.3 可访问性 (A11Y)](#user-content-63-可访问性-a11y) -[7 多媒体](#7-%E5%A4%9A%E5%AA%92%E4%BD%93) +[7 多媒体](#user-content-7-多媒体) -[8 模板中的 HTML](#8-%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%9A%84-html) +[8 模板中的 HTML](#user-content-8-模板中的-html) From e5a811323272ef656a8312eefe6b2f0678d3a201 Mon Sep 17 00:00:00 2001 From: yibuyisheng Date: Tue, 10 Feb 2015 11:15:51 +0800 Subject: [PATCH 10/56] =?UTF-8?q?css=20style=20guide=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css-style-guide.md | 68 +++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/css-style-guide.md b/css-style-guide.md index 8c60504..7578538 100644 --- a/css-style-guide.md +++ b/css-style-guide.md @@ -4,73 +4,73 @@ -[1 前言](#1-%E5%89%8D%E8%A8%80) +[1 前言](#user-content-1-前言) -[2 代码风格](#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC) +[2 代码风格](#user-content-2-代码风格) -　　[2.1 文件](#21-%E6%96%87%E4%BB%B6) +　　[2.1 文件](#user-content-21-文件) -　　[2.2 缩进](#22-%E7%BC%A9%E8%BF%9B) +　　[2.2 缩进](#user-content-22-缩进) -　　[2.3 空格](#23-%E7%A9%BA%E6%A0%BC) +　　[2.3 空格](#user-content-23-空格) -　　[2.4 行长度](#24-%E8%A1%8C%E9%95%BF%E5%BA%A6) +　　[2.4 行长度](#user-content-24-行长度) -　　[2.5 选择器](#25-%E9%80%89%E6%8B%A9%E5%99%A8) +　　[2.5 选择器](#user-content-25-选择器) -　　[2.6 属性](#26-%E5%B1%9E%E6%80%A7) +　　[2.6 属性](#user-content-26-属性) -[3 通用](#3-%E9%80%9A%E7%94%A8) +[3 通用](#user-content-3-通用) -　　[3.1 选择器](#31-%E9%80%89%E6%8B%A9%E5%99%A8) +　　[3.1 选择器](#user-content-31-选择器) -　　[3.2 属性缩写](#32-%E5%B1%9E%E6%80%A7%E7%BC%A9%E5%86%99) +　　[3.2 属性缩写](#user-content-32-属性缩写) -　　[3.3 属性书写顺序](#33-%E5%B1%9E%E6%80%A7%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F) +　　[3.3 属性书写顺序](#user-content-33-属性书写顺序) -　　[3.4 清除浮动](#34-%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8) +　　[3.4 清除浮动](#user-content-34-清除浮动) -　　[3.5 !important](#35-important) +　　[3.5 !important](#user-content-35-important) -　　[3.6 z-index](#36-z-index) +　　[3.6 z-index](#user-content-36-z-index) -[4 值与单位](#4-%E5%80%BC%E4%B8%8E%E5%8D%95%E4%BD%8D) +[4 值与单位](#user-content-4-值与单位) -　　[4.1 文本](#41-%E6%96%87%E6%9C%AC) +　　[4.1 文本](#user-content-41-文本) -　　[4.2 数值](#42-%E6%95%B0%E5%80%BC) +　　[4.2 数值](#user-content-42-数值) -　　[4.3 url()](#43-url) +　　[4.3 url()](#user-content-43-url) -　　[4.4 长度](#44-%E9%95%BF%E5%BA%A6) +　　[4.4 长度](#user-content-44-长度) -　　[4.5 颜色](#45-%E9%A2%9C%E8%89%B2) +　　[4.5 颜色](#user-content-45-颜色) -　　[4.6 2D 位置](#46-2d-%E4%BD%8D%E7%BD%AE) +　　[4.6 2D 位置](#user-content-46-2d-位置) -[5 文本编排](#5-%E6%96%87%E6%9C%AC%E7%BC%96%E6%8E%92) +[5 文本编排](#user-content-5-文件编排) -　　[5.1 字体族](#51-%E5%AD%97%E4%BD%93%E6%97%8F) +　　[5.1 字体族](#user-content-51-字体族) -　　[5.2 字号](#52-%E5%AD%97%E5%8F%B7) +　　[5.2 字号](#user-content-52-字号) -　　[5.3 字体风格](#53-%E5%AD%97%E4%BD%93%E9%A3%8E%E6%A0%BC) +　　[5.3 字体风格](#user-content-53-字体风格) -　　[5.4 字重](#54-%E5%AD%97%E9%87%8D) +　　[5.4 字重](#user-content-54-字重) -　　[5.5 行高](#55-%E8%A1%8C%E9%AB%98) +　　[5.5 行高](#user-content-55-行高) -[6 变换与动画](#6-%E5%8F%98%E6%8D%A2%E4%B8%8E%E5%8A%A8%E7%94%BB) +[6 变换与动画](#user-content-6-变换与动画) -[7 响应式](#7-%E5%93%8D%E5%BA%94%E5%BC%8F) +[7 响应式](#user-content-7-响应式) -[8 兼容性](#8-%E5%85%BC%E5%AE%B9%E6%80%A7) +[8 兼容性](#user-content-8-兼容性) -　　[8.1 属性前缀](#81-%E5%B1%9E%E6%80%A7%E5%89%8D%E7%BC%80) +　　[8.1 属性前缀](#user-content-81-属性前缀) -　　[8.2 Hack](#82-hack) +　　[8.2 Hack](#user-content-82-hack) -　　[8.3 Expression](#83-expression) +　　[8.3 Expression](#user-content-83-expression) From 6b2189c4f088cb1a27b89118ba1ac7ee1024796e Mon Sep 17 00:00:00 2001 From: erik Date: Tue, 28 Apr 2015 15:09:06 +0800 Subject: [PATCH 11/56] fix literal: src->href in link tag --- html-style-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html-style-guide.md b/html-style-guide.md index 4a71d76..913083a 100644 --- a/html-style-guide.md +++ b/html-style-guide.md @@ -416,7 +416,7 @@ UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文 示例： ```html - + ``` From 93014a853137cba0ac4d3d6b6f9e3b5c127f0eee Mon Sep 17 00:00:00 2001 From: erik Date: Tue, 10 Nov 2015 11:41:17 +0800 Subject: [PATCH 12/56] add es-next --- es-next-style-guide.md | 1190 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1190 insertions(+) create mode 100644 es-next-style-guide.md diff --git a/es-next-style-guide.md b/es-next-style-guide.md new file mode 100644 index 0000000..cda1406 --- /dev/null +++ b/es-next-style-guide.md @@ -0,0 +1,1190 @@ + +# JavaScript编码规范 - ESNext补充篇 + + + + +[1 前言](#user-content-1-%E5%89%8D%E8%A8%80) + +[2 代码风格](#user-content-2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC) + +　　[2.1 文件](#user-content-21-%E6%96%87%E4%BB%B6) + +　　[2.2 结构](#user-content-22-%E7%BB%93%E6%9E%84) + +　　　　[2.2.1 缩进](#user-content-221-%E7%BC%A9%E8%BF%9B) + +　　　　[2.2.2 空格](#user-content-222-%E7%A9%BA%E6%A0%BC) + +　　　　[2.2.3 语句](#user-content-223-%E8%AF%AD%E5%8F%A5) + +[3 语言特性](#user-content-3-%E8%AF%AD%E8%A8%80%E7%89%B9%E6%80%A7) + +　　[3.1 变量](#user-content-31-%E5%8F%98%E9%87%8F) + +　　[3.2 解构](#user-content-32-%E8%A7%A3%E6%9E%84) + +　　[3.3 模板字符串](#user-content-33-%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2) + +　　[3.4 函数](#user-content-34-%E5%87%BD%E6%95%B0) + +　　[3.5 箭头函数](#user-content-35-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0) + +　　[3.6 对象](#user-content-36-%E5%AF%B9%E8%B1%A1) + +　　[3.7 类](#user-content-37-%E7%B1%BB) + +　　[3.8 模块](#user-content-38-%E6%A8%A1%E5%9D%97) + +　　[3.9 集合](#user-content-39-%E9%9B%86%E5%90%88) + +　　[3.10 装饰器](#user-content-310-%E8%A3%85%E9%A5%B0%E5%99%A8) + +　　[3.11 异步](#user-content-311-%E5%BC%82%E6%AD%A5) + +[4 环境](#user-content-4-%E7%8E%AF%E5%A2%83) + + + + + +## 1 前言 + + +随着ECMAScript的不断发展，越来越多更新的语言特性将被使用，给应用的开发带来方便。本文档的目标是使ECMAScript新特性的代码风格保持一致，并给予一些实践建议。 + +本文档仅包含新特性部分。基础部分请遵循[JavaScript Style Guide](javascript-style-guide.md) + +任何问题或建议，欢迎跟我们讨论: [fe-styleguide@baidu.com](mailto:fe-styleguide@baidu.com) + + + + +## 2 代码风格 + + + + + +### 2.1 文件 + + +##### [建议] ESNext语法的`JavaScript`文件使用`.js`扩展名。 + +##### [强制] 当文件无法使用`.js`扩展名时，使用`.es`扩展名。 + +解释： + +某些应用开发时，可能同时包含ES5和ESNext文件，运行环境仅支持ES5，ESNext文件需要经过预编译。部分场景下，编译工具的选择可能需要通过扩展名区分，需要重新定义ESNext文件的扩展名。此时，ESNext文件必须使用`.es`扩展名。 + +但是，更推荐使用其他条件作为是否需要编译的区分： + +1. 基于文件内容。 +2. 不同类型文件放在不同目录下。 + + + + + +### 2.2 结构 + + +#### 2.2.1 缩进 + + +##### [建议] 使用多行字符串时遵循缩进原则。 + +解释： + +4空格为一个缩进，换行后添加一层缩进。将起始和结束的`\``符号单独放一行，有助于生成HTML时的标签对齐。 + +示例： + +```javascript +// good +function foo() { + let bar = `Hello + World`; + console.log(bar); +} + +// good +function foo() { + let html = ` +
+

+

+
+ `; +} +``` + + +#### 2.2.2 空格 + + +##### [强制] 使用generator时，*前面不允许有空格，*后面必须有一个空格。 + +示例： + +```javascript +// good +function* caller() { + yield 'a'; + yield* callee(); + yield 'd'; +} + +// bad +function * caller() { + yield 'a'; + yield *callee(); + yield 'd'; +} +``` + + +#### 2.2.3 语句 + + +##### [强制] 类声明结束不允许添加分号。 + +解释： + +与函数声明保持一致。 + + +##### [强制] 类成员定义中，方法定义后不允许添加分号，成员属性定义后必须添加分号。 + +解释： + +成员属性是当前Stage 0的标准，如果使用的话，则定义后加上分号。 + +示例： + +```javascript +// good +class Foo { + foo = 3; + + bar() { + + } +} + +// bad +class Foo { + foo = 3 + + bar() { + + } +} +``` + +##### [强制] export语句后，不允许出现表示空语句的分号。 + +解释： + +export关键字不影响后续语句类型。 + +示例： + +```javascript +// good +export funciton foo() { +} + +export default bar() { +} + + +// bad +export funciton foo() { +}; + +export default bar() { +}; +``` + + +##### [强制] 属性装饰器后，可以不加分号的场景，不允许加分号。 + +解释： + +只有一种场景是必须加分号的：当属性key是computed property key时，其装饰器必须加分号，否则修饰key的`[]`会做为之前表达式的property accessor。 + +上面描述的场景，装饰器后需要加分号。其余场景下的属性装饰器后不允许加分号。 + +示例： + +```javascript +// good +class Foo { + @log('INFO') + bar() { + + } + + @log('INFO'); + ['bar' + 2]() { + + } +} + +// bad +class Foo { + @log('INFO'); + bar() { + + } + + @log('INFO') + ['bar' + 2]() { + + } +} +``` + + +##### [强制] 箭头函数的参数只有一个时，参数部分的括号必须省略。 + +示例： + +```javascript +// good +list.map(item => item * 2); + +// bad +list.map((item) => item * 2); +``` + +##### [强制] 如果箭头函数的函数体只有一个表达式语句并且被作为返回值，必须省略`{}`和`return`。 + +示例： + +```javascript +// good +list.map(item => item * 2); + +// bad +list.map(item => { + return item * 2; +}); +``` + +##### [强制] 解构多个变量时，如果超过行长度限制，每个解构的变量必须单独一行。 + +解释： + +太多的变量解构会让一行的代码非常长，极有可能超过单行长度控制，使代码可读性下降。 + +示例： + +```javascript +// good +let { + name: personName, + email: personEmail, + sex: personSex, + age: personAge +} = person; + +// bad +let {name: personName, email: personEmail, + sex: personSex, age: personAge +} = person; +``` + + + + + + +## 3 语言特性 + + + + + +### 3.1 变量 + + +#### [强制] 使用let和const定义变量，不使用var。 + +解释： + +使用let和const定义时，变量作用域范围更明确。 + +示例： + +```javascript +// good +for (let i = 0; i < 10; i++) { + +} + +// bad +for (var i = 0; i < 10; i++) { + +} +``` + + + +### 3.2 解构 + + +#### [强制] 不要使用3层及以上的解构。 + +解释： + +过多层次的解构会让代码变得难以阅读。 + +示例： + +```javascript +// bad +let {documentElement: {firstElementChild: {nextSibling}}} = window; +``` + +#### [建议] 使用解构减少中间变量。 + +解释： + +常见场景如变量值交换，可能产生中间变量。这种场景推荐使用解构。 + +示例： + +```javascript +// good +[x, y] = [y, x]; + +// bad +let temp = x; +x = y; +y = temp; +``` + +#### [强制] 仅定义一个变量时不允许使用解构。 + +解释： + +在这种场景下，使用结构将降低代码可读性。 + +示例： + +```javascript +// good +let len = myString.length; + +// bad +let {length: len} = myString; +``` + +#### [强制] 不节省中间变量时，不允许因为使用解构产生中间对象。 + +解释： + +纯因为使用解构产生无用的中间对象是一种浪费。 + +示例： + +```javascript +// good +let {first: firstName, last: lastName} = person; +let one = 1; +let two = 2; + +// bad +// 下面的代码产生了数组对象[1, 2]，但是这个数组对象并没什么用 +let [one, two] = [1, 2]; +``` + +#### [强制] 使用剩余运算符时，剩余运算符之前的所有元素必需具名。 + +解释： + +剩余运算符之前的元素省略名称可能带来较大的程序阅读障碍。如果仅仅为了取数组后几项，请使用slice方法。 + +示例： + +```javascript +// good +let [one, two, ...anyOther] = myArray; +let other = myArray.slice(3); + +// bad +let [,,, ...other] = myArray; +``` + + + +### 3.3 模板字符串 + + +#### [建议] 当对行首空格敏感时，避免使用多行字符串。 + +解释： + +由于会破坏整体的缩进，使代码整体上缺乏结构性，视觉上变丑。 + +示例： + +```javascript +// bad +function foo() { + // 缩进再多几层会更丑 + let bar = `Hello +World`; + console.log(bar); +} +``` + + +#### [强制] 字符串内变量替换时，不要使用2次及以上的函数调用。 + +解释： + +在变量替换符内有太多的函数调用等复杂语法会导致可读性下降。 + +示例： + +```javascript +// good +let fullName = getFullName(getFirstName(), getLastName()); +let s = `Hello ${fullName}`; + +// bad +let s = `Hello ${getFullName(getFirstName(), getLastName())}`; +``` + + + +### 3.4 函数 + + +#### [强制] 使用变量默认语法代替基于条件判断的默认值声明。 + +解释： + +添加默认值有助于引擎的优化，在未来strong mode下也会有更好的效果。 + +示例： + +```javascript +// good +function foo(text = 'hello') { +} + +// bad +function foo(text) { + text = text || 'hello'; +} +``` + + +#### [强制] 不要使用arguments对象，应使用`...args`代替。 + +解释： + +在未来strong mode下`arguments`将被禁用。 + +示例： + +```javascript +// good +function foo(...args) { + console.log(args.join('')); +} + +// bad +function foo() { + console.log([].join.call(arguments)); +} +``` + + + + +### 3.5 箭头函数 + + + +#### [强制] 不得在顶层作用域下使用箭头函数。 + +解释： + +顶层作用域包括全局代码、模块代码等，这个作用域下`this`对象为`undefined`或者`Global`对象，因此函数不应该绑定`this`。 + + +#### [强制] 一个函数被设计为需要call和apply的时候，不能是箭头函数。 + +解释： + +箭头函数会强制绑定当前环境下的`this`。 + + + +### 3.6 对象 + + +#### [强制] 定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写。 + +解释： + +目的在于保持所有键值对声明的一致性。 + +```javascript +// good +let foo = {x, y, z}; + +let foo2 = { + x: 1, + y: 2, + z: z +}; + + +// bad +let foo = { + x: x, + y: y, + z: z +}; + +let foo2 = { + x: 1, + y: 2, + z +}; +``` + +#### [强制] 定义方法时使用`MethodDefinition`语法，不使用`PropertyName:FunctionExpression`语法。 + +解释： + +`MethodDefinition`语法更清晰简洁。 + +示例： + +```javascript +// good +var foo = { + bar(x, y) { + return x + y; + } +}; + +// bad +var foo = { + bar: function (x, y) { + return x + y; + } +}; +``` + +#### [建议] 使用Object.keys进行对象遍历。 + +解释： + +不建议使用`for .. in`进行对象的遍历，以避免遗漏`hasOwnProperty`产生的错误。 + +示例： + +```javascript +// good +for (let key of Object.keys(foo)) { + let value = foo[key]; +} +``` + +#### [建议] 定义对象的方法不应使用箭头函数。 + +解释： + +箭头函数将`this`绑定到当前环境，在obj.method()调用时容易导致不期待的`this`。除非明确需要绑定`this`，否则不应使用箭头函数。 + +示例： + +```javascript +// good +var foo = { + bar(x, y) { + return x + y; + } +}; + +// bad +var foo = { + bar: (x, y) => x + y +}; +``` + + +#### [建议] 尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性。 + +解释： + +在一个完整的字面量中声明所有的键值，而不需要将代码分散开来，有助于提升代码可读性。 + +示例： + +```javascript +// good +const MY_KEY = 'bar'; +let foo = { + [MY_KEY + 'Hash']: 123 +}; + +// bad +const MY_KEY = 'bar'; +let foo = {}; +foo[MY_KEY + 'Hash'] = 123; +``` + + + + + +### 3.7 类 + + + +#### [强制] 使用class关键字定义一个类。 + +解释： + +直接使用`class`定义类更清晰。不要再使用`function`和`prototype`形式的定义。 + +```javascript +// good +class TextNode { + constructor(value, engine) { + this.value = value; + this.engine = engine; + } + + clone() { + return this; + } +} + +// bad +function TextNode(value, engine) { + this.value = value; + this.engine = engine; +} + +TextNode.prototype.clone = function () { + return this; +}; +``` + +#### [强制] 使用super访问父类成员，而非父类的prototype + +解释： + +使用`super`和`super.foo`可以快速访问父类成员，而不必硬编码父类模块而导致修改和维护的不便，同时更节省代码。 + +```javascript +// good +class TextNode extends Node { + constructor(value, engine) { + super(value); + this.engine = engine; + } + + setNodeValue(value) { + super.setNodeValue(value); + this.textContent = value; + } +} + +// bad +class TextNode extends Node { + constructor(value, engine) { + Node.apply(this, arguments); + this.engine = engine; + } + + setNodeValue(value) { + Node.prototype.setNodeValue.call(this, value); + this.textContent = value; + } +} +``` + + + +### 3.8 模块 + + + +#### [强制] export与内容定义放在一起。 + +解释： + +何处声明要导出的东西，就在何处使用`export`关键字，不做声明后再统一导出。 + +示例： + +```javascript +// good +export function foo() { +} + +export const bar = 3; + + +// bad +function foo() { +} + +const bar = 3; + +export foo; +export bar; +``` + +#### [建议] 相互之间无关联的内容使用命名导出。 + +解释： + +举个例子，工具对象中的各个方法，相互之间并没有强关联，通常外部会选择几个使用，则应该使用命名导出。 + +简而言之，当一个模块只扮演命名空间的作用时，使用命名导出。 + + +#### [建议] 导出时使用`const`定义。 + +解释： + +ES6 Module导出的是引用而非值，为防止外部的修改，尽量导出`const`定义的常量。 + + +#### [强制] 所有import语句写在模块开始处。 + +解释： + +`import`会被默认提升至模块最前面，同时具备依赖声明的作用。 + +浏览器如能尽早读取相关的`import`内容则有可能更早地请求相关的依赖模块，有一定的性能提升作用，在HTTP/2之后可能会具有更明显的效果。 + +示例： + +```javascript +// good +import {bar} from './bar'; + +function foo() { + bar.work(); +} + +// bad +function foo() { + import {bar} from './bar'; + bar.work(); +} +``` + + + + +### 3.9 集合 + + +#### [建议] 对数组进行连接操作时，使用数组展开语法。 + +解释： + +用数组展开代替`concat`方法，数组展开对`Iterable`有更好的兼容性。 + +示例： + +```javascript +// good +let foo = [...foo, newValue]; +let bar = [...bar, ...newValues]; + +// bad +let foo = foo.concat(newValue); +let bar = bar.concat(newValues); +``` + +#### [建议] 不要使用数组展开进行数组的复制操作。 + +解释： + +使用数组展开语法进行复制，代码可读性较差。推荐使用`Array.from`方法进行复制操作。 + +示例： + +```javascript +// good +let otherArr = Array.from(arr); + +// bad +let otherArr = [...arr]; +``` + +#### [建议] 尽可能使用`for .. of`进行遍历。 + +解释： + +使用`for .. of`可以更好地接受任何的`Iterable`对象，如`Map#values`生成的迭代器，使得方法的通用性更强。 + +以下情况除外： + +1. 遍历确实成为了性能瓶颈，需要使用原生`for`循环提升性能。 +2. 需要遍历过程中的索引。 + + +#### [强制] 当键值有可能不是字符串时，必须使用Map；当元素有可能不是字符串时，必须使用Set。 + +解释： + +使用普通Object，对非字符串类型的key，需要自己实现序列化。并且运行过程中的对象变化难以通知Object。 + + +#### [建议] 需要一个不可重复的集合时，应使用Set。 + +解释： + +不要使用`{foo: true}`这样的普通Object。 + +示例： + +```javascript +// good +let members = new Set(['one', 'two', 'three']); + +// bad +let members = { + one: true, + two: true, + three: true +}; +``` + + +#### [建议] 当需要遍历功能时，使用Map和Set。 + +解释： + +Map和Set是可遍历对象，能够方便地使用`for...of`遍历。不要使用使用普通Object。 + +示例： + +```javascript +// good +let membersAge = new Map([ + ['one', 10], + ['two', 20], + ['three', 30] +]); +for (let [key, value] of map) { +} + +// bad +let membersAge = { + one: 10, + two: 20, + three: 30 +}; +for (let key in membersAge) { + if (membersAge.hasOwnProperty(key)) { + let value = membersAge[key]; + } +} +``` + +#### [建议] 程序运行过程中有添加或移除元素的操作时，使用Map和Set。 + +解释： + +使用Map和Set，程序的可理解性更好；普通Object的语义更倾向于表达固定的结构。 + +示例： + +```javascript +// good +let membersAge = new Map(); +membersAge.set('one', 10); +membersAge.set('two', 20); +membersAge.set('three', 30); +membersAge.delete('one'); + +// bad +let membersAge = {}; +membersAge.one = 10; +membersAge.two = 20; +membersAge.three = 30; +delete membersAge['one']; +``` + + + +### 3.10 装饰器 + + + +#### [建议] 不在直接声明的普通对象上使用装饰器。 + +解释： + +一个普通对象应该是干净而不需要各种装饰器注入逻辑的。 + + + + +### 3.11 异步 + + +#### [强制] 回调函数的嵌套不得超过3层。 + +解释： + +深层次的回调函数的嵌套会让代码变得难以阅读。 + +示例： + +```javascript +// bad +getUser(userId, function (user) { + validateUser(user, function (isValid) { + if (isValid) { + saveReport(report, user, function () { + notice('Saved!'); + }); + } + }); +}); +``` + +#### [建议] 使用 `Promise` 代替 `callback`。 + +解释： + +相比`callback`，使用`Promise`能够使复杂异步过程的代码更清晰。 + +示例： + +```javascript +// good +var user; +getUser(userId) + .then(function (userObj) { + user = userObj; + return validateUser(user); + }) + .then(function (isValid) { + if (isValid) { + return saveReport(report, user); + } + + return Promise.reject('Invalid!'); + }) + .then( + function () { + notice('Saved!'); + }, + function (message) { + notice(message); + } + ); +``` + + +#### [强制] 使用标准的 `Promise`。 + +解释： + +1. 不得使用非标准的`Promise`，如`jQuery`的`Deferred`。 +2. 不得使用非标准的`Promise`扩展API，如`bluebird`的`Promise.any`等。 + + +#### [强制] 不允许直接扩展 `Promise` 对象的 `prototype`。 + +解释： + +理由和 **不允许修改和扩展任何原生对象和宿主对象的原型** 是一样的。如果想要使用更方便，可以用utility函数的形式。 + + +#### [强制] 不得为了编写的方便，将可以并行的IO过程串行化。 + +解释： + +并行IO消耗时间约等于IO时间最大的那个过程，串行的话消耗时间将是所有过程的时间之和。 + +示例： + +```javascript +requestData().then(function (data) { + renderTags(data.tags); + renderArticles(data.articles); +}); + +// good +function requestData() { + return Promise.all( + [ + requestTags(), + requestArticles() + ] + ).then( + function (values) { + return { + tags: value[0], + articles: values[1] + }; + } + ); +} + +// bad +async function requestData() { + var tags = await requestTags(); + var articles = await requestArticles(); + + return Promise.resolve({tags, articles}); +} +``` + +#### [建议] 使用 `async/await` 代替 `generator + co`。 + +解释： + +使用语言自身的能力可以使代码更清晰，也无需引入`co`库。 + +示例： + +```javascript +addReport(report, userId).then( + function () { + notice('Saved!'); + }, + function (message) { + notice(message); + } +); + +// good +async function addReport(report, userId) { + var user = await getUser(userId); + var isValid = await validateUser(user); + + if (isValid) { + var savePromise = saveReport(report, user); + return savePromise(); + } + + return Promise.reject('Invalid'); +} + +// bad +function addReport(report, userId) { + return co(function* () { + var user = yield getUser(userId); + var isValid = yield validateUser(user); + + if (isValid) { + var savePromise = saveReport(report, user); + return savePromise(); + } + + return Promise.reject('Invalid'); + }); +} +``` + + + + + + + + + +## 4 环境 + + + +#### [建议] 持续跟进与关注运行环境对语言特性的支持程度。 + +解释： + +[查看环境对语言特性的支持程度](https://kangax.github.io/compat-table/es6/) + +ES标准的制定还在不断进行中，各种环境对语言特性的支持也日新月异。了解项目中用到了哪些ESNext的特性，了解项目的运行环境，并持续跟进这些特性在运行环境中的支持程度是很有必要的。这意味着： + +1. 如果有任何一个运行环境（比如chrome）支持了项目里用到的所有特性，你可以在开发时抛弃预编译。 +2. 如果所有环境都支持了某一特性（比如Promise），你可以抛弃相关的shim，或无需在预编译时进行转换。 +3. 如果所有环境都支持了项目里用到的所有特性，你可以完全抛弃预编译。 + + +#### [强制] 在运行环境中没有 `Promise` 时，将 `Promise` 的实现 `shim` 到 `global` 中。 + +解释： + +当前运行环境下没有`Promise`时，可以引入`shim`的扩展。如果自己实现，需要实现在`global`下，并且与标准API保持一致。 + +这样，未来运行环境支持时，可以随时把`Promise`扩展直接扔掉，而应用代码无需任何修改。 + + +#### [建议] 需要预编译时，必须使用 `babel` 做为预编译工具。 + +解释： + +由于不同环境的（如浏览器）JavaScript引擎对ESNext特性支持程度的问题，ESNext代码可能需要进行预编译。此时，必须使用`babel`做为预编译工具。由于`babel`最新的6暂时还不稳定，建议暂时使用5。 + +不同的产品，对于浏览器支持的情况不同，使用 `babel` 的时候，需要设置的参数也有一些区别。下面在示例中给出一些建议的参数。 + +示例： + +```shell +＃ 建议的参数 +--loose all --modules amd --blacklist strict + +＃ 如果需要使用 es7.classProperties、es7.decorators 等一些特性，需要额外的 --stage 0 参数 +--loose all --modules amd --blacklist strict --stage 0 +``` + +#### [建议] 生成的代码在浏览器环境运行时，应生成AMD模块化代码。 + +解释： + +添加`--modules amd`参数即可。 + + +#### [建议] 使用 `loose` 生成更小、性能更高的代码。 + +解释： + +使用`--loose all`将生成更直观、性能更高的代码，在绝大多数场景下能较好运行，但是生成代码与源代码的逻辑并不完全一致（如属性的可访问性）。具体请参照[loose文档](https://github.com/babel/babel.github.io/blob/5.0.0/docs/usage/loose.md)。 + + +#### [建议] 使用 `external-helpers` 减少生成文件的大小。 + +解释： + +当babel在转换代码的过程中发现需要一些特性时，会在该文件头部生成对应的helper代码。默认情况下，对于每一个经由babel处理的文件，均会在文件头部生成对应需要的辅助函数，多份文件辅助函数存在重复，占用了不必要的代码体积。 + +因此推荐打开`externalHelpers: true`选项，使babel在转换后内容中不写入helper相关的代码，而是使用一个外部的`.js`统一提供所有的helper。对于[external-helpers](https://github.com/babel/babel.github.io/blob/5.0.0/docs/usage/external-helpers.md)的使用，可以有两种方式： + +1. 默认方式：需要通过` ``` #### [建议] 每行不得超过 `120` 个字符。 @@ -341,7 +354,6 @@ alert(document.getElementById('foo').tagName); - ## 3 通用 diff --git a/javascript-style-guide.md b/javascript-style-guide.md index dde4ec6..08fae91 100644 --- a/javascript-style-guide.md +++ b/javascript-style-guide.md @@ -131,7 +131,6 @@ JavaScript 在百度一直有着广泛的应用，特别是在浏览器端的行 - ## 2 代码风格 @@ -1008,7 +1007,7 @@ util.extend( ); ``` -##### [强制] 类的属性或方法等成员信息使用 `@public` / `@protected` / `@private` 中的任意一个，指明可访问性。 +##### [强制] 类的属性或方法等成员信息不是 `public` 的，应使用 `@protected` 或 `@private` 标识可访问性。 解释： From 223cabf989b1c5a1c4823ff142a8443ef1cedcbc Mon Sep 17 00:00:00 2001 From: Gray Zhang Date: Thu, 18 May 2017 15:19:52 +0800 Subject: [PATCH 49/56] =?UTF-8?q?=E6=B7=BB=E5=8A=A0react=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-style-guide.md | 459 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 459 insertions(+) create mode 100644 react-style-guide.md diff --git a/react-style-guide.md b/react-style-guide.md new file mode 100644 index 0000000..033d1e6 --- /dev/null +++ b/react-style-guide.md @@ -0,0 +1,459 @@ +# React规范 + +## 文件组织 + +- [强制]同一目录下不得拥有同名的`.js`和`.jsx`文件。 + + 在使用模块导入时，倾向于不添加后缀，如果存在同名但不同后缀的文件，构建工具将无法决定哪一个是需要引入的模块。 + +- [强制]组件文件使用一致的`.js`或 `.jsx`后缀。 + + 所有组件文件的后缀名从`.js`或`.jsx`中任选其一。 + + 不应在项目中出现部分组件为`.js`文件，部分为`.jsx`的情况。 + +- [强制]每一个文件以`export default`的形式暴露一个组件。 + + 允许一个文件中存在多个不同的组件，但仅允许通过`export default`暴露一个组件，其它组件均定义为内部组件。 + +- [强制]每个存放组件的目录使用一个`index.js`以命名导出的形式暴露所有组件。 + + 同目录内的组件相互引用使用`import Foo from './Foo';`进行。 + + 引用其它目录的组件使用`import {Foo} from '../component';`进行。 + + 建议使用[VSCode的export-index插件](https://marketplace.visualstudio.com/items?itemName=BrunoLM.export-index)等插件自动生成`index.js`的内容。 + +## 命名规则 + +- [强制]组件名为PascalCase。 + + 包括函数组件，名称均为PascalCase。 + +- [强制]组件名称与文件名称保持相同。 + + 同时组件名称应当能体现出组件的功能，以便通过观察文件名即确定使用哪一个组件。 + +- [强制]高阶组件使用camelCase命名。 + + 高阶组件事实上并非一个组件，而是一个“生成组件类型”的函数，因此遵守JavaScript函数命名的规范，使用camelCase命名。 + +- [强制]使用`onXxx`形式作为`props`中用于回调的属性名称。 + + 使用统一的命名规则用以区分`props`中回调和非回调部分的属性，在JSX上可以清晰地看到一个组件向上和向下的逻辑交互。 + + 对于不用于回调的函数类型的属性，使用动词作为属性名称。 + + ```javascript + // onClick作为回调以on开头，renderText非回调函数则使用动词 + let Label = ({onClick, renderText}) => {renderText()}; + ``` + +- [建议]使用`withXxx`或`xxxable`形式的词作为高阶组件的名称。 + + 高阶组件是为组件添加行为和功能的函数，因此使用如上形式的词有助于对其功能进行理解。 + +- [建议]作为组件方法的事件处理函数以具备业务含义的词作为名称，不使用`onXxx`形式命名。 + + ```javascript + // Good + class Form { + @autobind + collectAndSubmitData() { + let data = { + name: this.state.name, + age: this.state.age + }; + this.props.onSubmit(data); + } + + @autobind + syncName() { + // ... + } + + @autobind + syncAge() { + // ... + } + + render() { + return ( +
+ + + +
+ ); + } + } + ``` + +## 组件声明 + +- [强制]使用ES Class声明组件，禁止使用`React.createClass`。 + + [React v15.5.0](https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html)已经弃用了`React.createClass`函数。 + + ```javascript + // Bad + let Message = React.createClass({ + render() { + return {this.state.message}; + } + }); + + // Good + class Message extends PureComponent { + render() { + return {this.state.message}; + } + } + ``` + +- [强制]不使用`state`的组件声明为函数组件。 + + 函数组件在React中有着特殊的地位，在将来也有可能得到更多的内部优化。 + + ```javascript + // Bad + class NextNumber { + render() { + return {this.props.value + 1} + } + } + + // Good + let NextNumber = ({value}) => {value + 1}; + ``` + +- [强制]所有组件均需声明`propTypes`。 + + `propsTypes`在提升组件健壮性的同时，也是一种类似组件的文档的存在，有助于代码的阅读和理解。 + +- [强制]对于所有非`isRequired`的属性，在`defaultProps`中声明对应的值。 + + 声明初始值有助于对组件初始状态的理解，也可以减少`propTypes`对类型进行校验产生的开销。 + + 对于初始没有值的属性，应当声明初始值为`null`而非`undefined`。 + +- [强制]如无必要，使用静态属性语法声明`propsTypes`、`contextTypes`、`defaultProps`和`state`。 + + 仅当初始`state`需要从`props`计算得到的时候，才将`state`的声明放在构造函数中，其它情况下均使用静态属性声明进行。 + +- [强制]依照规定顺序编排组件中的方法和属性。 + + 按照以下顺序编排组件中的方法和属性： + + 1. `static displayName` + 2. `static propTypes` + 3. `static contextTypes` + 4. `state defaultProps` + 5. `static state` + 6. 其它静态的属性 + 7. 用于事件处理并且以属性的方式（`onClick = e => {...}`）声明的方法 + 8. 其它实例属性 + 9. `constructor` + 10. `getChildContext` + 11. `componentWillMount` + 12. `componentDidMount` + 13. `componentWillUpdate` + 14. `componentDidUpdate` + 15. `componentWillUnmount` + 16. 事件处理方法 + 17. 其它方法 + 18. `shouldComponentUpdate` + 19. `render` + + 其中`shouldComponentUpdate`和`render`是一个组件最容易被阅读的函数，因此放在最下方有助于快速定位。 + +- [建议]无需显式引入React对象。 + + 使用JSX隐式地依赖当前环境下有`React`这一对象，但在源码上并没有显式使用，这种情况下添加`import React from 'react';`会造成一个没有使用的变量存在。 + + 使用[babel-plugin-react-require](https://www.npmjs.com/package/babel-plugin-react-require)插件可以很好地解决这一问题，因此无需显式地编写`import React from 'react';`这一语句。 + +- [建议]使用箭头函数声明函数组件。 + + 箭头函数具备更简洁的语法（无需`function`关键字），且可以在仅有一个语句时省去`return`造成的额外缩进。 + +- [建议]高阶组件返回新的组件类型时，添加`displayName`属性。 + + 同时在`displayName`上声明高阶组件的存在。 + + ```javascript + // Good + let asPureComponent = Component => { + let componentName = Component.displayName || Component.name || 'UnknownComponent'; + return class extends PureComponent { + static displayName = `asPure(${componentName})` + + render() { + return ; + } + }; + }; + ``` + +## 组件实现 + +- [强制]除顶层或路由级组件以外，所有组件均在概念上实现为纯组件（Pure Component）。 + + 本条规则并非要求组件继承自`PureComponent`，“概念上的纯组件”的意思为一个组件在`props`和`state`没有变化（shallowEqual）的情况下，渲染的结果应保持一致，即`shouldComponentUpdate`应当返回`false`。 + + 一个典型的非纯组件是使用了随机数或日期等函数： + + ```javascript + let RandomNumber = () => {Math.random()}; + let Clock = () => {Date.time()}; + ``` + + 非纯组件具备向上的“传染性”，即一个包含非纯组件的组件也必须是非纯组件，依次沿组件树结构向上。由于非纯组件无法通过`shouldComponentUpdate`优化渲染性能且具备传染性，因此要避免在非顶层或路由组件中使用。 + + 如果需要在组件树的某个节点使用随机数、日期等非纯的数据，应当由顶层组件生成这个值并通过`props`传递下来。对于使用Redux等应用状态管理的系统，可以在应用状态中存放相关值（如Redux使用Action Creator生成这些值并通过Action和reducer更新到store中）。 + +- [强制]禁止为继承自`PureComponent`的组件编写`shouldComponentUpdate`实现。 + + 参考[React的相关Issue](https://github.com/facebook/react/issues/9239)，在React的实现中，`PureComponent`并不直接实现`shouldComponentUpdate`，而是添加一个`isReactPureComponent`的标记，由`CompositeComponent`通过识别这个标记实现相关的逻辑。因此在`PureComponent`上自定义`shouldComponentUpdate`并无法享受`super.shouldComponentUpdate`的逻辑复用，也会使得这个继承关系失去意义。 + +- [强制]为非继承自`PureComponent`的纯组件实现`shouldComponentUpdate`方法。 + + `shouldComponentUpdate`方法在React的性能中扮演着至关重要的角色，纯组件必定能通过`props`和`state`的变化来决定是否进行渲染，因此如果组件为纯组件且不继承`shouldComponentUpdate`，则应当有自己的`shouldComponentUpdate`实现来减少不必要的渲染。 + +- [建议]为函数组件添加`PureComponent`能力。 + + 函数组件并非一定是纯组件，因此其`shouldComponentUpdate`的实现为`return true;`，这可能导致额外的无意义渲染，因此推荐使用高阶组件为其添加`shouldComponentUpdate`的相关逻辑。 + + 推荐使用[react-pure-stateless-component](https://www.npmjs.com/package/react-pure-stateless-component)库实现这一功能。 + +- [建议]使用`@autobind`进行事件处理方法与`this`的绑定。 + + 由于`PureComponent`使用[`shallowEqual`](https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/shallowEqual.js)`进行是否渲染的判断，如果在JSX中使用`bind`或箭头函数绑定`this`会造成子组件每次获取的函数都是一个新的引用，这破坏了`shouldComponentUpdate`的逻辑，引入了无意义的重复渲染，因此需要在`render`调用之前就将事件处理方法与`this`绑定，在每次`render`调用中获取同样的引用。 + + 当前比较流行的事前绑定`this`的方法有2种，其一使用类属性的语法： + + ```javascript + class Foo { + onClick = e => { + // ... + } + }; + ``` + + 其二使用`@autobind`的装饰器： + + ```javascript + class Foo { + @autobind + onClick(e) { + // ... + } + } + ``` + + 使用类属性语法虽然可以避免引入一个`autobind`的实现，但存在一定的缺陷： + + 1. 对于新手不容易理解函数内的`this`的定义。 + 2. 无法在函数是使用其它的装饰器（如`memoize`、`deprecated`或检验相关的逻辑等）。 + + 因此，推荐使用`@autobind`装饰器实现`this`的事先绑定，推荐使用[core-decorators](https://www.npmjs.com/package/core-decorators)库提供的相关装饰器实现。 + +## JSX + +- [强制]没有子节点的非DOM组件使用自闭合语法。 + + 对于DOM节点，按照HTML编码规范相关规则进行闭合，**其中void element使用自闭合语法**。 + + ```javascript + // Bad + + + // Good + + ``` + +- [强制]保持起始和结束标签在同一层缩进。 + + 对于标签前面有其它语句（如`return`的情况，使用括号进行换行和缩进）。 + + ```javascript + // Bad + class Message { + render() { + return
+ Hello World +
; + } + } + + // Good + class Message { + render() { + return ( +
+ Hello World +
; + ); + } + } + ``` + + 对于直接`return`的函数组件，可以直接使用括号而省去大括号和`return`关键字： + + ```javascript + let Message = () => ( +
+ Hello World +
+ ); + ``` + +- [强制]对于多属性需要换行，从第一个属性开始，每个属性一行。 + + ```javascript + // 没有子节点 + + + // 有子节点 + + + + + ``` + +- [强制]以字符串字面量作为值的属性使用双引号（`"`），在其它类型表达式中的字符串使用单引号（`'`）。 + + ```javascript + // Bad + + + + // Good + + + ``` + +- [强制]自闭合标签的`/>`前添加一个空格。 + + ```javascript + // Bad + + + + // Good + + ``` + +- [强制]对于值为`true`的属性，省去值部分。 + + ```javascript + // Bad + + + // Good + + ``` + +- [强制]对于需要使用`key`的场合，提供一个唯一标识作为`key`属性的值，禁止使用可能会变化的属性（如索引）。 + + `key`属性是React在进行列表更新时的重要属性，如该属性会发生变化，渲染的性能和**正确性**都无法得到保证。 + + ```javascript + // Bad + {list.map((item, index) => )} + + // Good + {list.map(item => )} + ``` + +- [建议]避免在JSX的属性值中直接使用对象和函数表达式。 + + `PureComponent`使用[`shallowEqual`](https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/shallowEqual.js)对`props`和`state`进行比较来决定是否需要渲染，而在JSX的属性值中使用对象、函数表达式会造成每一次的对象引用不同，从而`shallowEqual`会返回`false`，导致不必要的渲染。 + + + ```javascript + // Bad + class WarnButton { + alertMessage(message) { + alert(message); + } + + render() { + return + } + } + + // Good + class WarnButton { + @autobind + alertMessage() { + alert(this.props.message); + } + + render() { + return + } + } + ``` + +- [建议]将JSX的层级控制在3层以内。 + + JSX提供了基于组件的便携的复用形式，因此可以通过将结构中的一部分封装为一个函数组件来很好地拆分大型复杂的结构。层次过深的结构会带来过多缩进、可读性下降等缺点。如同控制函数内代码行数和分支层级一样，对JSX的层级进行控制可以有效提升代码的可维护性。 + + ```javascript + // Bad + let List = ({items}) => ( +
    + { + items.map(item => ( +
  • +
    +

    {item.title}

    + {item.subtitle} +
    +
    {item.content}
    +
    + {item.author}@ +
    +
    • + )) + } +
+ ); + + // Good + let Header = ({title, subtitle}) => ( +
+

{title}

+ {subtitle} +
+ ); + + let Content = ({content}) =>
{content}
; + + let Footer = ({author, postTime}) => ( +
+ {author}@ +
+ ); + + let Item = item => ( +
+
+ +
+
+ ); + + let List = ({items}) => ( +
    + {items.map(Item)} +
+ ); + ``` From b37c62c53731d4339bb616ba7a9e2a86694d88bc Mon Sep 17 00:00:00 2001 From: Gray Zhang Date: Thu, 18 May 2017 15:20:36 +0800 Subject: [PATCH 50/56] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=B4=A2=E5=BC=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index fff1b31..f048530 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ This repository contains the specifications. - [包结构规范](package.md) [1.1] - [项目目录结构规范](directory.md) [1.1] - [图表库标准](chart.md) [1.0] +- [react编码规范](react-code-style.md) [draft] Lint and fix tool：[FECS](http://fecs.baidu.com/) From b57d13b765022cd93ab560e0fb389b80e7fbba85 Mon Sep 17 00:00:00 2001 From: Chris Date: Fri, 19 May 2017 23:55:06 +0800 Subject: [PATCH 51/56] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E9=93=BE?= =?UTF-8?q?=E6=8E=A5=E5=9C=B0=E5=9D=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f048530..e15d016 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ This repository contains the specifications. - [包结构规范](package.md) [1.1] - [项目目录结构规范](directory.md) [1.1] - [图表库标准](chart.md) [1.0] -- [react编码规范](react-code-style.md) [draft] +- [react编码规范](react-style-guide.md) [draft] Lint and fix tool：[FECS](http://fecs.baidu.com/) From ac7287e54aeab7ec957a939674dd40f3510edea6 Mon Sep 17 00:00:00 2001 From: Gray Zhang Date: Thu, 25 May 2017 16:29:28 +0800 Subject: [PATCH 52/56] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=96=B9=E6=B3=95=E9=A1=BA=E5=BA=8F=E4=BB=A5=E7=AC=A6=E5=90=88?= =?UTF-8?q?react-plugin=E8=A7=84=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-style-guide.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/react-style-guide.md b/react-style-guide.md index 033d1e6..15b6d9c 100644 --- a/react-style-guide.md +++ b/react-style-guide.md @@ -157,12 +157,12 @@ 10. `getChildContext` 11. `componentWillMount` 12. `componentDidMount` - 13. `componentWillUpdate` - 14. `componentDidUpdate` - 15. `componentWillUnmount` - 16. 事件处理方法 - 17. 其它方法 - 18. `shouldComponentUpdate` + 13. `shouldComponentUpdate` + 14. `componentWillUpdate` + 15. `componentDidUpdate` + 16. `componentWillUnmount` + 17. 事件处理方法 + 18. 其它方法 19. `render` 其中`shouldComponentUpdate`和`render`是一个组件最容易被阅读的函数，因此放在最下方有助于快速定位。 From f311dfaa6504b2d49d53e247dec6c93944bf25b1 Mon Sep 17 00:00:00 2001 From: dafo Date: Tue, 18 Dec 2018 09:48:52 +0800 Subject: [PATCH 53/56] Update react-style-guide.md fix typo --- react-style-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-style-guide.md b/react-style-guide.md index 15b6d9c..a9cc702 100644 --- a/react-style-guide.md +++ b/react-style-guide.md @@ -189,7 +189,7 @@ static displayName = `asPure(${componentName})` render() { - return ; + return ; } }; }; From fec5ccb42c4d3bd83dd921c61b0d39545cf4d3ea Mon Sep 17 00:00:00 2001 From: errorrik Date: Wed, 17 Apr 2019 10:27:40 +0800 Subject: [PATCH 54/56] JavaScript --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fff1b31..894730e 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ This repository contains the specifications. -- [Javascript编码规范](javascript-style-guide.md) [1.3] -- [Javascript编码规范 - ESNext补充篇](es-next-style-guide.md) [draft] +- [JavaScript编码规范](javascript-style-guide.md) [1.3] +- [JavaScript编码规范 - ESNext补充篇](es-next-style-guide.md) [draft] - [HTML编码规范](html-style-guide.md) [1.2] - [CSS编码规范](css-style-guide.md) [1.2] - [Less编码规范](less-code-style.md) [1.1] From ca8cfe9cad8d7c4f72c275b64d7a72fc9d75873a Mon Sep 17 00:00:00 2001 From: yuhui Date: Mon, 13 Jan 2020 19:31:59 +0800 Subject: [PATCH 55/56] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E7=9A=84=20`=20=E5=8F=B7=E5=B8=A6=E6=9D=A5=E7=9A=84=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-style-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-style-guide.md b/react-style-guide.md index a9cc702..465b473 100644 --- a/react-style-guide.md +++ b/react-style-guide.md @@ -228,7 +228,7 @@ - [建议]使用`@autobind`进行事件处理方法与`this`的绑定。 - 由于`PureComponent`使用[`shallowEqual`](https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/shallowEqual.js)`进行是否渲染的判断，如果在JSX中使用`bind`或箭头函数绑定`this`会造成子组件每次获取的函数都是一个新的引用，这破坏了`shouldComponentUpdate`的逻辑，引入了无意义的重复渲染，因此需要在`render`调用之前就将事件处理方法与`this`绑定，在每次`render`调用中获取同样的引用。 + 由于`PureComponent`使用[`shallowEqual`](https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/shallowEqual.js)进行是否渲染的判断，如果在JSX中使用`bind`或箭头函数绑定`this`会造成子组件每次获取的函数都是一个新的引用，这破坏了`shouldComponentUpdate`的逻辑，引入了无意义的重复渲染，因此需要在`render`调用之前就将事件处理方法与`this`绑定，在每次`render`调用中获取同样的引用。 当前比较流行的事前绑定`this`的方法有2种，其一使用类属性的语法： From 18a2da2fbc8c8011a6c090716e58f9eed162baf5 Mon Sep 17 00:00:00 2001 From: yuhui Date: Mon, 13 Jan 2020 23:41:45 +0800 Subject: [PATCH 56/56] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=A4=E5=A4=84?= =?UTF-8?q?=E7=AC=94=E8=AF=AF=20(#61)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-style-guide.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react-style-guide.md b/react-style-guide.md index 465b473..13e34a5 100644 --- a/react-style-guide.md +++ b/react-style-guide.md @@ -254,7 +254,7 @@ 使用类属性语法虽然可以避免引入一个`autobind`的实现，但存在一定的缺陷： 1. 对于新手不容易理解函数内的`this`的定义。 - 2. 无法在函数是使用其它的装饰器（如`memoize`、`deprecated`或检验相关的逻辑等）。 + 2. 无法在函数上使用其它的装饰器（如`memoize`、`deprecated`或检验相关的逻辑等）。 因此，推荐使用`@autobind`装饰器实现`this`的事先绑定，推荐使用[core-decorators](https://www.npmjs.com/package/core-decorators)库提供的相关装饰器实现。 @@ -292,7 +292,7 @@ return (
Hello World -
; + ); } }