AitSchool

代码规范

代码规范通常是一个公司或者一个开源项目中，为了让各个协作者的代码统一，看起来是一个人写的一样。方便日后维护和管理定制的，在不同的项目或者不同的公司，规范会有所不一样。在此我们主要依据谷歌的代码规范指南来完成。

全局

在 HTML、CSS、JS 中规范要求。

文件夹/文件名 都使用英文小写

区分不同模块使用下划线

// bad
测试文件1/taskOne.html

// good
test/task_one.html

两空格缩进

注意是两空格，不是四空格，也不是 tab 键。

// bad
<div>
    <p>test</p>
</p>

// good
<div>
  <p>test</p>
</p>

HTML

使用H5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5</title>
</head>
<body>
  
</body>
</html>

使用 utf-8

<meta charset="utf-8">

属性名和属性值都小写

包括 class、id 的值

// bad
<div class="demoSection" data-value="DEMO">测试案例</div>

// good
<div class="demo-section" data-value="demo">测试案例</div>

CSS

class命名

  • 不能使用 ABCD、1234 来为模块命名，除非是同类型需要使用脚本来区分的模块
  • 使用该模块的英文语意来命名

命名模版：

  • header.page-header
    • nav.nav
      • a.nav-item
      • a.nav-item
    • div.user-info
      • img.user-avatar
      • span.user-nickname
  • div.page-body
    • div.xxx-section
      • div.container
        • h2.xxx-title
        • p.xxx-description
        • div.xxx-content
          • ul.xxx-list
          • li.xxx-item
            • div.xxx-item-img
              • img.xxx-img
            • p.xxx-item-name
            • p.xxx-item-text
            • p.xxx-item-tag
    • div.xxx-section
      • div.xxx-section-align_left
      • div.xxx-section-align_right
    • div.xxx-section
      • xxx-list
        • xxx-item
          • xxx-item-vertical_top
          • xxx-item-vertical_bottom
  • div.page-footer
    • p.content
  • div.page-mask
    • div.mask-container
      • span.mask-close
      • div.mask-content
      • ...

JS

使用 let 和 const 替代 var

// bad
var tmp = false;

// good
let tmp = false;

const 常量的属性名使用全大写

const TESTNUMBER = 1;

变量使用英文语意的驼峰命名

// bad
let do_something = 'do';

// good
let doSomething = 'done';

使用分号结尾

// bad
let instance = '123'

// good
let instance = '123';

使用箭头函数

[1,2,3].forEach( (data,index) => console.log(data,index));

页面逻辑使用单例子模式

  • 临时存储的数据放在其 data 属性中
  • 初始化调用 init 方法
  • 元素的绑定统一放置在 bind 方法中
const PAGEINSTANCE = {
  data: {
    tmp: false,
  },
  init: function(){
    this.bind();
  },
  bind: function(){
    $('.element').on('click',this.doSomething);
  },
  doSomething: function(){
    console.log('ook')
  }
}

PAGEINSTANCE.init();

←