2018年3月

JSON.parse与JSON.stringify

平时我们用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用法

之前前端的技术栈偏向vue,针对整个生态圈环境,认为确实非常有必要看一下react,
确实react的生态圈是vue没法相比的,并且react native也对我非常有意义.

在阅读react技术文档过程中,redux相对理解的时间花费了长了一点.在这里记录一下,加深印象.

Redux提供一个createStore函数来生成一个Store

createStore接受第一个参数为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个功能,

  1. Provider 组件

    Provider组件可以把传入的store对象,传给他下面的所有子组件.并且注册组件的render函数.省去我们手动注册的过程(就是说我们可以忘记subscribe函数)
  2. connect方法

    connect是一个高阶组件,他接收2个参数,第一个为映射的state,可以用他来返回你想要的筛选处理过后的state,一个是映射dispatch 用来映射你容器内需要用到的生成action的方法.

    最终他会返回一个函数,通过这个函数调用传入你的原始容器,将会生成一个新的容器,这个容器的props会注入你所有映射的state和映射的dispatch,来方便你使用.