Chrome 插件 030RateViewer 0.02版更新

上一篇地址：Chrome 插件 030RateViewer

在上一次做好了个Chrome插件之后，自己一直在使用。上个版本的功能，仅仅只是去Get了一把数据，保证每天能看到汇率而已。由于最近又看上了好多宅物，因此除了能看到每天的汇率之外，更迫切的想要知道与前一天的变化。以便在较低的时候出手。（宅需果然是第一生产力）

GitHub地址：030RateViewer
注：由于Chrome已经无法直接从本地拖crx包来安装了，因此需要的话可以下载整个文件夹使用开发者模式，通过加载已解压的扩展程序来进行使用。或者使用不可名状的方法从应用商店下载。名字就是030RateViewer.

碰巧今天天凤上又吃了两把二位，于是就干脆把汇率的参照对比这一功能给加上来解解气。
其实类似的功能在上一次也已经想到了。而这一次主要实现的就是第三条。（所以根本就没有完美的需求啊）

• 萌购对于国内的IP，给出的地址是.net。而对于国外的IP给出的地址是.com。因此，如果在国外使用的话， 估计速度会有一点慢。

• 每次点开插件，其实都是一次请求。但其实不一定有这个必要。可以缓存一下，然后等过一段时间再发起请求。（毕竟也不能给对方服务器造成负担）
• 可以记录一下前一天的汇率。在第二天查看时有一个参照和对比。（甚至可以积累一点数据做一个走势图，虽然感觉没什么必要）

---

那么接下来就来看看对应的代码吧。因为这次使用了Bootstrap修改了样式，首先放出HTML的代码。

    
    
    
    
    
    
        

            

                

                    

                        
Loding...
                    
                    

                        

                        
                    
                
            
            

                传送门
            
        
    

接下来就是最关键的 js 部分了。由于代码比较长，就只截取相应的内容。完整的代码可以去GitHub上查看。其中存储的方法使用了Chrome的chrome.storage.local方法，其用法类似于HTML5的localstorage。详细方法，请查阅官方文档。

