【vue】1.0 前端开发规范

1.0 概述

为提高团队协作效率,规范文件管理,方便项目后期维护,提高代码质量,特制订此文档,前端开发人员必须遵照本规范进行前台页面开发。

2.0 目录规范

1.页面存放目录:文件夹命名均首字母大写

|--@root
    |--Member //业务模块名
        |--Conf
        |--Controller //存放控制器
        |--Veiw //存放页面
            |--Basic  //PC终端
            |--Mobile //手机终端
                |--Index //控制器名
                    |--index.php //页面
|--README.md

2.静态文件存放目录:所有文件及文件夹命名均为小写

|--@root
    |--dist //存放编译后文件,用于测试
    |--dev  //存放编译后文件,用于开发;详见**3.静态文件输出目录**
        |--basic
        |--mobile
    |--libs   //第三方插件+
    |--tmp //存放在页面中使用的图片,一般为可以后台上传的图片,页面调用路径为__PUBLIC__tmp/
        |--index_index //页面文件夹
    |--src  //存放源码文件
        |--basic
        |--mobile //以mobile目录为例,basic目录同理
            |--common //存放mobile终端下公用文件
                |--images    //存放图像文件
                |--css       //存放css文件
                |--common.js //js文件直接存放在common文件夹下
            |--index 
            |--member //业务模块名
                |--common//业务公共模块
                    |--css
                    |--js
                    |--index.js
                |--index_index //命名规范:控制器名_页面名(与HTML文件命名相同);存放页面私有文件
                    |--images
                        |--image.png
                    |--index.css
                    |--index.js
        |--common //跨终端公共组件
|--package.json
|--webpack.config.dist.js //配置源文件,复制后重命名为webpack.config.js使用
|--README.md  //项目介绍
  1. 静态文件输出目录:
    webpack自动编译输出,除tmp文件夹下可添加图片外勿在此文件夹下添加任何文件
3.0 命名规范及注释规范

图片的名称分为头尾两部分,用减号-隔开,头部分表示此图片的大类性质

banner-* //放置在页面顶部的广告、装饰图案等长方形的图片
logo-*   //标志性的图片
btn-*-*  //在页面上位置不固定并且带有链接的小图片;命名规范:btn-功能名-大小/私有
pic-*    //装饰用的照片
tit-*    //不带链接表示标题的图片
icon-*   //一系列图标图片

鼠标感应效果:图片名+on/off;例如:icon-list-on.png,icon-list-off.png

文本缩进

(重要)统一使用 2 个空格缩进,不得使用 tab 和 4 个空格

注释

更新代码后即时更新注释

  1. 在文件开始时写块注释:
/** 
 * 作用于哪些页面
 * 注明代码业务/功能说明
 * @authors Your Name (you@example.org)
 * @date    2016-05-16
 * @version $Id$
 */

// 单行注释添加一个空格

var offset = 0; // 此处注明变量注释

if(includeLabels) {
  // If the labels are included we need to have a minimum offset of 20 pixels
  // We need to set it explicitly because of the following bug: 
  // http://somebrowservendor.com/issue-tracker/ISSUE-1
  offset = 20;
}

模块功能描述说明

/**
* ------------------------------------------------------------------
* 模块描述说明
* ------------------------------------------------------------------
*/

模块内的小函数方法归类:

/**
 * 小函数方法归类说明,这些零散的小函数方法放在一起 对应 一个业务方法逻辑
 * ------------------------------------------------------------------
 */

单个函数注释

/**
 * 函数功能简述
 *
 * 具体描述一些细节
 *
 * @param    {string}  address     地址
 * @param    {array}   com         商品数组
 * @param    {string}  pay_status  支付方式
 * @returns  void
 *
 * @date     2014-04-12
 * @author   QETHAN<qinbinyang@zuijiao.net>
 */
css注释
/* Footer */

内容区

/* End Footer */
关注点分离(不采用)

web 中如何和为何区分不同的关注点?
这里的关注点主要指的是:信息(HTML 结构)、外观(CSS)和行为(JavaScript)。为了使它们成为可维护的干净整洁的代码,我们要尽可能的将它们分离开来。
格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。
尽量在文档和模板中只包含结构性的 HTML;而将所有表现代码,移入样式表中;将所有动作行为,移入脚本之中。
在此之外,为使得它们之间的联系尽可能的小,在文档和模板中也尽量少地引入样式和脚本文件。

