这里主要介绍,我对于React Native中的DeviceEventEmitter和AsyncStorage的封装。
两个仓库:
设计思想
在应用开发中,我们经常把整个应用分成多个模块,这些模块都有各自的事件监听和持久化存储的需求,而且有些时候,对用户登陆后的信息的存储需要携带userId作为标识,方便退出时清除。
这样,我考虑将DeviceEventEmitter和AsyncStorage的key设计成数组样式,对应实际业务逻辑的层级结构。
比如登陆模块的用户登陆登出事件,其key可以分别写作:
const loginEvent = ['UserLogPart', 'login'];
const logoutEvent = ['UserLogPart', 'logout'];
登陆前和登陆后的存储信息可以记做:
const serverUrlKey = ['common', 'server_url'];
const userInfoKey = ['用户ID', 'info'];
这样在事件监听中,可以很方便的监听某一类事件,比如我们发消息的事件定义为['im', 'message_send', '会话ID']
,则我们可以监听['im', 'message_send']
即可获取每一个会话发消息的事件。
存储也是类似,可以获取或清除每一类的信息,比如我们可以直接清除['用户ID']
,则对应的['用户ID', x1, x2, ...]
等等都会被清除。
这样设计的好处是模块自己维护自己的事件,而且不会重名,不会像iOS或者Android中写很长很长的事件名来防止重名。同时结构清晰,代码易于维护,便于批量操作。
DeviceEventEmitter
封装的库位于react-native-general-listener。
这个库中的事件类型,可以是一个字符串/对象(等价于长度为1的数组),也可以是一个字符串数组。用来代表事件的层级结构。
我们有两个注册方法:
-
register
:直接注册一个事件监听,只监听完全匹配的事件。 -
registerWithSubEvent
:注册子事件监听,监听该事件自身以及所有子事件的发生。
取消注册使用unregister
方法,可以取消指定事件监听,也可以取消一个事件下的所有监听。
还有一个trigger
方法,用来触发事件,可以传递一个对象参数,用来表示触发时需要传递的状态。
以上方法的事件类型都代表事件的层次结构,可以是单一字符串或对象,或是数组类型。
详细使用方法请参考仓库的README。
AsyncStorage
封装的库位于react-native-general-storage。
存储引入了分区的概念,一般是分两个区,一个是登陆之前的common区域,一个是登陆之后的user区域。
const commonPart = '__common__';
const userPart = '__user__';
// When app start, we set the common prefix
AsyncStorage.setPrefix(commonPart, commonPart);
// When user login, we set user prefix as default prefix
const userId = '12345';
AsyncStorage.setPrefix(userPart, userId, true);
// When user logout, we unset user prefix and remove default prefix
AsyncStorage.setPrefix(userPart, null);
在App启动或者用户登陆时,设置区域前缀,setPrefix
第三个参数传true表示设置为默认区域。前缀为null则表示取消区域。
具体的使用和AsyncStorage
差不多,都是异步Promise的接口,key部分可以是一个字符串或一个数组,每个方法最后都是区域的参数,如果不传则使用默认区域。
支持方法如下:
-
set
:设置值。 -
get
:获取值。 -
remove
:删除值,单一操作。 -
merge
:合并旧值。 -
clear
:清理以key开头的所有子信息的值。 -
getKeys
:获取以key开头的所有子信息的键。
详细使用方法请参考仓库的README。