前端代码编写规范

命名规范

• 文件及文件夹: 全部英文小写字母+数字或连接符”- , _ “，不可出现其他字符

  如：../css/style.css, jquery.1.x.x.js

• 文件：调用 /libs 文件需包含版本号，压缩文件需包含min关键词，其他插件则可不包含 如：/libs/jquery.1.9.1.js /libs/ycloud-1.7.min.js fileuploader.js plugins.js

• ID: 小驼峰式命名
  如：firstName topBoxList footerCopyright
• Class: [减号连接符]
  如：top-item main-box box-list-item-1
• 尽量使用语义明确的单词命名，避免 left bottom 等方位性的词语

一律使用小写字母

<!-- Recommended -->
<img src="google.png" alt="Google">
<!-- Not recommended -->
<A HREF="/">Home</A>

/* Recommended */
color: #e5e5e5;
/* Not recommended */
color: #E5E5E5;

省略外链资源 URL 协议部分

省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。

<!-- Recommended -->
<script src="//www.w3cschool.cn/statics/js/autotrack.js"></script>
<!-- Not recommended -->
<script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>

/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}
/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}

统一注释

HTML注释

• 模块注释

  <!-- 供应商列表模块 -->
  <div class="supply-list">
  ...
  </div>

• 区块注释

  <!--
  @name: Drop Down Menu
  @description: Style of top bar drop down menu.
  @author: zhangwjr(zhangwjr@yonyou.com)
  -->

  CSS注释

  组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

  /* ==========================================================================
   组件块
  ============================================================================ */
  /* 子组件块
  ============================================================================ */
  .selector {
  padding: 15px;
  margin-bottom: 15px;
  }
  /* 子组件块
  ============================================================================ */
  .selector-secondary {
  display: block; /* 注释*/
  }
  .selector-three {
  display: span;
  }

  JS注释

• 单行注释

必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。

• 多行注释

避免使用 /*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。

• 函数/方法注释

  • 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。；
  • 参数和返回值注释必须包含类型信息和说明；
  • 当函数是内部函数，外部不可访问时，可以使用 @inner 标识；

    /**
    * 函数描述
    *
    * @param {string} p1 参数1的说明
    * @param {string} p2 参数2的说明，比较长
    *     那就换行了.
    * @param {number=} p3 参数3的说明（可选）
    * @return {Object} 返回值描述
    */
    function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
       p1,
       p2: p2,
       p3: p3
    };
    }

• 文件注释

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如下:

/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @author user@yonyou.com (Firstname Lastname)
 */

对象简写

const name = '采购云';
// bad
const obj = {
  name: name
};
// good
const obj = {
  name
};

对象解构

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

每一行的结尾添加分号,当 JavaScript 遇到没有分号结尾的一行，它会执行自动插入分号

// bad
(function () {
  const name = 'luka'
  return name
})()
// good
(function () {
  const name = 'luka';
  return name;
}());
// good, 行首加分号，避免文件被连接到一起时立即执行函数被当做变量来执行。
;(() => {
  const name = 'luka';
  return name;
}());

推荐使用箭头函数，特殊情况可以使用正常函数

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

Whitespace

tabSize为2

// bad
function foo() {
∙∙∙∙const name;
}
// bad
function bar() {
∙const name;
}
// good
function baz() {
∙∙const name;
}

在大括号前空一格

// bad
function test(){
  console.log('test');
}
// good
function test() {
  console.log('test');
}
// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});
// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

在控制语句(if, while 等)的圆括号前空一格

// bad
if(isShow) {
  fight ();
}
// good
if (isShow) {
  fight();
}

在函数调用和定义时，参数列表和函数名之间不空格

// bad
function fight () {
  console.log ('Swooosh!');
}
// good
function fight() {
  console.log('Swooosh!');
}

用空格来隔开运算符

// bad
const x=y+5;
// good
const x = y + 5;

每一行的结尾添加分号

// bad
(function () {
  const name = 'yonyoucloud'
  return name
})()
// good
(function () {
  const name = 'yonyoucloud';
  return name;
}());
// good, 行首加分号，避免文件被连接到一起时立即执行函数被当做变量来执行。
;(() => {
  const name = 'yonyoucloud';
  return name;
}());