EventBus

一. 大致的使用方法 <div id="app" style="padding-left: 100px"> <g-collpase> <g-collapse-item title="标题1">内容1</g-collapse-item> <g-collapse-item title="标题2">内容2</g-collapse-item> <g-collapse-item title="标题3">内容3</g-collapse-item> </g-collpase> </div> 二. 完成最外部的样式 //collapse <style lang="scss" scoped> $grey: #ddd; $border-radius: 4px; .collapse { border: 1px solid $grey; border-radius: $border-radius; } </style> //collapse-item.vue <style lang="scss" scoped> $grey: #ddd; $border-radius: 4px; .collapseItem { > .title { border: 1px solid $grey; margin-top: -1px; margin-left: -1px; margin-right: -1px; } &

基于EventBus 3.1.1 主要参考： EventBus 3.0 源码分析 在其基础上添加了些个人理解，建议直接看参考原文 注册订阅者 EventBus.getDefault().register(this) 获取默认的 EventBus 实例 在程序中创建多个EventBus 的实例，每个EventBus可看做一个管道，管道间相互独立 getDefault() 就是获取一个全局默认的管道, 因为多数场景下只需要用一个 EventBus 实例即可（尤其事件的收发需要同一个实例，所以提供了默认的实例的获取方法） EventBusBuilder 设置的是 EventBus 的配置信息 ，即EventBus可能有几个属性在不同的应用场景下需要有不同的值；同时EventBus也有都是固定值的属性，这些直接在EventBus初始化时赋值或初始化即可 EventBus 的几个成员变量 a. subscriptionsByEventType : Map<Class<?>, CopyOnWriteArrayList> b. typesBySubscriber : Map<Object, List<Class<?>>> c. stickyEvents : Map<Class<?>, Object> public static EventBus getDefault ( ) { if (

EventBus 3.0 的基本使用 1.什么是EventBus？ EventBus 是一个Android端优化的publish/subscribe消息总线，简化了应用程序内各组件间、组件与后台线程间的通信。比如请求网络，等网络返回时通过Handler或Broadcast通知UI，两个Fragment之间需要通过Listener通信，这些需求都可以通过EventBus实现。 2.使用EventBus有什么好处？ 采用消息发布/订阅的一个很大的优点就是代码的简洁性，并且能够有效地降低消息发布者和订阅者之间的耦合度。 3.EventBus 3.0 的使用 在 AndroidStudio中添加依赖： compile ‘org.greenrobot:eventbus:3.0.0’ 2.注册和注销 你需要在一个Activity或者Fragment中注册eventbus事件，然后定义接收方法，这和Android的广播机制很像，你需要首先注册广播，然后需要编写内部类，实现接收广播，然后操作UI,在EventBus中，你同样需要这么做。比如： @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout

1. 点击出现下划线的问题 // tabs-item.vue methods: { xxx() { this.eventBus.$emit('update:selected', this.name, this) } } // tabs.vue mounted(){ this.eventBus.$emit('update:selected', this.selected) } // tabs-head created(){ this.eventBus.$on('update:selected', (item, vm) => { console.log(item) console.log(vm) // 初始化的时候打印出的值为undefined }) } // 为了解决初始化打印出为undefined的问题 // tabs.vue 通过两层循环解决找到item mounted(){ this.$children.forEach((vm)=>{ if(vm.$options.name === 'GuluTabsHead'){ // 找儿子 vm.$children.forEach((childVm)=>{ // 找孙子 if(childVm.$options.name === 'GuluTabsItem' && childVm.name === this.selected){ this

1. 课前水平自测 要对 JS,CSS,SVG 非常了解才能造 UI 轮子 2. 没有需求就不要写代码,没有设计稿也不要写代码 没有设计稿就问设计要，不给就闹，把事情闹的越大越好，只要不写代码做什么都是对的 3. 单元测试是重构的前提 单元测试能保证大概率没有 Bug 4. 对于工具的使用,学 ES/SCSS/Webpack 能用就行 5. 设计模式 发布订阅模式，tabs 组件里的 eventBus,emit/on/off,发布订阅模式一定要有发布者，订阅者和事件中心 单项数据流-tabs 组件，collapse,收到数据更新，自己不改通知父亲改,这改 React 奠定了基础,越是复杂的数据，越是要用单向数据流 正交,两个 props 不能相互影响,也就是说所有的属性不要控制同一个东西。 判断是否正交的依据在于，一个属性任意的改会不会影响另一个属性。 可测试代码 添加属性为了测试的时候选中这个属性,比如添加:data-name="name" 不要让人思考 即使是一行也要抽出来，作为一个函数。 6. 面向离职写代码的好处 所有东西文档化 被观察感->严格要求 团队中表现优异, 写完轮子不给升职加薪就好走了 最后,个人微信,欢迎交流！ 本文由博客一文多发平台 OpenWrite 发布！ 来源： oschina 链接： https://my.oschina.net/u/4448260

1. 如果给一个标签一个class,标签本身又有class,vue是默认会合并的。只有两个属性是这样一个是class,一个是style。这样就比较好改样式。 <g-tabs-head class="red"></g-tabs> 2. 组件的结构以及selected的传递过程，见下图。 没有点击的图 发生了点击操作的图，两个item兄弟之间是没有关系的，发生了点击操作之后要做下图中的五件事情。 亮自己 熄兄弟 亮pane 熄pane 触发事件 update:selected -> item2 3. 接下去考虑代码的实现，有两种方案 第一种爷爷爸爸儿子之前互相通信 用事件中心EventHub或者叫EventBus发布订阅模式实现,这种简单 4. 下划线开头的属性不要用是私有属性给vue用的,$开头的属性是专门可以用的 5. 在爷爷tabs组件上面加了privide后代都可以用，其他的属性只提供给儿子不提供给孙子,只有provide是任何后代都可以访问的。 // tabs.vue这样就有了eventBus data(){ return { eventBus: new Vue() } }, provide(){ return { eventBus:this.eventBus } }, created(){ console.log('爷爷的eventBus') console.log

1. 注册EventBus: register(Object subscriber) 获取该subscriber的SubscribeMethod列表； List<SubscriberMethod> subscriberMethods 执行 subscriberMethodFinder.findSubscriberMethods(subscriberClass) 获取 List<SubscriberMethod> ; 执行 findUsingReflectionInSingleClass() 反射获取subscriber中所有methods，Subscribe注解的Method会记录在 SubscriberMethodFinder.FindState.subscriberMethods() ； 遍历SubscribeMethod列表执行 subscribe(subscriber, subscriberMethod) ； 更新 Map<Class<?>, CopyOnWriteArrayList<Subscription>> subscriptionsByEventType ，该字段表示：某个Event对应哪些@Subscribe注解的方法； 更新 Map<Object, List<Class<?>>> typesBySubscriber ，该字段表示

前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？ 方法一、 props / $emit 父组件A通过props的方式向子组件B传递。 1.父组件向子组件传值 接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"] //App.vue父组件 <template> <div id="app"> <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名 </div> </template> <script> import Users from "./components/Users" export default { name: 'App', data(){ return{ users:["Henry","Bucky","Emily"] } }, components:{ "users":Users } } 复制代码 /

　　Vue是数据驱动视图更新的框架，所以对于vue来说组件间的数据通信非常重要。 　　常见使用场景可以分为三类: 父子组件通信: props / $emit $parent / $children provide / inject ref $attrs / $listeners 兄弟组件通信: eventBus Vuex 跨级通信: eventBus Vuex provide / inject $attrs / $listeners 一、props / $emit （最常用的组建通信方式） 　　 父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。 　　1. 父组件向子组件传值（props） 传入一个静态的值 　　<blog-post title="My journey with Vue"></blog-post> 传入一个动态的值， 任何 类型的值都可以传给一个 prop。 　　<blog-post v-bind:title="post.title"></blog-post> 　　<blog-post v-bind:likes="42"></blog-post> 　　<blog-post v-bind:is-published="false"></blog-post> 　　<blog-post v-bind:comment-ids="[234,

参考文章： EventBus使用详解 一、EventBus基本使用 1.定义传递事件类 public class MessageEvent { public String Message ; public MessageEvent ( String message ) { Message = message ; } } 2.设置事件订阅者 /* 订阅者 */ @Subscribe ( threadMode = ThreadMode . MAIN ) public void getMessage ( MessageEvent messageEvent ) { button . setText ( messageEvent . Message ) ; View } 在ThreadMode 枚举中定义了4个线程模式 1、PostThread：事件响应函数和事件发布在同一线程中执行。这个是默认值，这样可以避免线程切换。 2、MainThread：事件响应函数会在Android应用的主线程(大部分情况下都是UI线程)中执行。 3、BackGround：事件响应函数会在一个后台线程中执行。如果事件发布函数不是在主线程中，则会立即在事件发布线程中执行响应函数。如果事件发布函数在主线程中，EventBus则会在唯一的一个后台线程中按照顺序来执行所有的后台事件响应函数。 4、Async