开题语

2022年的开年计划就是定义开发规范、协作流程规范、架构规范、上线规范、SDK文档规范、SDK demo规范。便于规范团队流程，减少基础性问题，更好的横向扩展和减少重构，以及提升用户体验和降低重构成本。（未完结，连更中）

HTML规范

1 基础规范

开头声明文档类型
使用不带BOM的UTF-8编码
在HTML中指定编码
SEO优化
viewport是否可缩放(为移动设备优化)
favicon：如果未指定，大多数浏览器会请求根目录下的favicon，为避免404错误，两种解决方法，一是在根目录放置favicon.ico文件，二是使用link指定favicon文件
刘海屏适配

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- SEO -->

    <title>Style Guide</title>

    <meta name="keywords" content="your keywords">

    <meta name="description" content="your description">

    <meta name="author" content="author,email address">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="path/to/favicon.ico">

  </head>

</html>

2 引入规范

省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题。对应的，后端资源也应同时支持http和https。

<!-- 推荐 -->

<script src="//www.bokecc.com/statics/js/autotrack.js"></script>

<!-- 不推荐 -->

<script src="http://www.bokecc.com/statics/js/autotrack.js"></script>



<style>

/* 推荐 */

.example {

  background: url(//www.bokecc.com/images/example);

}

/* 不推荐 */

.example {

  background: url(http://www.bokecc.com/images/example);

}

</style>

3 标签顺序

class(class 是最高的复用设计，应该放在最前)

id name(id 应尽量少用)

data-\* 自定义属性（属性名称全小写用-做连接）

src (资源文件)

placeholder title alt (提示)

required readonly disable(辅助)

4 语义化

语义的HTML结构，有助于机器搜索，保证代码可读性。

h1 大标题，一般用于banner背景，一个页面有且只有一个

h2 章节标题，可以有多个

h3 章节内的文章标题

h4,h5,h6 小标题/副标题

p 段落

5 注解规范

<!-- 头部 -->

<header class="header">

  <!-- LOGO -->

  <image class="logo"></image>

  <!-- /LOGO -->

  <!-- 详情 -->

  <view class="detail"> </view>

  <!-- /详情 -->

</header>

<!-- /头部 -->

CSS规范

1 基类规范

JavaScript规范

1 缩进

html,css,js缩进一致，推荐使用2个空格。

2 空格的使用

二元运算符前后

三元运算符前后

代码块{前

关键字前：else, while, catch, finally

关键字后：if, else, for, while, do, switch, case, catch, finally, with, return

单行注释//后，多行注释/*后

对象的属性值前

for 循环

函数的参数之间

运算符前后

函数声明，函数表达式前后空格

3 空行

尽量减少使用空行，如需使用，最多空1行。

4 引号

静态资源规范

命名规范

1 声明规范

尽量使用 let 和const声明变量，少用 var

// 推荐

let userInfo = {}

// 不推荐

var userInfo = {}

2 命名规范

变量命名：小驼峰命名

const foo = 'bar'

const userInfo = {}

参数名：小驼峰命名

function foo (userInfo) {

    // ...

}

函数名：小驼峰命名

function getUserInfo (id) {

    // ...

}

方法/属性名：小驼峰命名

getUserInfo('12345')

userInfo.id

类名开头大写

class Foo () {

    // ...

}

常量名：全部使用大写+下划线

const CCAPI_DOMAIN = '//ccapi.csslcloud.net/api/'

注解规范

1 单行注释

单行注释，独占一行，//后跟空格

// 获取用户信息

function getUserInfo () {

    // ...

}

2 多行注释

多行注释，/*后跟空格

/**

* @description 根据用户id获取用户信息

* @params { string } id - 用户id

* @returns { Object } 用户信息

*/

function getUserInfo (id) {

    // ...

}

3 函数/方法注释



/** 

* 函数描述

* @param { string } p1 参数说明

* @param { string } p2 参数2的说明，比较长

*   那就换行了.

* @param { number } p3 参数3的说明（可选）

* @return { Object } 返回值描述

*/

function foo(p1, p2, p3) {

  return {

    p1: p1,

    p2: p2

  }

}

4 注解参考规范

推荐使用JSDoc做为注解参考规范。

JSDoc是一个根据javascript文件中注释信息，生成JavaScript应用程序或库、模块的API文档的工具。

示例：

常用注解：

@file 写在文件开头，用于描述当前文件

@desc 用于描述当前文件或者代码

@author 当前文件的作者

@copyright 当前文件的版权信息

@license 文件许可证

@version 版本号

@since 描述某个功能自哪个版本开始支持

@see '另见'

@todo 接下来准备做的事情

@function/@func/@method 描述一个函数

@param 描述参数信息

@return 描述返回值

@callback 描述回调函数

vue规范

vue风格指南

1 目录结构规范

│   ├── assets/             存放资源

│   ├── pages（views）/      存放页面 

│   ├── components/         存放公共组件

2 页面命名规范

能直观的感受当前文件的作用

以小驼峰方式命名

│   ├── pages/      存放页面 

│   │   ├── login.vue       # 登录页面

│   │   ├── userCenter.vue  # 用户中心

3 组件命名规范

能直观的感受当前组件的用途

组件命名始终是多个单词的，避免跟html元素或标签冲突

要么大写开头，要么始终用横线链接（推荐大写开头）

// 反例

components/

|- MyButton.vue

|- VueTable.vue

|- Icon.vue



// 好例子

components/

|- BaseButton.vue

|- BaseTable.vue

|- BaseIcon.vue

4 资源引入规范

// 资源引入

// resources.js

import hdLogo from "@/assets/loginLogo.svg"

import hdBg from "@/assets/loginLogo.svg"



import enterClass from "@/assets/enterClass.svg"

import startLive from "@/assets/startLive.svg"

export const login = {

    hdLogo,

    hdBg

}

export const classPage = {

    enterClass,

    startLive

}

// 资源使用

// login.vue

import { login } from '@/assets/js/resources.js'

// class.vue

import { classPage } from '@/assets/js/resources.js'

// ...

5 路由规范

1 使用路由分包和webpackChunkName（推荐）命名

const router = new Router({

    routes: [

        //登录页

        {

          path: '/login',

          name: 'login',

          component: () => import(/* webpackChunkName: "login" */ '@/views/login/login.vue'),

        }

    ]

})

架构规范

webpack规范

目录规范

webpack环境

# webpack环境

├── package.json

├── config/                          # 与项目构建相关的常用的配置选项；

│   ├── webpack.base.js             # 公共配置文件

│   ├── webpack.dev.js              # 开发环境变量

│   ├── webpack.pro.js              # 生产环境变量

│   └── webpack.test.js             # 测试环境变量

vue-cli环境

# vue-cli环境

├── vue.config.js/                   # webpack 配置文件；

├── config/                          # 与项目构建相关的常用的配置选项；

│   ├── webpack.base.js             # 公共配置文件

│   ├── webpack.dev.js              # 开发环境变量

│   ├── webpack.pro.js              # 生产环境变量

│   └── webpack.test.js             # 测试环境变量

性能优化

开发环境

使用HRM优化打包构建速度

使用source-map优化代码调试

生成环境

优化打包构建速度

oneOf
babel缓存
多进程打包
externals
dll

优化代码允许性能

缓存（hash-chunkhash-contenthash）
Tree shaking
code split
懒加载/预加载
pwa（不推荐使用）

axios规范

1 请求拦截器

// 请求拦截器

axios.interceptors.request.use(config => {

  switch(config.method) {

    case 'post' || 'put' || 'delete':

      config.data = qs.parse(config.data)

      break

    default:

      break

  }

  return config

})

2 响应拦截器

// 响应拦截器

axios.interceptors.response.use(config => {

  const status = config.status

  switch (status) {

    case 200 || 204:

      return Promise.resolve(config)

    default:

      return Promise.reject(config)

  }

}, error => {

  // 请求失败处理器

  const status = error.response.status

  console.log('网络请求错误', status, error);

  if (status) {

    switch (status) {

      case 400:

        

        break;

    

      default:

        break;

    }

  }

  return Promise.reject(error.response)

})

3 qs编码处理

import qs from 'qs'

// 请求拦截器

axios.interceptors.request.use(config => {

  switch(config.method) {

    case 'post' || 'put' || 'delete':

      config.data = qs.parse(config.data)

      break

    default:

      break

  }

  return config

})

4 扩展规范

get请求传参对象类型扩展

// 重写get方法，支持url对象传参拼接

axios.get = (url, params) => {

  let urlParams = []

  if (url && typeof params === 'object') {

    for (const key in params) {

      urlParams.push(`${ key }=${ params[key] }`)

    }

  }

  return axios(`${ url }?${ urlParams.join('&') }`)

}

前端开发规范