前端开发规范文档

最新推荐文章于 2022-10-20 10:59:14 发布

lejjiu9

最新推荐文章于 2022-10-20 10:59:14 发布

阅读量197

点赞数

分类专栏：前端开发文档文章标签：前端开发文档

本文链接：https://blog.csdn.net/lejjiu9/article/details/89362438

版权

前端开发文档专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端开发规范文档

总体原则

缩进
对于所有编程语言，我们要求缩进必须是软tab（用空格字符）。在你的文本编辑器里敲 Tab 应该等于 4个空格。

可读性 vs 压缩
对于维护现有文件，我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS，也不必把Javascript代码最小化得面目全非。我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件，例如CSS和JS

HTML,CSS,JS代码分离
html代码尽量保持整洁，采用最简单的代码层级完成复杂的布局要求，方便以后的维护和扩展css代码本身都是全局的，所有应当采用css模块化思想，约束css的规则，尽量减少对全局的污染JS代码分为功能代码和业务代码，功能代码尽量抽取成功能组件，方便团队内其他同事的使用.

命名规范
文件及文件夹: 全部英文小写字母+数字或连接符"- , _ "，不可出现其他字符如：jquery.1.x.x.js
文件：调用 /libs 文件需包含版本号，压缩文件需包含min关键词，其他插件则可不包含如：/libs/modernizr-1.7.min.js
ID: 小駝峰式命名法如：firstName topBoxList footerCopyright
Class: [减号连接符] 如：top-item main-box box-list-item-1
尽量使用语义明确的单词命名，避免 left bottom 等方位性的单独的词语命名样式

html规范

1.基本语法

在属性上，使用双引号，不要使用单引号。
不要在自动闭合标签结尾处使用斜线 - HTML5 规范指出他们是可选的。
不要忽略可选的关闭标签（例如，和）。
尽量用class来渲染样式，避免用id来写样式.

2.Doctype

在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。

3.字符编码

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后，需要避免在 HTML 中出现字符实体，直接提供字符与文档一致的编码（通常是 UTF-8）。

4.兼容模式

优先使用最新版本的IE 和 Chrome 内核

5.viewport 设置

viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
minimum-scale: 最小缩放比例；
maximum-scale: 最大缩放比例；
user-scalable: 时候可以允许用户对页面进行缩放
minimal-ui，不支持（去除导航栏）为移动端设备优化，设置可见区域的宽度和初始缩放比例。

6.favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：
在 Web Server 根目录放置 favicon.ico 文件；
使用 link 指定 favicon；

7.移动端页头推荐配置

title

8.实用高于完美

尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。参考下面的示例:

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

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

9.css代码标签上属性的顺序

标签上属性的顺序建议如下：
class ( class 是为高可复用组件设计的,所以应处在第一位)
id name (id 更加具体且应该尽量少使用,所以将它放在第二位)
data-*
src for type href
placeholder title alt
aria-* role
required readonly disabled

10.id，class命名规则

id/class 命名规则: BEM OOCSS SMACSS(扩展)

11.注释规范(最好用英文)

注释规范(最好用英文)
`

CSS 规范

外部文件LINK加载CSS，尽可能减少文件数。加载标签必须放在文件的 HEAD 部分。
避免使用内联样式不要在文件中用内联式引入的样式，不管它是定义在样式标签里还是直接定义在元素上。这样会很难追踪样式规则
使用 reset.css 让渲染效果在不同浏览器中更一致。
避免使用CSS表达式（Expression）
不要用@import
避免使用ID选择器
避免使用开销大的CSS选择器如:(星号)
禁止给class加上html标签如：li.list
避免让选择符看起来像正则表达式如：[name=‘aa’] 高级选择器执行耗时长且不易读懂，避免使用。
避免直接使用html tag作为样式选择器
避免使用 !important
有节制的使用css3伪元素
避免使用css3 低效属性，如：linear-gradient，borde-image；
使用语义化、通用的命名方式；
使用连字符 - 作为 Class 名称界定符，不要驼峰命名法和下划线；
避免选择器嵌套层级过多，尽量少于 3 级；

1.用css模块化

css代码本身都是全局的，所有应当采用css模块化思想，约束css的规则，尽量减少对全局的污染

2.属性简写

坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:
padding
margin
font
background
border
border-radius

大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。

3.OOCSS规范

概念
Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。
OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。
总结：
将重用的东西当做一个对象来看，然后将不同的属性放到另一个类名去
举例：
```
 .list{
     background: #fff;
 }
 .list--width{
     width: 300px;
 }
