qap最佳实战_动态代码

背景

一般性质的广告，都会走一些配置信息，客户端根据配置信息进行渲染。

一些定制化的广告，需要对服务端的配置信息进行更改，而客户端也需要根据新的配置信息进行渲染，这个周期时间有点长。而且有些个性化的广告，走配置化很难实现。

这类的需求，都是周期性，过了这个时间段就失效了。而且qap发包灰度，也会有个时间周期，为了避免发包，快速解决问题，能不能通过执行代码解决呢？

这里的配置信息，简单理解为一个接口请求，返回配置json数据。

原理

利用eval执行字符串代码

1	eval("alert('hello world')");

客户端改造

一个正常qap页面如下

import {createElement, Component, findDOMNode, render} from 'rax';
import { View } from 'nuke';

class Demo extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>{'demo'}</View>
        )
    }
}

render(<Demo />);

这里面render有第2个参数，默认的是body，利用render的第二个参数，可以将组件render指定的地方，这也就需要我们在原有页面里面预留坑位。

改造页面组件render方法

render() {
    return (
        [
            <View id={'codeAdv'} />,
            <View>{'demo'}</View>
        ]
    )
}

广告代码跟正常写代码一样

import {createElement, Component, findDOMNode, render} from 'rax';
import { View } from 'nuke';

class Adv extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>{'adv'}</View>
        )
    }
}

render(<Adv />, findDOMNode('codeAdv'));

在render那步需要更改下。

经过这样改造我们就可以在qap页面里面去执行动态代码了。

问题

这里面会有一个问题就是经过babel转义之后的js比较大，如果走后端配置接口的话，比较难支持。这里可以换个思路将广告的代码放到远端js里面去。

fetch(bundleUrl, {
    method: 'GET',
    dataType: 'text'
}).then((res) => {
    return res.text();
}).then(data => {
    eval(data);
});

这样后端配置那边只要配置bundleUrl，qap客户端稍微改造下，根据配置信息请求bundleUrl。

进一步思考

我们能够执行异步代码了，那是不是意味着qap页面可以存在多文件机制了啊。

我们可以把一些常用的js或者json数据，放到服务器，通过上面的请求方式，异步加载到qap页面，模拟了多文件。但是使用的时候需要更改写法，因为是异步了。

在qap-包大小优化里面主要是为了去除apiList，那能不能通过这种方式，将apiList放到远端js，每次用的时候请求下。这样就做到完全不需要打包apiList了，比统一入口的方法还要激进。

理论上都是可以的，但是实际的开发和维护成本比较大。这种方式适合不变更的一些js。类似apiList这种，每次需求几乎都会发生改变，而且更新到服务器，又会带来多版本问题。

所以思考适合场景很重要，尽量做到开发和维护的成本比较低。

打开远端页面

<Button onPress={()=> {
    QAP.navigator.push({
        url: 'http://img01.taobaocdn.com/top/i1/TB1f5xPQFXXXXaGXFXXdutXFXXX.js',
        settings: {
            animate: true
        }
    });
}}>qap官方Demo</Button>

qap打开新页面是支持直接打开远端的js的，利用这个就可以把一些不经常更新的页面，直接放到自己的服务器上，从而减少整个包大小了。