CRMEB 代码规范指南：ThinkPHP6+Uni-app 架构下的开发标准

二、代码规范

2.1 Vue

.1.1 代码结构

复制代码

<template>
  <div id="my-component">
    <DemoComponent />
  </div>
</template>

<script>
import DemoComponent from '../components/DemoComponent'

export default {
  name: 'MyComponent',
  components: {
    DemoComponent
  },
  mixins: [],
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {}
  created () {},
  mounted () {},
  destroyed () {},
  methods: {},
}
</script>

<style lang="scss" scoped>
#my-component {
}
</style>

2.1.2 data

组件的 **data** 必须是一个函数。

复制代码

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

2.1.3 props

props 定义应该尽量详细。

复制代码

export default {
  props: {
    status: {
      type: String,
      required: true,
      validator: function (value) {
        return [
          'syncing', 
          'synced',
          'version-conflict',
          'error'
        ].indexOf(value) !== -1
      }
    }
  }
}

<>2.1.4 computed

应该把复杂计算属性分割为尽可能多的更简单的属性。 小的、专注的计算属性减少了信息使用时的假设性限制，所以需求变更时也用不着那么多重构了。

复制代码

// bad
computed: { 
  price: function () { 
    var basePrice = this.manufactureCost / (1 - this.profitMargin) 
    return ( 
      basePrice - 
      basePrice * (this.discountPercent || 0) 
    ) 
  } 
}

// good
computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

2.1.5 为 `v-for` 设置键值

在组件上必须用 **key** 搭配 **v-for**，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)。

复制代码

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id">
      {{ todo.text }}
  </li>
</ul>

2.1.6 `v-if` 和 `v-for` 互斥

永远不要把 **v-if** 和 **v-for** 同时用在同一个元素上。

复制代码

<!-- bad：控制台报错 -->
<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id">
      {{ user.name }}
  </li>
</ul>

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

computed: {
activeUsers: function () {
return this.users.filter((user) => {
return user.isActive
})
}
}
- {{ user.name }}
为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。
- {{ user.name }}
- {{ user.name }}

2.1.7 多个 attribute 的元素

多个 attribute 的元素应该分多行撰写，每个属性一行。

复制代码

<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>

<!-- good -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo">

<MyComponent
  foo="a"
  bar="b"
  baz="c"/>

2.1.8 模板中简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么 ，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

复制代码

