【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 //存放在页面中使用的图片,一般为可以后台上传的图片,页面调用路径为/Publictmp/
|--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 //项目介绍
- 静态文件输出目录:
webpack自动编译输出,除tmp文件夹下可添加图片外勿在此文件夹下添加任何文件
3.0 命名规范及注释规范
图片的名称分为头尾两部分,用减号-隔开,头部分表示此图片的大类性质
banner-* //放置在页面顶部的广告、装饰图案等长方形的图片
logo-* //标志性的图片
btn-*-* //在页面上位置不固定并且带有链接的小图片;命名规范:btn-功能名-大小/私有
pic-* //装饰用的照片
tit-* //不带链接表示标题的图片
icon-* //一系列图标图片
鼠标感应效果:图片名+on/off;例如:icon-list-on.png,icon-list-off.png
文本缩进
(重要)统一使用 2 个空格缩进,不得使用 tab 和 4 个空格
注释
更新代码后即时更新注释
- 在文件开始时写块注释:
/**
* 作用于哪些页面
* 注明代码业务/功能说明
* @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>
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);
}