
/*! * 事件流程管理 * 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();