上一篇地址：Chrome 插件 030RateViewer
在上一次做好了個(gè)Chrome插件之后，自己一直在使用。上個(gè)版本的功能，僅僅只是去Get了一把數(shù)據(jù)，保證每天能看到匯率而已。由于最近又看上了好多宅物，因此除了能看到每天的匯率之外，更迫切的想要知道與前一天的變化。以便在較低的時(shí)候出手。（宅需果然是第一生產(chǎn)力）
GitHub地址：030RateViewer
注：由于Chrome已經(jīng)無(wú)法直接從本地拖crx包來(lái)安裝了，因此需要的話可以下載整個(gè)文件夾使用開(kāi)發(fā)者模式，通過(guò)加載已解壓的擴(kuò)展程序來(lái)進(jìn)行使用?；蛘呤褂貌豢擅麪畹姆椒◤膽?yīng)用商店下載。名字就是030RateViewer.
碰巧今天天鳳上又吃了兩把二位，于是就干脆把匯率的參照對(duì)比這一功能給加上來(lái)解解氣。
其實(shí)類似的功能在上一次也已經(jīng)想到了。而這一次主要實(shí)現(xiàn)的就是第三條。（所以根本就沒(méi)有完美的需求?。?/p>
- 萌購(gòu)對(duì)于國(guó)內(nèi)的IP，給出的地址是.net。而對(duì)于國(guó)外的IP給出的地址是.com。因此，如果在國(guó)外使用的話， 估計(jì)速度會(huì)有一點(diǎn)慢。
- 每次點(diǎn)開(kāi)插件，其實(shí)都是一次請(qǐng)求。但其實(shí)不一定有這個(gè)必要。可以緩存一下，然后等過(guò)一段時(shí)間再發(fā)起請(qǐng)求。（畢竟也不能給對(duì)方服務(wù)器造成負(fù)擔(dān)）
- 可以記錄一下前一天的匯率。在第二天查看時(shí)有一個(gè)參照和對(duì)比。（甚至可以積累一點(diǎn)數(shù)據(jù)做一個(gè)走勢(shì)圖，雖然感覺(jué)沒(méi)什么必要）
那么接下來(lái)就來(lái)看看對(duì)應(yīng)的代碼吧。因?yàn)檫@次使用了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字體圖標(biāo)來(lái)做箭頭標(biāo)識(shí)，同時(shí)也是設(shè)置彈出框的元素，彈出框中顯示的內(nèi)容是在 js 中設(shè)定的。-->
</div>
</div>
</div>
<div class= "gate">
<button class= "desc btn btn-sm btn-block btn-primary">傳送門(mén)</button>
</div>
</div>
</body>
</head>
</html>
接下來(lái)就是最關(guān)鍵的 js 部分了。由于代碼比較長(zhǎng)，就只截取相應(yīng)的內(nèi)容。完整的代碼可以去GitHub上查看。其中存儲(chǔ)的方法使用了Chrome的chrome.storage.local方法，其用法類似于HTML5的localstorage。詳細(xì)方法，請(qǐng)查閱官方文檔。
$(function() {
// 式樣上的 class 和 顯示內(nèi)容 通過(guò)一個(gè)對(duì)象常量進(jìn)行管理
//----------- 常量定義區(qū) 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: "系統(tǒng)中沒(méi)有存儲(chǔ)昨天的匯率",
INFO_OLDRATE: "昨日匯率: ",
INFO_NEWRATE: "萌購(gòu)匯率: "
};
const URL = "http://www.030buy.net/";
//------------ 常量定義區(qū) END -----------
//------------ 變量定義區(qū) START -----------
// 獲取當(dāng)前日期
var date = new Date();
var today = date.toLocaleDateString();
//------------ 變量定義區(qū) END -----------
// …… 省略中間代碼
//------------ 主邏輯區(qū)域 START------------
/*
數(shù)據(jù)結(jié)構(gòu) {
// 存放今天數(shù)據(jù)
"newData":{
"date":date 日期
"rate":rate 匯率
"arrowMark":arrowMark 相對(duì)于昨天，走勢(shì)變化
"arrowColor": arrowColor 箭頭顏色
"popMsg": popMsg 彈出窗口的內(nèi)容
}
// 存放前一天的數(shù)據(jù)
"oldData":{
"date": date
"rate": rate
"arrowMark":arrowMark
"arrowColor": arrowColor 箭頭顏色
}
}
chrome.storage.local.remove('newData'); 清除云端存儲(chǔ)
chrome.storage.local.set({'newData': newData}); 設(shè)置今天日期
chrome.storage.local.get('newData'); 獲取今天日期
每天只在打開(kāi)的第一次通過(guò)ajax來(lái)獲取最新的匯率，并且和前一天進(jìn)行比較
利用 chrome.storage.local 來(lái)判斷是否需要獲取當(dāng)天的信息
*/
// 獲取當(dāng)天的萌購(gòu)匯率并更新存儲(chǔ)
function dateRefresh(URL) {
$.get(URL, function(data) {
var rate = $(data).find('.jmall-currency').html();
var rateArr = rate.split('：'); // 切分文字表述和匯率數(shù)字，返回的數(shù)組 0 是文字描述,，1 是匯率數(shù)字
var arrowMark = ARROW.MINUS;
var arrowColor = ARROW.BLACK;
var popMsg = MSG.INFO_NORMAL;
$('.rate-content').html(rateArr[0] + ': <strong>' + rateArr[1] + '</strong>');
// 當(dāng)存在過(guò)去的數(shù)據(jù)時(shí)，與過(guò)去數(shù)據(jù)進(jìn)行比較，并設(shè)定箭頭與走勢(shì)
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;
}
// 更新新的數(shù)據(jù)
chrome.storage.local.set({
'newData': {
'date': today,
'rate': parseFloat(rateArr[1]),
'arrowMark': arrowMark,
'arrowColor': arrowColor,
'popMsg': popMsg
}
}, function() {
// showData('newData');
// 設(shè)置箭頭圖標(biāo)以及對(duì)應(yīng)的顏色
$('.arrow-icon').addClass(arrowMark).addClass(arrowColor).attr('data-content', popMsg);
$('.arrow-icon').popover();
});
});
});
}
chrome.storage.local.get('newData', function(data) {
// 第一次打開(kāi)應(yīng)用時(shí)，data.today 為 null 通過(guò) ajax 獲取當(dāng)天匯率并設(shè)置
if (!data.newData) {
// console.log('new data');
dateRefresh(URL);
} else {
// 當(dāng)存儲(chǔ)的日期不是當(dāng)天的時(shí)候，更新old，并更新匯率的箭頭符號(hào)
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>');
// 設(shè)置箭頭圖標(biāo)以及對(duì)應(yīng)的顏色
$('.arrow-icon').addClass(newData.arrowMark).addClass(newData.arrowColor).attr('data-content', newData.popMsg);
$('.arrow-icon').popover();
}
}
});
//…… 后面代碼省略
其實(shí)關(guān)于dateRefresh方法，感覺(jué)應(yīng)該還能再寫(xiě)得更簡(jiǎn)單一些。因?yàn)楝F(xiàn)在看來(lái)，這個(gè)函數(shù)實(shí)現(xiàn)的功能還是有點(diǎn)多。只是由于經(jīng)驗(yàn)和能力還欠缺，不知道怎么簡(jiǎn)化更好。特別是當(dāng)有$.get和chrome.storage這種異步方法時(shí)，沒(méi)什么頭緒。還望能得到一些指導(dǎo)。
光看上面的代碼應(yīng)該聽(tīng)枯燥的吧，下面就來(lái)放一下實(shí)際樣子的截圖吧。
當(dāng)首次打開(kāi)插件時(shí)，會(huì)通過(guò)$.get方法獲取當(dāng)天的萌購(gòu)匯率（此時(shí)會(huì)有一個(gè)Loading的文字），由于系統(tǒng)中沒(méi)有存儲(chǔ)過(guò)。所以走勢(shì)圖是 -。點(diǎn)開(kāi)箭頭處也會(huì)有文字顯示。此外，首次打開(kāi)插件的同一天內(nèi)，會(huì)采用存儲(chǔ)的內(nèi)容直接顯示。這部分因?yàn)椴惶媒貓D，所以可以看上面的代碼。
當(dāng)?shù)诙欤ɑ蛘叩贜天后）打開(kāi)時(shí)，會(huì)先比較儲(chǔ)存著的數(shù)據(jù)。然后用$.get進(jìn)行更新（此時(shí)也會(huì)有一個(gè)Loading的文字）。然后會(huì)和存儲(chǔ)的匯率進(jìn)行比較，給出對(duì)應(yīng)的走勢(shì)表示（紅色向上箭頭，綠色向下箭頭，黑色橫杠）。點(diǎn)開(kāi)后也會(huì)顯示之前存儲(chǔ)的日期和匯率。（這里的只是我用來(lái)測(cè)試效果的數(shù)據(jù)）。
到此為止，0.02版本的功能就基本實(shí)現(xiàn)了。在實(shí)現(xiàn)了和過(guò)去數(shù)據(jù)進(jìn)行對(duì)比的同時(shí)，順帶實(shí)現(xiàn)了同一天內(nèi)利用儲(chǔ)存的數(shù)據(jù)來(lái)達(dá)到提高加載速度的目的。估計(jì)下一次的話，再實(shí)現(xiàn)些什么功能呢？可能是登陸也可能是一個(gè)搜索功能？具體還是要看需求吧。
而其實(shí)在這一次的編寫(xiě)過(guò)程中，深深地感到了測(cè)試的重要性以及測(cè)試Case設(shè)定的重要性。不過(guò)關(guān)于這個(gè)，我還是再開(kāi)一篇來(lái)寫(xiě)吧。畢竟這篇已經(jīng)足夠長(zhǎng)了，再看下去的話估計(jì)要睡著了吧。
