Fox-Wikis

§ Fox3.0前端框架-开发规范

§ 前端目录规范

fox
├── README.md  #工程说明
├── babel.config.js #语法检查
├── config #配置
│   ├── dev.config.js #开发配置
│   └── prod.config.js #生产配置
├── dist #编译结果目录
├── mock #mock挡板数据
│   ├── index.js
│   └── service
├── scripts #编译脚本
│   ├── webpack.base.js
│   ├── webpack.debug.js #调试脚本
│   ├── webpack.dev.js #开发版本编译脚本
│   ├── webpack.module-main.js #主工程编译脚本
│   ├── webpack.module-micro.js #子工程编译脚本
│   └── webpack.prod.js #生产版本编译脚本
├── src #源代码目录
│   ├── App.vue #入门vue组件
│   ├── api #公共通信API
│   ├── assets #编译资源
│   ├── components #公共组件
│   ├── i18n #国际化
│   ├── index.html #index html
│   ├── main.js #主入口
│   ├── native #native接口
│   ├── page #页面目录
│   ├── router #路由
│   └── utils #公共方法与工具类
├── static #静态资源
├── tests #测试目录
├── tsconfig.json #ts配置
└── package.json #工程依赖配置信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

注意事项 a、项目中多处使用的js方法，应当抽取到src/utils/cstom中。 b、pages下的文件夹、文件命名不推荐使用驼峰风格，应该使用中划线分隔： schoolScene 不推荐 school-scene 推荐

§ 模块划分规范

模块以工程/src/page下面的第一层目录为模块或业务组，如

§ 模块

模块页面： page/模块名/页面A/index.vue page/模块名/页面B/index.vue page/模块名/页面C/index.vue 模块路由 router/route-模块名.js

模块是一个编译单元，单独编译成一个js文件，按需加载

├── page
│   ├── common  #common模块
│   │   ├── frame
│   │   │   ├── components
│   │   │   │   ├── Content.vue
│   │   │   │   ├── Footer.vue
│   │   │   │   ├── Header.vue
│   │   │   │   ├── Sidebar.vue
│   │   │   │   └── Tags.vue
│   │   │   └── index.vue
│   │   └── login
│   │       └── index.vue
│   ├── example #example模块
│   │   ├── date-item
│   │   │   └── index.vue
│   │   ├── group
│   │   │   └── index.vue
│   │   ├── money-item
│   │   │   └── index.vue
│   │   ├── select-item
│   │   │   └── index.vue
│   │   ├── table-item
│   │   │   └── index.vue
│   │   ├── text-item
│   │   │   └── index.vue
│   │   └── time-item
│   │       └── index.vue
│   └── template #template模块
│       ├── data-import
│       ├── excel-import
│       │   └── index.vue
│       └── result-show
├── router
│   ├── route-common.js   #common对于的路由
│   ├── route-example.js  #example对于的路由
│   └── route-template.js #template对于的路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

一个路由就是一个编译单位，生成一个JS

§ 业务组+模块

业务组+模块页面： page/业务组/模块名/页面A/index.vue page/业务组/模块名/页面B/index.vue page/业务组/模块名/页面C/index.vue 模块路由 router/业务组/route-模块名.js

§ Vue data对象规范要

