关于代码规范那点事

最新推荐文章于 2023-02-21 15:14:49 发布

孙小笔

最新推荐文章于 2023-02-21 15:14:49 发布

阅读量388

点赞数

分类专栏：笔记原创文章标签： json npm 前端

本文链接：https://blog.csdn.net/qq_15238979/article/details/119408052

版权

内容抄写自两个地方的技术胖+京东实验室

第一个秘籍：京东凹凸实验室前端代码规范.网址是：https://guide.aotu.io/ ,如果你们公司没有具体的前端代码规范，你完全可以自己按照这套规范来编写。里边包括了HTML规范、图片规范、CSS规范、命名规范和JS规范。

优点是清晰、简单、不复杂。近一年来，我工作中的代码都是安装这个标准来写的。

第二个秘籍：腾讯前端代码规范 网址是：http://tgideas.qq.com/doc/index.html我经常看腾讯的前端博客，也阅读他们的开源项目。我认为腾讯的前端代码规范是优秀的。所以第二个推荐腾讯的代码规范文档库TGideas.

这是腾讯前端程序员的必读规范手册，优点是有PC端专题、移动端专题、双端专题。这套文档，适合公司还没有代码规范，但正在建立代码规范的使用，你直接可以抄作业，让公司有一套不错的前端代码规范。

第三个秘籍：百度前端代码规范文档 Github网址：https://github.com/ecomfe/spec。百度一直是一个相信代码能改变世界的公司，也是在中国大厂里边第一个把代码规范做成标准化的公司。所以他们的代码规范一直被模仿，值得学习。

当然，随着中国代码力量的崛起，几乎所有的大厂都有自己的代码规范，比如网易、阿里、华为、字节。如果感兴趣，在网上找到这些规范应该不难。

第四个秘籍：JavaScript Standard Style *_，Github上，网址是：https://github.com/standard/standard . 除了很多公司组织外，很多个人也在项目中使用规范。JavaScript Standard Style就是个人代码规范。很多著名项目都在使用这套规范，例如Node.js、express、MongoDB和Github。规范托管在需要说的是，他贴心的准备了中文版，所以非常方便我们阅读。

第五个秘籍：Vue官方特有的代码风格指南。**网址是：https://cn.vuejs.org/v2/style-guide/index.html在中国的前端程序员必会的一个框架就是Vue。所以如果你不想别人嘲笑你写的Vue代码，阅读并遵守规范，是个非常明智的选择。我的经验来看，这些代码规范和传统的代码规范稍有差别，根据喜好和公司环境自行取舍就好。

第六个秘籍：这个虽然是个人，但我觉的可以代码阿里的前端代码规范。**网址是：http://es6.ruanyifeng.com/#docs/style他就是阮一峰的ES6编程风格。他虽然只能算一篇文章，但干货满满。仔细研读下来，一定会让你的代码有所提升。这个我是一丝不苟的看了2遍，建议你没事也看看。

第七个秘籍：《代码整洁整洁之道》**，也就是我们常说的clean code ，码神罗伯特·马丁的作品，我们尊称为Bob大叔。豆瓣评分8.9分，书中代码基于的是Java语言，但作为前端你也会收获很多。这本书被誉为”程序员童子军规则“，也算是必读书。

第八个秘籍：ESLint ，这不是一个文档，这是一个代码规范工具。**ESLint中文网址：https://eslint.bootcss.com/这里给出，可以自学一下。他是一个强检测的代码规范工具，也就是说如果你不按照设定的规范写，直接会报错，让你不能Push代码。规范规则支持自定义。

第九个秘籍：Prettier，这也是一个工具。**网址；https://prettier.io/它不像ESLint是个强类型的代码规范工具，它显得温柔很多。但同样可以保持代码风格一致。这个是我VScode必装的插件，它少了一些强制的束缚，但依然让你代码整齐划一。这是我喜欢的工具,没有了强迫，就显得温柔很多。
https://jspang.com/detailed?id=76

HTMl规范

1. Unicode为什么出现，因为ISO-8859中字符集大小是有限的

Unicode标准覆盖了几乎是所有的字符、标点符号和符号
unicode使文本的处理、存储和运输、独立于平台和语言
HTML-5中默认字符编码为UTF-8

2. UTF-8

GBK和 UTF-8区别 GBK包含全部中文字符用于中文编码 UTF-8包含全世界所需字符，长度1-6个字节GBK 2个字节所以UTF-8占用的数据库存储空间更多

一般情况下统一使用 “UTF-8” 编码

<meta charset="UTF-8">

由于历史原因，有些业务可能会使用 “GBK” 编码

<meta charset="GBK">

请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。

3. 元素标签和闭合

为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：

所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
空元素标签都不加 “/” 字符
推荐：

<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
	
<br>

不推荐

<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始无终，浏览器亦能正确解析
</div>

<br/>

4. HTML大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐

<div class="demo"></div>

不推荐

<div class="DEMO"></div>
	
<DIV CLASS="DEMO"></DIV>

HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合

<!-- 优先使用 IE 最新版本和 Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- HTML文本内容 -->
<h1>I AM WHAT I AM </h1>

<!-- JavaScript 内容 -->
<script type="text/javascript">
	var demoName = 'demoName';
	...
</script>
	
<!-- CDATA 内容 -->
<script type="text/javascript"><![CDATA[
...
]]></script>

类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
推荐：

<link rel="stylesheet" href="" >
<script src=""></script>

不推荐

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

元素属性

元素属性值使用双引号语法
元素属性值可以写上的都写上