前端开发规范和开发文档的书写规范

最新推荐文章于 2024-07-18 03:12:27 发布

zhangyuea

最新推荐文章于 2024-07-18 03:12:27 发布

阅读量3.8k

点赞数 3

本文链接：https://blog.csdn.net/zhangyuea/article/details/89338801

版权

1. 前端的开发规范

目录构建的规范
命名原则：
简洁
比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包
不使用复数
比如：不使用 imgs docs
根目录（root）结构按职能划分
比如：

  1. src 源代码（逻辑）
  2. doc 文档
  3. dep 第三方依赖包
  4. 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 组件//一些封装好了的代码，api
            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
使用简洁的前缀名字来命名一个独立且有意义的抽象块或组件。
举例

    .block
    .header
    .site-search
    Element

使用__连接符来连接Block 和 Element。
举例

.block__element
.header__title
.site-search__field

Modifier
使用–连接符来连接Block 或 Element 和 Modifier。
.举例.

.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规范

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

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

jslint eslint规范

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
署名：
什么部分什么职位什么姓名什么时间
附件
需要说明附件是做什么的？
转发;
需要对原邮件进行说明。，然后写清楚自己的意图

4. 开发文档的书写规范

html规范

1. 标签上属性的顺序建议如下：
    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>

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;
        <!-- 注释 -->
}

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

属性使用缩写：
举例：

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

去掉小数点前面的 0

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

js规范

1.声明规范必须使用let关键字，不要再使用var
  &nbsp;&nbsp; 有点使用箭头函数
  &nbsp;&nbsp; 使用模板字符串取代连接字符串
2.使用分号
3.块内函数声明
不要再块内声明函数
4.forEach是用力啊循环数组的
5.map，for..in， for..of，filter，some，

6.命名规范

   camel表示驼峰命名
    pascal表示首字母大写
    变量名：必须使用camel规范
    参数名：必须使用camel规范
    函数命：必须使用camel规范
    方法/属性：必须使用camel规范
    私有成员：必须下划线开头
    常量命名：必须使用全部大写的下划线命名法
    类名：pascal命名法

7.声明

 &nbsp;&nbsp; 在函数的最前面应先用var let声明
  &nbsp;&nbsp; 注释变量的功能和含义，且以字母顺序排序，每个变量单独占一行一边添加注释；

8.回调函数规范

 &nbsp;&nbsp; 回调函数统一使用promise，成功的参数统一使用res，错误参数err

9.数据绑定变量定义规范
10.函数默认值

  &nbsp;&nbsp; 函数默认值写在其他参数的后面

11.标点规范

 &nbsp;&nbsp; js中统一使用反引号(``)或单引号('')，不使用双引号

zhangyuea

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
前端开发规范和开发文档的书写规范

1. 前端的开发规范目录构建的规范命名原则：简洁比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包不使用复数比如：不使用 imgs docs根目录（root）结构按职能划分比如： 1. src 源代码（逻辑） 2. doc 文档 3. dep 第三方依赖包 4. test 测试根据业务逻辑进行文件夹的划分 sr...
复制链接

扫一扫