智能合约之前端优化

2018-03-28 星期三

二月十二戊戌年 【狗年】乙卯月 己未日

宜: 祈福 求嗣 开光 塑绘 斋醮

忌: 赴任

咦？什么情况？怎么是3月28日的文章？对！你没有看错。由于3月28日时间太匆忙，放了一张占位图，加上昨天的文章主要是视频，然而腾讯视频今天早上才给我审核通过。所以将今天的文章同3月28日文章合并发。

那么今天合并后的文章聊点什么呢？今天将vue开发智能合约前端界面优化了下，可以聊聊。最开始是在app.vue里install注入web3和instance。然后每一个页面获取web3，加上xxx..deployed().then()来做的。一开始我知道这是一种临时方案，因为自己玩vue势必时间不够，所以先这样搞的。

先看看优化前的代码吧

可以看到，代码相当的冗余，而且经常性的找不到web3这个库，也经常性的找不到instance。其实vue做智能合约前端交互，都会使用window.addEventListener('load', function() {}); 来让web3等加载完后再去同链上数据交互，这毕竟是真金白银啊，不容有错。

看看优化后的代码

可以看到优化后，不会每次都去deployed,大大改善了代码的冗余度。说实话这都是前端的知识，所以并不算区块链方面的。接下来就是像开发一个普通的vue一样愉快的玩耍了。

比如说这样

在要使用的地方直接 this.instance 打点调用solidity里的函数即可，是不是很溜。大家一块来玩啊~~

分享结束，荆轲刺秦王~~

我的ENS打赏地址： huarxia.eth

我的github地址：https://github.com/huarxia