读 Angular 代码风格指南
读 Angular 代码风格指南
本文写于 2021 年 1 月 17 日
原文地址:Angular 文档
该文章拥有完整的代码风格指南——大到如何编排文件夹,小到如何进行变量命名都涉及。但是与 ng 略有绑定,所以这里整理一下可以单独拿出来的通用部分。
单一职责
请坚持每个文件只定义一样东西(例如服务或组件),并且把文件大小限制在 400 行代码以内。
小文件通常非常容易阅读、维护,并能防止在版本控制系统里与团队冲突。
小文件还可以防止一些隐蔽的程序缺陷,当把多个组件合写在同一个文件中时,可能造成共享变量、创建意外的闭包,或者与依赖之间产生意外耦合等情况。
总的来说,单一职责原则可以让代码更加可复用、更容易阅读,减少出错的可能性。
如果该文件是一个函数,那么请坚持定义简单函数,并且限制在 75 行之内。
这样能更便于我们做单元测试。
命名
命名是一件非常重要的事情,他可以让其他人看我们的代码,或者是我们自己在一段时间之后再看之前的代码时,可以迅速理解文件内容、变量含义、方法用途……。也可以在全局搜索的时候,让我们可以迅速定位到目标。
代码给人读的时间比给机器读的时间多多了,因此我们需要慎重考虑命名。
可以遵循以下两个原则:
- 坚持使用一致的命名规则;
- 坚持遵循同一个模式来描述特性和类型。
文件命名
ng 推荐使用点和横杠来分隔文件名——在描述性名字中,用横杠来分隔单词;用点来分隔描述性名字和类型。
具体来说,就是先描述组件特性,再描述它的类型的模式,并且对所有组件使用一致的类型命名规则!!!
也就是 feature.type.ts
,例如 hero.service.ts
, app.module.ts
, home.component.html
, global.style.css
。
常常使用的后缀有 *.service
、*.component
、*.pipe
、.module
、.directive
。如果有必要,可以创建更多类型名,但必须注意,不要创建太多了。
这样命名文件可以让我们来快速的识别文件中有什么,并且轻松的利用编辑器或者 IDE 的模糊搜索功能找到特定文件类型。或是为自动化任务提供模式匹配。
文件名与符号名
如果将将文件命名为 hero.service.ts
,那么符号名,即类/变量名,应该命名为 HeroService
。
若为 todo-list.service.ts
,则该命名为 TodoListService
。
也就是说,使用大写驼峰命名法来命名类,并且需要匹配符号名与它所在的文件名,在符号名后面追加约定的类型后缀(例如 Component、Service)。
单元测试文件名
应该与测试的文件保持一致,xxx.xx.ts
的单元测试文件名应该叫做 xxx.xx.spec.ts
。
结构组织与 LIFT 原则
我们应该力求项目结构组织符合 LIFT 原则:
- Locate 快速定位代码
- Identify 一眼识别代码
- Flattest 尽量保持扁平结构
- Try Do Not Repeat Yourself 尝试遵循不重复自己的原则
上述四项原则重要程度从大到小。
为何?
LIFT 提供了一致的结构,它具有扩展性强、模块化的特性,它让我们可以快速锁定代码,提高开发的效率。
另外,检查应用结构是否合理的方法是问问自己:“我能快速打开与此特性有关的所有文件并开始工作吗?”
Locate(定位)
坚持直观、简单和快速地定位代码。
要想高效的工作,就必须能迅速找到文件,特别是当不知道(或不记得)文件名时——把相关的文件一起放在一个直观的位置可以节省大量的时间。
并且富有描述性的目录结构会让你和后面的维护者眼前一亮!!!
可以使用上面说的,使用 特性 + 后缀 + 文件类型
的命名方式来方便我们的定位
Identify(识别)
文件的名字请达到这个程度:看到名字立刻知道它包含了什么,代表了什么。
文件名要具有说明性。保证文件名精准的方法就是:确保文件中只包含一个组件。
避免创建包含多个组件、服务或者混合体的文件。
为何?
花费更少的时间来查找和琢磨代码,就会变得更有效率。较长的文件名远胜于较短却容易混淆的缩写名。
Flattest(扁平)
请坚持尽可能保持扁平的目录结构。
考虑当同一目录下达到 7 个或更多个文件时创建子目录。
考虑配置 IDE,以隐藏无关的文件,例如生成出来的 .js 文件和 .js.map 文件等。
没人想要在超过七层的目录中查找文件!!!
扁平的结构有利于搜索。
另一方面,心理学家们相信,当关注的事物超过 9 个时,人类就会开始感到吃力。所以,当一个文件夹中的文件有 10 个或更多个文件时,可能就是创建子目录的时候了。
还是根据你自己的舒适度而定吧。除非创建新文件夹能有显著的价值,否则尽量使用扁平结构。
Try Do Not Repeat Yourself (T-DRY)
坚持 DRY(Don't Repeat Yourself,不重复自己)。
避免过度 DRY,以致牺牲了阅读性。
虽然 DRY 很重要,但如果要以牺牲 LIFT 的其它原则为代价,那就不值得了。这也就是为什么它被称为 「Try」-DRY。
推荐的目录结构
坚持把所有源代码都放到名为 src 的目录里。
坚持如果组件具有多个伴生文件 (.ts、.html、.css 和 .spec),就为它创建一个文件夹。
我习惯使用的前端目录结构:
- src
- app
- moduleA // 模块 B
- assets
- components
- ...
- moduleB // 模块 A
- shared // 共享模块
- layouts
- assets
- main.ts
- ...
(完)
读 Angular 代码风格指南的更多相关文章
- python的PEP8 代码风格指南
PEP8 代码风格指南 这篇文章原文实际上来自于这里:https://www.python.org/dev/peps/pep-0008/ 知识点 代码排版 字符串引号 表达式和语句中的空格 注释 版本 ...
- C++代码风格指南总结
C++代码风格指南 代码风格的重要性 今天我收到thougthwork笔试没过的消息, 心里确实很难受, 然后师兄说我代码写得很糟糕 细想一下, 我写代码确实是随心所欲, 并没有遵循什么规范; 所以现 ...
- Google JavaScript代码风格指南
Google JavaScript代码风格指南 修正版本 2.28 Aaron Whyte Bob Jervis Dan Pupius Eric Arvidsson Fritz Schneider R ...
- 《Google 代码风格指南》
<Google 代码风格指南> https://github.com/google/styleguide
- 大神的JS代码风格指南
js代码风格指南:1.缩进使用空格,不要用制表符2.必须用分号3.暂时不用ES6(modules)例如export和import命令4.不鼓励(不禁止)水平对齐5.少用var 都应该使用const或者 ...
- python代码风格指南:pep8 中文翻译
摘要 本文给出主Python版本标准库的编码约定.CPython的C代码风格参见PEP7.本文和PEP 257 文档字符串标准改编自Guido最初的<Python Style Guide&g ...
- python代码风格指南:pep8 中文版
本文档所提供的编码规范,适用于主要的Python发行版中组成标准库的Python代码.请参阅PEP关于Python的C实现的C编码风格指南的描述. 本文档和PEP257(文档字符串规范)改编自Guid ...
- GO代码风格指南 Uber Go (转载)
原文地址:https://github.com/uber-go/guide/blob/master/style.md 译文出处:https://github.com/uber-go/guide 本文永 ...
- C#现代代码风格指南
参考资料: asp.net 主页仓库 代码风格 -- 一般原则 最通用的指导原则是我们使用所有的VS默认设置的代码格式,除了我们把系统命名空间放在其他命名空间之前(这在VS中是默认的,但是在VS的更新 ...
随机推荐
- 学习SVN01
SVN服务器搭建实录 第一章 SVN介绍 1.1 什么是SVN(subversion) SVN是近年来崛起的非常优秀的版本管理工具,与CVS管理工具一样,SVN是一个固态的跨平台的开源的版本控制 ...
- 用js中的let等操作,要手动开启ECMAScript6(如果不设置,let等ES6语法会报错)
问题:idea默认没有开启ECMAScript6,需要进行设置:(如果不设置,let等ES6语法会报错)步骤: File | Settings | Languages & Frameworks ...
- Netty之非阻塞处理
Netty 是一个异步的.基于事件驱动的网络应用框架,用以快速开发高性能.高可靠性的网络 IO 程序. 一.异步模型 同步I/O : 需要进程去真正的去操作I/O: 异步I/O:内核在I/O操作完成后 ...
- Ubuntu 18.04 磁盘根目录在线扩容 & 修改分区 inode 数量
Ubuntu 18.04 磁盘根目录在线扩容 & 修改分区 inode 数量 Ubuntu 作为服务器系统使用的时候,系统盘的空间可能并不是很充裕,apt apt 着,根目录就满了.诚然, ...
- 位运算符 按位与 &——整数n的二进制数中1的个数
整数n的二进制数中1的个数 编写一个函数,输入是一个整数,返回其二进制表达式中数字位数为 '1' 的个数 代码如下: int func(int n)//char ch { int count = 0; ...
- [C/C++基础知识] main函数的参数argc和argv
该篇文章主要是关于C++\C语言最基础的main函数的参数知识,是学习C++或C语言都必备的知识点.不知道你是否知道该知识?希望对大家有所帮助.一.main()函数参数通常我们在写主函数时都是void ...
- 前端每日实战:89# 视频演示如何用 CSS 和 D3 创作旋臂粒子动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJrOqd 可交互视频 此视频是可 ...
- 前端面试题整理——手写bind函数
var arr = [1,2,3,4,5] console.log(arr.slice(1,4)) console.log(arr) Function.prototype.bind1 = functi ...
- vue配置请求转发解决跨域问题
通过nodejs的请求转发到后台,前端地址:http://localhost:8080 后端地址:http://localhost:8081 vue.config.js内容如下: let prox ...
- 【Android开发】【第三方SDK】 安卓版分词功能
功能介绍: 获取剪切板内容,进行分词: 点击分解后的词,填入输入框: 点击叉号将地址拼接起来返回主界面 用途: 增加用户的体验效果,可以直接在微信上复制地址,然后通过此功能确认地址. 附上git地址 ...