比特股交易所纲熏，一個(gè)開源的去中心化的交易所尘吗，聽起來(lái)就給人感覺很有前景，這幾天我查看了bitshares-ui里面的部分代碼兢孝，有一些收獲窿凤。在GitHub上面下載下來(lái)這個(gè)項(xiàng)目，然后安裝到自己的本地或者安裝到虛擬機(jī)上面跨蟹，安裝方法可以參考編譯比特股網(wǎng)頁(yè)錢包這篇文章雳殊，安裝之后，項(xiàng)目就會(huì)自動(dòng)的把一些依賴和中間件下載下來(lái)安裝好窗轩，這樣就方便自己閱讀代碼夯秃。
1、整體概覽
bitshares-ui這個(gè)項(xiàng)目是用react.js框架完成的前端頁(yè)面編寫痢艺，如果你對(duì)react一點(diǎn)也不知道也不必慌張仓洼，只要去了解下react.js 的基礎(chǔ)就可以了，畢竟只是看其中的一些代碼堤舒。采用了webpack來(lái)打包所有的模塊色建，所以你也得知道一些關(guān)于webpack的知識(shí)。還有一些plugin舌缤、loader等等組建箕戳。
2某残、簡(jiǎn)析項(xiàng)目目錄結(jié)構(gòu)
主要的組成部分，在app目錄里面我們可以看到陵吸，里面基本都是一些jsx玻墅、js代碼，所以里面都是一些項(xiàng)目的邏輯組成部分壮虫，在resources目錄里面澳厢，主要是生成桌面應(yīng)用的一些代碼。然后server.js是入口文件旨指，在npm start 之后就會(huì)啟動(dòng)這個(gè)代碼赏酥。啟動(dòng)之后，訪問(wèn)localhost:8080端口就可以看到網(wǎng)頁(yè)谆构。
app.use("*", function(req, res, next) {
var filename = path.join(compiler.outputPath, "index.html");
compiler.outputFileSystem.readFile(filename, function(err, result) {
if (err) {
return next(err);
}
res.set("content-type", "text/html");
res.send(result);
res.end();
});
});
在server.js 的代碼中裸扶，我們可以看出，訪問(wèn)網(wǎng)站的時(shí)候搬素，會(huì)被網(wǎng)站帶到app/assets/index.html的目錄下面,但是在這個(gè)下面沒有這個(gè)文件呵晨，通過(guò)插件從相同目錄下index.hbs 模版生成的index.html，然后由react.js 生成的組件去豐富這個(gè)網(wǎng)頁(yè)熬尺，以及一些路由去解析一些請(qǐng)求路徑摸屠。
3、前端頁(yè)面簡(jiǎn)析
通過(guò)前面的分析粱哼，我們可以很快的看出季二，主要的邏輯以及頁(yè)面就在app這個(gè)目錄下面，所以我們就直接指向這個(gè)目錄揭措，在webpack.config.js中我們發(fā)現(xiàn)入口文件是Main.js胯舷，跟著Main.js 就找到了AppInit.jsx 這個(gè)文件，AppInit.jsx中導(dǎo)入了app.jsx绊含，在app.jsx中會(huì)看到很多的路由以及組件桑嘶，基本都來(lái)自于component這個(gè)文件夾里面。一開始躬充，我一直不明白Translate是什么逃顶，在npm官網(wǎng)上面看到了它的解釋,React的一個(gè)組件，它利用Counterpart模塊和Interpolate組件來(lái)提供多語(yǔ)言/本地化的文本內(nèi)容充甚。它允許切換區(qū)域設(shè)置而無(wú)需重新加載頁(yè)面以政。說(shuō)白了就是一個(gè)改變語(yǔ)言還不需要從新加載的一個(gè)組件。
接下來(lái)伴找，在app.jsx中找一個(gè)組件妙蔗，跟著這個(gè)組件去了解項(xiàng)目組成，在這個(gè)項(xiàng)目中有許多的中間件疆瑰，第一次接觸可能還是有點(diǎn)措手不及眉反，中間件的功能應(yīng)該去看看。由于頁(yè)面比較多穆役，我們選擇Explorer這個(gè)組件來(lái)看看寸五，那么就從app.jsx這個(gè)文件跳轉(zhuǎn)到了./components/Explorer/Explorer這個(gè)文件里面，看起來(lái)還是很簡(jiǎn)潔耿币，這都是得益于react模塊化的好處梳杏。在這個(gè)文件里面，主要就是一些關(guān)于localhost:8080/explorer（如果你安裝了這個(gè)項(xiàng)目）的一些頁(yè)面
./components/Explorer/Explorer這個(gè)代碼對(duì)應(yīng)著這個(gè)頁(yè)面可以看到在"瀏覽"這個(gè)大的板塊下面淹接，還有區(qū)塊鏈十性、資產(chǎn)、賬戶塑悼、見證人等等7個(gè)子板塊劲适。那么在代碼里面也可以看到這7個(gè)子模塊對(duì)應(yīng)的代碼
class Explorer extends React.Component {
constructor(props) {
super(props);
this.state = {
tabs: [
{
name: "blocks",
link: "/explorer/blocks",
translate: "explorer.blocks.title",
content: BlocksContainer
},
{
name: "assets",
link: "/explorer/assets",
translate: "explorer.assets.title",
content: AssetsContainer
},
{
name: "accounts",
link: "/explorer/accounts",
translate: "explorer.accounts.title",
content: AccountsContainer
},
{
name: "witnesses",
link: "/explorer/witnesses",
translate: "explorer.witnesses.title",
content: Witnesses
},
{
name: "committee_members",
link: "/explorer/committee-members",
translate: "explorer.committee_members.title",
content: CommitteeMembers
},
{
name: "markets",
link: "/explorer/markets",
translate: "markets.title",
content: MarketsContainer
},
{
name: "fees",
link: "/explorer/fees",
translate: "fees.title",
content: FeesContainer
}
]
};
}
對(duì)應(yīng)的“l(fā)ink”鏈接就對(duì)應(yīng)不同的子模塊。具體的代碼讀者可以自己去項(xiàng)目中查看厢蒜。查看了前端頁(yè)面的構(gòu)成霞势，我們?cè)賮?lái)分析下后端的代碼。
4斑鸦、API簡(jiǎn)析
在比特股的項(xiàng)目中愕贡，有很多的API，有很大一部分都是基于bitsharesjs這個(gè)比特股的node.js 中間件以及它的一些衍生中間件如bitsharesjs-ws巷屿。實(shí)現(xiàn)創(chuàng)建交易固以，簽名等等這些基本功能。在app目錄下面的API目錄下嘱巾，查看applicationapi可以看出憨琳，這是一個(gè)創(chuàng)建賬戶、交易浓冒、worker的一個(gè)集合API栽渴，很多js文件都引用了這個(gè)js文件。在API目錄下面的js文件其實(shí)就是對(duì)一些特有功能的封裝稳懒，然后在其他的js文件中被調(diào)用闲擦。
再看看action目錄下面，基本上都是以···action.js結(jié)尾的js文件场梆，action顧名思義開始的意思墅冷，在accountActions.js中也是集成了一些功能，搜索或油、添加寞忿、移除、更新賬戶等等功能
accountSearch(start_symbol, limit = 50) {
let uid = `${start_symbol}_${limit}}`;
return dispatch => {
if (!accountSearch[uid]) {
accountSearch[uid] = true;
return AccountApi.lookupAccounts(start_symbol, limit).then(
result => {
accountSearch[uid] = false;
dispatch({accounts: result, searchTerm: start_symbol});
}
);
}
};
}
setCurrentAccount(name) {
return name;
}
//部分代碼
5顶岸、 總結(jié)
在比特股開源交易所這個(gè)項(xiàng)目腔彰，梳理一下大致的結(jié)構(gòu)叫编。打開這個(gè)項(xiàng)目，個(gè)人習(xí)慣首先去看package.json 這個(gè)目錄霹抛，從中可以看到script這個(gè)項(xiàng)下面的start搓逾，從這里我們可以知道這個(gè)項(xiàng)目的開始是從哪里開始的
"start": "cross-env NODE_ENV=development node server.js"
一開始啟動(dòng)server.js,然后這個(gè)進(jìn)程就會(huì)去監(jiān)聽8080或者8085（https）端口，在server.js中可以看到不管訪問(wèn)什么地址杯拐，都會(huì)被導(dǎo)到這里
app.use("*", function(req, res, next) {
var filename = path.join(compiler.outputPath, "index.html");
compiler.outputFileSystem.readFile(filename, function(err, result) {
if (err) {
return next(err);
}
res.set("content-type", "text/html");
res.send(result);
res.end();
});
});
通過(guò)這里就可以去找到對(duì)應(yīng)的數(shù)據(jù)霞篡，通過(guò)返回的數(shù)據(jù)構(gòu)建出頁(yè)面。整個(gè)的目錄的結(jié)構(gòu)比較清晰端逼，主要的邏輯以及交互代碼都在app這個(gè)目錄下面朗兵，在app 這個(gè)目錄下面有一個(gè)app.jsx 這是整個(gè)項(xiàng)目的核心，在這個(gè)文件里面導(dǎo)入了許多外部的組件顶滩。在app目錄下component文件夾也是重點(diǎn)要關(guān)注的東西余掖。這個(gè)目錄包含了許多的.jsx文件，里面都是react的模塊用于構(gòu)建整個(gè)前端頁(yè)面诲祸。
在項(xiàng)目中有比較多的中間件浊吏，如果都去了解它們的基本功能，那么這會(huì)耗費(fèi)巨大的時(shí)間救氯，所以我在看了這個(gè)項(xiàng)目之后發(fā)現(xiàn)需要去了解bitsharesjs中間件以及它的衍生中間件找田。
需要熟練的掌握react.js，不然很多的東西都看不明白着憨，就會(huì)形成只知其表不知其里的尷尬局面墩衙。
個(gè)人認(rèn)為像類似于比特股這樣的一個(gè)開源的去中心化的交易所才是交易所的未來(lái)，區(qū)塊鏈給我們帶來(lái)了去中心化和開源甲抖，但是很多的數(shù)字貨幣交易所確是中心化的閉源的漆改，這不符合區(qū)塊鏈的精神，很容易成為一些少數(shù)人玩的東西准谚。
