一个通用广告脚本数据加载的容错

作者: floyd 日期: 2015-05-16

267065

最基本的需求

写一个通用的广告脚本文件，传递不同的广告ID，加载对应的数据出来，上报数据，最后显示出来

最简单的做法

每个站点，直接请求广告地址，带上不同参数，例如这样：

    var script = document.createElement("script");
    script.src = 'ad.com?id=id1&callback=cb';
    document.body.appendChild(script);

    function cb(param){
        //do something
        new Image().src = "report.com?id=id1";
    }

以上做法存在的问题：

每个站点都需要记住请求的地址，万一地址改了，全都要改
每个站点，都需要自己去写请求，以及回调
每个站点，都需要自己去上报数据
请求失败了，怎么办？
请求时间很长，怎么办？

站点的使用，更应该关心的是：

统一的接口
只需要传ID和回调函数
返回需要的数据进行渲染页面
错误、失败、上报、超时等不需要关心

我们可以这样做

1、统一处理请求

采用类 jQuery的方式来进行jsonp请求，增加超时和错误监控

    //简易版jsonp
    ;var __GetScript = function(){
    
        //发送请求(闭包)
        //param object json参数
        //param.url 请求的地址
        //param.data 请求的参数
        //param.success 请求成功的回调
        //param.error 请求失败的回调
        function send(param){
        
            //随机函数名字，类似jquery
            var random = "script" + Math.floor(Math.random() * 100000 + 100000);
            //计时器Id，用于超时abort
            var timeId = 0;
            //创建script脚本
            var script = document.createElement("script");
            script.type = "text/javascript";
            //绑定脚本错误事件
            var onerror = script.onerror = function(){
                //如果计时器是空，则表示请求成功了
                if(!timeId)return false;
                clearTimeout(timeId);
                //回调用户错误函数
                param.error();
                //移除script标签以及对应成功函数
                document.body.removeChild(script);
                window.random = null;
            };
            //绑定全局回调成功函数
            window[random] = function(){
                
                if(!timeId)return false;
    
                clearTimeout(timeId);
                //将jsonp的参数列表，返回给用户的回调函数
                try{
                    param.success.apply(null,arguments);
                }
                catch(e){
                    //用户回调执行出错，执行错误函数
                    param.error();
                }
                //移除script标签以及对应成功函数
                document.body.removeChild(script);
                window.random = null;
            }
            
            //超时则直接返回失败，这里设置了3秒
            timeId = setTimeout(function(){
    
                //触发onerror事件
                onerror();
                
                timeId = 0;
                
            },3000);
            //script的请求，一定是在最后
            script.src = param.url + "?" + param.data + "&callback=" + random;
    
            document.body.appendChild(script);
        }
        //返回请求接口
        return send;
    }();
    
    //调用demo，这样看起来，就跟jquery的差不多了
    __GetScript({
        url : 'ad.com',
        data : 'id=id1',
        success : function(data){},
        error : function(){}
    });

2、超时、请求失败

服务器挂了，服务器卡住了，那广告位总不能显示空白吧？

用户第一次访问，服务器就挂了（这种表示无奈），显示一个加载失败的提示文案或者图标之类的，统一在广告位加上一个标识来处理
用户第一次访问成功过，但之后第二次访问的时候才挂的，那么可以考虑使用上一次成功的数据来展示

2.1 每次请求成功，缓存成功数据，格式采用json格式，旧版使用json2来支持
2.2 IE使用userData，标准浏览器用localStorage
2.3 合并新请求的数据与旧的缓存数据

    //拉取数据成功
    function getDataSucc(data,pos,cb_list){
        //移除正在请求的提示
        $(".adbase-ctn").css("background","none");
        
        //获取本地缓存数据
        var locData = getDataByLoc(pos);

        //合并与覆盖最新数据到本地中
        locData = extendData(locData,data);

        //记录当前数据，JSON对应在旧浏览器需要用第三方库`json2`
        LocalData.set(pos,JSON.stringify(locData));

        //回调给用户
        for(var i=0;i<cb_list.length;i++){
            cb_list[i](true,locData);
        }
    }

    //获取本地缓存数据
    function getDataByLoc(pos){
        //LocalData对象是操作userData和localStorage
        var data = LocalData.get(pos);

        if(!data)return {};
        //从缓存中读取的字符串，转成json对象
        return JSON.parse(data);
    }

    //合并新旧数据
    function extendData(oldData,newData){

        for(var key in newData){

            //本地没有这个数据，合并
            if(!oldData[key] || oldData[key].length < 1){
                oldData[key] = newData[key];

                continue;
            }
            //本地跟新数据都有，合并
            if((oldData[key] && oldData[key].length) && (newData[key] && newData[key].length)){

                oldData[key] = newData[key];

                continue;
            }
            //新数据没有，本地数据有，不合并
            if((oldData[key] && oldData[key].length) && (!newData[key] || newData[key].length < 1)){

                continue;
            }
            //本地没有，新数据也没有
            if((!newData[key] || newData[key].length < 1) && (!oldData[key] || oldData[key].length < 1)){

                oldData[key] = [];
            }
        }

        return oldData;
    }

3、其它收尾细节

处理完请求和缓存这两块主要的，还有一些细节需要考虑

在请求成功后，统一上报数据，该请求可以稍微往后，用setTimeout
在有数据的情况下（可能只是部分），需要针对没有数据的广告位进行显示失败的提示，例如：

    //监测是否存在空数据的广告位
    function checkNoDataCtn(){
        //循环遍历容器是否有子元素
        $(".adbase-ctn").each(function(index,item){

            if($(item).contents().length < 1)$(item).css("background","url(http://res.nie.netease.com/comm/js/nie/util/img/error.png) center center no-repeat");
        });
    }