关于前端基础建设相关的一些想法[云途]

[myqianlan]

总的指导原则：

度；道家思想：反者道之动（物极必反）

最少最简单明了的规则制定出最容易遵守最容易理解的开发规范或工具，以提升开发效率和工程质量

unix哲学：( http://www.ruanyifeng.com/blog/2009/06/unix_philosophy.html )

"简单原则"----尽量用简单的方法解决问题----是"Unix哲学"的根本原则。KISS（keep it simple, stupid）

"先求运行，再求正确，最后求快。"（Make it run, then make it right, then make it fast.）

1. 前端编码规范

分为强制规范与推荐规范，循序渐进

Airbnb前端代码规范在github上的star数目为37000+，是业内认可度最高的规范，可以拿来借鉴

https://github.com/sivan/javascript-style-guide/blob/master/es5/README.md es5

https://github.com/JasonBoy/javascript/tree/master/react jsx

https://github.com/yuche/javascript es2015

https://github.com/Zhangjd/css-style-guide css

css命名建议采用OOCSS与BEM 空格等转义字符尽量少用

2. 前端工程构建

前端是一个发展极快并且十分不稳定的一个领域，所以在前端工程构建这一块希望能有一个度，做到既能够规范化团队开发，又不影响接纳试水新的技术。

前端工程构建会和自动化发布结合在一起，所以构建命令应该尽量不涉及到具体所用到各类技术，例如fis、gulp、webpack、yeoman。

前端的工程构建现在看来都会和nodejs环境紧密结合( 统一团队node大版本，推荐LTS版本 )，所以推荐构建命令使用 npm script

（部署规范）

npm run local
npm run dev
npm run dev-deploy
npm run test
npm run test-deploy
npm run release
npm run release-deploy

deploy命令后期应该是不会出现的，在自动化发布做好之后

3. 前端目录规范

目录其实是一个很重要的东西，根据目录，我们可以明白一个项目的大致结构

开发目录 与 发布目录( dist src )

强制顶层目录规范，必须要有的目录结构

宽松目录规范 src下面的目录根据不同项目针对点的不同 做相应改变（分组件目录与很文件目录）

目录指导原则：

LIFT原则 （ https://github.com/johnpapa/angular-styleguide/blob/master/a1/i18n/zh-CN.md ）

构建一个可以快速定位（Locate）代码、一目了然地识别（Identify）代码、拥有一个平直（Flattest）的结构、尽量（Try）坚持DRY（Don’t Repeat Yourself）的应用程序，其结构应该遵循这4项基本准则。

LIFT：

轻松定位代码（L）

一眼识别代码（I）

平直的代码结构（层级不要太多）（F）

尽量保持不要写重复代码（T）

4. readme文件

每个项目根目录下面都必须有一个readme文件，但整个项目不限制只有一个readme文件

readme文件内容：

- 项目名称
- 项目环境依赖
- 项目相关构建命令
- 项目所用到的相关技术
- 项目注意事项
- 项目其他说明

5. 统一常用相关工具库

lodash underscore math.js moment.js

6. 其他文件

.editorconfig .gitignore

7. 统计代码

加入统计分析代码

8. 后端相关

数据全走请求，后台报错信息不应该直接返回给前端（返回给前端也没什么用）

9. 其他

没有银弹，具体问题具体分析；

[myqianlan]