前端编程规范 (详细)

JavaScript----代码风格

1.Prettier插件 快捷键 shift+alt+f

JavaScript----命名规范

1.避免单字母的名字。用你的命名来描述功能。

// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}

2.在命名变量、对象、函数和实例时使用驼峰命名法（camelCase）

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

3.如果属性/方法是一个 boolean 值，使用 isVal() 或者 hasVal()。

// bad
if (!dragon.age()) {
  return false;
}
// good
if (!dragon.hasAge()) {
  return false;
}

4.只有在命名构造器或者类的时候首字母大写。

// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

5.文件名应该和默认导出的名称完全匹配

// file 1 contents
class CheckBox {
  // ...
}
export default CheckBox;

// file 2 contents
export default function fortyTwo() { return 42; }

// file 3 contents
export default function insideDirectory() {}

// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export

// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly

// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"

6.当你导出一个构造器 / 类 / 单例 / 函数库 / 暴露的对象时应该使用帕斯卡命名法（首字母大写）

const AirbnbStyleGuide = {
  es6: {
  },
};

export default AirbnbStyleGuide;

7.

JavaScript----语言特性

1.使用 const 定义你的常量引用；避免使用 var,可以使用let

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;

2.不要保存 this 的引用。 使用箭头函数或者 函数bind

// bad
function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
}

// bad
function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
}

// good
function foo() {
  return () => {
    console.log(this);
  };
}

3.使用 Array#push 取代直接赋值来给数组添加项

const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

4.使用数组展开方法 … 来浅拷贝数组。

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

5.在访问和使用对象的多个属性的时候使用对象的解构。

// bad
function getFullName(user) {
		const firstName = user.firstName;
		const lastName = user.lastName;

		return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
    const { firstName, lastName } = user;
    return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
    return `${firstName} ${lastName}`;
}

6.使用数组解构。

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

7.对于多个返回值使用对象解构

// bad
function processInput(input) {
    // 处理代码...
    return [left, right, top, bottom];
}

// 调用者需要考虑返回数据的顺序。
const [left, __, top] = processInput(input);

// good
function processInput(input) {
    // 处理代码...
    return { left, right, top, bottom };
}

// 调用者只选择他们需要的数据。
const { left, top } = processInput(input);

8.尽量使用 class. 避免直接操作 prototype

// bad
function Queue(contents = []) {
		this.queue = [...contents];
}
Queue.prototype.pop = function () {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
};

// good
class Queue {
    constructor(contents = []) {
    		this.queue = [...contents];
    }
    pop() {
        const value = this.queue[0];
        this.queue.splice(0, 1);
        return value;
    }
}

9.不要直接从导入导出。

// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

10.把 const 声明的放在一起，把 let 声明的放在一起

// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

11.三目表达式不应该嵌套，通常是单行表达式

// bad
const foo = maybe1 > maybe2
    ? "bar"
    : value1 > value2 ? "baz" : null;

// 分离为两个三目表达式
const maybeNull = value1 > value2 ? 'baz' : null;

// better
const foo = maybe1 > maybe2
    ? 'bar'
    : maybeNull;

// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

12.避免不必要的三目表达式

// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;

// good
const foo = a || b;
const bar = !!c;
const baz = !c;

CSS ----命名规范

1.统一使用小写

字体名称以及特殊的 CSS 属性/值（translateX等）不要求强制小写
颜色值如果是16进制，推荐小写，更加容易辨识。
如果是关键字色值，推荐使用更加直观的颜色关键字。

/** bad */
.Foo {
  BACKGROUND: #CCC;
  color: currentColor;
  border-color: #F00; /* 红色 */
}

/** good */
.foo {
	background: #ccc;
  color: green;
  broder-color: #eee;
}

2.元素选择器命名语义化

/** bad */
.a {
  width: 200px;
  height: 200px;
	background: #ccc;
}

.pd-l-16 {
	padding-left: 16px;
}

/** good */
.container {
  width: 200px;
  height: 200px;
	background: #ccc;
}

.control-padding {
	padding-left: 16px;
}

3.多个选择器和声明都独占一行

