|- /api // 接口请求Api层
|- /assets // 静态资源文件
|- /base // BLL业务逻辑层基类（构造函数）
|- /components // 公共组件
|- /utils // 工具箱帮助
|- /plugins // 插件
|- /types // 类型定义文件
|- /directives // 自定义指令
|- /router // 路由文件
|- /styles // 公用样式
|- /views // 业务目录
|- /store // 状态管理

|- /views 
  |- /home-page 
    |- index.vue 
    |- index.ts 
    |- index.less
    |- ...

|- /src 
  |- /components 
    |- /v-table
      |-  index.vue
    |- /v-svg-icon
      |-  index.vue
    |- ...

|- /home-page
  |- /components 
    |- pan-item.vue
  |- index.vue
  |- index.ts
  |- ...

let tempName = ' '
function initData() {
}

const CASE_ID = 'XXX'

.form-input {
  font-size: 14px;
  color: #333333;
}

<template>
  <i-table></i-table>
</template>
<script>
import iTable from '@/components/iTable/index.vue'
 
export default {
  components: { ITable },
  ...
}
</script>

let userName = '' // 登录名

/* this.tableCurrentPagination = {
 
           pageIndex: 1,
 
           pageSize: size
 
   } */

  /**

   * 取消收藏

   */

<!--region 选择框-->
 
<el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
 
</el-table-column>
 
<!--endregion-->

// bad
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

// good
border-top: 0;
padding: 0 1em 2em;

// bad
padding-bottom: 0px;
margin: 0em;

// good
padding-bottom: 0;
margin: 0;

props: {
  total: {
    type: Number,
    default: 0
  }, // 总数
  pagination: {
    type: Object,
    default: null // 分页参数 === pageSize:每页展示的条数，pageIndex:当前页，pageArray: 每页展示条数的控制集合，默认 _page_array
  }
}

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

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

<template>
  <button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}
 
.button-close {
  background-color: red;
}
</style>

<script></script>
<template></template>
<style></style>

- // 为什么用到了 z-index
- // 兼容性处理或者针对特定浏览器的 hack

// bad
const items = "rede",
  goSportsTeam = true,
  dragonball = "z";

export { items, goSportsTeam, dragonball };
// good
const items = "rede";
const goSportsTeam = true;
const dragonball = "z";

export { items, goSportsTeam, dragonball };

// 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;

// bad
// 这里的checkName中name会调用getName函数，但是name并不是总会返回，如果hasName为test时，并不会返回，所以，应该把对name的定义延后
const getName = function backName() {
  return "rede";
};

function checkName(hasName) {
  const name = getName();

  if (hasName === "test") {
    return false;
  }

  return name;
}
// good
const getName = function backName() {
  return "rede";
};

function checkName(hasName) {
  if (hasName === "test") {
    return false;
  }
  const name = getName();

  return name;
}

// bad
const a = (b = c = 1);
// good
const a = 1;
const b = a;
const c = a;

// bad
let num = 1;
num++;
--num;
// good
let num = 1;
num += 1;
num -= 1;

// bad
// 此时的换行是没有必要的
const foo = "superLongLongLongLongLongLongLongLongString";
// good
const foo = "superLongLongLongLongLongLongLongLongString";
// bad
const foo = superLongLongLongLongLongLongLongLongFunctionName();
// good
const foo = superLongLongLongLongLongLongLongLongFunctionName();

const item = new Object(); //bad
const item = {}; //good

function getKey(k) {
  return `a key named ${k}`;
}
// bad
const obj = {
  id: 5,
  name: "San Francisco"
};
obj[getKey("enabled")] = true;
// good
const obj = {
  id: 5,
  name: "San Francisco",
  [getKey("enabled")]: true
};
// 从上面的代码我们可以看出，这个建议的是要我们把与对象相关的属性，都在一个地方定义，便于维护

