前端开发规范

Vue相关项目需要强制使用ESlint做代码规范检查，在使用vue-cli创建项目时，选择standard规范，并且开启fix修复功能。

chainWebpack: (config) => {
    config.module.rule('eslint').use('eslint-loader')
        .loader('eslint-loader')
        .tap(options => {
            options.fix = true
            return options;
        })
}

项目开发

前端项目一般会使用git版本控制系统，前后端分离的项目，前端代码会跟服务端代码分开存放。提交测试服或发布正式服的时候，前端将代码编译打包后，默认生成dist文件夹，只将此文件夹上传至后端。

由于网段限制，前端的工程中一般会附带node_modules.7z的依赖压缩包，直接解压出来使用，不需要再通过npm下载，更新依赖后，也需要同步更新node_modules.7z并提交。

所以如果在某些场景下不方便安装node-sass的话，可以使用dart-sass替代。

项目开发前需要向需求方确认好浏览器版本的兼容情况，移动端需要支持到Android和iOS什么版本，是否使用的是软件自带的浏览器，内置浏览器版本是多少。

前端开发在写代码或者使用高级css功能的时候多去MDN上面查一查兼容性的问题，不能想当然地觉得这个代码特性没有兼容性问题。

项目文档

 前端项目的说明，需要写道readme.md里面去，包括需要装说明软件环境，执行什么命令，配置什么host，如何打包发布。要达到的目的是，接触项目的人看这个readme就能把前端项目跑起来。

所有的项目必须有完善的readme文档说明，文档内容不做限制，除了一些必要的说明，如：如何启动项目、发版说明，只要能让开发者更好的理解项目的内容都可以加上。

前端校验

 前端对所有需要用户进行输入的地方做数据校验，如检查输入长度限制、内容合法限制、xss问题等。校验规则需要跟后端一致，不合法时提示明确的错误信息。

网站字体使用

 网站所使用的字体统一设置为：

font-family: PingFangSC, 微软雅黑,Helvetica,Arial,sans-serif;

　　禁止使用 @font-face 引用其他未被授权的中英文字体，开源免费的字体图标除外。

第三方库使用

 使用第三方库时，如果只是用到了其中的少部分功能，需要注意队报进行按需加载，减少依赖体积。

例如在使用element-ui时，在main.js中

全局引入：

import ElementUI from 'element-ui';
Vue.use(ElementUI);

 按需引入：

import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);

 具体引入方式可以参照element-ui官方文档。

Vue相关

 Vue项目开发规范参考，Vue官方风格指南

https://cn.vuejs.org/v2/style-guide/index.html

在需要使用Vue的render函数时候，都应该使用JSX语法，不应该直接编写h(createElement)函数，统一语法，并且便于他人维护。

 vue变量修改

 对于数组或对象类型的数据，不能直接修改其中的元素和属性来达到触发变化的目的，需要对修改的变量复制一个副本，对副本进行修改后，复制给需要触发变化的变量中。

vue组件内的css

 css规则（建议使用 css-modules 或者 BEM 命名规则（Bem 是块（block）、元素（element）、修饰符（modifier）的简写）避免样式冲突，不使用 scoped ），除非是单独的封装组件。

css-modules使用示例：

<template>
    <div class="home">
        <div class="item">{{ count }}</div>
    </div>
</template>
<style lang="scss">
.home {
    .item {
        color: red;
    }
}
</style>

BEM 命名约定的模式是：

.block {}

.block__element {}

.block--modifier {}
  • block 代表了更高级别的抽象或组件。
  • block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。
  • block--modifier 代表 .block 的不同状态或不同版本。 使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。如： 
    .sub-block__element {}

.sub-block--modifier {}

 BEM命名法的好处：BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

 v-for key的设置

 不能使用index来作为key的值，必须是v-for中迭代列表中的唯一值，key的作用主要是为了高效的更新虚拟DOM。添加key之后，列表数据修改的时候，vue会去根据key值判断某个值是否修改，如果修改，则重新渲染，否则复用之前的元素。在列表中间插入一条数据时，如果使用index作为key，则vue判定插入位置到最后数据全部发生了变化，全部需要重新渲染，而如果使用唯一id作为key，则判定只有插入的一条数据发生变化，只需要渲染这一条数据。

 路由划分

