Feng - 2018年3月
type: channel
link: http://fengyitong.name/index.php/2018/03/
description: 半山腰的风采
items: JSON.parse与JSON.stringify
items: 初探redux用法

JSON.parse与JSON.stringify
type: item
date: 2018-03-30T10:55:25+08:00
description: 平时我们用JSON.parse或者JSON.stringify的时候,经常只会传入一个参数,即:要序列化的对象或者反序列化的对象字符串.实际上这两个方法都可以传入第2个function参数去处理对应的value值.function函数支持两个参数key,value分别对应处理后的key,value,可以通过函数去动态改变对应的value值. //JSON.stringify 示范代码. let data = { test: 'test', msg: '成功', data: { value: 1, text: 'hello', time: new Date() }, time: new Date(), fun: function (a, b) { console.log(a + b); } } let jsonStr = JSON.stringify(data, (key, value) => { switch (key) { case 'test': return undefined; //返回undefined,最终不会序列化 case 'time': return value.replace('T', ' '); default: if (typeof value === 'function') { //简单处理函数的序列化方式,实际上真正的处理要复杂的多 return value.toString(); } return value; } }, 4); //stringify还支持第3个参数格式化字符串(4代表4个空格,也可以输入字符串去代替.)使用JSON.stringify的时候也要注意对象是否有toJSON这个方法.如果存在的话最终序列化会调用toJSON这个方法(一般情况不太可能重写js的序列化方法)同样的,JSON.parse也支持第2个参数去处理最终的value值. let jsonObj = JSON.parse(jsonStr, (key, value) => { if (key === 'time') { return new Date(value); } else if (typeof value !== 'object' && /^function/.test(value)) { //简单的对函数进行处理. return eval('(' + value + ')'); } return value; });这让我们有些情况下处理序列化及反序列化得到很大的灵活性,不过似乎没有找到修改key的办法(除了改写toJSON),如果有的话请千万告诉我.^_^

初探redux用法
type: item
date: 2018-03-20T22:30:26+08:00
description: 之前前端的技术栈偏向vue,针对整个生态圈环境,认为确实非常有必要看一下react,确实react的生态圈是vue没法相比的,并且react native也对我非常有意义.在阅读react技术文档过程中,redux相对理解的时间花费了长了一点.在这里记录一下,加深印象.Redux提供一个createStore函数来生成一个StorecreateStore接受第一个参数为function(我们叫做reducer),为了便于理解,以后再说后面的参数reducer函数接受两个参数,第1个是state,即当前store中存储的数据对象,可以有一个默认值.第2个是action,是一个object对象,必须要有type属性,其他属性随意.这个function的功能是根据对应type值,做出不同的处理,生成一个新的state被Store存储.接下来我们在需要做出动作改变数据的地方,使用store.dispath(action) 这里的action就是之前createStore中的reducer的第2个参数.(当然按照规定也要有一个type属性)当我们调用store.dispath的时候,Redux会自动去调之前我们传入的function,通过不同的type去做不同的处理,最后Store会根据reducer返回的对象生成一个新的store最后,还有一个最重要的store.subscribe函数,他用来注册需要监听的函数.当store中的state数据发生了变化时,他会自动调用所有注册过的函数,在注册的函数内部可以通过store.getState()获取数据快照,来对组件进行渲染.当程序庞大到一定程度时,单个reducer函数会变的非常庞大,Redux提供了combineReducers的方法.通过传入一个对象,对象中包裹多个reducer(多个reducer一般是分多个js去编写),来生成一个整体的reducer函数.使得程序维护变的简单.React-Redux则变的简单很多.他主要提供2个功能,Provider 组件 Provider组件可以把传入的store对象,传给他下面的所有子组件.并且注册组件的render函数.省去我们手动注册的过程(就是说我们可以忘记subscribe函数)connect方法 connect是一个高阶组件,他接收2个参数,第一个为映射的state,可以用他来返回你想要的筛选处理过后的state,一个是映射dispatch 用来映射你容器内需要用到的生成action的方法.最终他会返回一个函数,通过这个函数调用传入你的原始容器,将会生成一个新的容器,这个容器的props会注入你所有映射的state和映射的dispatch,来方便你使用.