在使用Git进行版本控制时，遵循一定的规范是非常重要的，这有助于保持代码库的整洁和一致性，同时也便于团队协作。 目前最受开发人员肯定的代码提交规范是前端框架`Angular`提出的Angular提交信息规范，继而衍生了 `Conventional Commits specification`。关于提交规范的具体格式，可以参考 [Angular团队提交规范](https://github.co...
在使用Git进行版本控制时，遵循一定的规范是非常重要的，这有助于保持代码库的整洁和一致性，同时也便于团队协作。 目前最受开发人员肯定的代码提交规范是前端框架`Angular`提出的Angular提交信息规范，继而衍生了 `Conventional Commits specification`。关于提交规范的具体格式，可以参考 [Angular团队提交规范](https://github.co...
Commit是Git中用于记录代码更改的基本单元。一个良好的commit应该包含足够的信息，使得其他开发者可以理解更改的目的和内容。 Commit规范的主要目的是确保每次提交都是原子性的、可理解的，并且与项目其他部分的更改无关。这有助于维护清晰的项目历史记录，便于未来的代码审查和问题定位。 - 原子性：每次提交应该只包含一个逻辑上的改变。这使得每个提交都是独立的，并且易于理解和回滚。 ...
Push是Git中用于将本地仓库的更改发送到远程仓库的操作。Push规范确保了代码的同步是有序的、可控的，并且减少了因不同步引起的冲突。 Push规范的主要目的是确保团队成员之间的代码更改能够顺利合并，减少冲突，并保持代码库的一致性。 在执行push操作时，应遵循以下规范： #### 经常Pull最新的更改 - **保持同步**：在push之前，应该先执行`git pull`或...
Commit message 是开发的日常操作，它可以提供更多的历史信息，方便向团队清晰准确地说明代码变更、进行代码评审，也便于后期快速定位原始需求或缺陷，还可以有效的生成 Change log，对项目的管理实际至关重要，但是实际工作中却常常被大家忽略。 目前，社区有多种 Commit message 的写法规范，但使用较多的是 `Angular` 团队的规范， 继而衍生了`Conventi...
公共风格指南包括两层含义，一是各类编程语言，都建议遵守的公共风格，另一层含义指的是代码提交流程。 ## 语言风格 比如类命名、函数命名、变量命名、文件命名、缩进、换行、函数长度等等。 公共风格适合大多数语言使用，但也存在个例。 比如，C++和php等语言可以使用4个字符长度的tab作为统一缩进格式，但python则需要空格缩进； 再比如大多数语言都可以使用花括号`{}`来放置函数语句，但...
公共风格指南包括两层含义，一是各类编程语言，都建议遵守的公共风格，另一层含义指的是代码提交流程。 ## 语言风格 比如类命名、函数命名、变量命名、文件命名、缩进、换行、函数长度等等。 公共风格适合大多数语言使用，但也存在个例。 比如，C++和php等语言可以使用4个字符长度的tab作为统一缩进格式，但python则需要空格缩进； 再比如大多数语言都可以使用花括号`{}`来放置函数语句，但...
公共风格指南包括两层含义，一是各类编程语言，都建议遵守的公共风格，另一层含义指的是代码提交流程。 ## 语言风格 比如类命名、函数命名、变量命名、文件命名、缩进、换行、函数长度等等。 公共风格适合大多数语言使用，但也存在个例。 比如，C++和php等语言可以使用4个字符长度的tab作为统一缩进格式，但python则需要空格缩进； 再比如大多数语言都可以使用花括号`{}`来放置函数语句，但...
最小化是代码风格中比较重要的一条思想，任何改动升级都能通过改动最少的代码达到目的。 编程中，尽量让变量在其最小作用域定义。 =========== 那么什么是作用域呢？下文转载了简书快乐舔狗董枭垚的文章来讲解。 作用域是程序中定义的变量所存在的区域，超过该区域变量就不能被访问。 以C 语言为例，有三个地方可以声明变量： 在函数或块内部的局部变量 在所有函数外部的全局变量 在...
定义：命名空间将全局作用域细分为不同的具名作用局，可有效防止全局作用局的命名冲突。 优点：命名空间的命名轴线可嵌套。父级命名不同时即使当前命名重复也不会冲突。 结论：合理使用 在编写代码时，应遵循以下命名空间的使用规范： ### 正确写法 - **使用具名命名空间**：定义代码时应使用具名命名空间，而不是将所有代码都放在全局命名空间。 - **嵌套命名空间**：利用命名空间的嵌...
不要将嵌套类定义为public，除非是接口的一部分。 解释：这里是C++代码风格指南中的内容，如果读者朋友是其他语言的开发者，比如php，可以理解为除了接口类或者接口函数，其他函数和类不要定义为public。 - 限制嵌套类的访问权限有助于隐藏类的内部实现细节，减少外部对内部状态的依赖。 - 将嵌套类定义为`private`或`protected`可以鼓励更好的封装和模块化设计。 - ...
尽量不要使用全局函数。如果确实需要，那么将该函数封装为类的成员函数。 ### 不推荐的写法 ```cpp function readLog() {} function writeLog() {} ``` ### 推荐的写法 ```cpp class Log { function read() {} function write() {} } ``` ...
将函数变量尽可能至于最小作用域内，在声明变量时将其初始化。 通常，编程允许在函数的任何位置声明变量，提倡在尽可能小的作用域中声明变量，离第一次使用越近越好。这样代码易于阅读且易于定位变量的声明位置、变量类型和初始值。特别是，应使用初始化代替声明+赋值的方式。 如：使用`var name = “Jim”`，而不是` var name; name = “Jim”`。 ...
**尽量不要使用全局变量** - **尽量避免使用全局变量**：优先考虑使用局部变量、参数或类的成员变量。 - **禁止class类型的全局变量**：避免使用全局类实例，因为它们可能导致资源管理和生命周期问题。 - **多线程代码中禁止非常数全局变量**：在多线程环境中，非常数全局变量可能导致数据竞争和一致性问题。 - **禁止使用函数返回值初始化全局变量**：函数返回值的不确定性可能导...
作用域章节内容总结 （1）合理使用命名空间； （2）嵌套类除非是接口的一部分，否则尽量不要public； （3）尽量不用全局函数和全局变量，考虑作用域和命名空间限制； （4）多线程中的全局变量不要使用class类型； 作用域的使用，除了考虑名称污染、可读性外，主要是为了降低耦合度，提高编译、执行效率。 ...
类（class）是面向对象编程思想者中基本的代码单元，被广泛使用。 **类（Class）** 是面向对象程序设计（OOP，Object-Oriented Programming）实现信息封装的基础。类是一种用户定义的引用数据类型，也称类类型。每个类包含数据说明和一组操作数据或传递消息的函数。类的实例称为对象。 类是面向对象语言的程序设计中的概念，是**面向对象编程**的基础。 类的实质是一种...
类（class）是面向对象编程思想者中基本的代码单元，被广泛使用。 **类（Class）** 是面向对象程序设计（OOP，Object-Oriented Programming）实现信息封装的基础。类是一种用户定义的引用数据类型，也称类类型。每个类包含数据说明和一组操作数据或传递消息的函数。类的实例称为对象。 类是面向对象语言的程序设计中的概念，是**面向对象编程**的基础。 类的实质是一种...
构造函数只初始化没有实际意义的成员变量。需要初始化的数据在 init() 方法中集中初始化。 定义： 在构造函数中执行初始化操作 优点： 排版方便，无需担心类是否初始化 结论： - **构造函数中**：仅对成员变量进行基本的初始化，如将指针设置为`nullptr`，或将变量设置为默认值。 - **`init()` 方法中**：执行所有需要初始化的操作，如资源分配、依赖注入...
尽量使用组合而不是继承。如果使用继承，只用public继承。 允许接口继承，尽量不使用实现继承。 - **优先使用组合**：尽量通过组合来复用代码，因为它提供了更大的灵活性，并且减少了类之间的耦合。 - **使用继承时**：如果使用继承，应仅使用public继承，避免使用protected或private继承。 - **接口继承**：允许接口继承，但尽量不使用实现继承，以保持接口的清晰...
多重继承的使用场景：仅允许最多一个基类中包含实现，其他基类都是以Interface为后缀的纯接口。 ## 不好示例 ```cpp class BaseClassA { public: virtual void doSomething() = 0; void commonFunction() { /* 实现 */ } }; class BaseClassB {...
接口是指满足特性条件的类，这些类以Interface为后缀（命名约定）。 定义：当一个类满足以下要求时，称之为纯接口： （1） 类只定义接口，不包含任何功能实现； （2） 类的结尾以Interface为后缀。 解释： 这里的接口不是指Web开发中的GET/POST请求接口，而是指类的调用接口。 比如在thinkphp中，开发人员在extend扩展模块自定义了一个支付类供控制器调用，那这...
将类中表示数据的成员私有化，并提供相关的存取函数。 这里指的是类的成员变量。 指的是这种情况，假如一个类中有以下三个成员变量，以C++为例： ``` String head; ``` 正确的使用方式应该是： ```cpp class Human { private String head; public function readHead() { ...
类中声明次序：public、protected、private，如果某一块没有，直接忽略。 每一块中，声明次序如下： （1）常量； （2）构造函数； （3）析构函数； （5）成员函数，含静态成员函数； （6）数据成员，含静态数据成员； ## 示例 ```cpp class MyClass { public: static const int...
（1）函数长度尽量不超过50行，倾向选择短小、凝练的函数。 （2）函数尽量短小、简单，便于他人阅读和修改代码。处理代码时如发现长函数，考虑分割为若干短小、易于管理的若干函数。 ...
函数的初始化列表置于同一行，或换行Tab补齐 ## 示例 ```cpp class MyClass { public: MyClass(int a, int b) : a(a),b(b) // 同一行初始化 { // 构造函数体 } int a; int b; }; ``` ```cpp clas...
命名空间内容不缩进。 比如： ``` using namespace yixzm; ``` 不要写成 ``` using namespace yixzm; ``` ...
行尾不要增加无意义的空白。 《Google C++ code style guide》原文这里是指代码行尾不要留多余的tab和空格键。 现在的编辑器自动格式化一般都有去除行尾空白的功能。 当然，还有一种情况行尾会有空白，一种是代码行尾和行尾注释之间的空白。 出于代码美观考虑，许多开发者喜欢用Tab补齐行尾注释，小编尊重各位开发者的喜好但并不推荐这样做。 - 原因一：麻烦 - 原因二：现...
垂直空白尽量少。函数之间、模块之间留一行空白 不要留无意义的垂直空白。 错误示范： ```c int number; if (number == 8) { printf("hello"); } ``` 正确示范： ```c int number; if (number == 8) { printf(name); } ``` 对于习惯多留垂直空...
优秀的代码本身就是可读性极强的文档，可读性要求代码本身要遵守一定的命名规则。 命名规则最重要的是规则的一致性。 命名规范基于[thinkphp6命名规范](http://static.kancloud.cn/manual/thinkphp6_0/1037482)做了文字细节调整。 ## 命名规范 请理解并尽量遵循命名规范，可以减少在开发过程中出现不必要的错误。 文件命名规则、类型命名规则...
上一章命名规范约定了良好命名的基本样子，这一章通用命名规则讲述改怎样去命名，以及为什么以这样的规则去命名。 通用命名规则： （1）函数命名、变量命名、文件命名应具有描述性，不要过度缩写 好的例子 ``` int errorNumber; string bookName; ``` 坏的例子 ``` int e; string bn; ``` 不要为了节省空间而使用不明确的缩...
在编写代码时，应避免使用非标准或不常见的缩写，除非这些缩写在项目外也非常明了，如IOT、DNS、IP等。 - 避免使用省略字母的缩写，例如将`count`写成`cnt`。 - 使用完整单词或广为人知的缩写，如`password`可以缩写为`pwd`，`username`可以缩写为`usr`。 #### 理由 - 使用完整单词可以提高代码的可读性，特别是对于新团队成员或外部开发者。 ...
文件命名尽量能准确描述当前代码文件的功能性。如果当前代码文件的所有代码都是在处理支付相关内容，可以将这个文件命名为pay 文件夹命名要全部小写。 文件名命名分以下场景： ### 场景一：php项目中的html模板文件 文件名全部小写 ### 场景二： Linux C/C++ 代码工程中，文件命名全部小写，可以包含下划线（_） ### 其他场景： 均采用驼峰命名法 ### 例外场景...
类命名规范各编程语言做相同要求，一律大驼峰命名法。即： 类命名每个单词以大写字母开头，不包含下划线。 示例： GoodBoy、FoxMail 类的命名要尽量归纳整个类的核心用途。比如一个类用来描述用户信息，则应该使用 UserInfo，而不是UserName、UserId等一部分用途来命名。 ...
一律采用小驼峰命名法。示例： blackDog、whiteDog ...
常量命名使用const 修饰，采用全大写加下划线命名法。 即常量应该全部大写，并且以_分隔。 原因是团队内训项目为基于php开发的web项目，编程习惯趋近于 PSR-1 标准。 常量尽量使用能清晰描述当前常量的词语，比如当前当前常量是测试环境服务器的IP地址，可以写作 ENV_TEST_IP 192.168.1.44 再比如: 数据库名称 DATABASE_NAME 密码 PASSW...
函数命名要清晰的表达当前函数实现的功能。 函数名除了使用小驼峰命名法之外，采用的单词也应该使用动词+名词的结构。 比如函数用途是获取文章列表，其中动词为获取（get），名词为文章列表（ArticleList），则该方法为 getArticleList。 ...
全部小写，命名基于项目名称和目录结构。 ### 不好示例 ```csharp // 不推荐的命名空间命名 namespace MyProject.Models { // ... } namespace myproject.utils { // ... } ``` #### 理由 - MyProject.Models中的M和P大写，违反了全部小写的...
参考现有或相近命名约定。 比如：在当前国情下某司的某个历史遗留项目全部采用汉语拼音命名法，虽然这样做对很多人来说感觉很low，但建议新接手的开发者出于命名规则一致性考虑，还是继续继承当前规则。 ...
注释是导致代码风格混乱的一大毒瘤，也是容易被开发者个人随意发挥创意的重灾区。 《Google C++ code style guide》从文件注释、类注释、函数注释、变量注释和标点拼写等方面详细讲述了Google对于注释的理解。 小编在整理之余，也留下一点个人浅薄见解供参考。 ...
说明代码功能的关键注释统一使用多行注释。 比如在C++、C、php等编程语言中使用 ` /** */`，python中使用`''' '''` 等。 ...
文件注释需说明当前文件在项目中的核心作用。 比如某个用户管理相关的文件，可以这样注释： ``` /** * 用户信息管理文件 * @author yixzm * @modify 2022-5-20 */ ``` ...
类的头文件中，对类的成员函数、成员变量做说明。 - 对于每个成员函数和成员变量，提供清晰的注释，说明其用途和行为。 - 使用标准的注释标记，如Java的`/** ... */`，以便于文档生成工具解析。 - 对于公共接口，详细说明参数和返回值；对于私有成员，说明其存在的理由和用途。 ## 示例 ```cpp /** * @class Rectangle * @brief 表...
函数申明处注释的内容： （1）函数作用：当前函数需要达成的目的 （2）函数参数：说明是输入还是输出，及参数含义 （3）返回值：含义和类型 示例 ```cpp /** * 加载书籍列表 * @param class 书籍类型 * @param limit 检索数据条数限制 * @return array 数据列表 */ ...
变量尽量命名形象，编程风格良好的代码中，需要理解的功能型变量一般都在特定功能的类中，变量本身命名规范，几乎是不需要注释的。 函数内部的逻辑型临时变量，很多时候可以不必注释。 一般只对类的成员变量使用注释。比如： ```cpp /** 是否为移动端 */ isMobile: false, /** 字数统计变量 */ wor...
对逻辑复杂或重要的地方加实现注释。 比如，一段函数实现了某个不常见算法，只需要在这一段代码前说清楚是什么算法就可以，而不用在算法的每一行都添加注释说明。 注意：不要用自然语言翻译代码作为注释，要假定读代码的人C++|Python|Java|Php|JS比你强。 ## 示例 ```cpp /** * 使用Kadane算法计算数组中具有最大和的连续子数组。 * Kadane算法可...
注释要易读，使用易懂的自然语言。不要用符号、标点和拼写等不易懂的内容作为注释。 国内普通团队的开发者使用正经汉语就好，如果团队英文不是特别强，就没必要非得使用英文注释。 ...
临时、短期的解决方案，需要使用TODO注释。临时注释使用单行注释 TODO大写，需要备注作者名，以备查找，如：`//TODO(Luffy):需要优化逻辑`。 ...
格式化建议尽量使用自动化格式化插件，现代代码编辑器基本标配代码格式化功能。 不推荐采用手动的方式格式化代码，效率很低。 ...
《Google C++ code style guide》建议： 每一行代码的字符数不超过80个。 考虑到规范成书比较早，当年的计算机屏幕显示能力还不怎么强，所以指南中建议的80个字符，我们可以灵活变通，比如我们可以建议一行字符不超过100个。 这一条考虑以下情况： 如果一行注释包含了超过80字符的命令、文件路径或URL，出于复制粘贴方便代码可能会超过80字符；这种情况建议将URL和命令换...
无论在什么场景，都尽量不使用非ASCII字符，使用时必须使用UTF-8格式。 ### 正确写法 - 避免在代码中直接使用非ASCII字符，除非必要。 - 如果必须使用非ASCII字符，确保整个项目使用UTF-8编码。 - 在文件的头部声明编码格式，例如，在Python文件中添加`# -*- coding: utf-8 -*-`。 ### 不好示例 ```python # 错误...
只使用Tab，约定Tab长度为4个空格。在Python语言中，可将Tab映射为4个空格以适配python语法。 vscode常用代码格式化插件通常可以针对语言单独设置缩进tab长度。 比如可以在php环境设置1个Tab=4个空格，同一个编辑器在编辑js和html时可以设置1Tab=2空格。不同语言的空格设置可以同时生效。 关于Tab长度，建议： 在php、C++、C代码中，1个Tab = ...
返回类型和函数名在同一行，参数也在同一行。 如果一行文本较多写不下所有参数，则参数换行Tab对齐： ```cpp ReturnType LongClassName::ReallyReallyReallyLongFunctionName( Type par_name1, Type par_name2, Type par_name3) { DoSomething(); // ...
尽量放在同一行，否则将括号内的参数换行对齐。 推荐 ``` int main() { } ``` 不推荐 ``` int main() { } ``` ...
条件语句的左花括号放在条件语句的行位，格式上与函数区分 注意：条件内哪怕只有一行语句，也要写全花括号，方便后续运维。有些条件语句写在一行可以增强可读性，仅当语句简单且没有else子句时可以使用： ``` if (x == kFoo) return new Foo(); if (x == kBar) return new Bar(); ``` 注意：如果有else子句，则禁止不带花括号。...
（1）`switch` 语句尽量使用大括号分块 （2）`switch` 语句必须要有`default`存在，如正常不会执行则以异常日志或控制台信息的方式处理。 （3）空循环使用`{}`或者`continue`，禁止循环只用一个分号 ## 示例 ```cpp switch (condition) { case 1: { doSomething(); ...
如果布尔表达式超过标准行宽（80字符），则断行且要求逻辑操作符置于行尾。例如： ```cpp if (this_one_thing > this_other_thing && a_third_thing == a_fourth_thing && yet_another & last_one) { ... } ``` 有多个逻辑操作符时，考虑使用圆括号`()`提示运算优先级 ...
函数返回（即：`return` 表达式）时不要使用圆括号 不建议写法： ``` return (false); ``` 建议写法： ``` return false; ``` ...
使用等号`=`完成。 很多开发语言都支持使用其他的初始化方式，比如用`()`初始化。出于风格统一和避免误会等考虑因素，建议统一采用`=`做初始化工作。 ...
前文提到的编码习惯基本是强制性的，但优秀的规则都允许例外。 例外是特殊场景下屈服于项目进度和成本的特事特办，不能成为一般场景下破坏规则的借口。 ...
引入的第三方成熟库或工程不符合既定规范可以网开一面。 （1）第三方库 第三方库通常不是由本团队开发完成的，而且一般情况下代码量巨大且几乎只使用但不需要维护。出于时间成本考虑，我们不会投入精力去维护第三方库的屎山代码。 事实上许多知名的第三方库都有自己的一套编程规范，而且经历过长时间的维护，更重要的是作者水平一般也比较高。绝大数的情况没这个需求。 （2）当前项目的历史遗留代码 当编程人员接...
HTML代码风格指南也是HTML的编程规范。 关于HTML的风格指南，不只在静态页面中适用，还包括： （1）php、python、java等后端工程中的html模板文件。 （2）vue、react等前端工程模板中的html部分。 本系列文章关于html代码风格的讲述包括样式规则、排版规则、元数据规则等其他规则。 + 样式规则包括协议。 + 排版规则包括缩进、大小写、尾部的空格。 + ...
协议、排版、缩进、大小写等风格约定。 ...
### 协议 嵌入式资源书写省略协议头。 （1）省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )。如果不是这两个声明的URL则不省略。 （2）省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载。 HTML代码示例： ```html ``` CSS代码示例： ```css /* 不推荐 */ ....
### 排版规则 HTML关于排版的一些建议，主要包含，缩进，大小写，尾部空格。 #### 缩进 每次缩进使用两个空格。 不使用TAB键或者混合使用TAB键和空格进行缩进. HTML代码示例： ```html Fantastic Great ``` #### 大小写 只使用小写字母。 所有的代码都使用小写字母：适用于HTML元素、属性、属性值（除了text/...
### 缩进 每次缩进两个空格长度。 通常HTML代码层数比大多数编程语言要多，所以不建议采用4个空格长度的缩进。不使用TAB键或者混合使用TAB键和空格进行缩进。 HTML代码示例： ```html Fantastic Great ``` ...
### 大小写 只使用小写字母。所有的代码都使用小写字母：适用于HTML元素、属性、属性值（除了text/CDATA）、CSS选择器、属性名以及属性值（字符串除外）。 HTML代码示例： ```html ``` ```html Home ``` ...
### 元数据规则 html源码相关规则，主要包含编码，注释，处理内容。 #### 编码 使用UTF-8无BOM编码。 让你的编辑器使用无字节顺序标记的UTF-8编码。 在HTML模板和文档中使用 指定编码。不需要为样式表指定编码，它默认是UTF-8。 #### 注释 在需要时尽可能去解释你的代码。 用注释去解释你的代码，包括它的应用范围、用途、此方案的选择理由等。 （这一...
### 编码 使用UTF-8无BOM编码。 让你的编辑器使用无字节顺序标记的UTF-8编码。 在HTML模板和文档中使用` `指定编码。不需要为样式表指定编码，它默认是UTF-8。...
文档类型、语义、标签风格等。 ...
请使用HTML5标准。 ### 文档类型 使用HTML5。 HTML5（HTML语法）是所有HTML文档的首选：` ` （推荐使用HTML，即text/html。不要使用XHTML。XHTML，即 application/xhtml+xml，缺乏浏览器和基础结构的支持，并且优化的空间比HTML小。） 虽然HTML闭合标签没有问题，但是不要自闭合空标签。即写 ` `而不是 ` `。...
### 代码有效性 尽量使用有效的HTML代码。 编写有效的HTML代码，否则很难达到性能上的提升。 用类似这样的工具 W3C HTML validator 来进行测试。 HTML代码有效性是重要的质量衡量标准，并可确保HTML代码可以正确使用。 HTML代码示例： ```html Test This is only a test. Test This ...
### 语义化 根据HTML各个元素的用途而去使用它们。 使用元素 (有时候错称其为"标签") 要知道为什么去使用它们和是否正确。 例如，用heading元素构造标题， p 元素构造段落, a 元素构造锚点等。 根据HTML各个元素的用途而去使用是很重要的，它涉及到文档的可访问性、重用和代码效率等问题。 HTML代码示例： ```html All recommendations...
### 多媒体后备方案 为多媒体提供备选内容。 对于多媒体，如图像，视频，通过 `canvas` 读取的动画元素，确保提供备选方案。 对于图像使用有意义的备选文案`alt` 对于视频和音频使用有效的副本和文案说明。 提供备选内容是很重要的，原因：给盲人用户以一些提示性的文字，用 `alt` 告诉他这图像是关于什么的，给可能没理解视频或音频的内容的用户以提示。 （图像的 `alt `属性会产...
### 关注点分离 将表现和行为分开。 严格保持结构（标记），表现（样式），和行为（脚本）分离, 并尽量让这三者之间的交互保持最低限度。 确保文档和模板只包含HTML结构， 把所有表现都放到样式表里，把所有行为都放到脚本里。 关注点分离好的代码示例： ```html ``` 关注点分离不好的代码示例： ```html ...
### 实体引用 不要用实体引用。 不需要使用类似`—`、`”` 和 `☺` 等的实体引用, 假定团队之间所用的文件和编辑器是同一编码（UTF-8）。 在HTML文档中具有特殊含义的字符（例如 < 和 & )为例外， 噢对了，还有 "不可见" 字符 （例如no-break空格）。 唯一的例外适用于HTML中具有特殊意义的字符（比如 The cur...
### 可选标签 可选标签不建议省略。 （这种方法可能需要更精准的规范来制定，众多的开发者对此的观点也都不同。） 《google html 编程风格指南》建议我们省略可选标签。他给出的建议是这样的： 出于优化文件大小和校验， 可以考虑省略可选标签，哪些是可选标签可以参考 HTML5 specification。 HTML代码示例： ```html Sp...
### type 属性 在样式表和脚本的标签中忽略 type 属性。 在样式表（除非不用 CSS）和脚本（除非不用 JavaScript）的标签中不写 type 属性。 HTML5默认 type 为 text/css 和 text/javascript 类型，所以没必要指定。即便是老浏览器也是支持的。 HTML代码示例： ```html ``` ...
常规格式化、引号等代码规则约定。 ...
#### 常规格式化 每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。 独立元素的样式（as CSS allows elements to assume a different role per display property), 将块元素、列表元素或表格元素都放在新行。 另外，需要缩进块元素、列表元素或表格元素的子元素。 （如果出现了列表项左右空文本节点问题...
#### HTML引号 当引用属性值时，使用双引号。 使用双引号而不是单引号来包裹属性值。 HTML代码示例： ```html Sign in Sign in ```...
虽然对很多开发人员来讲，css代码看起来很简单，但其代码风格也是值得我们注意的。 经常编写CSS的开发人员其代码能力相对其他岗位比如后端、框架开发等相对要弱一些，所以更要加强编程规范的学习。 比如，css表达尺寸单位有很多写法，可以写成px、rem、百分比、vh等等。 在同一个项目中，我们应当尽量保持单位的一致性。 举一个团队新人真实发生的案例： ``` #img-con { ...
从css代码有效性、命名风格、缩写等方便来阐述css的编程风格。 ``` /* 有效性 */ p { color: #000; /* 使用十六进制颜色代码 */ font-size: 16px; /* 使用像素单位 */ height: 120px; weight: 120px; } /* 命名风格 */ .img-head-nev { color:...
尽量使用有效的CSS代码。 使用有效的CSS代码，除非是处理CSS校验器程序错误或者需要专有语法。 用类似W3C CSS validator 这样的工具来进行有效性的测试。 使用有效的CSS是重要的质量衡量标准，如果发现有的CSS代码没有任何效果的可以删除，确保CSS用法适当。 ...
为id和class取通用且有意义的名字。 应该从id和class的名字上就能看出这元素是干嘛用的，而不是表象或模糊不清的命名。 应该优先虑以这元素具体目来进行命名，这样他就最容易理解，减少更新。 通用名称可以加在兄弟元素都不特殊或没有个别意义的元素上，可以起名类似"helpers"这样的泛。 使用功能性或通用的名字会减少不必要的文档或模板修改。 ``` /* 不推荐: 无意义 不易理解...
非必要的情况下，id和class的名称应尽量简短。 简要传达i或class是关于什么的。 通过这种方式，似的代码易懂且高效。 ``` /* 不推荐 */ #navigation {} .atr {} /* 推荐 */ #nav {} .author {} ``` ...
避免使用CSS类型选择器。 非必要的情况下不要使用元素标签名和ID或class进行组合。 出于性能上的考虑避免使用父辈节点做选择器 performance reasons。 ``` /* 不推荐 */ ul#example {} div.error {} /* 推荐 */ #example {} .error {} ``` ...
写属性值的时候尽量使用缩写。 CSS很多属性都支持缩写shorthand （例如font） 尽量使用缩写，甚至只设置一个值。 使用缩写可以提高代码的效率和方便理解。比如： ``` /* 不推荐 */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height:...
省略0后面的单位。 非必要的情况下 0 后面不用加单位。 ``` margin: 0; padding: 0; ``` ...
0开头的小数 省略0开头小数点前面的0。 值或长度在-1与1之间的小数，小数前的 0 可以忽略不写。如：font-size: .8em; 注意：对于`font-size: .8em`这种代码，很多自动化代码格式工具会自己补0，这时候我们也不用刻意去删除。 ...
省略URI外的引号。 不要在 url() 里用 ( "" , '' ) 。 ``` /** 推荐 */ background-image: url(/im/yixzm666.png); /** 不推荐 */ background-image: url("/im/yixzm666.png"); /** 不推荐 */ background-image: url('/im/yix...
十六进制尽可能使用6个字符。 ``` /* 推荐 */ color: #eebbcc; /* 不推荐 */ color: #ebc; ``` 在小编的参考资料里，原作者推荐加颜色值时候使用3个字符的十六进制，因为这样更短与简洁。 但在小编的实际工作中发现，通常色值来源是UI设计工程师或者颜色助手工具。而UI设计师和常用的颜色转换工具生成的十六进制字符串默认都是输出6位，所以小编在这...
选择器前面加上特殊应用标识的前缀（可选）。 大型项目中最好在ID或class名字前加上这种标识性前缀（命名空间），使用短破折号链接。 比如layui的命名范例 `layui-nav-item` 使用命名空间可以防止命名冲突，方便维护，比如在搜索和替换操作上。 ...
ID和class名字有多单词组合的用短破折号"-"分开。 别在选择器名字里用短破折号"-"以外的连接词(包括啥也没有)， 以增进对名字的理解和查找。 说明：ID和class使用下划线(_)在很多浏览器支持不良好。 ``` /* 不推荐：“demo”和“image”中间没加“-” */ .demoimage {} .error_status {} /* 推荐 */ #video-...
最好避免使用CSS "hacks" —— 请先尝试使用其他的解决方法。 根据小编得知现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题，例如 1、属性级Hack：比如IE6能识别下划线“_”和星号“*”，IE7能识别星号“*”，但不能识别下划线”_ ”，而firefox两个都不能认识。 2、选择符级Hack：比如IE6能识别*html .class...
声明顺序、代码缩进等编写规则 ...
依字母顺序进行声明。 都按字母顺序声明，很容易记住和维护。 忽略浏览器的特定前缀排序，但多浏览器特定的某个CSS属性前缀应相对保持排序（例如-moz前缀在-webkit前面）。 ``` background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border...
缩进所有代码块（"{}"之间）内容。 缩进所有代码块的内容，它能够提高层次结构的清晰度。 ``` /** 好的例子 */ #btn-commit:hover { background: tomato; text-decoration: none; color: white; border: none; } /** 不好的例子 */ #btn...
所有声明都要用";"结尾。 考虑到一致性和拓展性，请在每个声明尾部都加上分号。 ``` /* 不推荐 */ .test { display: block; height: 100px } /* 推荐 */ .test { display: block; height: 100px; } ``` ...
在属性名冒号结束后加一个空字符。 出于一致性的原因，在属性名和值之间加一个空格（可不是属性名和冒号之间噢）。 ``` /* 不推荐 */ h3 { font-weight:bold; } /* 推荐 */ h3 { font-weight: bold; } ``` ...
将选择器和声明隔行。 每个选择器和声明都要独立新行。 ``` /* 不推荐 */ a:focus, a:active { position: relative; top: 1px; } /* 推荐 */ h1, h2, h3 { font-weight: normal; line-height: 1.2; } ``` ...
每个规则独立一行。 两个规则之间隔行。 ``` /** 好的例子 */ html { background: #fff; } body { margin: auto; width: 50%; } /** 不好的例子 */ body { margin: auto; width: 50%; } ``` ...
元数据指的是未经打包压缩的css源代码，比如： ``` /* 用户界面颜色 */ .ui-color-primary { color: blue; /* 主要文本颜色 */ } /* 2023年3月15日 - 由John Doe更新颜色值 */ .ui-color-primary { color: blue; /* 更改为蓝色以符合新的设计指南 */ } ``` ...
按组写注释。（可选） 如果可以，按照功能的类别来对一组样式表写统一注释。独立成行。 ``` /* Header */ #adw-header {} /* Footer */ #adw-footer {} /* Gallery */ .adw-gallery {} ``` ...
前端工程师的主力语言 在过去，JavaScript是编程风格的重灾区。 近几年随着vue、react等新型前端框架和脚手架的流行，才渐渐的好了起来。 在平时开发时，要习惯使用代码格式化工具，习惯清除编辑器提示的格式化异常。 当然，工具毕竟是外力，即使工具再好也要努力培养自己良好的编程风格意识。 ...
在本系列文档中，代码风格指南覆盖以下JavaScript基础特性： * 变量 * 常量 * 分号 * 嵌套函数 * 块内函数声明 * 异常处理 * 自定义异常 * 标准特性 * 基本包装类型 * 多级原型结构 * 方法定义 * 闭包 * eval() ...
每个变量声明都要加上let关键字。 解释：如果你不指定关键字let 该变量就会暴露在全局作用域（window）中，这很可能会覆盖全局作用域中的同名变量，从而引发问题（另外GC也会因此而无法有效回收内存啊），所以务必用let声明变量。 有经验的js工程师习惯使用 var 来生命变量，但小编推荐使用 let。 原因在于let不存在变量提升，模糊的写法会直接报错，能提前暴露隐藏的bug。 ...
常量命名用类似NAMES_LIKE_THIS这样的形式。没事干了可以用@const来标记它是常量，但永远不要用const关键字来进行常量声明。 解释： 对于基本类型的常量，命名简介解释一下作用就可以了。 ``` /** * 一分钟有多少秒呀 * @type {number} */ goog.example.SECONDS_IN_A_MINUTE = 60; ``` 对于非...
一般不需要加分号。特殊场景下换行不加分号会出问题。 《google javascript代码风格指南》是这样建议的： 每一语句的结尾都要加上分号噢。 如果不加分号JS解释器也会按隐式分隔的标准去执行，但那样调试、压缩、合并的时候都很不方便。不要那样做嘛你可以做的更好的不是么。 而且在某些情况下，不写分号可是很危险的。 原因： JS语句以分号作为结束符使得JS解释器解析，如果省略分号，就...
嵌套函数非常有用，它可以重用而减少代码量，或防止一些辅助作用的方法暴露在外等优点，请随意把玩（叫破喉咙也不会有人来救它的）。 嵌套函数，顾名思义就是一个函数里面去定义另外一个函数，不过他的作用域尽可以被内部调用，不可以被外部调用。比如： ``` function fun(a){ function funOne(a){ return a; } ...
虽然大多数JS引擎都支持块内声明函数，但它并不是 ECMAScript 标准的一部分（详见 ECMA-262, 第13条和第14条）。更糟糕的是各引擎对于块内函数声明的实现都不一样，和 EcmaScript 的建议相违背。 ECMAScript 只允许在根脚本语句或其他函数中进行函数声明，如果一定要用的话可以在块内用变量来定义函数： ``` if (x) { var foo = func...
支持合理使用。 不管谁写代码都不能百分百的说自己的程序木有异常的。所以，细心的检查代码是一方面，预先处理一些可能出现的异常也是有必要的（使用try-catch(e)），特别是正在做一些重要项目的时候（框架什么的）。 译者注：如果是预先就知道自己的代码会发生错误时，再使用try-catch语句就不合适了噢，而是应该预先对其进行检查，防止错误的出现（取自《JavaScript高级程序设计》） ...
支持合理使用。 没有自定义异常抛出的情况下，代码运行可能会报一些原始的错误信息，但包含的内容和错误描述会因浏览器而不同却都不是特别明确，不易维护，No fashion！所以在感觉适当的时候可以使用自定义异常抛出（这里指的是throw，带有适当信息的自定义错误能够显著提升代码的可维护性）。 ...
为了获得最大的可移植性和兼容性，尽量依赖于标准方法。（比如使用 string.charAt(3) 而不是 string[3] ，再比如通过DOM原生方法去访问节点元素，而不是使用某框架封装好的获取方法或快捷引用（比如许多远古前端开发工程师喜欢用的jQuery）。 ...
基本包装类型 如果没有必要，尽量不要使用 new 基本包装类型（Boolean/Number/String）。 而且它在以下这种情况下很危险： ``` var x = new Boolean(false); if (x) { alert('hi'); } ``` 以上代码会显示 hi。因为基本包装类型的实例调用typeof会返回"object"，对象么在判断时都会被转换为布...
多级原型结构指的是 JavaScript 实现继承。 比如自定义类D，并把自定义类B作为D的原型，那就是一个多级原型结构了。怎么说呢，结构越来越复杂了就越难维护。 鉴于此，使用 the Closure Library的 goog.inherits() 或许会是更好的选择。 ``` function D() { goog.base(this) } goog.inherits(D, B...
Foo.prototype.bar = function() { ... }; 给原型对象的构造函数添加方法和属性有很多种方式，更倾向于使用以下这种风格： ``` Foo.prototype.bar = function() { /* ... */ }; ``` ...
有一件需要注意的事情，闭包会保持一个指向它封闭作用域的指针，所以在给DOM元素附加闭包时，很可能会产生循环引用，进一步的消耗内存，比如下面的代码： ``` function foo(element, a, b) { element.onclick = function() { /* uses a and b */ }; } ``` 即便这个闭包函数内部并没有使用 element，可...
只用于反序列化。（反序列化的意思是从字节流中重构对象，这里指的应该是JSON字符串重构成对象，或是执行服务器返回的JS语句） eval() 很不稳定，会造成语义混乱，如果代码里还包含用户输入的话就更危险了，因为你无法确切得知用户会输入什么！需要使用更好更清晰更安全的方式。 然而 eval 很容易解析被序列化的对象，所以反序列化的任务还是可以交给它做的。（例如：解析RPC响应的时候） 反序列化...
使用 with 会影响程序的语义。因为 with 的目标对象可能会含有和局部变量冲突的属性，使你程序的语义发生很大的变化。例如： ``` with (foo) { var x = 3; return x; } ``` 局部变量 x 可能会被 foo 的一个属性覆盖，它甚至可能有setter方法，在此情况下将其赋值为3可能会执行很多其他代码。所以此例子什么可能都有，所以...
仅在构造函数，方法，闭包中使用。 this 语义很特别。它大多数情况下会指向全局对象，有的时候却是指向调用函数的作用域的（使用eval时），还可能会指向DOM树的某个节点（绑定事件时），新创建的对象（构造函数中），也可能是其他的一些什么乱七八糟的玩意（如果函数被 call() 或者被 apply() ）。 很容易出错的，所以最好是以下这两种情况的时候再选择使用： * 在构造函数中（原型对象...