路由应该按照业务来划分 ，根据实际场景考虑是否按需加载页面，按需加载使用 import() 引入对应的路由组件，同时也要考虑打包形成后 chunk 的情况，chunk 太小且数量较多会导致chunk内webpack-runtime代码量增加，导致整个打包后文件体积增大，这个时候使用一种魔法注释用法

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

就可以把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

AJAX请求

发起ajax请求的 url 应该写于业务代码中，而非另开js文件进行管理。不恰当的工程化只会让代码难以维护。

1、axios.get('/test')    // yes
2、axios.get(Apis.test.get)    // no

公用方法

当出现重复函数时，如果该部分代码无副作用且可分离，可以考虑将其抽离出来放到单独的文件中统一管理，例如helpers、utils。谨慎使用mixins，因其来源不清晰，会极大增加后期维护成本。

 git提交规范

 提交代码前，对自己修改的文件进行一次检查，只对自己修改的内容进行提交，不要提交多余的文件。

css规范

缩进：使用两个空格；

分号：每个属性声明末尾都要加上分号；

空格：

　　不需要空格：属性名后、多个规则的分隔符 ',' 前、!important '!' 后、属性值中 '(' 后和 ')' 前、行末不要有多余的空格。

　　需要空格：属性值前、选择器 '>', '+', '~' 前后、'{' 前、!important '!' 前、@else前后、属性值中的 ',' 后、注释斜杠前后。

需要空行：文件最后、'}' 后最好跟一个空行，包括scss中嵌套的规则、属性之间需要适当的空行。

换行：‘{’ 前不需要换行

需要换行：'{' 后和 '}' 前、每个属性单独占一行、多个规则的分隔符 ',' 后。

命名：类名使用小写字母，以中划线分割、id采用驼峰式命名、scss中的变量、混合、placeholder采用驼峰式命名。

杂项：

不允许有空的规则；

元素选择器用小写字母；

去掉小数点前买的0；

去掉数字中不必要的小数点和后面的0；

属性值 '0' 后面不要加单位；

同个属性不同前缀的写法需要在垂直方向保持对齐；

无前缀的标准属性应该写在有前缀的属性后面；

不要在同个规则里面出现重复的属性，如果重复的属性是连续的则没有关系；

不要再一个文件里出现两个相同的规则；

用 border: 0; 代替 border: none;

选择器不要超过四层（在scss中如果超过四层应该考虑用嵌套的方式来写）；

 尽量少用 ' * ' 选择器；

html

 语法

 缩进：两个空格；

嵌套的节点要进行缩进；

 在属性上 ，使用双括号，不要使用单括号；

属性名全小写，用中划线做分隔符；

不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；

不要忽略可选的关闭标签

HTML5 doctype

 在页面开头使用这个简单的doctype来启用标准模式，使其在每个浏览器中尽可能一致的展示；虽然doctype不区分大小写，但是按照惯例，doctype大写（关于html属性，大写还是小写）。

<!DOCTYPE html>
<html>
...
</html>

lang属性

 根据html5规范：应在html标签上加上lang属性，这会给语音工具和翻译工具帮助，告诉它们应该怎么去发音和翻译。

<!DOCTYPE html>
<html lang="zh-cn">
...
</html>

 字符编码

 通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为 'UTF-8'。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
</head>
...
</html>

IE兼容模式

用标签可以指定页面应该用什么版本的IE来渲染，不同doctype在不同浏览器下会触发不同的渲染模式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>　　

引入css、js

根据HTML5规范，通常在引入css和js时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

属性顺序

为保证代码易读性，属性应按照特定的顺序出现。

  • class
  • id
  • name
  • data-*
  • src, for, type, href, value, max-length, max, min, pattern
  • placeholder, title, alt
  • aria-*, role
  • required, readonly, disabled

class 是为高可复用组件设计的，所以应处于第一位；

id 更加具体且应该尽量少使用，所以应该放在第二位；

Boolean属性

Boolean属性指不需要声明取值的属性，xhtml需要每个属性声明取值，但HTML5并不需要；

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected></option>
</select>

js生成标签　　

在js文件中生成标签让内容变得更加难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；很多时候，需要通过迭代和重构来使HTML变得更少。

js规范

使用standard规范 https://github.com/standard/standard

对应编辑器的配置方法查看上面的 github 链接

一般情况下前端项目工程中会使用ESLint进行JS代码的规范，如果是.js文件可以支持自动修改规范的功能，.vue 文件由于编译原因无法支持。掌握本规范的最好方法是安装并在自己的代码中使用它。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/paradise-of-sunshine/p/11954263.html