Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

前端代码规范 #15

Open
Samgao0312 opened this issue Jun 2, 2019 · 0 comments
Open

前端代码规范 #15

Samgao0312 opened this issue Jun 2, 2019 · 0 comments
Labels

Comments

@Samgao0312
Copy link
Owner

Samgao0312 commented Jun 2, 2019

【前端】代码规范

写在前面:
以后不管有多少人共同参与同一个项目,又或者前端团队扩充到多大规模,我们都希望大家执行一套代码规范,让我们的代码看上去像是一个人写的,这也才能保证代码的易读性。

JavaScript

HTML

  • 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。
  • 嵌套元素应当缩进一次(即两个空格)。
  • 对于属性的定义,确保全部使用双引号,绝不要使用单引号。
  • 不要在自闭合(self-closing)元素的尾部添加斜线。
  • 不要省略可选的结束标签(closing tag)(例如,</li> </body>)。
  • HTML5 doctype:每个h5页面第一行都是用标准模式,这样可以做到在不同浏览器中显示一致。
  • 语义化标签:任何时候都要避免 div 标签的滥用。通过最少标签、语义化标签来解决 html 文件的复杂度,提升可读性;
  • 标签一律小写;
  • 字符编码
<head>
  <meta charset="UTF-8">
</head>

通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用 UTF-8 编码)。

  • 引入 CSS 和 JavaScript 文件
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值。

  • IE 兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。

  • 属性顺序

HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
<a class="..." id="..." data-toggle="modal" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。

  • 布尔(boolean)型属性: 可以在声明时不赋值。
    元素的布尔型属性如果有值,就是 true,如果没有值,就是 false。
<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>
  • 避免 非必须 情况下通过 Javascript 生成 html。
    因为它会让内容不那么容易查找,且会降低性能。

  • 注释
    我们建议html中也要写注释,很多时候这一点被忽略了。但是从html 可读方面考虑,建议通过 注释 + 空格 + 语义化的标签 来让你的 html 区块清晰,代码可读;

CSS

@Samgao0312 Samgao0312 added the blog label Mar 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant