动态通过变量名来调用函数

最近在做一个监控可视化界面,里面包含了很多的板块,对于不同板块需要调用不同的函数来生成对应的界面,由于生成界面函数需要传递很多参数,刚开始自己通过各种switch语句来监测调用是哪个函数,但是感觉写了很长一段代码才解决,后来自己看了一下有没有简洁方法,写一个通类,让它自动调用,代码如下:

var typeStr = '';
function getName(type) {
    typeStr = type[0].toUpperCase();
    for(var i=1; i<type.length; i++) {
        typeStr += type[i];
    }
};
getName(type);
var draw = 'draw' + typeStr;
function drawE(fnName) {
    if(typeof(eval(fnName) == 'function')) {
        var fn = eval(fnName + '(myChart,pos,data);')
    }
};
drawE(draw);

这里主要处理的是对于type变量的判断来调用不同函数,节省代码如下:(可以忽略,只是看看它的威力有多大)

/*
* switch (pos) { case 'l1': switch (type) { case 'bar':
* setTimeout(function() { drawBar(myChart, 'l1', data); }, 200) break; case
* 'star': setTimeout(function() { drawStar(myChart, 'l1', data) }, 200)
* break; case 'grid': setTimeout(function() { drawGrid(myChart, 'l1', data) },
* 200) break; case 'pie': setTimeout(function() { drawPie(myChart, 'l1',
* data) }, 200) break; case 'line': setTimeout(function() {
* drawLine(myChart, 'l1', data) }, 200) break; case 'area':
* setTimeout(function() { drawArea(myChart, 'l1', data) }, 200) break; case
* 'dashboard': setTimeout(function() { drawDashboard(myChart, 'l1', data) },
* 200) break; case 'funnel': setTimeout(function() { drawFunnel(myChart,
* 'l1', data) }, 200) break; }; break; case 'l2': switch (type) { case
* 'bar': setTimeout(function() { drawBar(myChart, 'l2', data) }, 200)
* break; case 'star': setTimeout(function() { drawStar(myChart, 'l2', data) },
* 200) break; case 'grid': setTimeout(function() { drawGrid(myChart, 'l2',
* data) }, 200) break; case 'pie': setTimeout(function() { drawPie(myChart,
* 'l2', data) }, 200) break; case 'line': setTimeout(function() {
* drawLine(myChart, 'l2', data) }, 200) break; case 'area':
* setTimeout(function() { drawArea(myChart, 'l2', data) }, 200) break; case
* 'dashboard': setTimeout(function() { drawDashboard(myChart, 'l2', data) },
* 200) break; case 'funnel': setTimeout(function() { drawFunnel(myChart,
* 'l2', data) }, 200) break; }; break; case 'l3': switch (type) { case
* 'bar': setTimeout(function() { drawBar(myChart, 'l3', data) }, 200)
* break; case 'star': setTimeout(function() { drawStar(myChart, 'l3', data) },
* 200) break; case 'grid': setTimeout(function() { drawGrid(myChart, 'l3',
* data) }, 200) break; case 'pie': setTimeout(function() { drawPie(myChart,
* 'l3', data) }, 200) break; case 'line': setTimeout(function() {
* drawLine(myChart, 'l3', data) }, 200) break; case 'area':
* setTimeout(function() { drawArea(myChart, 'l3', data) }, 200) break; case
* 'dashboard': setTimeout(function() { drawDashboard(myChart, 'l3', data) },
* 200) break; case 'funnel': setTimeout(function() { drawFunnel(myChart,
* 'l3', data) }, 200) break; }; break; case 'b1': switch (type) { case
* 'bar': setTimeout(function() { drawBar(myChart, 'b1', data) }, 200)
* break; case 'star': setTimeout(function() { drawStar(myChart, 'b1', data) },
* 200) break; case 'grid': setTimeout(function() { drawGrid(myChart, 'b1',
* data) }, 200) break; case 'pie': setTimeout(function() { drawPie(myChart,
* 'b1', data) }, 200) break; case 'line': setTimeout(function() {
* drawLine(myChart, 'b1', data) }, 200) break; case 'area':
* setTimeout(function() { drawArea(myChart, 'b1', data) }, 200) break; case
* 'dashboard': setTimeout(function() { drawDashboard(myChart, 'b1', data) },
* 200) break; case 'funnel': setTimeout(function() { drawFunnel(myChart,
* 'b1', data) }, 200) break; }; break; case 'b2': switch (type) { case
* 'bar': setTimeout(function() { drawBar(myChart, 'b2', data) }, 200)
* break; case 'star': setTimeout(function() { drawStar(myChart, 'b2', data) },
* 200) break; case 'grid': setTimeout(function() { drawGrid(myChart, 'b2',
* data) }, 200) break; case 'pie': setTimeout(function() { drawPie(myChart,
* 'b2', data) }, 200) break; case 'line': setTimeout(function() {
* drawLine(myChart, 'b2', data) }, 200) break; case 'area':
* setTimeout(function() { drawArea(myChart, 'b2', data) }, 200) break; case
* 'dashboard': setTimeout(function() { drawDashboard(myChart, 'b2', data) },
* 200) break; case 'funnel': setTimeout(function() { drawFunnel(myChart,
* 'b2', data) }, 200) break; }; break; case 'r1': switch (type) { case
* 'bar': setTimeout(function() { drawBar(myChart, 'r1', data) }, 200)
* break; case 'star': setTimeout(function() { drawStar(myChart, 'r1', data) },
* 200) break; case 'grid': setTimeout(function() { drawGrid(myChart, 'r1',
* data) }, 200) break; case 'pie': setTimeout(function() { drawPie(myChart,
* 'r1', data) }, 200) break; case 'line': setTimeout(function() {
* drawLine(myChart, 'r1', data) }, 200) break; case 'area':
* setTimeout(function() { drawArea(myChart, 'r1', data) }, 200) break; case
* 'dashboard': setTimeout(function() { drawDashboard(myChart, 'r1', data) },
* 200) break; case 'funnel': setTimeout(function() { drawFunnel(myChart,
* 'r1', data) }, 200) break; }; break; case 'r2': switch (type) { case
* 'bar': setTimeout(function() { drawBar(myChart, 'r2', data) }, 200)
* break; case 'star': setTimeout(function() { drawStar(myChart, 'r2', data) },
* 200) break; case 'grid': setTimeout(function() { drawGrid(myChart, 'r2',
* data) }, 200) break; case 'pie': setTimeout(function() { drawPie(myChart,
* 'r2', data) }, 200) break; case 'line': setTimeout(function() {
* drawLine(myChart, 'r2', data) }, 200) break; case 'area':
* setTimeout(function() { drawArea(myChart, 'r2', data) }, 200) break; case
* 'dashboard': setTimeout(function() { drawDashboard(myChart, 'r2', data) },
* 200) break; case 'funnel': setTimeout(function() { drawFunnel(myChart,
* 'r2', data) }, 200) break; }; break; case 'r3': switch (type) { case
* 'bar': setTimeout(function() { drawBar(myChart, 'r3', data) }, 200)
* break; case 'star': setTimeout(function() { drawStar(myChart, 'r3', data) },
* 200) break; case 'grid': setTimeout(function() { drawGrid(myChart, 'r3',
* data) }, 200) break; case 'pie': setTimeout(function() { drawPie(myChart,
* 'r3', data) }, 200) break; case 'line': setTimeout(function() {
* drawLine(myChart, 'r3', data) }, 200) break; case 'area':
* setTimeout(function() { drawArea(myChart, 'r3', data) }, 200) break; case
* 'dashboard': setTimeout(function() { drawDashboard(myChart, 'r3', data) },
* 200) break; case 'funnel': setTimeout(function() { drawFunnel(myChart,
* 'r3', data) }, 200) break; }; break; };
*/

原文地址:https://www.cnblogs.com/shenwh/p/9922114.html