上一篇地址：Chrome 插件 030RateViewer
在上一次做好了个Chrome插件之后，自己一直在使用。上个版本的功能，仅仅只是去Get了一把数据，保证每天能看到汇率而已。由于最近又看上了好多宅物，因此除了能看到每天的汇率之外，更迫切的想要知道与前一天的变化。以便在较低的时候出手。（宅需果然是第一生产力）
GitHub地址：030RateViewer
注：由于Chrome已经无法直接从本地拖crx包来安装了，因此需要的话可以下载整个文件夹使用开发者模式，通过加载已解压的扩展程序来进行使用。或者使用不可名状的方法从应用商店下载。名字就是030RateViewer.
碰巧今天天凤上又吃了两把二位，于是就干脆把汇率的参照对比这一功能给加上来解解气。
其实类似的功能在上一次也已经想到了。而这一次主要实现的就是第三条。（所以根本就没有完美的需求啊）
- 萌购对于国内的IP，给出的地址是.net。而对于国外的IP给出的地址是.com。因此，如果在国外使用的话， 估计速度会有一点慢。
- 每次点开插件，其实都是一次请求。但其实不一定有这个必要。可以缓存一下，然后等过一段时间再发起请求。（毕竟也不能给对方服务器造成负担）
- 可以记录一下前一天的汇率。在第二天查看时有一个参照和对比。（甚至可以积累一点数据做一个走势图，虽然感觉没什么必要）
那么接下来就来看看对应的代码吧。因为这次使用了Bootstrap修改了样式，首先放出HTML的代码。
<!DOCTYPE html>
<html lang="UTF-8">
<head>
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/index.css" />
<script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<body>
<div id="container">
<div class = "rate-area">
<div class="row">
<div class="col-xs-8">
<p class = "rate-content text-info">Loding...</p>
</div>
<div class="col-xs-4">
<p class="arrow-icon glyphicon" aria-hidden="true" data-toggle="popover" data-placement="bottom" data-container="body"></p>
<!-- 这里使用了Bootstrap 的Glyphicons字体图标来做箭头标识，同时也是设置弹出框的元素，弹出框中显示的内容是在 js 中设定的。-->
</div>
</div>
</div>
<div class= "gate">
<button class= "desc btn btn-sm btn-block btn-primary">传送门</button>
</div>
</div>
</body>
</head>
</html>
接下来就是最关键的 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] + ': <strong>' + rateArr[1] + '</strong>');
// 当存在过去的数据时，与过去数据进行比较，并设定箭头与走势
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 + ': <strong>' + newData.rate + '</strong>');
// 设置箭头图标以及对应的颜色
$('.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设定的重要性。不过关于这个，我还是再开一篇来写吧。毕竟这篇已经足够长了，再看下去的话估计要睡着了吧。
网友评论