专栏名称: 圣墨
前端工程师
目录
相关文章推荐
医院运营咨询新知  ·  医院运营分析与案例读书会丨明晚直播 ·  昨天  
吉林果粉天天报  ·  公告!公示!涉及吉林市2家医院 ·  昨天  
吉林果粉天天报  ·  公告!公示!涉及吉林市2家医院 ·  昨天  
51好读  ›  专栏  ›  圣墨

是你需要的前端编码风格吗?

圣墨  · 掘金  ·  · 2019-12-14 09:08

正文

阅读 304

是你需要的前端编码风格吗?

程序是写给人读的,只是偶尔让计算机执行一下 -- Donald Knuth

以下代码风格仅供参考,没有明确规定那种书写方式好,那种书写方式一定就不好,代码风格的统一,目的就是提高代码的可读性。

一、HTML

1、基本原则

  • html (结构)、 css (样式)、 js (样式)分离
  • 标签具有语义化
  • 2个空格字符为一个缩进层级,设置敲入 Tab 键时插入2个空格
  • 标签名使用一律小写字母, vue 组件名必须使用小写
  • 标签需闭合,自闭合( self-closing )标签,无需闭合 ( 例如: img input br hr 等 );
  • 不要使用 id 选择器, class 命名多个单词采用中划线 - 连接
  • 属性按照特定的顺序出现保证易读性, id class name src for type href title alt
  • 禁止行内元素嵌套块级元素
  • <!--放注释内容--> 独占一行

2、class 命名规则

  • 不能出现中文
  • 以字母开头,不能使用其他格式开头
  • 以名见义 命名需要有规范,有含义、可以快速的理解这个标签的具体意义

很早以前收藏的表格,具体出处自己记不清了,如有侵权,可与本人联系,谢谢

命名 说明
.wrapper 页面外围控制整体布局宽度
.container或.content 容器,用于最外层
.layout 布局
.head, .header 页头部分
.foot, .footer 页脚部分
.nav 主导航
.subnav 二级导航
.menu 菜单
.submenu 子菜单
.sideBar 侧栏
.sidebar_a, .sidebar_b 左边栏或右边栏
.main 页面主体
.tag 标签
.msg .message 提示信息
.tips 小技巧
.vote 投票
.friendlink 友情连接
.title 标题
.summary 摘要
.loginbar 登录条
.searchInput 搜索输入框
.hot 热门热点
.search 搜索
.searchBar 搜索条
.search_results 搜索结果
.copyright 版权信息
.branding 商标
.logo 网站LOGO标志
.siteinfo 网站信息
.siteinfoLegal 法律声明
.siteinfoCredits 信誉
.joinus 加入我们
.partner 合作伙伴
.service 服务
.regsiter 注册
arr/arrow 箭头
.guild 指南
.sitemap 网站地图
.list 列表
.homepage 首页
.subpage 二级页面子页面
.tool, .toolbar 工具条
.drop 下拉
.dorpmenu 下拉菜单
.status 状态
.scroll 滚动
.tab 标签页
.left .right .center 居左、中、右
.news 新闻
.download 下载
.banner 广告条(顶部广告条)

二、CSS

1、基本规则

  • 使用 2 个空格作为缩进
  • 不要使用 id 选择器, class 命名多个单词采用中划线 - 连接
  • 在左大括号 { 前加上一个空格, 右大括号 } 独占一行
  • 在属性的冒号 : 后面加上一个空格,前面不加空格

