比特股交易所，一个开源的去中心化的交易所，听起来就给人感觉很有前景，这几天我查看了bitshares-ui里面的部分代码，有一些收获。在GitHub上面下载下来这个项目，然后安装到自己的本地或者安装到虚拟机上面，安装方法可以参考编译比特股网页钱包这篇文章，安装之后，项目就会自动的把一些依赖和中间件下载下来安装好，这样就方便自己阅读代码。
1、整体概览
bitshares-ui这个项目是用react.js框架完成的前端页面编写，如果你对react一点也不知道也不必慌张，只要去了解下react.js 的基础就可以了，毕竟只是看其中的一些代码。采用了webpack来打包所有的模块，所以你也得知道一些关于webpack的知识。还有一些plugin、loader等等组建。
2、简析项目目录结构
主要的组成部分，在app目录里面我们可以看到，里面基本都是一些jsx、js代码，所以里面都是一些项目的逻辑组成部分，在resources目录里面，主要是生成桌面应用的一些代码。然后server.js是入口文件，在npm start 之后就会启动这个代码。启动之后，访问localhost:8080端口就可以看到网页。
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 的代码中，我们可以看出，访问网站的时候，会被网站带到app/assets/index.html的目录下面,但是在这个下面没有这个文件，通过插件从相同目录下index.hbs 模版生成的index.html，然后由react.js 生成的组件去丰富这个网页，以及一些路由去解析一些请求路径。
3、前端页面简析
通过前面的分析，我们可以很快的看出，主要的逻辑以及页面就在app这个目录下面，所以我们就直接指向这个目录，在webpack.config.js中我们发现入口文件是Main.js，跟着Main.js 就找到了AppInit.jsx 这个文件，AppInit.jsx中导入了app.jsx，在app.jsx中会看到很多的路由以及组件，基本都来自于component这个文件夹里面。一开始，我一直不明白Translate是什么，在npm官网上面看到了它的解释,React的一个组件，它利用Counterpart模块和Interpolate组件来提供多语言/本地化的文本内容。它允许切换区域设置而无需重新加载页面。说白了就是一个改变语言还不需要从新加载的一个组件。
接下来，在app.jsx中找一个组件，跟着这个组件去了解项目组成，在这个项目中有许多的中间件，第一次接触可能还是有点措手不及，中间件的功能应该去看看。由于页面比较多，我们选择Explorer这个组件来看看，那么就从app.jsx这个文件跳转到了./components/Explorer/Explorer这个文件里面，看起来还是很简洁，这都是得益于react模块化的好处。在这个文件里面，主要就是一些关于localhost:8080/explorer（如果你安装了这个项目）的一些页面
./components/Explorer/Explorer这个代码对应着这个页面可以看到在"浏览"这个大的板块下面，还有区块链、资产、账户、见证人等等7个子板块。那么在代码里面也可以看到这7个子模块对应的代码
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
}
]
};
}
对应的“link”链接就对应不同的子模块。具体的代码读者可以自己去项目中查看。查看了前端页面的构成，我们再来分析下后端的代码。
4、API简析
在比特股的项目中，有很多的API，有很大一部分都是基于bitsharesjs这个比特股的node.js 中间件以及它的一些衍生中间件如bitsharesjs-ws。实现创建交易，签名等等这些基本功能。在app目录下面的API目录下，查看applicationapi可以看出，这是一个创建账户、交易、worker的一个集合API，很多js文件都引用了这个js文件。在API目录下面的js文件其实就是对一些特有功能的封装，然后在其他的js文件中被调用。
再看看action目录下面，基本上都是以···action.js结尾的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、 总结
在比特股开源交易所这个项目，梳理一下大致的结构。打开这个项目，个人习惯首先去看package.json 这个目录，从中可以看到script这个项下面的start，从这里我们可以知道这个项目的开始是从哪里开始的
"start": "cross-env NODE_ENV=development node server.js"
一开始启动server.js,然后这个进程就会去监听8080或者8085（https）端口，在server.js中可以看到不管访问什么地址，都会被导到这里
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();
});
});
通过这里就可以去找到对应的数据，通过返回的数据构建出页面。整个的目录的结构比较清晰，主要的逻辑以及交互代码都在app这个目录下面，在app 这个目录下面有一个app.jsx 这是整个项目的核心，在这个文件里面导入了许多外部的组件。在app目录下component文件夹也是重点要关注的东西。这个目录包含了许多的.jsx文件，里面都是react的模块用于构建整个前端页面。
在项目中有比较多的中间件，如果都去了解它们的基本功能，那么这会耗费巨大的时间，所以我在看了这个项目之后发现需要去了解bitsharesjs中间件以及它的衍生中间件。
需要熟练的掌握react.js，不然很多的东西都看不明白，就会形成只知其表不知其里的尴尬局面。
个人认为像类似于比特股这样的一个开源的去中心化的交易所才是交易所的未来，区块链给我们带来了去中心化和开源，但是很多的数字货币交易所确是中心化的闭源的，这不符合区块链的精神，很容易成为一些少数人玩的东西。