对于不同的企业有不同的前端(代码/文件目录/打包发布)规范,其下为个人习得或习惯。
代码规范
HTML
文档统一采用UTF-8
编写(设置IDE)
代码缩进采用4个空格
一个标签多个属性(导致折行),每个属性单独成行
1 | <div |
注释的使用
- 用于模块开始和结束
1 | <!-- 模块名 --> |
- 用于说明
1 | <!-- 这是一个组件 --> |
- 暂存代码(可能下次需要)
外链样式文件放在head标签之中, 外链JS文件放在body结束标签之前
1 | <!-- ... --> |
使用标签语意化
1 | <header></header> |
标签正确嵌套
- 两个标签不能交叉嵌套
1 | // Error |
- 一般情况下,行内元素不能嵌套块级元素
1 | // BAD |
遵照HTML5声明文档类型
1 |
元信息设置
1 | <meta charset="UTF-8"> |
标签及属性名均采用小写,且属性值采用双引号(“”),自定义属性以data-
开头
1 | <div |
CSS/LESS/SASS等
css代码位置
一般情况下css代码放置于单独文件,外部链接进html文件,特殊情况(页面简单等)下也可将其放入style
标签,正常情况下不应在标签上设置样式。
在css中不使用@import
,除开LESS/SASS文件中。
样式的写法
本人一般采用OO结合BEM的写法,OO定义基本的原子类,便于组合,BEM具有一定的模块化封装性。
id与class定义
- id采用驼峰形式,如:
#fullName
- class采用小写字母加中划线(-)或下划线(_),详情说明参考BEM,如:
.btn--primary, .user__avatar--small
- JS中使用class,以
js-
开头
样式属性顺序:尺寸->形状->内填充/外边距->文字->位置等(不严格按照这顺序)
注释
- 大的模块/分段
1 | /** |
- 样式属性说明
1 | /* 说明 */ |
属性值缩写,如:颜色,font,background等
样式换行
- 不同属性单独成行
1 | /* 不推荐 */ |
- 多个class共同样式,不同类名单独成行
1 | /* 不推荐 */ |
JavaScript
基础规范
使用es6+相关语法,同时polyfill,最后采用babel转码。
- 变量定义
1 | // 定义变量用let,常量用const |
- 构造函数首字母大写
1 | function Person () { |
- 空格使用
1 | // 运算符前后加入空格 |
- 采用
2个
空格进行代码缩进
1 | // 不推荐 |
- 语句结束必须使用分号(;)
1 | // 不推荐 |
- 箭头函数括号使用
1 | // 不推荐 |
- 注释的使用
1 | /* 块级注释 */ |
- 避免使用过多的全局变量
1 | // 采用命名空间(namespace) |
库/框架
jQuery
- jQuery对象变量名称以$开头
1 | let $fullName = $('#fullName') |
- 多次使用的jQuery对象变量缓存
- 查询元素,缩小范围,减少选择器复杂度通过find
1 | // 不推荐 |
- 方法链式调用
1 | $('.blk') |
- css操作用class,不直接操作属性
1 | .active { |
1 | // 不推荐 |
- 绑定列表元素事件采用事件委托
1 | $('.list').on('click', '.list-item', function () { |
- 减少DOM操作,使用字符串拼接(join),然后一次性append
1 | let $list = $('.list'); |
- ajax回调采用Promise
1 | $.ajax({ |
VUE
以上html规范适用于VUE组件html模版定义,JS规范适用于组件JS定义,CSS适用于组件样式定义。
- 用vue-cli脚手架搭建初始化项目
- 组件书写采用单文件
- 组件粒度按照实际情况调整,如:公共组件小粒度,便于复用;复用性不大的,可以大粒度。
- 组件名称采用小写字母加中划线(-)命名
- 组件props定义,需定义类型及默认值
1 | export default { |
- 合理使用computed/watch/methods,详细原因参考:计算属性和侦听器
- 组件的样式均采用scoped,有助于提高组件的封闭性
1 | <style lang="scss" scoped> |
React
- 用create-react-app作为项目的脚手架,初始化搭建项目
- 组件书写采用单文件
- 为src目录增加resolve.alias,修改webpack配置,以方便文件引用
1 | // webpack config |
- 采用ES6及JSX编写组件,以提高效率/可读性/可维护性
- 组件名及文件名采用帕斯卡命名法(首字母大写,大驼峰)形式,如:MyComponent.js
- 组件代码首先引入node_modules中模块,然后再引入自定义组件,其次在引入样式及图片文件
1 | import React, { Component } from 'react'; |
- 使用装饰器
1 | @withRouter |
- 按照需要详细定义组件propTypes及defaultProps
1 | export default class MyComponent extends Component { |
- 组件/标签属性较多时,每条属性单独成行
- 合理使用组件命名空间,如:
List.Item
- JSX用
()
包裹 - 按照生命周期组顺序织组件的方法、属性
- 组件中样式尽量少使用css-in-js形式,将样式提取到单独文件中
1 | // 不推荐 |
- 组件中事件监听函数采用箭头函数绑定上下文
1 | export default class Com extends Component { |
文件目录规范
SPA (单页应用)
project_dir src assets images styles ... components Banner index.js utils date.js currency.js ... pages order Detail.js List.js ... index.js
MPA (多页应用)
project_dir src assets images styles scripts ... pages page1.js page2.js ... tpls page1.html page2.html ... ```
打包发布
基于现在情况,本公司现在打包基本上采用webpack
及相关插件予以实现,采用前端针对开发和生产环境分别打包并生成zip文件(存放在git中)交由后端开发人员部署。
需用到以下工具:
- node packages:cross-env
- webpack plugins: webpack.definePlugin/zip-webpack-plugin
当然可以采用jenkins优化发布过程。可以参见《Jenkins+Github持续集成》