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


    最近在做一个监控可视化界面,里面包含了很多的板块,对于不同板块需要调用不同的函数来生成对应的界面,由于生成界面函数需要传递很多参数,刚开始自己通过各种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; };
    */

  • 相关阅读:
    -webkit-margin-before 及 扩展浏览器前缀、内核
    vue封装分页组件
    vue项目中使用qrcode生成二维码
    git中全局设置用户名、邮箱
    promise.all 解说
    超详细弹性盒子布局
    js对象转数组
    js取整数、取余数的方法
    数组方法大全
    Vue绑定class
  • 原文地址:https://www.cnblogs.com/shenwh/p/9922114.html
Copyright © 2020-2023  润新知