// bad
{{
  fullName.split(' ').map((word) => {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

更好的做法：

复制代码

<!-- 在模板中 -->
{{ normalizedFullName }}

// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

2.1.9 带引号的 attribute 值

非空 HTML 特性值应该始终带双引号。

复制代码

<!-- bad -->
<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>

<!-- good -->
<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">

2.1.10 指令缩写

用 **:** 表示 **v-bind:**
用 **@** 表示 **v-on:**
用 **#** 表示 **v-slot:**

<input
@input="onInput"
@focus="onFocus">

<template #header>

Here might be a page title

</template>

<template #footer>

Here's some contact info

</template>

2.2 HTML

2.2.1 文件模板

HTML5 文件模板：

复制代码

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>HTML5标准模版</title>
  </head>
  <body>
  </body>
</html>

移动端：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <title>移动端HTML模版</title>

    <!-- S DNS预解析 -->
    <link rel="dns-prefetch" href="">
    <!-- E DNS预解析 -->

    <!-- S 线上样式页面片，开发请直接取消注释引用 -->
    <!-- #include virtual="" -->
    <!-- E 线上样式页面片 -->

    <!-- S 本地调试，根据开发模式选择调试方式，请开发删除 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- /本地调试方式 -->

    <link rel="stylesheet" href="http://srcPath/index.css">
    <!-- /开发机调试方式 -->
    <!-- E 本地调试 -->

</head>
<body>
</body>
</html>

PC 端：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
    <meta name="robots" content="index,follow">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="ie-stand">
    <title>PC端HTML模版</title>

    <!-- S DNS预解析 -->
    <link rel="dns-prefetch" href="">
    <!-- E DNS预解析 -->

    <!-- S 线上样式页面片，开发请直接取消注释引用 -->
    <!-- #include virtual="" -->
    <!-- E 线上样式页面片 -->

    <!-- S 本地调试，根据开发模式选择调试方式，请开发删除 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- /本地调试方式 -->

    <link rel="stylesheet" href="http://srcPath/index.css">
    <!-- /开发机调试方式 -->
    <!-- E 本地调试 -->
</head>
<body>
</body>
</html>

2.2.2 元素及标签闭合

HTML 元素共有以下5种：

空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
原始文本元素：script、style
RCDATA 元素：textarea、title
外来元素：来自 MathML 命名空间和 SVG 命名空间的元素
常规元素：其他 HTML 允许的元素都称为常规元素

为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：

所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
空元素标签都不加 "/" 字符。

我是h1标题

我是一段文字，我有始有终，浏览器能正确解析

我是h1标题

我是一段文字，我有始无终，浏览器亦能正确解析

2.2.3 代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选。

复制代码

<!-- good -->
<div>
    <h1></h1>
    <p></p>
</div>    
<p><span></span><span></span></p>

<!-- bad -->
<div>
    <h1></h1><p></p>
</div>    
<p> 
    <span></span>
    <span></span>
</p>

段落元素与标题元素只能嵌套内联元素。

复制代码

<!-- good -->
<h1><span></span></h1>
<p><span></span><span></span></p>

<!-- bad -->
<h1><div></div></h1>
<p><div></div><div></div></p>

2.3 CSS

2.3.1 样式文件

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 "UTF-8"。

推荐：

@charset "UTF-8";
.jdc {}
不推荐：

/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";
.jdc {}

/* @charset规则没有用小写 */
@CHARSET "UTF-8";
.jdc {}

/* 无@charset规则 */
.jdc {}

2.3.2 代码格式化

样式书写一般有两种：一种是紧凑格式（Compact），一种是展开格式（Expanded）。

推荐：展开格式（Expanded）

.jdc {
display: block;
width: 50px;
}
不推荐：紧凑格式（Compact）

.jdc { display: block; width: 50px;}

2.3.3 代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

推荐：

.jdc {
display: block;
}
不推荐：

.JDC {
DISPLAY: BLOCK;
}

2.3.4 代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格。

推荐：

.jdc {
width: 100%;
}
不推荐：

.jdc{
width:100%;
}

逗号分隔的取值，逗号之后一个空格。

推荐：

.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
不推荐：

.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

为单个 CSS 选择器或新声明开启新行。

推荐：

.jdc, .jdc_logo, .jdc_hd {
color: #ff0;
}

.nav{
color: #fff;
}
不推荐：

.jdc, .jdc_logo, .jdc_hd {
color: #ff0;
}.nav{
color: #fff;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0。

推荐：

.jdc {
color: rgba(255,255,255,.5);
}
不推荐：

.jdc {
color: rgba( 255, 255, 255, 0.5 );
}

属性值十六进制数值能用简写的尽量用简写。

推荐：

.jdc {
color: #fff;
}
不推荐：

.jdc {
color: #ffffff;
}

不要为 0 指明单位。

推荐：

.jdc {
margin: 0 10px;
}
不推荐：

.jdc {
margin: 0px 10px;
}

2.3.5 属性值引号

CSS 属性值需要用到引号时，统一使用单引号。

推荐：

.jdc {
font-family: 'Hiragino Sans GB';
}
不推荐：

.jdc {
font-family: "Hiragino Sans GB";
}

####2.3.6 属性书写建议

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient ...

.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

3.3.7 CSS3 浏览器私有前缀

CSS3 浏览器私有前缀在前，标准前缀在后。

复制代码

.jdc {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

2.4 JavaScript

2.4.1 单行代码块

在单行代码块中使用空格。

不推荐：

function foo () {return true}
if (foo) {bar = 0}
推荐：

function foo () { return true }
if (foo) { bar = 0 }

2.4.2 大括号风格

在编程过程中，大括号风格与缩进风格紧密联系，用来描述大括号相对代码块位置的方法有很多。在 JavaScript 中，主要有三种风格，如下：

【推荐】One True Brace Style

if (foo) {
bar()
} else {
baz()
}
Stroustrup

if (foo) {
bar()
}
else {
baz()
}
Allman

if (foo)
{
bar()
}
else
{
baz()
}

2.4.3 代码中的空格

逗号前后的空格可以提高代码的可读性，团队约定在逗号后面使用空格，逗号前面不加空格。

推荐：

var foo = 1, bar = 2
不推荐：

var foo = 1,bar = 2

var foo = 1 , bar = 2

var foo = 1 ,bar = 2

对象字面量的键和值之间不能存在空格，且要求对象字面量的冒号和值之间存在一个空格。

推荐：

var obj = { 'foo': 'haha' }
不推荐：

var obj = { 'foo' : 'haha' }

代码块前要添加空格。

推荐：

if (a) {
b()
}

function a () {}
不推荐：

if (a){
b()
}

function a (){}

函数声明括号前要加空格。

推荐：

function func (x) {
// ...
}
不推荐：

function func(x) {
// ...
}

在函数调用时，禁止使用空格。

推荐：

fn()
不推荐：

fn ()

fn
()

在操作符前后都需要添加空格。

推荐：

var sum = 1 + 2
不推荐：

var sum = 1+2

附件：https://gitee.com/ZhongBangKeJi/CRMEB

CRMEB 代码规范指南：ThinkPHP6+Uni-app 架构下的开发标准

二、代码规范

2.1 Vue

.1.1 代码结构

2.1.2 data

2.1.3 props

<>2.1.4 computed

2.1.5 为 v-for 设置键值

2.1.6 v-if 和 v-for 互斥

2.1.7 多个 attribute 的元素

2.1.8 模板中简单的表达式

2.1.9 带引号的 attribute 值

2.1.10 指令缩写

Here might be a page title

2.2 HTML

2.2.1 文件模板

2.2.2 元素及标签闭合

我是h1标题

我是h1标题

2.2.3 代码嵌套

2.3 CSS

2.3.1 样式文件

2.3.2 代码格式化

2.3.3 代码大小写

2.3.4 代码易读性

2.3.5 属性值引号

3.3.7 CSS3 浏览器私有前缀

2.4 JavaScript

2.4.1 单行代码块

2.4.2 大括号风格

2.4.3 代码中的空格

2.1.5 为 `v-for` 设置键值

2.1.6 `v-if` 和 `v-for` 互斥