Web前端规范

1.项目命名

全部采用小写方式，以下划线分隔。例：my_project_name

2.目录命名

参照项目命名规则；有复数结构时，要采用复数命名法。例：scripts, styles, images, data_models

3.JS文件命名

参照项目命名规则。例：account_model.js

4.CSS, SCSS文件命名

参照项目命名规则。例：retina_sprites.scss

5.HTML文件命名

参照项目命名规则。例：error_report.html

6.变量命名

标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
'ID'在变量名中全大写
'URL'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个，大写后两个字母
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery对象必须以'$'开头命名

7.文档注释

建议在以下情况下使用：所有常量所有函数所有类

/** * @func 
* @desc 一个带参数的函数 
* @param {string} a - 参数a 
* @param {number} b=1 - 参数b默认值为1 
* @param {string} c=1 - 参数c有两种支持的取值<>1—表示x</br>2—表示xx 
* @param {object} d - 参数d为一个对象 
* @param {string} d.e - 参数d的e属性 
* @param {string} d.f - 参数d的f属性 
* @param {object[]} g - 参数g为一个对象数组 
* @param {string} g.h - 参数g数组中一项的h属性 
* @param {string} g.i - 参数g数组中一项的i属性
 * @param {string} [j] - 参数j是一个可选参数 */
function foo(a, b, c, d, g, j) {
...
}

8.变量声明

一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明。

function doSomethingWithItems(items) {
    // use one var
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
}
}

9.数组、对象

对象属性名不需要加引号；对象以缩进的形式书写，不要写在一行；数组、对象最后不要有逗号。

// 不好（属性不加引号）
var a = {
'b': 1
};
var a = {b: 1};//不能写一行
var a = {
    b: 1,
c: 2,//多逗号
};
// 标准
var a = {
    b: 1,
c: 2
};

10.括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

// 不好
if (condition)
    doSomething();
// 标准
if (condition) {
doSomething();
}

11.Css命名

类名使用小写字母，以中划线分隔
id采用驼峰式命名
scss中的变量、函数、混合、placeholder采用驼峰式命名

css

/* class */
.element-content {
  ...
}
/* id */
#myDialog {
...
}
/* 变量 */
$colorBlack: #000;
/* 函数 */
@function pxToRem($px) {
...
}
/* 混合 */
@mixin centerBlock {
...
}
/* placeholder */
%myDialog {
...
}

12.SCSS相关

提交的代码中不要有 @debug；声明顺序：

@extend
不包含 @content 的 @include
包含 @content 的 @include
自身属性
嵌套规则 @import 引入的文件不需要开头的'_'和结尾的'.scss'；嵌套最多不能超过5层； @extend 中使用placeholder选择器；去掉不必要的父级引用符号'&'。

13.Vue使用规范

1.基于组件化开发理解

什么是组件？

组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融化，变成一个完整的应用。页面只不过是这样组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的小东西。

组件化开发的好处：

提高开发效率方便重复使用简化调试步骤提升整个项目的可维护性便于协同开发使其高内聚，低耦合，达到分治与复用的目的组件化和模块化的区别组件化是从产品功能角度进行分割，模块化是从代码实现角度进行分割，模块化是组件化的前提和基础。

2.组件命名规范

有意义的名词、简短、具有可读性
以小写开头，采用短横线分割命名
公共组件命名以公司名称简拼为命名空间(app-xx.vue)
文件夹命名主要以功能模块代表命名同时还需要注意：必须符合自定义元素规范: 使用连字符分隔单词，切勿使用保留字。app- 前缀作为命名空间: 如果非常通用的话可使用一个单词来命名，这样可以方便于其它项目里复用。

3.结构化规范

1.结构：

├── index.html                      入口页面
   ├── build                           构建脚本目录
   │   ├── build-server.js                 运行本地构建服务器，可以访问构后的页面
   │   ├── build.js                        生产环境构建脚本
   │   ├── dev-client.js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
   │   ├── dev-server.js                   运行本地开发服务器
   │   ├── utils.js                        构建相关工具方法
   │   ├── webpack.base.conf.js            wabpack基础配置
   │   ├── webpack.dev.conf.js             wabpack开发环境配置
   │   └── webpack.prod.conf.js            wabpack生产环境配置
   ├── config                          项目配置
   │   ├── dev.env.js                      开发环境变量
   │   ├── index.js                        项目配置文件
   │   ├── prod.env.js                     生产环境变量
   │   └── test.env.js                     测试环境变量
   ├── mock                            mock数据目录
   │   └── hello.js
   ├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
   ├── src                             项目源码目录    
   │   ├── main.js                         入口js文件
   │   ├── App.vue                         根组件
   │   ├── components                      公共组件目录
   │   │   └── title.vue
   │   ├── assets                          资源目录，这里的资源会被wabpack构建
   │   │   ├── css                         公共样式文件目录
   │   │   ├── js                          公共js文件目录
   │   │   └── img                      图片存放目录
   │   ├── routes                          前端路由
   │   │   └── index.js
   │   ├── store                           应用级数据（state）
   │   │   └── index.js
   │   └── views                           页面目录（里面可以添加业务模板的目录）
   │       ├── hello.vue
   │       └── notfound.vue
   ├── static                          纯静态资源，不会被wabpack构建。
   └── test                            测试文件目录（unit&e2e）
       └── unit                            单元测试
           ├── index.js                        入口脚本
           ├── karma.conf.js                   karma配置文件
           └── specs                           单测case目录
               └── Hello.spec.js

2.vue文件基本结构：

vue

<template>
          <div>
            <!--必须在div中编写页面-->
          </div>
        </template>
        <script>
          export default {
            components : {
            },
            data () {
              return {
              }
            },
            methods: {
            },
            mounted() {
        
            }
         }
        </script>
        <!--声明语言，并且添加scoped-->
        <style lang="less" scoped>
        </style>

3.vue文件方法声明顺序

- components   
- props    
- data     
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods   
- filter
- computed
- watch

4.注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。以下情况，务必添加注释

公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
注释块必须以/（至少两个星号）开头/；
单行注释使用//；

5.编码规范

使用ES6风格编码源码定义变量使用let ,定义常量使用const 使用export ，import 模块化
组件 props 原子化提供默认值使用 type 属性校验类型使用 props 之前先检查该 prop 是否存在
避免 this.$parent
谨慎使用 this.$refs
无需将 this 赋值给 component 变量
调试信息console.log() debugger 使用完及时删除

Web前端规范 ​

1.项目命名 ​

2.目录命名 ​

3.JS文件命名 ​

4.CSS, SCSS文件命名 ​

5.HTML文件命名 ​

6.变量命名 ​

7.文档注释 ​

8.变量声明 ​

9.数组、对象 ​

10.括号 ​

11.Css命名 ​

12.SCSS相关 ​

13.Vue使用规范 ​

1.基于组件化开发理解 ​

2.组件命名规范 ​

3.结构化规范 ​

1.结构： ​

2.vue文件基本结构： ​

3.vue文件方法声明顺序 ​

4.注释规范 ​

5.编码规范 ​