制定自己团队的前端开发规范

最新推荐文章于 2023-07-19 11:06:49 发布

石燕平_Leo

最新推荐文章于 2023-07-19 11:06:49 发布

阅读量863

点赞数

分类专栏：技术文章标签：前端开发规范 javascript 开发规范

本文链接：https://blog.csdn.net/qq_36376434/article/details/96478182

版权

篇幅可能会比较长，但是我感觉有一套规范对于一个团队其实还是很重要的，这样在维护起来也会很方便，代码规范参考自：腾讯alloyteam团队，希望大家可以跟着看一遍，各取所需。

eslint 也补充完了，大家可以去瞧一眼，传送门。如果可以的话，希望可以用到您的团队或者自己的项目中，实践过程中如果有用的不舒服的，希望可以给我反馈，这样才能知道这套规则适不适合大部分人去用。

通过留言区的反馈，将 html 规范进行了一些修改，有个哥们给反馈说可以做一个 eslint-config，这个是个好想法，先用一段时间，看程度差不多之后，会把自己的 eslint 的规范放到 npm 上，弄个自己的 eslint-config，具体想看的关注一下我，我后续上传之后写了教程第一时间发公众号或者掘金。

命名规范

项目命名

全部采用小写方式，以下划线分隔。
例：my_project_name

目录命名

参照项目命名规则；

有复数结构时，要采用复数命名法。

例：scripts，styles，images，data_models

vue的项目中，components下的组件目录名，使用大驼峰命令

例：LeftBar

JS文件命名

参照项目命名规则。

例：account_model.js

CSS, SCSS文件命名

参照项目命名规则。

例：retina_sprites.css

HTML文件命名

参照项目命名规则。

例：error_log.html

HTML规范

语法：

缩进使用tab（2个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线（-）做分隔符；
要在自动闭合标签结尾处使用斜线，为了适应 react（通过留言区反馈进行修改）；

<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
    </head>
    <body>
        <img src="images/company_logo.png" alt="Company" />
        
        <!-- 属性名全小写，用中划线（-）做分隔符 -->
        <h1 class="hello-world">Hello, world!</h1>
    </body>
</html>

标准模式

在开头规定doctype，来启动标准模式，doctype要大写。

<!DOCTYPE html>
<html>
	...
</html>

规定字符编码

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为’UTF-8’。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    ...
</html>

IE兼容模式

用meta标签指定页面应该使用什么版本的IE来渲染。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    </head>
    ...
</html>

减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；

<!-- bad -->
<span class="avatar">
    <img src="...">
</span>

<!-- good -->
<img class="avatar" src="...">

语义化标签

html的标签能使用语义化的，尽量使用语义化标签，避免一个页面都是div或者p标签

<!-- bad -->
<div>
    <p></p>
</div

最低0.47元/天解锁文章

石燕平_Leo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
制定自己团队的前端开发规范

篇幅可能会比较长，但是我感觉有一套规范对于一个团队其实还是很重要的，这样在维护起来也会很方便，代码规范参考自：腾讯alloyteam团队，希望大家可以跟着看一遍，各取所需。eslint 也补充完了，大家可以去瞧一眼，传送门。如果可以的话，希望可以用到您的团队或者自己的项目中，实践过程中如果有用的不舒服的，希望可以给我反馈，这样才能知道这套规则适不适合大部分人去用。通过留言区的反馈，将 html...
复制链接

扫一扫