common
模块的单独拿出来说一下,因为common
模块设计的好,可以跨项目使用,甚至在部署成自己的私有的package
。
common
目标:主要是为了在第三方库之上做一层简单的封装,预置配置,做一层隔离,也可以在调用第三方组件时做一些埋点统一处理一些逻辑。
设计原则
- 不能有任何的业务逻辑
- 不能耦合工程的业务状态
- 不能依赖组件库,可以依赖独立的
UI
组件(例如:nprogress
) - 可以依赖
vue
框架,不能依赖router
实例和vuex
实例组件(如果依赖就说明耦合业务)
common
参考结构
这个是我使用的
common
层的目录结构,仅供参考。
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模块简单封装,根据部署环境调整日志级别。
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;
复制代码
示例:按需添加依赖
示例按需添加:很多组件内部也分成多个子组件,而且都是可以按需添加
// 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
这两个模块也做一些简单封装,可以做到,对写在客户端可见的数据进行编码加密,增强安全性,提高解析门槛。
-
进行统一封装,自动加解密
-
封装
clear
和remove
方法,添加白名单当退出网站或者关闭网页时,进行清理时可以排除白名单属性。
示例:
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;
复制代码
关注公众号,发现更多精彩