H5命名规范

css命名规范

• 需要重用的css规则尽量面向属性命名，尽量不掺杂语义

.tr{text-align:right;}
.pb8{padding-bottom:8px;}

• 选择器尽量不包含层级(#test .test)、标签(ul.test)，这样会限制重用，例如#test .test{}这种写法，完全限死在了id为test的元素下，也会影响渲染速度
  CSS的渲染方式是“从右往左”渲染的，就拿#test ul{}举例，先渲染页面上所有的ul标签，再去寻找id为test的元素，所以，出现#test div{}这种写法的人都是傻×的，页面先渲染id为test的元素？非也！先渲染页面上所有的div，再去寻找其老爸有没有id为test的元素

• 所有的命名最好都小写加中划线

• 常见CSS样式命名
  外套 wrap、container------------------ 外围控制整体布局宽度
  头部 header ----------------用于头部
  主要内容 main ------------用于主体内容（中部）
  左侧 main-left -------------左侧布局
  右侧 main-right -----------右侧布局
  导航条 nav subnav -----------------网页菜单导航条
  菜单 menu submenu ----------------- 菜单 子菜单
  内容 content ---------------用于网页中部主体
  底部 footer -----------------用于底部
  layout ----------------- 布局
  tag ----------------- 标签

参考腾讯首页的命名:

JS命名

• 变量使用小驼峰命令，前缀为形容词(函数前缀为动词)

# 好的命名方式
let maxCount = 10;
let tableTitle = '啦啦啦';
# 不好的命名方式
let setConut = 10;
let getTitle = '啦啦啦';

• 常量使用大写字母和下划线来组合命名，下划线用来分割单词

const MAX_COUNT = 10;
const URL = '//www.huifenqi.com';

• 函数使用小驼峰式命名法，前缀为动词

// 是否可阅读
function canRead() {}
// 获取名称
function getName() {}

• 类使用大写驼峰命名(首字母大写)

class Persion {
  constructor(name) {
   ...
  }
}

let person = new Person('啦啦啦');

• 类成员命名
  公共属性和方法： 跟变量和函数命名一样
  私有属性和方法：前缀为下划线_, 后面跟公共属性和方法一样的命名方式

class Person {
  // 私有属性 
  _name: string;
  constructor() { }

  // 公共方法
  getName() {
    return this._name;
  }
  // 公共方法
  setName(name) {
    this._name = name;
  }
}

Vue命名规范

• import 应置于顶层, 引入组件名遵循大写驼峰式命名法

import ElInput form '***'
import Emitter from '***'

• 组件名和组件vue文件名保持一致，使用大驼峰命名,比如
  HelloWorld.vue
  import HelloWorld from '@/components/HelloWorld'