/** bad */
h1, h2, h3 {
	font-weight: normal; line-height: 1.5;
}

/** good */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.5;
}

4.样式结尾需书写分号

/** bad */
.foo {
	font-size: 14px;
  line-height: 14px
}

/** good */
.foo {
	font-size: 14px;
  line-height: 14px;
}

5.避免使用多个 ID 选择器

/** bad */
#header #search {
	height: 40px;
}

/** good */
#search {
	height: 40px;
}

6.每个规则集之间保留一个空行

/** bad */
.selector1 {
  display: block;
  width: 100px;
}
.selector2 {
  padding: 10px;
  margin: 10px auto;
}

/** good */
.selector1 {
  display: block;
  width: 100px;
}

.selector2 {
  padding: 10px;
  margin: 10px auto;
}

7.每增加一级花括号嵌套，则增加一级缩进

/** good */
@supports (animation: 1s foo both) {
  @keyframes foo {
    50% {
      transform: scale(1.2);
    }
    80% {
      transform: scale(0);
    }
  }
}

8.类的声明使用短横线 - 连接

/** bad */
.wrapHeaderTitle {
	font-size: 14px;
}

.wrap-header-title {
	font-size: 16px;
}

9.无前缀属性一定要写在最后

/** bad */
.foo {
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-border-radius: 6px;
}

/** good */
.foo {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px; 
}

预处理工具

sass/scss
less
stylus

后处理工具

预处理工具帮助我们可以在 CSS 的编写中实现混入、逻辑判断、继承等各种高级特性。最后，我们还需要后处理工具对样式文件进行兼容性等处理。

autoprefixer
npm i postcss-loader -D
安装完成后，在项目根目录初始化 postcss.config.js 配置文件，写入如下配置：
module.exports = { plugins: { 'postcss-preset-env': {}, "autoprefixer": {} } }
最后，在 webpack 配置文件中编写 loader ：

{
  test: /\.css$/,
    use: [
      {
        loader: 'style-loader'
      },
      {
        loader: 'css-loader',
        options: { 
          importLoaders: 1 ,
          sourceMap: true
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true
        }
      }
    ]
},

Html----书写规范

1.标签闭合规则

<!-- bad -->
<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始无终，浏览器亦能正确解析
</div>
<br/>

<!-- good -->
<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
<br/>

2.在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，应使用字符实体替代

<!-- bad -->
<a href="#">more>></a>

<!-- good -->
<a href="#">more&gt;&gt;</a>

3.HTML标签名、类名、标签属性和大部分属性值统一用小写

<!-- bad -->
<div class="DEMO"></div>
<!-- bad -->
<DIV CLASS="DEMO"></DIV>

<!-- good -->
<div class="demo"></div>

4.HTML 标签类名命名规范描述：尽量语义化、标准化。推荐使用短横线 - 进行语义词的连接

<!-- bad -->
<div class="main11"></div>
<!-- bad -->
<DIV CLASS="mainContainer"></DIV>

<!-- good -->
<div class="main-container"></div>

5.不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

<!-- bad -->
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

<!-- good -->
<link rel="stylesheet" href="" >
<script src=""></script>

VUE ---- 命名规范

1.组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外

// bad
Vue.component('todo', {
  // ...
})
export default {
  name: 'Todo',
  // ...
}


// good
Vue.component('todo-item', {
  // ...
})
export default {
  name: 'TodoItem',
  // ...
}

2.Prop 名大小写,在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

// bad
props: {
  'greeting-text': String
}

<welcome-message greetingText="hi"/>

// good
props: {
  greetingText: String
}

<welcome-message greeting-text="hi"/>

3.为 v-for 设置键值，提升 diff 算法性能

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

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

4.vue组件名,引入名

<!-- 在单文件组件和字符串模板中 -->
<myComponent/>

<!-- 在 DOM 模板中 -->
<my-component></my-component>

5.避免 v-if 和 v-for 用在一起，一般我们在两种常见的情况下会倾向于这样做

v-for 比 v-if 具有更高的优先级，因此在下面示例中哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。

// bad
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

// bad
<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

// good
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

//good
<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>