$(function() {
    // 式样上的 class 和 显示内容 通过一个对象常量进行管理
    //----------- 常量定义区 START ---------
    const ARROW = {
        UP: "glyphicon-arrow-up",
        DOWN: "glyphicon-arrow-down",
        MINUS: "glyphicon-minus",
        BLACK: "arrow-icon-black",
        RED: "arrow-icon-red",
        GREEN: "arrow-icon-green"
    };

    const MSG = {
        INFO_NORMAL: "系统中没有存储昨天的汇率",
        INFO_OLDRATE: "昨日汇率: ",
        INFO_NEWRATE: "萌购汇率: "
    };

    const URL = "http://www.030buy.net/";
    //------------ 常量定义区 END -----------

    //------------ 变量定义区 START -----------
    // 获取当前日期
    var date = new Date();
    var today = date.toLocaleDateString();
    //------------ 变量定义区 END -----------

    // …… 省略中间代码

    //------------ 主逻辑区域 START------------
    /*  
        数据结构 {
            // 存放今天数据
            "newData":{
                "date":date  日期
                "rate":rate 汇率
                "arrowMark":arrowMark 相对于昨天，走势变化
                "arrowColor": arrowColor 箭头颜色
                "popMsg": popMsg 弹出窗口的内容
            }
            
            // 存放前一天的数据
            "oldData":{
                "date": date
                "rate": rate
                "arrowMark":arrowMark
                "arrowColor": arrowColor 箭头颜色
            }
        }

        chrome.storage.local.remove('newData'); 清除云端存储
        chrome.storage.local.set({'newData': newData}); 设置今天日期
        chrome.storage.local.get('newData'); 获取今天日期
        每天只在打开的第一次通过ajax来获取最新的汇率，并且和前一天进行比较
        利用 chrome.storage.local 来判断是否需要获取当天的信息
    */

    // 获取当天的萌购汇率并更新存储
    function dateRefresh(URL) {
        $.get(URL, function(data) {
            var rate = $(data).find('.jmall-currency').html();
            var rateArr = rate.split('：'); // 切分文字表述和汇率数字，返回的数组 0 是文字描述,，1 是汇率数字
            var arrowMark = ARROW.MINUS;
            var arrowColor = ARROW.BLACK;
            var popMsg = MSG.INFO_NORMAL;

            $('.rate-content').html(rateArr[0] + ': ' + rateArr[1] + '');

            // 当存在过去的数据时，与过去数据进行比较，并设定箭头与走势
            chrome.storage.local.get('oldData', function(data) {
                if (data.oldData) {
                    var oldData = data.oldData;
                    arrowMark = (parseFloat(rateArr[1]) == parseFloat(oldData.rate) ? ARROW.MINUS : (parseFloat(rateArr[1]) > parseFloat(oldData.rate) ? ARROW.UP : ARROW.DOWN));
                    arrowColor = (arrowMark == ARROW.MINUS ? ARROW.BLACK : (arrowMark == ARROW.UP ? ARROW.RED : ARROW.GREEN));
                    popMsg = MSG.INFO_OLDRATE + ' (' + oldData.date + ') ' + oldData.rate;
                }

                // 更新新的数据
                chrome.storage.local.set({
                    'newData': {
                        'date': today,
                        'rate': parseFloat(rateArr[1]),
                        'arrowMark': arrowMark,
                        'arrowColor': arrowColor,
                        'popMsg': popMsg
                    }
                }, function() {
                    // showData('newData');
                    // 设置箭头图标以及对应的颜色
                    $('.arrow-icon').addClass(arrowMark).addClass(arrowColor).attr('data-content', popMsg);
                    $('.arrow-icon').popover();
                });
            });
        });
    }

    chrome.storage.local.get('newData', function(data) {
        // 第一次打开应用时，data.today 为 null 通过 ajax 获取当天汇率并设置
        if (!data.newData) {
            // console.log('new data');
            dateRefresh(URL);
        } else {
            // 当存储的日期不是当天的时候，更新old，并更新汇率的箭头符号
            if (data.newData.date != today) {
                chrome.storage.local.set({
                    'oldData': data.newData
                }, function() {
                    chrome.storage.local.get('oldData', function(data) {});
                    dateRefresh(URL);
                });
            } else {
                var newData = data.newData;
                $('.rate-content').html(MSG.INFO_NEWRATE + ': ' + newData.rate + '');
                // 设置箭头图标以及对应的颜色
                $('.arrow-icon').addClass(newData.arrowMark).addClass(newData.arrowColor).attr('data-content', newData.popMsg);
                $('.arrow-icon').popover();
            }
        }
    });

//…… 后面代码省略

其实关于dateRefresh方法，感觉应该还能再写得更简单一些。因为现在看来，这个函数实现的功能还是有点多。只是由于经验和能力还欠缺，不知道怎么简化更好。特别是当有$.get和chrome.storage这种异步方法时，没什么头绪。还望能得到一些指导。

光看上面的代码应该听枯燥的吧，下面就来放一下实际样子的截图吧。

当首次打开插件时，会通过$.get方法获取当天的萌购汇率（此时会有一个Loading的文字），由于系统中没有存储过。所以走势图是 -。点开箭头处也会有文字显示。此外，首次打开插件的同一天内，会采用存储的内容直接显示。这部分因为不太好截图，所以可以看上面的代码。

当第二天（或者第N天后）打开时，会先比较储存着的数据。然后用$.get进行更新（此时也会有一个Loading的文字）。然后会和存储的汇率进行比较，给出对应的走势表示（红色向上箭头，绿色向下箭头，黑色横杠）。点开后也会显示之前存储的日期和汇率。（这里的只是我用来测试效果的数据）。

---

到此为止，0.02版本的功能就基本实现了。在实现了和过去数据进行对比的同时，顺带实现了同一天内利用储存的数据来达到提高加载速度的目的。估计下一次的话，再实现些什么功能呢？可能是登陆也可能是一个搜索功能？具体还是要看需求吧。

而其实在这一次的编写过程中，深深地感到了测试的重要性以及测试Case设定的重要性。不过关于这个，我还是再开一篇来写吧。毕竟这篇已经足够长了，再看下去的话估计要睡着了吧。