不使用超过一到两张样式表i.e. main.css, vendor.css
不使用超过一到两个脚本(学会用合并脚本)
不使用行内样式<style>.no-good {}</style>
不在元素上使用 style 属性<hr style="border-top: 5px solid black">
不使用行内脚本<script>alert('no good')</script>
不使用表象元素i.e. <b>, <u>, <center>, <font>, <b>
不使用表象 class 名red, left, center
4.0 代码命名规范

BEM命名方式
BEM(Block,Element,Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆成一个个独立的富有寓意的快,从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用。即便团队引入新成员也容易维护,在某种程度上,BEM和OOP是相似的。

BEM其实是块(block)元素(element)修饰(modifier)的缩写。利用不同区块功能及样式来给元素命名。这三个部分使用__与--连接.命名约定的模式如下:

.black{}
.black__element{ }
.black--modifier{ }

block代表更高级别的抽象或组件。
block__element代表block的后代用于形成一个完整的block整体。
Block--modify代表block的不同状态或不同版本。


image.png
4.0 OOCSS规范

OOCSS不是一个框架,也不是一种技术,更不是一种新的语言,他只不过是一种方法,一种书写方式,换句话说OOCSS其核心就是用最简单的方式编写最整洁,最于净的CSS代码,从而使代码更具重用性,可维护性和可扩展性 ( 把原本写在一起的样式, 拆开多个class 写,提高可复用性)。

<button type="button" class="btn btn-danger btn-lg">使用danger的大按钮</button>
<button type="button" class="btn btn-primary btn-sm btn-radius5">使用primary的小按钮</button>

http://oocss.org/

5.0 CSS规范

http://nec.netease.com/standard

文件命名规范

常用的文件命名:

    全局:global.css

    结构:layout.css

    模块:module.css

    主题:themes.css

长文件名必须以 - 中横杠符连接,项目里面的私有样式文件:项目名-业务模块名称.css。

/* 项目名为clout */

/* good */
clout-home.css

/* bad */
cloutHome.css;
选择器命名
(重要)在不是必须的情况下尽可能不用id选择器。

选择器名字全小写,不得使用大写。

较长选择器名字之间使用-中横杆连接。

当判断容易出现命名冲突的时候,命名需按规则:模块名-你的选择器名,如果出现多层级选择器的情况(应尽量避免超过3级的情况),每个层级间使用-中横杆连接,不建议直接使用嵌套。
/* 选择器名称 */
/* good */
.mydialog {
    font-size: .28rem;
} 

/* bad */
.myDialog {
    font-size: .28rem;
}

/* 模块及嵌套 */
/* good */
<div class="mydialog">
    <div class="mydialog-hd">
        <p class="mydialog-hd-title">标题</p>
    </div>
</div>

.mydialog-hd-title {
    color: #3f3f3f;
}

/* bad */
<div class="mydialog">
    <div class="hd">
        <p class="title">标题</p>
    </div>
</div>

.mydialog .hd .title {
    color: #3f3f3f;
}

(建议)常用的选择器命名:



    头部:header(hd)

    标题:title

    内容:container/content(cont)

    页面主题:body(bd)/main

    尾部:footer(ft)

    导航:nav

    子导航:subnav

    标签页:tab

    侧栏:sidebar

    栏目:column/col

    外围控制布局:wrapper

    左中右:left center right

    菜单:menu

    子菜单:submenu

    列表:list

    当前的:active

    图标:icon

    提示信息:msg

    小技巧:tips

文本

(重要)文本内容必须用双引号包围。

/* good */
body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

/* bad */
body {
    font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
}
数值

(重要)数值为 0 - 1 之间的小数,省略整数部分的 0 。

例:

/* good */
body {
    font-size: .28rem;
}

/* bad */ {
    font-size: 0.28rem;
}
单位

(重要)数值为 0 的属性值须省略单位。

/* good */
body {
    padding: 0 .1rem;
}

/* bad */
body {
    padding: 0rem .1rem;
}
url()

(重要) url() 函数中的路径不加引号

/* good */
body {
    background: url(bg.png);
}

/* bad */
body {
    background: url("bg.png");
}

url() 函数中的绝对路径可省去协议名

/* good */
body {
    background: url(//yunzhijia.com/images/bg.png);
}

/* bad */
body {
    background: url(http://yunzhijia.com/images/bg.png);
}
颜色

(重要)RGB颜色值必须使用十六进制形式 #3f3f3f。不允许使用 rgb()。

解释:

带有alpha(不透明度)的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后须保留一个空格。

/* good */
.border {
    border: 1px solid #dce1e8;
}

.overlayer {
   background-color: rgba(0, 0, 0, .7); 
}

/* bad */
.border {
    border: 1px solid rgb(220, 225, 232);
}

.overlayer {
    background-color: rgba(0,0,0,.7);
}