2、注释

  • 建议使用行注释 (在 Sass 中是 // ) 代替块注释。
  • 建议注释独占一行。避免行末注释。

3、边框

在定义无边框样式时,使用 0 代替 none

// bad
.nav {
  border: none;  
}

// good
.nav {
  border: 0;  
}
复制代码

4、Sass

  • 使用 .scss 的语法,不使用 .sass 原本的语法。
  • 变量名使用驼峰命名 $borderLine

三、JavaScript

1、基本格式化

1.1 缩进层级

2个空格字符为一个缩进层级,设置敲入 Tab 键时插入2个空格

1.2 语句结尾

语句结尾使用分号

1.3 行的长度

单行代码长度不超过80个字符

vscode配置如下:

{
  "editor.wordWrap": "wordWrapColumn",
  "editor.wordWrapColumn": 80
}
复制代码

1.4 换行

当一行长度达到了单行最大字符数限制时,就需要手动将一行拆成两行。通常我们会在运算符后换行,下一行会增加两个层级的缩进。

1.5 命名

命名长度应尽可能短,并抓住重点,尽量在变量名中体现出值的数据类型。比如,命名 count length size 表明数据类型是数字,而命名 name title message 表明数据类型是字符串。但用单个字符命名的变量诸如i、j、和k通常在循环中使用。使用这些能够体现出数据类型的命名,可以让你的代码容易被别人和自己读懂。

不要使用下划线 _ 结尾或开头来命名属性和方法。

1.5.1 变量和函数

变量:遵守驼峰大小写命名法,并且命名前缀应当是名词。

let count = 0;
let myName = 'sheng';
let visible = true;
复制代码

函数:遵守驼峰大小写命名法,并且命名前缀应当是动词。

function getName() {};

function setName() {};
复制代码

使用动词常见约定

动词 含义
can 函数返回一个布尔值
has 函数返回一个布尔值
is 函数返回一个布尔值
get 函数返回一个非布尔值
set 函数用来保存一个值

1.5.2 常量

常量: 必须使用 const 定义常量

const count = 10;
const url = 'http://baidu.com';
复制代码

1.5.3 函数

  • 在控制语句( if while 等)的小括号前放一个空格。在函数调用及声明中,不在函数的参数列表前加空格。
// bad
function getName () {
    return userName;
}

// good
function getName() {
    return userName;
}
复制代码
  • 别保存 this 的引用。使用箭头函数或 Function#bind。
// bad
function getName() {
    const self = this;
    return function() {
        console.log(self);
    }
}
// bad
function getName() {
    const that = this;
    return function() {
        console.log(that);
    };
}
// good
function getName() {
    return () => {
        console.log(this);
    };
}
复制代码

1.5.3 构造函数

JavaScript 中,构造函数只不过是前面冠以new运算符的函数,用来创建对象

构造函数:遵照大驼峰命名法(Pascal Case)

function Person(name) {
    this.name = name
}
复制代码

2、注释

2.1 单行注释

  • 缩进层级与下一行代码保持一致
  • 双斜杠后敲入一个空格, 保持注释文本有一定的偏移
  • 在代码行的尾部注释,代码结束到注释之间有一个缩进,超过单行最大字符限制,应移动当前代码行的上方。
// bad
//这是一个Person构造函数
function Person(name) {
    this.name = name
}

// good
// 这是一个Person构造函数
function Person(name) {
    this.name = name
}

// bad
const MAX_COUNT = 10; //这是一个常量

// good
const MAX_COUNT = 10; // 这是一个常量
复制代码

2.2 多行注释

// bad 注释之前无空格
if (condition) {
    /**
     * 如果代码执行到这里
     * 说明判断条件成立,可以执行下面程序
     */
    console.log('Hello world!');
}

// bad 星号后无空格
if (condition) {

    /**
     *如果代码执行到这里
     *说明判断条件成立,可以执行下面程序
     */
    console.log('Hello world!');
}

// bad 错误的缩进
if (condition) {

    /**
     * 如果代码执行到这里
     * 说明判断条件成立,可以执行下面程序
     */
    console.log('Hello world!');
}

// good
if (condition) {

    /**
     * 如果代码执行到这里
     * 说明判断条件成立,可以执行下面程序
     */
    console.log('Hello world!');
}
复制代码

3、语句和表达式

3.1 所有的块语句都应当使用花括号,包括

  • if
  • for
  • while
  • do...while...
  • try...catch...finally
// bad
if (condition) console.log('Hello world!');

// good
if (condition) {
    console.log('Hello world!');
}
复制代码

3.2 语句和表达式 前后加空格

// bad 前后无空格
if(condition){
    doSomething();
}else{
    doElseSomething();
}

// good
if (condition) {
    doSomething();
} else {
    doElseSomething();
}
复制代码

3.2 switch 语句

// bad
switch (condition) {
case 0:
    console.log(0);
    break;
case 1:
    console.log(1);
    break;
default:
    console.log('default');
}

// good
switch (condition) {
    case 0:
        console.log(0);
        break;
    case 1:
        console.log(1);
        break;
    default:
        console.log('default');
}
复制代码

3.3 with 语句

禁止使用with语句

3.4 for 循环

尽可能避免使用 continue

// bad
for (let i = 0; i < array.length; i++) {
    if (i === 2) {
        continue; // 跳过本次迭代
    };
    doSomething();
}

// good
for (let i = 0; i < array.length; i++) {
    if (i !== 2) {
        doSomething();
    };
}
复制代码

3.5 for-in 循环

  • 必须使用 hasOwnProperty() 方法来为 for-in 循环过滤出实例属性,除非想查找原型链
  • 禁止使用 for-in 遍历数组
// bad
for (let k in obj) {
    console.log(obj[k]);
}

// good
for (let k in obj) {
    if (obj.hasOwnProperty(k)) {
        console.log(obj[k]);
    }
}
复制代码

4、汇总

4.1 对象

  • 使用字面量创建对象
// bad
const obj = new Object();

// good
const obj = {};
复制代码
  • 创建有动态属性名对象时,使用可被计算的属性名称
function






请到「今天看啥」查看全文