/*!
 * 事件流程管理
 * 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 异步流程控制之 avQ(avril.queue)

    废话前言 写了多年的js,遇到过最蛋疼的事情莫过于callback hell, 相信大家也感同身受. 业界许多大大也为此提出了很多不错的解决方案,我所了解的主要有: 朴灵 event proxy, 简 ...

  2. Node.js中流程控制

    Node.js中的流程控制可以使用async,在使用之前需要先安装,使用npm安装 npm install async --g 下面主要介绍4种流程控制的方式: 1.串行无关联:async.serie ...

  3. [Web 前端] 023 js 的流程控制、循环和元素的获取、操作

    1. Javascript 流程控制 用于"基于不同条件执行不同的动作"的场合 1.1 if 语句 三种形式 // 第一种 if... // 第二种 if... else ... ...

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

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

  5. js异步流程控制-回调

    f1为耗时操作,f2依赖f1的数据,因此f2必须在f1之后执行: 个人理解是:将f2(回调函数)的代码放在异步函数内部的最后执行,相当于把同步操作的代码融合到异步函数内部的最后: let tag = ...

  6. 5、前端--js常量、变量、5种基本数据类型(number string boolean undefined object)、运算符、流程控制、三元运算符、函数、自定义对象、内置对象、BOM操作

    变量与常量 在JS中声明变量需要使用关键字 老版本 var(全部都是全局变量) 新版本 let(可以声明局部变量) # 推荐使用let(其实问题不大) 在JS中声明常量也需要使用关键字 const # ...

  7. javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互

    1.运算符 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  8. Python--前端基础之JavaScript(JS的引入方式,JS的变量、常量和标识符,JS的数据类型,运算符,流程控制,JavaScript的对象)

    JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释执行的,前端脚 ...

  9. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

随机推荐

  1. Intellij IDEA 自动清除无效 import 和 清除无效 import 的快捷键 ctrl+alt+o

    快捷键 ctrl+alt+o 自动清除的配置方法 可以settings-general-auto import-java项,勾选optimize imports on the fly,在当前项目下会自 ...

  2. log4Net 高性能写入和CSV格式

    最近在使用log4net,在使用之前我们必须知道文件流是如何操作的,否则就是盲人摸向...,在FileAppender.cs文件里面有LockingModelBase来控制流的锁,默认有3个子类 Ex ...

  3. Java多线程学习(吐血超详细总结)(转)

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 写在前面的话:此文只能说是java多线程的一个入门,其实Java里头线程完全可以写一本书了,但 ...

  4. SQL Server连接错误1326

    全新的SQL Server 2017,在2018年末才安装上,不过使用它来管理并不复杂的几张表,占用相对较多服务器资源,确实是有些大材小用. 无论如何,安装还是比较顺利.记得2012年第一次安装SQL ...

  5. 【Linux】Cent OS 虚拟机开机自启动配置

    一次断电,导致实体机关机了,虚拟机也连不上去,只好手动来起来. 我想增加一下自启动,让硬件开机的时候,自动启动虚拟机: 其实是有办法的,尝试了一下,也成功了,这里简单标记下. virsh autost ...

  6. Oracle更改redo log大小 or 增加redo log组

    (1)redo log的大小可以影响 DBWR 和 checkpoint : (2)arger redo log files provide better performance. Undersize ...

  7. 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

  8. EasyUI tab问题记录

    1.  关闭当前tab 此代码放在  布局页中,然后所有的页面都可以随时关闭tab了,适当的根据你的项目,更改下js <script> function closetab(subtitle ...

  9. WRI$_ADV_OBJECTS表过大,导致PDB的SYSAUX表空间不足

    现象监控发现sysaux表空间使用不断增加,导致表空间不足 查看过程 查看版本: SQL> select * from v$version; BANNER CON_ID ------------ ...

  10. Hyper-V 怎样拷贝文件至虚拟硬盘并附加到虚拟机上

    对于大文件来说,通过远程桌面拷贝是件麻烦的事情,虽然简单,但速度受限太多,不推荐使用. 我工作中对于大文件的拷贝,通过创建一个新的虚拟硬盘(VHD),再把大文件拷贝至虚拟硬盘中,最后附加到虚拟机上. ...