项目代码js优化尝试

最新推荐文章于 2023-06-27 16:18:05 发布

子墨爸爸

最新推荐文章于 2023-06-27 16:18:05 发布

阅读量332

点赞数

分类专栏： Js模块化开发案例分析文章标签：优化

本文链接：https://blog.csdn.net/wupd2014/article/details/53572980

版权

Js模块化开发案例分析专栏收录该内容

34 篇文章 1 订阅

订阅专栏

前段时间在做项目中，由于时间比较紧，没有好好规划，就把前端代码写了，导致后来其他同事一而再再而三的复制Copy，出现很难维护的局面，页面的逻辑布局构成为：
1、选项卡-根据选项卡取得对应的数据
2、将取得的数据呈现在echart地图、柱状图、拼图或者其他类型的图表上面
于是，在出差中有点时间，自己重新优化一下代码
这里写图片描述


function isFunction(fn) {
   //return Object.prototype.toString.call(fn)=== '[object Function]';
   return Object.prototype.toString.call(fn)==='[object Function]';
};

var PageChart = {
    echart_x: function (id) { return echarts.init(document.getElementById(id)); },
    mapChart: function (id, jsonName, dqcode, callback) {
        var chart = PageChart.echart_x(id);
        var jsonfileName = jsonName + ".json";
        $.getJSON(jsonfileName, function (data) {
            echarts.registerMap(jsonName, data);
            chart.setOption({
                series: [{
                    type: 'map',
                    map: jsonName,
                    zoom:1.1
                }]
            });
        });
        if (isFunction(callback)) {
            //callback("开始回调");
        };
    },
    BarChart: function () { return ""; },
    LineChart: function () { return ""; },
    PieChart: function () { return ""; },
    load: function (obj) {
        var len = obj.length;
        if (len == 0) { alert("初始化数据失败！"); return; }

        for (var i = 0; i < obj.length; i++) {
            if (obj[i].chartType == "map") {
                PageChart.mapChart(obj[i].id, obj[i].jsonName, obj[i].dqcode, obj[i].callback);
            } else if (type = "bar") { }
            else if (type = "pie") { }
            else {
                alert("没有合适的选项！");
            }
        }
    }
};

function option_X(id,jsonName,dqcode,type) {
    this.id = id,
    this.jsonName = jsonName,
    this.dqcode = dqcode,
    this.chartType=type
};

//调用
PageChart.load([{ id: 'map', jsonName: 'sanmingshi', dqcode: '', chartType: 'map', callback: function (res) { alert(res); } }]);