代码写的不知所云，就很难受了

命名

• 常量名用全大写，下划线划分词义
• 变量名用全小写，下划线划分词义，或者驼峰式
• 函数名用驼峰式，
• 类名驼峰式，首字母大写

// good
const USER_NAME = '陈平安';
let   user_name = '陈平安';
let   userName = '陈平安';
let   getUserName = () => {};
class UerName {};

注意，不要滥用变量，即数据只使用一次或不使用就无需装到变量中。

命名的含义

• 不要使用无含义的命名

// bad
if (val > 8) {} // 这里的8代表什么？？ 无含义
// good
const USER_AGE = 8;
if (val > USER_AGE) {} // 含义明确

• 使用说明性的命名

  • 对于返回或者值为 true or false 的函数、变量，最好以 should/is/can/has 开头
  • 动作函数要以动词开头，常用词组 get/set/add/remove/crate/destory了解更多
  • 功能函数最好为纯函数

is_man = true;
hasGrilFriend() {};
getUserName() {};
add = (a, b) => a+b;

函数传参

• 传参无说明

// bad
initUser('陈平安', true, false); // ?? 参数什么意思
// good
initUser({
    user_name: '陈平安',
    is_man: true,
    use_sword: fasle,
});

if else 过多

// bad
if (a === 1) {}
else if (a ===2) {}
else {}

// good
switch(a) {
   case 1:
   case 2:
  default:
}
// 或者
let handler = {
    1: () => {},
    2: () => {}.
    default: () => {}
}
handler[a]() || handler['default']()

使用解构赋值

var data = { name: '陈平安', age: 18 };
// bad
function getUser(data) {
    var name = data.name;
    var age = data.age;
    console.log(`name is ${name}, age is ${age}`)
}

// good
let getUser = ({name, age}) => {
    console.log(`name is ${name}, age is ${age}`)
}
getUser(data)
// 数组的解构也是相同的

CSS 的 BEM 命名

• B：块（Block）
• E：元素（Element）
• M：修饰符（Modifier）

.header{} /* 块 */
.header_nav{} /* 元素 */
.header-nav--active{} /* 修饰符 */
//之所以使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定
.header_nav_item--active{} // ?? 是这个意思吗

CSS 面向对象的命名 OOCSS

• 把一些公用样式给抽象出来，类似 java 里的最基础的类，一个元素继承多个类名来达成最终的样式
• 通过对基础对象扩展类名，从而达到基础对象的可重用性

// 比如 页面很多地方都有的样式是 有一个盒阴影 有外边距
.shadow{}
.margin{}

<header class="header shadow"></header>
<footer class="footer shadow margin"></footer>

CSS 基于属性的命名 Atomic CSS

• 把基于 css 属性的样式给抽象出来

// 比如 页面很多地方都有的样式是 白色背景 圆角
.bg-white{
    background: '#fff';
}
.b-r{
    border-radius: 5px;
}

<header class="header bg-white b-r"></header>
<footer class="footer bg-white b-r"></footer>

CSS 的属性书写顺序

• 个人的顺序如下，大致就是由外而内了解更多

.class-name{
    content // 伪元素，方便第一时间鉴定
    position
    top/right/bottom/left
    z-index
    display
    float // 定位属性
    width/height/max-width/max-height/min-width/min-height
    margin/padding
    border相关
    background相关
    box-shadow
    overflow/clear // 盒样式-自身属性
    font-family/font-size/font-style/font-weight/font-varient/color  // 文字样式
    text-align/vertical-align/text-wrap/text-transform/text-indent/text-decoration/letter-spacing/word-spacing/white-space/text-overflow // 文本属性
    transform/transiton/animation // css3属性
}

HTML

• 注意语义化
• 注意标签闭合
• 注意键盘访问性

感谢阅读 thx~
本文链接：https://627235655.github.io/2018/11/15/front-end-code-standards/