前端开发文档- 校招VIP

转载声明：文章来源：https://blog.csdn.net/weixin_44923277/article/details/89341208

1. 前端的开发规范

目录构建的规范
命名原则：
简洁
比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包
不使用复数
比如：不使用 imgs docs
根目录（root）结构按职能划分
比如：
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的缩写
总结：
以上目录开发规范有两种使用途径
纯手动打造
快速构建工具做 —》改造

2. 前端命名规范

BEM && OOCSS 针对的都是 css 命名规范
jslint eslint js使用规范
BEM规范
概念：
Block Element Modifier，它是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。
BEM是定义了一种css class的命名规范，每个名称及其组成部分都是存在一定的含义。
由拉丁字母, 数字, -组成css的单个名称.
Block Element Modifier
独立且有意义的实体, 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
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>

CSS

.form {
}
.form--theme-xmas {
}
.form--simple {
}
.form__input {
}
.form__submit {
}
.form__submit--disabled {
}

Buttons实例

buttons
HTML
<button class="button">
Normal button
</button>
<button class="button button--state-success">
Success button
</button>
<button class="button button--state-danger">
Danger button
</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规范

1. 概念

Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。
OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。
2. 总结：

将重用的东西当做一个对象来看，然后将不同的属性放到另一个类名去

.list{
background: #fff;
}
.list--width{
width: 300px;
}

jslint eslint规范
js代码的编写习惯

3. 前端工作规范
日报、周报
日报：
今天
上午你做什么
下午你做了什么
遇到什么问题？是否有解决？
明天的计划？（明天准备做什么）
周报：
2016.07.25-2016.07.29周报：
1.本周工作主要内容：
A：完成了宏视云h5播放器升级及大数据上报；
B：修复xk-h5播放器bug：在三星手机自带浏览器无法进行滑动seek;
C：admin-console后台管理系统初步完成终端访问页面和数据统计概览页面的制作；
2.工作中存在的主要问题：
A：webserver大数据展示页面移植到admin-console后台管理系统存在bootstrap与jquery.easyui冲突等几个兼容性问题；
B：解决这个问题的思路可能不是最有效的方法，可能使用iframe会快些；使用iframe存在如何在easyui页面控制iframe页面及如何在浏览器窗口改变时，iframe也跟着改变等问题；
3.下周工作计划：
A：完成上周未完成的admin-console大数据展示页面的制作；
B：完成工作以后，如果有时间的话尝试下用iframe解决；
C：询问师兄有没有可以帮忙做的工作；
邮件的发送

明确邮件发送谁？
参与者：一定要想清楚，如果不清楚，记得问一下你直接上司（同事）
邮件的主题：
主题必须有且仅有一个
必要时，可以添加：【请批阅】、等字眼
邮件正文
称呼要明确：
条理分明
举例：
各位老师好：
一下内容是xxx 请xxx
署名：
什么部分什么职位什么姓名什么时间
附件
需要说明附件是做什么的？
转发;
需要对原邮件进行说明。，然后写清楚自己的意图
开发文档的书写规范
1. html规范
标签上属性的顺序建议如下：
class ( class 是为高可复用组件设计的,所以应处在第一位)
id name (id 更加具体且应该尽量少使用,所以将它放在第二位)

data-\*
src for type href value
placeholder title alt
aria-\* role

required readonly disabled
2. id/class 命名规则: BEM OOCSS SMACSS(扩展)

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

<div class="container">
<!-- 头部--start -->
<header></header>
<!-- 头部--end -->
<!-- 内容--start -->
<div class="content">
</div>
<!-- 内容--end -->
<!-- 底部--start -->
<footer>
</footer>
<!-- 底部--end -->
</div>
`

2. css规范
1. 属性顺序
位置属性 ( 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;
<!-- 注释 -->
}

2. 尽量不使用选择器（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>

3. 属性使用缩写：
举例：

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

4. 去掉小数点前面的 0

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

3. js规范
1. 语言规范
声明变量必须加上 let 关键字.不要再使用 var
优先使用箭头函数
使用模板字符串取代连接字符串
2. 使用分号
如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会出 BUG

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

if (x) {
function zxm() {}
}

如果确实需要,使用函数表达式来初始化变量

if (x) {
let foo = function() {}
}

4. 循环注意
forEach map filter every some for…in for…of for循环 while do…while

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

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. 标点规范
js中统一使用反引号（``）或是单引号(’’)，不使用双引号("")
9. 函数默认值
函数默认值写在其他参数后面

`
function zxm(a,b,name = 'zxm'){
console.log(name)
}