明天给大家带来的是 几个大厂的前端代码标准 。
前端代码标准代码千万行,安全第一行;前端不标准,同事两行泪。
腾讯包含内容也挺多的:
PC端专题:快速上手、文件目录、页面头部、通用title、通用foot、统计代码、兼容测试
移动端专题:快速上手、文件目录、页面头部、REM规划、通用foot、统计代码、分享组件、兼容要求
双端官网:快速上手、页面跳转
不过外面也有一些内容是针对其业务的,并不通用。
京东比照腾讯的代码标准,我更引荐凹凸实验室的代码标准,比较完全。
HTML标准基于W3C、苹果开发者等官方文档,并结合团队日常业务需求以及团队在日常开发进程中总结提炼出的阅历而商定。
图片标准了解各种图片格式特性,依据特性制定图片标准,包括但不限于图片的质量商定、图片引入方式、图片兼并处置等。
CSS 标准一致团队 CSS 代码书写和 SASS 预编译言语的语法作风,提供常用媒体查询语句和阅读器私有属性援用,并从业务层面一致标准常用模块的援用。
命名标准从 “目录命名”、“图片命名”、“ClassName” 命名等层面商定标准团队的命名习气,增强团队代码的可读性。
JavaScript 标准一致团队的 JS 语法作风和书写习气,增加顺序出错的概率,其中也包含了 ES6 的语法标准和最佳实际。
凹凸实验室: https://guide.aotu.io/index.html
阿里巴巴包含了:类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符 & 等号、块、注释、空白、逗号、分号、类型转化、命名规则、存取器、结构函数、事情、模块、jQuery、ECMAScript 5 兼容性、测试、功用、资源、JavaScript 作风指南阐明
Airbnb Javascript Style Guide: https://github.com/airbnb/javascript
百度JavaScript编码标准、HTML、CSS、Less、E-JSON 数据传输标准、模块和加载器、包结构、项目目录结构、图表库标准、react 编码标准。
比如:缩进
[强迫] 运用 4 个空格做为一个缩进层级,不允许运用 2 个空格 或 tab 字符。
[强迫] switch 下的 case 和 default 必须添加一个缩进层级。
// good
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}
// bad
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}
标准文档: https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md
网易编码标准:CSS标准:一系列规则和办法,协助你架构并管理好样式
HTML标准:一系列建议和办法,协助你搭建繁复严谨的结构
工程师标准:前端页面开发工程师的任务流程和团队协作标准
但是并不止于此,还有更多:
JavaScript Standard Style除很多公司组织外,很多团体也在项目中运用的标准。
https://github.com/standard/standard
Vue这里是官方的 Vue 特有代码的作风指南。
假设在工程中运用 Vue,为了逃避错误、小纠结和反形式,该指南是份不错的参考。
不过我们也不确信作风指南的一切内容关于一切的团队或工程都是理想的。
所以依据过去的阅历、周围的技术栈、团体价值观做出有意义的偏向是可取的。
官方作风指南: https://cn.vuejs.org/v2/style-guide/index.html
es6如何将 ES6 的新语法,运用到编码实际之中,与传统的 JavaScript 语法结合在一同,写出合理的、易于阅读和维护的代码。
es6 编程作风: #docs/style
Bootstrap内容包含 HTML 和 CSS。
HTML语法、HTML5 doctype、言语属性、IE 兼容形式、字符编码、引入 CSS 和 JavaScript 文件、适用为王、属性顺序、布尔型属性、增加标签的数量、JavaScript 生成的标签。
CSS (责任编辑:admin)