利用自定义事件机制解决回调地狱

起因

要写一个部门选择组件：一个输入框，点击弹窗，显示部门树。点击部门树显示已选中部门。点击选中部门条目中的删除图标，删除选中部门。点击确定按钮将选中数据填充到输入框。。

经过

• 事件按顺序发生，一个套一个，正常写的话一个事件回调套一个事件回调，每个回调中可能要做很多事。。。酸爽。
• 那就改进吧，用$.Deferred()将回调移出来。但是，一旦调用 $.Resolve()，所有回调都会被触发，也就说弹窗弹出、关闭的回调会同时触发，所以需要一个字段来判断是弹窗弹出还是弹窗关闭。。，并且后续回调形如：

	defer.done(function(type,data){
		if(type!=='pop') return ;
		//pop回调的后续操作
		。。。
	})

意义不明，一大堆，恶心。

结果

突然想到利用在统一元素上的的自定义事件来解决，将事件都绑定在输入框元素上。所有的事件回调中不在进行其他函数调用，而是触发自定义事件 $input.trigger(xxx,data)，代码就可以变成这样：

init:function(){
               let that = this;
               //点击展示弹窗
               this.input_elem.click(function(){
                   that.showPop();
               });
               //弹窗成功
               this.input_elem.on('pop_success',function(){
                   //展示部门树
                   that.initDeptTree();
                   that.initSelected();
                   //初始化关闭按钮
                   that.initConfirmBtn();
                   //点击删除选中
                   that.initDelBtn();

               });
               //部门树点击事件
               this.input_elem.on('dept_click',function(){
                   that.renderSelected();
               });

               //关闭时填充选择结果
               this.input_elem.on('pop_end',function () {
                   that.fillResult();
               });

           },

所有步骤都在init中列出来了，且清晰易懂，完美。