标准的data结构如下：

 //数据
 data:function(){
   return {
      //UI界面元数据，格式为m_*
       m_student:[
         {
           id:"001",
           name:"刘德华"
         },
         {
           id:"002",
           name:"黎明"
         },
         {
           id:"003",
           name:"张学友"
         },
         {
           id:"004",
           name:"郭富城"
         }
      ],
      //业务数据
      name:"名称",
    }
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注意事项 a、UI界面的元数据，都必须与‘m_’作为前缀。如标题、color、下拉列表。 b、业务字段，则按照后台的规范要求 c、通过工具类获取获取还原数据

§ 获取请求数据

fox.custom.getRequestData 示例

let reqData = fox.custom.getRequestData(this)
1
参数 类型 说明
vm Vue Object 需要抽取数据的Vue对象
filter Function 过滤器，默认过滤器会过滤所有m_为前缀的数据

§ 还原响应数据

fox.custom.setResponseData 示例

fox.custom.setResponseData(this,data,filter)
1
参数 类型 类型
vm Vue Object 需要还原数据的Vue对象
data Object 请求响应数据
filter Function 过滤器，如果不设置，则不过滤任务数据

§ 编码规范

§ 块级作用域

（1）let 取代 var ES6 提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。

    'use strict';
    
    if (true) {
      let x = 'hello';
    }
    
    for (let i = 0; i < 10; i++) {
      console.log(i);
    }
1
2
3
4
5
6
7
8
9

上面代码如果用var替代let，实际上就声明了两个全局变量，这显然不是本意。变量应该只在其声明的代码块内有效，var命令做不到这一点。

var命令存在变量提升效用，let命令没有这个问题。

 'use strict';
    
    if (true) {
      console.log(x); // ReferenceError
      let x = 'hello';
    }
1
2
3
4
5
6

上面代码如果使用var替代let，console.log那一行就不会报错，而是会输出undefined，因为变量声明提升到代码块的头部。这违反了变量先声明后使用的原则。

所以，建议不再使用var命令，而是使用let命令取代。

（2）全局常量

在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。

const优于let有几个原因。一个是const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是 JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率，也就是说let和const的本质区别，其实是编译器内部的处理不同。

    // bad
    var a = 1, b = 2, c = 3;
    
    // good
    const a = 1;
    const b = 2;
    const c = 3;
    
    // best
    const [a, b, c] = [1, 2, 3];
1
2
3
4
5
6
7
8
9
10

const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。

所有的函数都应该设置为常量。

§ 字符串

静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。

    // bad
    const a = "foobar";
    const b = 'foo' + a + 'bar';
    
    // acceptable
    const c = `foobar`;
    
    // good
    const a = 'foobar';
    const b = `foo${a}bar`;
1
2
3
4
5
6
7
8
9
10

§ 解构赋值

使用数组成员对变量赋值时，优先使用解构赋值。

    const arr = [1, 2, 3, 4];
    
    // bad
    const first = arr[0];
    const second = arr[1];
    
    // good
    const [first, second] = arr;
1
2
3
4
5
6
7
8

函数的参数如果是对象的成员，优先使用解构赋值。

    // bad
    function getFullName(user) {
      const firstName = user.firstName;
      const lastName = user.lastName;
    }
    
    // good
    function getFullName(obj) {
      const { firstName, lastName } = obj;
    }
    
    // best
    function getFullName({ firstName, lastName }) {
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。

    // bad
    function processInput(input) {
      return [left, right, top, bottom];
    }
    
    // good
    function processInput(input) {
      return { left, right, top, bottom };
    }
    
    const { left, right } = processInput(input);
1
2
3
4
5
6
7
8
9
10
11

§ 对象

单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。

    // bad
    const a = { k1: v1, k2: v2, };
    const b = {
      k1: v1,
      k2: v2
    };
    
    // good
    const a = { k1: v1, k2: v2 };
    const b = {
      k1: v1,
      k2: v2,
    };
1
2
3
4
5
6
7
8
9
10
11
12
13

对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

    // bad
    const a = {};
    a.x = 3;
    
    // if reshape unavoidable
    const a = {};
    Object.assign(a, { x: 3 });
    
    // good
    const a = { x: null };
    a.x = 3;
1
2
3
4
5
6
7
8
9
10
11

如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

    // bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,
    };
1
2
3
4
5
6
7
8
9
10
11
12
13

上面代码中，对象obj的最后一个属性名，需要计算得到。这时最好采用属性表达式，在新建obj的时候，将该属性与其他属性定义在一起。这样一来，所有属性就在一个地方定义了。

另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。

    var ref = 'some value';
    
    // bad
    const atom = {
      ref: ref,
    
      value: 1,
    
      addValue: function (value) {
        return atom.value + value;
      },
    };
    
    // good
    const atom = {
      ref,
    
      value: 1,
    
      addValue(value) {
        return atom.value + value;
      },
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

§ 数组

使用扩展运算符（...）拷贝数组。

    // bad
    const len = items.length;
    const itemsCopy = [];
    let i;
    
    for (i = 0; i < len; i++) {
      itemsCopy[i] = items[i];
    }
    
    // good
    const itemsCopy = [...items];
1
2
3
4
5
6
7
8
9
10
11

使用 Array.from 方法，将类似数组的对象转为数组。

    const foo = document.querySelectorAll('.foo');
    const nodes = Array.from(foo);
1
2

§ 函数

立即执行函数可以写成箭头函数的形式。

    (() => {
      console.log('Welcome to the Internet.');
    })();
1
2
3

那些使用匿名函数当作参数的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。

    // bad
    [1, 2, 3].map(function (x) {
      return x * x;
    });
    
    // good
    [1, 2, 3].map((x) => {
      return x * x;
    });
    
    // best
    [1, 2, 3].map(x => x * x);
    箭头函数取代Function.prototype.bind，不应再用 self/_this/that 绑定 this。
    
    // bad
    const self = this;
    const boundMethod = function(...params) {
      return method.apply(self, params);
    }
    
    // acceptable
    const boundMethod = method.bind(this);
    
    // best
    const boundMethod = (...params) => method.apply(this, params);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。

所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数。

    // bad
    function divide(a, b, option = false ) {
    }
    
    // good
    function divide(a, b, { option = false } = {}) {
    }
1
2
3
4
5
6
7

不要在函数体内使用 arguments 变量，使用 rest 运算符（...）代替。因为 rest 运算符显式表明你想要获取参数，而且 arguments 是一个类似数组的对象，而 rest 运算符可以提供一个真正的数组。

    // bad
    function concatenateAll() {
      const args = Array.prototype.slice.call(arguments);
      return args.join('');
    }
    
    // good
    function concatenateAll(...args) {
      return args.join('');
    }
1
2
3
4
5
6
7
8
9
10

使用默认值语法设置函数参数的默认值。

    // bad
    function handleThings(opts) {
      opts = opts || {};
    }
    
    // good
    function handleThings(opts = {}) {
      // ...
    }
1
2
3
4
5
6
7
8
9

§ Map 结构

注意区分 Object 和 Map，只有模拟现实世界的实体对象时，才使用 Object。如果只是需要key: value的数据结构，使用 Map 结构。因为 Map 有内建的遍历机制。

    let map = new Map(arr);
    
    for (let key of map.keys()) {
      console.log(key);
    }
    
    for (let value of map.values()) {
      console.log(value);
    }
    
    for (let item of map.entries()) {
      console.log(item[0], item[1]);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

§ Class

总是用 Class，取代需要 prototype 的操作。因为 Class 的写法更简洁，更易于理解。

    // bad
    function Queue(contents = []) {
      this._queue = [...contents];
    }
    Queue.prototype.pop = function() {
      const value = this._queue[0];
      this._queue.splice(0, 1);
      return value;
    }
    
    // good
    class Queue {
      constructor(contents = []) {
        this._queue = [...contents];
      }
      pop() {
        const value = this._queue[0];
        this._queue.splice(0, 1);
        return value;
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。

    // bad
    const inherits = require('inherits');
    function PeekableQueue(contents) {
      Queue.apply(this, contents);
    }
    inherits(PeekableQueue, Queue);
    PeekableQueue.prototype.peek = function() {
      return this._queue[0];
    }
    
    // good
    class PeekableQueue extends Queue {
      peek() {
        return this._queue[0];
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
最后更新于: 4/15/2022, 2:41:22 PM

← 微前端 →