前端开发规范

2018-11-13 本文已影响0人夜漩嵂

一、目的

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档。

二、目录规范

目录结构的统一化，可读性，分模块、组件构建，防止构建杂乱无章，毫无可读性而言的项目目录。
了解开发当前项目所需的框架，工具、插件，功能，兼容性，分辨率等问题做好准备工作。
目录结构整齐划一，方便日后的维护和其他同事的阅读。

1、基本目录结构

（1）这里主要介绍开发目录src文件夹。包含以下：

api：存放接口文件
components：存放全局公共组件
config：存放全局配置信息
help：辅助性方法
pages：存放页面文件
utils：工具箱，存放一些公用方法。
assets：图片存放处，需要按照功能模块在下面创建一个新文件夹来存放该模块下的图片。
vue.config.js：构建配置文件

2、vue 文件目录规范

该目录是项目文件的核心，主要的页面和逻辑处理都需要在这里创建，它位于pages文件夹下。目前我们配置了多入口打包，所以pages下面可以创建多个文件夹。下面以index文件夹为例。
index文件夹包含以下内容：
router：路由配置文件夹
store：vuex文件存放处
views：vue文件存放处
App.vue: 构建入口模板
main.js：构建入口文件

注意：

vue 页面级目录名称为该页面名称，包含index.vue文件、components文件夹，components文件夹存放该页面级的vue组件文件。

3、命名规范

文件夹和文件命名采用驼峰命名法。

注意：对于vue文件名称首字母需大写

三、html规范

标签书写一律使用小写字母。
代码缩进：4个字符。

四、css规范

该项目主要采用less来书写css，并且项目中引用stylelint来进行代码审核，严格按照stylelint规范进行书写。

class 和 id 命名必须单词全字母小写，单词间以 - 分隔。比如：.login-dialog、#app-page
class和id命名长度不宜过长，可简写单词。
代码缩进：4个字符。

五、图片规范

图片命名为单词全字母小写，单词间以 _ 分隔。比如banner_bg.png。
有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。

六、js规范

1、命名规范

文件命名同上，为驼峰命名法。
函数名和变量命名为驼峰命名法。
常量命名为全部大写，中间用下划线分隔。

七、注释规范

1、单行注释

说明：单行注释以两个斜线开始，以行尾结束。
使用方式：
（1）单独一行：//(双斜线)与注释文字之间保留一个空格。
（2）在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。
（3）注释代码：//(双斜线)与代码之间保留一个空格。

2、多行注释

说明：以/开头，/结尾
使用方法：
（1）若开始(/)和结束(/)都在一行，推荐采用单行注释。
（2）若至少三行注释时，第一行为/，最后行为/，其他行以开始，并且注释文字与保留一个空格。

代码风格

主要参考百度团队的前端开发规范。