// bad
const atom = {
  value: 1,
  addValue: function(value) {
    return atom.value + value;
  }
};
// good
const atom = {
  value: 1,
  addValue(value) {
    return atom.value + value;
  }
};

const lukeSkywalker = "Luke Skywalker";
// bad
const obj = {
  lukeSkywalker: lukeSkywalker
};
// good
const obj = {
  lukeSkywalker
};

const anakinSkywalker = "Anakin Skywalker";
const lukeSkywalker = "Luke Skywalker";
// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker
};
// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4
};

// bad
const bad = {
  foo: 3,
  bar: 4,
  "data-blah": 5
};
// good
const good = {
  foo: 3,
  bar: 4,
  "data-blah": 5
};

const item = {
  name: "rede"
};
// bad
console.log(item.hasOwnProperty("name"));
// good
console.log(Object.prototype.hasOwnProperty.call(item, "name"));
// best
const has = Object.prototype.hasOwnProperty;
console.log(has.call(item, "name"));

// very bad
// 本意是复制一个对象，在从复制出的对象上删除某个值，但实际上原始对象的值也会被影响
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 });
delete copy.a;
// bad
// 可以达到预期目的，但在写法上可读性不好
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
delete copy.a;
// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

// bad
const items = new Array();
// good
const items = [];

const items = [];
// bad
items[items.length] = "test";
// good
items.push("test");

const items = [1, 2, 4, 8, 16];
// bad
const itemsCopy = [];
for (let i = 0; i < items.length; i += 1) {
  itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];

const foo = document.querySelectorAll(".foo");
// good
const nodes = Array.from(foo);
// best
const nodes = [...foo];

const foo = [1, 2, 3];
// bad
const baz = [...foo].map(x => x + x);
// good
const baz = Array.from(foo, x => x + x);

// 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}`;
}

const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;

const input = {
  left: "0px",
  right: "0px",
  top: "0px",
  bottom: "0px"
};
// bad
function processInput(input) {
  const left = input.left;
  const right = input.right;
  const top = input.top;
  const bottom = input.bottom;
  return [left, right, top, bottom];
}
const [left, __, top] = processInput(input);
// good
function processInput({ left, right, top, bottom }) {
  return {
    left,
    right,
    top,
    bottom
  };
}
const { left, top } = processInput(input);

// bad
const name = "Capt. Janeway";
// bad
const name = `Capt. Janeway`;
// good
const name = "Capt. Janeway";

// bad
// 此时报的检查错误是no-multi-str，保证字符串不分两行书写
const errorMessage =
  "This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.";
// bad
// 此时运行代码检查并不会报错，针对这种写法应该是建议不要这么写
const errorMessage =
  "This is a super long error that was thrown because " +
  "of Batman. When you stop to think about how Batman had anything to do " +
  "with this, you would get nowhere fast.";
// good
// 要是感觉代码过长不方便看时，可以在编译器上做相关设置，设置自动换行
const errorMessage =
  "This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.";

// bad
function sayHi(name) {
  return "How are you, " + name + "?";
}
// bad
// 检查的错误template-curly-spacing，禁止模版字符串前后使用空格
function sayHi(name) {
  return `How are you, ${name}?`;
}
// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

// bad
const foo = "'this' is \"quoted\"";
// good
const foo = "'this' is \"quoted\"";

// bad
function add(a, b) {
  return a + b;
}
// bad
const add = function(a, b) {
  return a + b;
};
// good
const add = function myAdd(a, b) {
  return a + b;
};

// bad
const x = (function() {
  return { y: 1 };
})();
// not bad
// 随着现在模块的普及立即执行函数使用的应该不多了
const x = (function() {
  return { y: 1 };
})();

// bad
const currentUser = true;
if (currentUser) {
  function test() {
    console.log("Nope.");
  }
}
// good
const currentUser = true;
let test;
if (currentUser) {
  test = () => {
    console.log("Nope.");
  };
}

// bad
function foo(name, options, arguments) {
  // ...
}

