/*!* 事件流程管理* version: 1.0.0-2018.07.25* Requires ES6* Copyright (c) 2018 Tiac* http://www.cnblogs.com/tujia/p/9369027.html
*/class EventFlow
{static init(){this.objs         = [];this.events       = {};this.currentEvent = '';this.currentExp   = '';}static add(selector){this.objs.push( document.querySelectorAll(selector) );return this;}static on(evt){this.events[evt]  = [];this.currentEvent = evt;return this;}static when(exp){this.currentExp = exp;return this;}static then(func){this.events[this.currentEvent].push({'exp': this.currentExp,'func': func.toString().replace(/[^\{]+\{([\s\S]+)\}$/, '$1')});this.currentExp = '';return this;}static run(){if(this.objs.length>0){let i = 0;for(let evt in this.events){let commands = '';let events   = this.events[evt];for(let i in events){if(events[i]['exp']!=''){commands += `if(${events[i]['exp']}){${events[i]['func']}}`;}else{commands += events[i]['func'];}}this.objs[i].forEach((item, i)=>{item.addEventListener(evt, function(){eval(commands);});});i++;}}this.init();}
}export default EventFlow;

执行效率并不高,当写来玩呗~

import EventFlow from './EventFlow.helper.js';EventFlow.init();EventFlow.add('.sel-type').on('change')
.when('this.value==1').then(function(){// code
})
.when('this.value==2').then(function(){// code
})
.when('this.value==3').then(function(){// code
})
.when('this.value==4').then(function(){// code
});EventFlow.add('.inp-name').on('input')
.then(function(){// code
});EventFlow.add('.inp-name').on('blur')
.then(function(){// code
});EventFlow.run();

EventFlow.helper.js 事件流程控制相关推荐

  1. JS三板斧——流程控制

    JS三板斧--流程控制 1.判断语句 前言:在js中判断语句的存在是非常广泛的,我们可以根据判断条件的数目选择合适的判断语句,条件比较少时,使用if/else if/else,条件比较多时用switc ...

  2. 【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构

    复习 JavaScript简称为JS JavaScript是什么? 是一门脚本语言:不需要编译,直接运行 是一门解释性的语言:遇到一样代码就解释一行代码 C#语言是一门面向对象的语言,也是编译语言,是 ...

  3. 02 . JS 运算符 + 流程控制

    算数运算符 ------------------------------------- console.log(1 + 1); // 2console.log(1 - 1); // 0console. ...

  4. js回调流程控制, 更高级, 更优雅

    第一次发文, 仅纪念我开源的第一个npm包esdese 始于回调 早期的时候, 用jquery的ajax都是一层套一层, 2层的时候倒还好, 一旦多了就比较麻烦了. 后来使用了promise, 虽然说 ...

  5. 通过键盘上下键 JS事件,控制候选词的选择项

    效果图 JS代码 //上下键 选择事件 searchBackgroud 为样式,只做标记,无实质样式,因为和其他样式不兼容,只能添加CSS$(document).keydown(function (e ...

  6. js的 流程控制(笔记)

    分支结构 /* if的语法结构if (表达式){执行语句} *//* 2.执行思路 如果if里面的表达式结果为真 true 者执行大括号里面的执行语句3.要是表达式的语句为假 者不执行大括号里面的语句 ...

  7. JavaScript异步流程控制的前世今生

    js的流程控制老大难问题就是异步回调. 一个流程过程,往往会出现回调地狱,这个回调异步控制就被提上研究得议程. 目前有实现的回调流程有以下几种 回调函数实现 事件监听 发布订阅 Promise/A+ ...

  8. 11月8日学习内容整理:js的引入方式,变量数据类型,运算符,流程控制,函数...

    js是一门成熟的编程语言,专门用浏览器客户端执行的语言 一.js的引入方式 1.直接在body标签中使用script标签写js语言 2.通过script标签导入js文件,<script   sr ...

  9. JS:2.1,流程控制(if,switch)高级

    ylbtech-流程控制:流程控制(if,switch)高级 if语句 if if-else if-else_if-else switch JS:2.1.0,if语句返回顶部 If 语句 如果希望指定 ...

最新文章

  1. html表格自动换行
  2. 大数据技术hadoop入门级生态圈介绍
  3. 三种方式实现分布式锁
  4. 电脑是否存在内存泄漏_STM32裸机内存管理解析
  5. C++中的namespace ----转载
  6. 只有数学老师懂的15个泪流满面的瞬间~
  7. quartus管脚分配后需要保存吗_电脑磁盘显示未分配怎么办?磁盘数据如何恢复?...
  8. Linux通过端口查找tomcat的路径
  9. java 安全认证_restful安全认证
  10. SQLSERVER到底能识别多少个逻辑CPU?
  11. 使用RecyclerView替代ListView(一)
  12. python *args 和 **kwargs
  13. ecmall商品列表页排序的完美解决方案
  14. MSDN中文版 - MSDN中文版 - 微软官方MSDN原版资源下载平台
  15. syslog工具_INAV:一款专用的日志审查导航工具
  16. 《结构思考力》如何把200ml的水倒入100ml的杯子里?
  17. n*m的格子中正方形个数和长方形个数
  18. shp数据中文乱码的一种恢复方法
  19. AES解密报错:Given final block not properly padded. Such issues can arise if a bad key is used during dec
  20. 面试官扎心一问:NIO的原理是什么机制?

热门文章

  1. 检测动态生成的单选按钮和jQuery的变化
  2. MySQL注入中load_file()函数的应用
  3. 程序员在囧途之我是一头牛
  4. 活动目录向DNS注册SRV记录不成功的原因
  5. 【转载】关于如何提取Exe文件中PPT源文件的几种方法
  6. 6月第3周回顾:广东清查ADSL共享 火狐3掀起浏览器大战
  7. 成都东软学院新生周赛(五)
  8. 使用gridlayout布局后,因某些原因又删除,并整理目录结构时,Unable to resolve target 'android-7'
  9. csrf-token
  10. Oracle多行函数