```

自己的理解：也就是把重复度高的css代码，写在一个类中，当要使用这个css时，就引用这个类，也就达到了效果

4.css代码书写顺序

属性顺序
位置属性 ( position top right z-index display float etc.)
大小 ( width height padding margin etc.)
文字系列 ( font line-height letter-spacing color text-align ect.)
背景 ( background border etc.)
其他 ( animation transition etc.)
以及注释的写法
举例：
`
.go–top{
position: fixed;
right:20px;
bottom: 50px;
z-index: 1000;
display:block;
width: 50px;
height: 200px;
font-size: 16px;
background: #ccc;
opactiy: 0.5;
transition: all 0.5s;

}
`

5.尽量少写class名

尽量不使用选择器（css3选择器）
.content.first-child
举例：

<div class="content">
    <ul>
        <li>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        </li>
    </ul>
    
    <ul>
        <li>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        </li>
    </ul>
</div>

6.去掉小数前面的点 0

去掉小数点前面的 0

body{
    margin: 10px .8px;
    background: url('./img.png') center;
    
}

Javascrip规范

1.命名规范

使用单引号’而不是双引号"
常量必须使用大写，在对象（类）或者枚举变量的前部声明，骆驼命名规则
类的私有变量和属性建议以 _开头。例如：var _buffer; _init:function(){}

camel 表示驼峰名明发 pascal表示首字母大写
变量名: 必须使用 camel 命名法
参数名: 必须使用 camel 命名法
函数名: 必须使用 camel 命名法
方法/属性: 必须使用 camel 命名法
私有 ( 保护 ) 成员: 必须以下划线开头
常量名: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
类名: 必须使用 pascal 命名法
枚举名: 必须使用 pascal 命名法
枚举的属性: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
命名空间: 必须使用 camel 命名法
语义: 命名同时还需要关注语义

2.优先使用箭头函数

3. 使用模板字符串取代连接字符串

4.使用分号

如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会出 BUG

5.块内函数声明（不要在{}内直接申明函数，可以用函数表达式）

不要在块内声明一个函数,e.g.

if (x) {
    function zxm() {}
}
如果确实需要,使用函数表达式来初始化变量
if (x) {
    let foo = function() {}
}

6.变量申明

var let const 应该放在function 已进入函数的时候
注释变量的功能及代表的含义,且应以字母顺序排序.每个变量单独占一行以便添加注释
举例：
var totalPrice = 1; //totalPrice表示商品购物车的总价 √
var num = 10,totalNum = 100 ; 不建议

7. 回调函数规范：

回调函数统一使用 Promise 函数,回调成功的参数统一为 res,错误参数为 err

let callback = new Promise((resolve, reject) => {
    if (/* 异步操作成功 */){
    resolve(value);
    } else {
    reject(err);
    }
});
callback.then((res) => {
    console.log('成功回调！', res);
}).catch((err) => {
    console.log('失败回调！', err);
});

8.函数默认值

函数默认值写在其他参数后面
function zxm(a,b,name = 'zxm'){ console.log(name) }

目录构建的规范

命名原则：

简洁
比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包
不使用复数
比如：不使用 imgs docs

src 源代码（逻辑）
doc 文档
dep 第三方依赖包
test 测试

根据业务逻辑进行文件夹的划分

src
    common 公共资源
        img
            logo.png
            sprites.png
        css
            reset.css
        js
            conf.js 项目的配置文件
    public/static 静态资源
        js
        css
        tpl
            index.html
            shopcar.html
        img
    component 组件
        home
        shopcar
        login
        register
        user
        list
        detail
    view/tpl 项目模板 tpl 是 template的缩写

纯手动打造
快速构建工具做 —》改造

前端命名规范

BEM && OOCSS 针对的都是 css 命名规范
jslint eslint js使用规范
BEM规范
1. 概念：
Block Element Modifier，它是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。
2. BEM是定义了一种css class的命名规范，每个名称及其组成部分都是存在一定的含义。
3. 由拉丁字母, 数字, -组成css的单个名称.
Block Element Modifier
Block：块
Element：元素
Modifier：修饰符

<div class="search">
    <div lass="search__body">
        <a class="search__body--baidu" href="www.baidu.com">baidu</a>
    </div>
</div>
这个上div就是块(block)，input就是元素(element)
在这input class名就是block的class名，加element就成了input的class名
对我理解：这就是个三级类名，一层一层的，一个嵌套一个，（不必拘离形式，就是先__再--）

独立且有意义的实体, e.g. header, container, menu, checkbox, etc. Block的一部分且没有独立的意义, e.g. header title, menu item, list item, etc. Blocks或Elements的一种标志，可以用它改变其表现形式、行为、状态. e.g. disabled, checked, fixed, etc.
Naming
由拉丁字母, 数字, -组成css的单个名称.
Block
使用简洁的前缀名字来命名一个独立且有意义的抽象块或组件。
e.g.
.block
.header
.site-search
Element
使用__连接符来连接Block 和 Element。
e.g.
.block__element
.header__title
.site-search__field
Modifier
使用–连接符来连接Block 或 Element 和 Modifier。
e.g.
.block–modifier
.block__element–modifier
.header–hide
.header__title–color-red
.site-search__field–disabled

实例
HTML

CSS .form { } .form--theme-xmas { } .form--simple { } .form__input { } .form__submit { } .form__submit--disabled { } Buttons实例 buttons

HTML

Normal button Success button Danger button

CSS
.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}

OOCSS规范

概念
Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。
OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。
总结：
将重用的东西当做一个对象来看，然后将不同的属性放到另一个类名去
举例：
.list{
background: #fff;
}
.list–width{
width: 300px;
}

lejjiu9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端开发规范文档

前端开发规范文档总体原则缩进对于所有编程语言，我们要求缩进必须是软tab（用空格字符）。在你的文本编辑器里敲 Tab 应该等于 4个空格。可读性 vs 压缩对于维护现有文件，我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS，也不必把Javascript代码最小化得面目全非。我们会在服务器端或build过程中自动最...
复制链接

扫一扫