EventFlow.helper.js 事件流程控制
/*!
* 事件流程管理
* 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 事件流程控制的更多相关文章
- js 异步流程控制之 avQ(avril.queue)
废话前言 写了多年的js,遇到过最蛋疼的事情莫过于callback hell, 相信大家也感同身受. 业界许多大大也为此提出了很多不错的解决方案,我所了解的主要有: 朴灵 event proxy, 简 ...
- Node.js中流程控制
Node.js中的流程控制可以使用async,在使用之前需要先安装,使用npm安装 npm install async --g 下面主要介绍4种流程控制的方式: 1.串行无关联:async.serie ...
- [Web 前端] 023 js 的流程控制、循环和元素的获取、操作
1. Javascript 流程控制 用于"基于不同条件执行不同的动作"的场合 1.1 if 语句 三种形式 // 第一种 if... // 第二种 if... else ... ...
- 通过键盘上下键 JS事件,控制候选词的选择项
效果图 JS代码 //上下键 选择事件 searchBackgroud 为样式,只做标记,无实质样式,因为和其他样式不兼容,只能添加CSS $(document).keydown(function ( ...
- js异步流程控制-回调
f1为耗时操作,f2依赖f1的数据,因此f2必须在f1之后执行: 个人理解是:将f2(回调函数)的代码放在异步函数内部的最后执行,相当于把同步操作的代码融合到异步函数内部的最后: let tag = ...
- 5、前端--js常量、变量、5种基本数据类型(number string boolean undefined object)、运算符、流程控制、三元运算符、函数、自定义对象、内置对象、BOM操作
变量与常量 在JS中声明变量需要使用关键字 老版本 var(全部都是全局变量) 新版本 let(可以声明局部变量) # 推荐使用let(其实问题不大) 在JS中声明常量也需要使用关键字 const # ...
- javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互
1.运算符 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- Python--前端基础之JavaScript(JS的引入方式,JS的变量、常量和标识符,JS的数据类型,运算符,流程控制,JavaScript的对象)
JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释执行的,前端脚 ...
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
随机推荐
- Intellij IDEA 自动清除无效 import 和 清除无效 import 的快捷键 ctrl+alt+o
快捷键 ctrl+alt+o 自动清除的配置方法 可以settings-general-auto import-java项,勾选optimize imports on the fly,在当前项目下会自 ...
- log4Net 高性能写入和CSV格式
最近在使用log4net,在使用之前我们必须知道文件流是如何操作的,否则就是盲人摸向...,在FileAppender.cs文件里面有LockingModelBase来控制流的锁,默认有3个子类 Ex ...
- Java多线程学习(吐血超详细总结)(转)
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 写在前面的话:此文只能说是java多线程的一个入门,其实Java里头线程完全可以写一本书了,但 ...
- SQL Server连接错误1326
全新的SQL Server 2017,在2018年末才安装上,不过使用它来管理并不复杂的几张表,占用相对较多服务器资源,确实是有些大材小用. 无论如何,安装还是比较顺利.记得2012年第一次安装SQL ...
- 【Linux】Cent OS 虚拟机开机自启动配置
一次断电,导致实体机关机了,虚拟机也连不上去,只好手动来起来. 我想增加一下自启动,让硬件开机的时候,自动启动虚拟机: 其实是有办法的,尝试了一下,也成功了,这里简单标记下. virsh autost ...
- Oracle更改redo log大小 or 增加redo log组
(1)redo log的大小可以影响 DBWR 和 checkpoint : (2)arger redo log files provide better performance. Undersize ...
- Ubuntu菜鸟入门(十七)—— E: Sub-process /usr/bin/dpkg returned an error code (1) 出错解决方案
cd /var/lib/dpkg sudo mv info info.bak sudo mkdir infosudo apt-get install shotwel
- EasyUI tab问题记录
1. 关闭当前tab 此代码放在 布局页中,然后所有的页面都可以随时关闭tab了,适当的根据你的项目,更改下js <script> function closetab(subtitle ...
- WRI$_ADV_OBJECTS表过大,导致PDB的SYSAUX表空间不足
现象监控发现sysaux表空间使用不断增加,导致表空间不足 查看过程 查看版本: SQL> select * from v$version; BANNER CON_ID ------------ ...
- Hyper-V 怎样拷贝文件至虚拟硬盘并附加到虚拟机上
对于大文件来说,通过远程桌面拷贝是件麻烦的事情,虽然简单,但速度受限太多,不推荐使用. 我工作中对于大文件的拷贝,通过创建一个新的虚拟硬盘(VHD),再把大文件拷贝至虚拟硬盘中,最后附加到虚拟机上. ...