RRI技术心得

在RRI（retrospect, refactor,imporve）这个过程中，我主要对st-tree-view进行了开发，下面总结一下组件开发过程中的几点心得体会。

event-bus的使用

使用场景

一般bus的使用场景是子组件传事件到祖先组件，或者兄弟组件之间的互传(当然你用传统的两次emit也可以实现)。

使用方法

组件中需要子传祖先（st-tree-view-item.vue（儿子）->st-tree-view.vue（父亲）->hello.vue（祖先）），所以使用到了event-bus，我尝试了两种方法： 方法1： 在index.vue中引入bus

// index.vue <script> import Vue from 'vue' import stTreeView from './st-tree-view' // 参考https://tiicle.com/items/159/the-use-of-a-global-event-bus-instead-of-the-general-manager const EventBus = new Vue() Object.defineProperties(Vue.prototype, { __bus: { get () { return EventBus } } }) Vue.component('st-tree-view', stTreeView) </script> // st-tree-view-item.vue this.__bus.$emit('node-click', { dom: event.target, node: that.model, component: that }) // hello.vue this.$bus.$on('node-click', (data) => { console.log('node-click', data) })

方法2： 新建bus.js文件

// bus.js import Vue from 'vue' export default new Vue() // st-tree-view-item.vue import Bus from './bus.js' Bus.$emit('node-click', { dom: event.target, node: that.model, component: that }) // st-tree-view.vue import Bus from './bus.js' Bus.$on('node-click', (data) => { this.$emit('node-click', data) }) // hello.vue st-tree-view(@node-click="handleClick")

推荐方法2，因为(1)有可能bus的命名会和全局冲突(2)需要改全局的index.vue文件比较麻烦，不方便使用。

API设计

因为之前用的是element的组件，所以在api设计上面主要都是借鉴(chao)为主，因为别人已经写好的组件总是考虑了各个方面，比你自己去想的要全面很多。尽量让组件本身功能足够丰富和可配置留下足够多的钩子，便于client定制和修改

困难

最困难的是理解老师的tree.ls文件，推荐个网站：http://livescript.net/，将ls转js，然后这样就好理解多了，当然，以后还是要写ls的，还是抽空学一学比较好。需求上面，刚拿到老师写了一半的这个组件，感觉已经都被写完了，没什么好写了，后来重新看了一遍需求文档，要让这个组件做到通用，确实还有很多没写的地方。开始觉得这个组件的设计不太合理，因为 刚开始觉得项目中应该做成navMenu组件(上图)，而不是tree组件（下图），后来发现我这样想是错误的，因为项目中的层级需要我们自己去配置，层级有可能很深很深（像百度云盘那么深，最深可能到7层），因此，只能设计成为tree组件（组件的设计一定要从需求出发）。