前端小纠结–common模块设计

承接上一篇前端小纠结–Vue项目代码组织和风格约定

common模块的单独拿出来说一下，因为common模块设计的好，可以跨项目使用，甚至在部署成自己的私有的package。

common目标：主要是为了在第三方库之上做一层简单的封装，预置配置，做一层隔离，也可以在调用第三方组件时做一些埋点统一处理一些逻辑。

设计原则

  1. 不能有任何的业务逻辑
  2. 不能耦合工程的业务状态
  3. 不能依赖组件库，可以依赖独立的UI组件（例如: nprogress）
  4. 可以依赖vue框架，不能依赖router实例和vuex实例组件（如果依赖就说明耦合业务）

common参考结构

这个是我使用的common层的目录结构，仅供参考。

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
src/common
├── ajax
│   ├── Ajax.ts
│   ├── AjaxConfig.ts
│   ├── AjaxUtils.ts
│   ├── interceptors
│   │   ├── BackendInterceptor.ts
│   │   ├── CacheInterceptor.ts
│   │   ├── Interceptors.ts
│   │   └── LoadingInterceptor.ts
│   └── transformer
│       ├── RequestTransformer.ts
│       ├── ResponseTransformer.ts
│       └── Transformers.ts
├── axios
│   ├── axios.ts
│   └── index.d.ts
├── cookie
│   └── Cookies.ts
├── datetime
│   └── Datetime.ts
├── day
│   └── day.ts
├── downloader
│   └── Downloader.ts
├── event-bus
│   ├── EventBus.ts
│   └── index.d.ts
├── http
│   └── Http.ts
├── index.ts
├── localforage
│   └── Localforage.ts
├── logger
│   └── Logger.ts
├── numberal
│   └── numberal.ts
├── pager
│   └── Pager.ts
├── patterns
│   ├── numeric.ts
│   ├── patterns.ts
│   └── strings.ts
├── storage
│   ├── index.d.ts
│   └── Storage.ts
├── text
│   ├── formatter
│   │   └── formatter.ts
│   └── Text.ts
├── token
│   └── Token.ts
├── utils
│   └── Utils.ts
└── validation
    ├── email
    │   └── EmailValidator.ts
    ├── numeric
    │   └── NumericValidator.ts
    ├── phone
    │   └── PhoneValidator.ts
    └── Validation.ts

封装实践示例

示例：根据运行环境调整组件配置参数

logger模块简单封装，根据部署环境调整日志级别。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Logger from 'js-logger';

Logger.useDefaults();

// 可以发送到日志服务器，自己搭建个sentry日志服务
// https://sentry.io/for/javascript/
Logger.setHandler(function (messages, context) {
	// Send messages to a custom logging endpoint for analysis.
	// TODO: Add some security? (nah, you worry too much! :P)
	jQuery.post('/logs', { message: messages[0], level: context.level });
});

// 调整日志级别
if (process.env.NODE_ENV === 'production') {
  Logger.setLevel(Logger.ERROR);
} else {
  Logger.setLevel(Logger.DEBUG);
}

export default Logger;

示例：按需添加依赖

示例按需添加：很多组件内部也分成多个子组件，而且都是可以按需添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// storejs
const store: StoreJsAPI = require('store/dist/store.modern.min');
const expirePlugin = require('store/plugins/expire');
const eventsPlugin = require('store/plugins/events');
const updatePlugin = require('store/plugins/update');
// const observePlugin = require('store/plugins/observe');

// 添加插件.
store.addPlugin(expirePlugin);
store.addPlugin(eventsPlugin);
store.addPlugin(updatePlugin);
// store.addPlugin(observePlugin);

export default store;

示例：装饰原有接口，增强功能

cookies和storage这两个模块也做一些简单封装，可以做到，对写在客户端可见的数据进行编码加密，增强安全性，提高解析门槛。

  1. 进行统一封装，自动加解密

  2. 封装clear和remove方法，添加白名单

    当退出网站或者关闭网页时，进行清理时可以排除白名单属性。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Cookies, { CookieAttributes } from 'js-cookie';

const NodeRSA = require('node-rsa');
const rsaKey = new NodeRSA({b: 512});

const cookieGet = Cookies.get;
const cookieSet = Cookies.set;

// @ts-ignore
Cookies.get = function (key: string): string | undefined {
  return rsaKey.decrypt(cookieGet(key), 'base64');
}

Cookies.set = function (name: string, value: any, options?: CookieAttributes) {
  cookieSet(name, rsaKey.encrypt(value, 'base64'));
}

export const cookies = Cookies;