前端规范

三方框架

TIP

以Vue或React为例

命名规范

1、文件及目录（大驼峰命名法）

src
  ├─ components
  |  ├─ ProgressBar.vue // vue
  |  └─ ProgressBar.js  // react
  ├─ pages
  |  ├─ Home
  |  |   ├─ Index.js
  |  |   └─ index.css
  |  └─ LeftMenu 
  ├─ assets
  |  ├─ css
  |  |   ├─ common.css
  |  |   └─ flight_list.css
  |  ├─ less
  |  |   ├─ common.less
  |  |   └─ flight_list.less
  |  └─ images
  |     ├─ img-logo.png
  |     └─ icon-home.png
  ├─ App.vue // vue
  └─ App.js  // react

代码规范

1、导入模块

花括号不要留间隙

import React, {Component} from 'react';
import {DatePicker, Icon, Input, message, Modal, Select, Table, Tooltip} from 'antd';

2、箭头函数

// 没有参数
() => {
  // ...
}
// 一个参数
res => {
  // ...
}
// 或
(res) => {
  // ...
}
// 多个参数
(status, data, msg) => {
  // ...
}

3、export导出

如：utils/index.js

// 覆盖已有JSON对象
function coverJSON(src, dst) {
    let result = {};
    for(let k in dst) {
        if(src.hasOwnProperty(k)) {
            result[k] = dst[k];
        }
    }
    return result;
}

// search转JSON
function search2json() {
    var search = window.location.search.substr(1);
    if(search) {
        var searchArr = search.split('&');
        return searchArr.reduce(function(json, v) {
            var item = v.split('=');
            json[item[0]] = item[1];
            return json;
        }, {});
    }
    return {};
}

export {
    coverJSON,
    search2json
}

使用

import {coverJSON} from 'utils/index';

4、多属性

<Table
    size={'small'}
    loading={this.state.loading}
    columns={this.state.isSearch ? searchBookColumns : bookColumns}
    rowSelection={this.state.canEdit ? rowSelection : null}
    dataSource={this.state.bookDatas}
    pagination={this.state.pagination}
/>

代码优化

1、尽量使用解构赋值

let {
    name,
    age,
    score
} = this.state.userInfo;

2、减少不必要的判断

未优化

let list = [];
if(list.length > 0) {
    // ...
} else {
    // ...
}

优化

let list = [];
if(list.length) {
    // ...
} else {
    // ...
}

3、尽量使用箭头函数

let convertArr = [1,2,3].map((v)=>{
    return v*2;
});

4、判断字符串或数组中是否存在某个值

  • 字符串
'hello'.includes('he') // true
  • 数组
[1,2].includes(1) // true

5、使用模板字符串代替字符串拼接

优化前

let modText = '用户';
let msg = '修改'+modText+'成功~';

优化后

let modText = '用户';
let msg = `修改${modText}成功~`;

6、减少多次声明

优化前

let searchVal = value;
let bookDatas = [];
let isSearch = true;
let pagination = this.state.pagination;

优化后

let searchVal = value,
    bookDatas = [],
    isSearch = true,
    pagination = this.state.pagination;

7、尽量少用多个setState(React)

优化前

if (this.state.showDepartment) {
  // 关闭添加单位modal后清空departsRow
  this.setState({
    departsRow: ['']
  });
}
this.setState({
  showDepartment: !this.state.showDepartment
});

优化后

let params = {
  showDepartment: !this.state.showDepartment
};
if(this.state.showDepartment) {
  params['departsRow'] = [''];
}
this.setState(params);

8、省略else

优化前

function foo() {
  if(true) {
    return 100;
  } else {
    return 0;
  }
}

优化后

function foo() {
  if(true) {
    return 100;
  }
  return 0;
}

build打包

1、index.html模板文件不要压缩

webpack.config.prod.js






 
 
 
 
 
 
 
 
 
 
 
 



plugins: [
  // Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
    /*minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeRedundantAttributes: true,
      useShortDoctype: true,
      removeEmptyAttributes: true,
      removeStyleLinkTypeAttributes: true,
      keepClosingSlash: true,
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true,
    },*/
  })
]

风格指南(vue)

https://cn.vuejs.org/v2/style-guide/

Eslint配置

https://www.jianshu.com/p/06f942d11d24

注意

三方类库的全局样式可能会影响到公共模块(如导航)，在测试的时候注意一下。

← 自我约束 →