// bad
// 这个会报no-param-reassign，禁止对 function 的参数进行重新赋值
function handleThings(opts) {
    opts = opts || {};
    ...
}
// bad
// 报的错误同上
function handleThings(opts) {
    if (opts === 0) {
        opts = {};
    }
}
// good
function handleThings(opts = {}) {
    // ...
}

// bad
// 检查时会报no-plusplus，禁用++
// 这个例子应该是要说明，不对默认参数设置不确定的因素，就比如这里的b值，两次调用返回值都不同，会令人费解
let b = 1;
function count(a = b++) {
  console.log(a);
}
count(); // 1
count(); // 2

// bad
function handleThings(opts = {}, name) {
  return { opts, name };
}
// good
function handleThings(name, opts = {}) {
  return { opts, name };
}

// bad
const x = new Function("a", "b", "return a + b");
// good
const x = function backAdd(a, b) {
  return a + b;
};

// bad
const f = function() {};
const g = function() {};
const h = function() {};
// good
const f = function() {};
const g = function() {};
const h = function() {};

// normal
// 不使用换行
function foo(bar, baz, quux) {
  // ...
}
// bad
// 会报function-paren-newline要求使用一致的换行
function foo(bar, baz, quux) {
  // ...
}
// good
// 最后一行添加了逗号
function foo(bar, baz, quux) {
  // ...
}

// bad
[1, 2, 3].map(function(x) {
  const y = x + 1;
  return x * y;
});
// good
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});
// good，提高可读性
[1, 2, 3].map(x => (x + 1) * x);

// not good
["get", "post", "put"].map(httpMethod =>
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod
  )
);
// good
["get", "post", "put"].map(httpMethod =>
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod
  )
);

// bad
// arrow-parens
[1, 2, 3].map(x => x * x);
// good
[1, 2, 3].map(x => x * x);
// bad
// 因为此时使用了大括号，箭头函数后面跟随了代码块
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});

// bad
// 此时的箭头符号和比较符号看起来很像
const itemHeight = item =>
  item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item =>
  item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

// 另外一个模块文件，比如是index.js
export const firstName = "rede";
export const lastName = "li";
// 引用该模块

// bad
// 按webpack 4+以上的版本会静态分析index.js只导入需要的代码块，所以明确导入的代码块会更有利于减少打包体积
import * as index from "./index";
console.log(index.firstName);
// best
// 原例子上还提到了一个good的写法，不过看了下，感觉这种写法最好，结合编译器，还能减小文件代码
import { firstName } from "./index";
console.log(firstName);

// bad
export { firstName as default } from "./index";
// good
// 这样更加明晰
import { firstName } from "./index";

export default firstName;

// bad
import { firstName } from "./index";
import { lastName } from "./index";

export default { firstName, lastName };
// good
import { firstName, lastName } from "./index";

export default { firstName, lastName };

// bad
let foo = 3;
export { foo };
// good
const foo = 3;
export { foo };

// bad
const foo = 3;
export { foo };
// good
const foo = 3;
export default { foo };

// bad
import { firstName, lastName, backName } from "./index";
backName();
import { name } from "./test";

export default { firstName, lastName, name };
// good
import { firstName, lastName, backName } from "./index";
import { name } from "./test";

backName();

export default { firstName, lastName, name };

// bad
import { firstName, lastName, year } from "./main";

export { firstName, lastName, year };
// good
import { firstName, lastName, year } from "./main";

export { firstName, lastName, year };

// bad
import fooSass from "css!sass!foo.scss";
// good
import fooSass from "foo.scss";

// bad
const luke = {
  jedi: true,
  age: 28
};
const isJedi = luke["jedi"];

export default { isJedi };
// good
const luke = {
  jedi: true,
  age: 28
};
const isJedi = luke.jedi;

export default { isJedi };

const luke = {
  jedi: true,
  age: 28
};

function getProp(prop) {
  return luke[prop];
}

const isJedi = getProp("jedi");

export default { isJedi };