乐趣区

关于前端:前端开发规范之代码规范

jiezi

常见的命名规定
1. 大驼峰命名法, 首字母都大写

FirstOne

2. 小驼峰命名法, 第一个单词首字母小写，其余跟大驼峰一样

firstOne

3. 蛇形命名法，单词之间用下划线拼接

first_one

4. 减号命名法, 单词之间用减号宰割

first-one

这些命名法最大的益处就是能够轻易辨别单词跟单词

代码标准中的那些潜规则
html 代码中的潜规则
1.html 是不辨别大小写的
浏览器解析标签是不辨别大小写的。

<DIV></DIV>
// 编译进去是这样的
<div></div>

尽管外面的 class，id 或者其余的自定义属性反对大写。然而基本上没有用大写的，因而倡议 html 中的代码对立采纳蛇行命名法和减号姓名法（如同是因为晚期的 xhtml 不反对大写）

2. 语义化标签
说切实的语义很好把握，前端培训然而理解这些语义标签的默认属性并且重置是很不容易的。

语义化标签就那么多，把握了就是把握了。实打实的益处，倡议大家还是要把握一下的。

JS 代码中的潜规则
JS 是辨别大小写的所以常见的命名法都是大小驼峰命名法。然而花色要多得多：

1. 构造函数采纳大驼峰命名法(或者 es6 的 class 类)
// 构造函数简略说就是须要 new 进去的
function FistOne() {}
new FirstOne()
// class 就是合乎上面这种语法糖的
class FirstOne () {}

2. 常量采纳全大写的蛇形命名法
常量就是不能更改的变量，为了醒目所以都遵循着全大写的蛇形命名法令

const FIRST_ONE = 3

3. 其余变量采纳小驼峰命名法
4. 类型名字简写
JS 是一门弱类型语言，写起来特地不便。然而上面这种状况我想你必定遇到过

// 状况 1, 名为 true 的字符串
let a = true
let b = ‘true’
// 状况 2, 全副是数字的字符串
let c = ‘123’
let d = 123

c 和 d 这种还好说，因为 js 存在隐式转换。你去比拟还是相等的，然而 a 和 b 是不相等的。我在跟后端联调的时候就碰到过这种状况，他跟我说返回的是 boolean 类型的值后果返回了个字符串。我就间接把他作为判断条件了

let a = ‘false’ // 假如这是后端给我返回的 boolean 值
if (a) {

// XXXXX 一些列操作

}

后果可想而知，值明明是 false 确始终执行。过后我都快狐疑人生了，所以看到这篇文章你是侥幸的。这里有一个细节：谷歌控制台在打印值的时候是有色彩变动的，字符串是纯彩色，其余类型的值是深蓝色

这部分说了这么多足以可见类型的重要性，那么有哪些好的命名形式呢?

 当然了这部分仁者见仁智者见智，如果你有更好的命名形式欢送评论交换

5. 函数专有的那些动词

 6. 正当的正文
只有你写正文了，前面保护代码的人第一眼必定是先看正文。要是你说你第一反馈是看源码好吧，我也拿你没辙。。。

场景一：函数正文

/**

  • @param date {Date | timestamp} 须要格式化的工夫
  • @param format {string} 反对的关键字 yyyy MM dd hh mm ss
  • @return {string}
  • @author MrXu
  • @date 2019 年 10 月 13 日
  • @example
  • 1570929141012 -> 2019 年 10 月 15
  • dateFormat(1570929141012, ‘yyyy 年 MM 月 dd’)
    */

function dateFormat (date, format) {

// XXXXXXX

}

下面这种写一串也是蛮累的，所以弄个代码片段疾速生成就很有必要了

CSS 代码中的潜规则
1. 不能呈现大写
后面曾经说过了 html 标签是不能辨别大小写的，尽管属性值反对大写。然而并不倡议用大写。

减号命名形式有一个问题就是无奈双击选中，不过我凑巧从他人的文章评论中找到了一个办法可能设置双击选中减号命名形式的问题：

// vscode 或者 sublime 设置加上这个正则匹配就能够选中
wordSeparators”: “./\()\”‘:,.;<>~!@#$%^&*|+=[]{}`~?”,

2. 款式也是可能分类的

 倡议先写显示属性 -> 本身属性(盒模型属性) -> 文本属性和其余润饰

  1. BEM 布局
    block：模块，名字单词间用 – 连贯
    element：元素，模块的子元素，以 __ 与 block 连贯
    modifier：润饰，模块的变体，定义非凡模块，以 — 与 block 连贯
    // 举个例子
    .person {}
    .person__header {}
    .person__main {}
    .person__footer {}
    .person–cap {}
    .person–clothing {}
    .person–shoe {}

// 当初 css 预编译器也很火，所以贴个 css 预编译器的。编译进去成果跟下面一样
.person {

&__header {}
&__main {}
&__footer {}
&--cap {}
&--clothing {}
&--shoe {}

}

总结
html，js，css 常见的应该都曾经笼罩到了。有一些很粗疏的就不展开讨论了，比方 js 中的暗藏变量，css 尽量应用简写属性等等。

退出移动版