链接：https://www.jianshu.com/p/d6d99cf8c097
链接：https://www.jianshu.com/p/0e66067e32ea
Github: https://github.com/excelmicro/typescript
1.本规范为前端开发人员编码遵守，方便阅读和后续交接人员快速入手。如有不当请及时向管理人员指出修改。
2.本规范会不断修订，如有好的建议请联系制定人员，评估合理后即做修改；
基本准则
符合web标准, 语义化html, 结构、样式、表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.
通用规范
1.所有页面按照统一的格式来写；
2.对所有后台请求的返回结果做判断空处理（保证在后台请求失败的情况下，浏览器控制台不会报错）；
3.所有功能模块写注释，详见下面注释规范；
4.处理逻辑一定要尽量简化，抽取公共框架，减少后期维护成本；
5.tab键用两个空格代替或用两个空格缩进（务必）；
6.代码行之间尽量不要有空行，重大逻辑转折、语法意义转折，方法分割除外，适当空行增强可读性；
7.可使用 W3C HTML/CSS Validator 来验证你的 HTML/CSS 代码有效性;
文件、资源和目录命名约定（适用于所有前端维护的内容和相关目录，(html, css, js, png, gif, jpg, ico)等）
1.字母一律小写，必须是英文单词或者汉语拼音，以英语单词优先，多个单词以连字符 - 连接。 只能出现小写英文字母，数字和连字符；
2.浏览器广告拦截插件会将含有这些词的作为广告拦截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao 等，页面中尽量避免采用以上词汇来命名；
3.文件命名总是以字母开头而不是数字，以特殊字符开头命名的文件，一般都有特殊的含义与用处，慎用。
4.需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 xxxxx.main.min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。
HTML 规范
1.为每个HTML页面的第一行添加标准模式声明（HTML5 doctype），确保在每个浏览器中拥有一致的展现；
<!DOCTYPE html>
<html>
<head>
</head>
</html>
2.明确声明字符编码，确保浏览器快速判断页面内容的渲染方式，约定一致采用UTF-8编码。
3.IE 兼容模式。除非特殊需求，否则约定设置为edge，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
4.元素属性顺序。
HTML 属性统一使用双引号，且应当按照以下给出的顺序依次排列，确保代码的易读性：
- class
- id 、 name
- data-*
- src、for、 type、 href
- title、alt
- aria-*、 role
5.嵌套元素应当缩进一次，即两个空格；
6.确保全部使用双引号，不要使用单引号；
7.不要省略可选的结束标签，如：</li>,</body>，省略标签可能会导致一些问题;自闭合标签则无需闭合(如:img input br hr 等)。
8.脚本引用写在 body 结束标签之前；
9.尽量保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，JS脚本之中。
10.尽量不使用行内样式；
<style>.no-good {}</style>;
11.在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。
12.任何时候都要尽量使用最少的标签并保持最小的复杂度，尽量避免多余的父元素。
13.尽量避免通过 JavaScript 生成的标签，它让内容变得不易查找、编辑，并且降低性能。
14.重要图片一定要加上alt属性; 给重要的元素和截断的元素加上title;
heade 模板
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<!-- 为搜索引擎提供搜索关键字 -->
<meta name="keywords" content="150字符以内">
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 图标 -->
<link rel="apple-touch-icon-precomposed" href="/apple-icon.png">
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>
CSS规范
为了便于阅读，css属性书写要遵循本规范。
1.为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行；
2.当使用特定浏览器带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
3.属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
4.每个规则之间始终有一个空行分隔。
5属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。
6.为了代码的易读性，在每个声明块的左花括号前添加一个空格；右花括号要单独成行。
7.不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
8.对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
9.与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。所以要尽量使用<link>标签引入样式；
css属性顺序
1.结构性属性：
display position, left, top, right etc. overflow, float, clear etc. margin, padding
2.表现性属性：
background, border etc. font, text
例子:
.header { /* 显示属性 */ display || visibility list-style position top || right || bottom || left z-index clear float
/* 自身属性 /
width max-width || min-width height max-height || min-height overflow || clip margin padding outline border background
/ 文本属性 */
color font text-overflow text-align text-indent line-height white-space vertical-align cursor content }
JavaScript规范
1.文件命名可读性强。文件夹、文件的命名与命名空间应能代表代码功能，增强可读性。
2.函数命名按照驼峰命名法。
function funName() {}
3.常量要全部大写,变量驼峰命名：
var VARIABLENAME //常量
var variableName //变量
4.排版缩进采用统一的缩进方式排版代码。缩进为2个空格。
If(condition1 || condition2) {
action1;
} else if (condition3 && condition4) {
action2;
} else if (condition5
&& condition6
&& condition7
&& condition8) {
action2;
} else {
default action;
}
5.关键词、条件括弧后面使用空格；运算操作符号两侧使用空格；语句分割符‘,’后面使用空格;
var name[空格]=[空格]value;
if[空格](a,[空格]b) {
}
6.左大括号"{"可以居行尾,右大括号"}"单独占一行，居行首
if (a && b) {
}
句末必须使用分好结尾；
var fn = function () {
};//这里没有分号的话，脚本解析器会报错！！！
(function () {
alert(1);
})();
8.if、while、for、do语句的执行体总是用"{"和"}"括起来
总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，这将对变量难以控制。如果没有声明，变量处于什么定义域就变得不清（可以是在 Document 或 Window 中，也可以很容易地进入本地定义域）；
变量声明可以只用一个 var 关键字声明，多个变量用逗号隔开；赋值尽量写在变量声明当中。
使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的错误（比较的双方必须是同一类型才会有效）；
在用if作判断的时候。下列表达式统统返回 false：false, 0, undefined, null, NaN, ''（空字符串）.
统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常容易辨别；
注释规范
代码注释，永远也不嫌多，特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。避免发生过一段时间回头看自己的代码不能立即明白作用；
1.文件注释要标明作者、文件版本、创建/修改时间、重大版本修改记录；
2.函数或者类等都要添加头描述；
3.注释的时候不止写代码都干了些什么，还要加上代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。
4.代码注释中英文都可以。
/**
* 简述
* 功能详细描述
*
* @param <String> arg1 参数1
* @param <Number> arg2 参数2，默认为0
* @return <Boolean> 看xxx是否成功
*/
function fooFunction (arg1, arg2) {
}
单行注释,写在代码上面;多行注释应有描述；
/*
* 注释操作说明
*/
for( var i = 0; i < 100; i++) {
}
4.为了便于CSS 阅读， css 大模块时间使用区块分割标记；
/****** 注释描述 ********/
TypeScript编码规范
命名：
- 使用PascalCase为类型命名。
- 不要使用I做为接口名前缀。
- 使用PascalCase为枚举值命名。
- 使用camelCase为函数命名。
- 使用camelCase为属性或本地变量命名。
- 不要为私有属性名添加_前缀。
- 尽可能使用完整的单词拼写命名。
组件
- 1个文件对应一个逻辑组件 （比如：解析器，检查器）。
- 不要添加新的文件。 :)
- .generated.*后缀的文件是自动生成的，不要手动改它。
类型 - 不要导出类型/函数，除非你要在不同的组件中共享它。
- 不要在全局命名空间内定义类型/值。
- 共享的类型应该在types.ts里定义。
- 在一个文件里，类型定义应该出现在顶部。
null和undefined：
- 使用undefined，不要使用 null。
一般假设
- 假设像Nodes，Symbols等这样的对象在定义它的组件外部是不可改变的。不要去改变它们。
- 假设数组是不能改变的。
类
- 为了保持一致，在核心编译链中不要使用类，使用函数闭包代替。
标记
- 一个类型中有超过2个布尔属性时，把它变成一个标记。
注释
- 为函数，接口，枚举类型和类使用JSDoc风格的注释。
字符串
- 使用双引号""
- 所有要展示给用户看的信息字符串都要做好本地化工作（在diagnosticMessages.json中创建新的实体）。
错误提示信息
- 在句子结尾使用.。
- 对不确定的实体使用不定冠词。
- 确切的实体应该使用名字（变量名，类型名等）
- 当创建一条新的规则时，主题应该使用单数形式（比如：An external module cannot...而不是External modules cannot）。
- 使用现在时态。
- 错误提示信息代码
- 提示信息被划分类成了一般的区间。如果要新加一个提示信息，在上条代码上加1做为新的代码。
1000 语法信息
2000 语言信息
4000 声明生成信息
5000 编译器选项信息
6000 命令行编译器信息
7000 noImplicitAny信息
普通方法
- 由于种种原因，我们避免使用一些方法，而使用我们自己定义的。
- 不使用ECMAScript 5函数；而是使用core.ts这里的。
- 不要使用for..in语句；而是使用ts.forEach，ts.forEachKey和ts.forEachValue。注意它们之间的区别。
- 如果可能的话，尝试使用ts.forEach，ts.map和ts.filter代替循环。
风格
- 使用arrow函数代替匿名函数表达式。
- 只要需要的时候才把arrow函数的参数括起来。
- 比如，(x) => x + x是错误的，下面是正确的做法：
x => x + x
(x,y) => x + y
(x: T, y: T) => x === y
- 总是使用{}把循环体和条件语句括起来。
- 开始的{总是在同一行。
- 小括号里开始不要有空白.
- 逗号，冒号，分号后要有一个空格。比如：
for (var i = 0, n = str.length; i < 10; i++) { }
if (x < 10) { }
function f(x: number, y: string): void { }
- 每个变量声明语句只声明一个变量
（比如 使用var x = 1; var y = 2;而不是var x = 1, y = 2;）。 - else要在结束的}后另起一行。
网友评论