Google 图表内部模块模式

Question

我正在尝试制作一个图表模块，以避免每次我想创建图表时都重复自己。当我尝试获取模块的多个实例时出现问题。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
    <div id="ex0"></div>

    <script type="text/javascript">

        $(document).ready(function() {

            var options = {
                width: 500,
                height: 100,
                hAxis: {
                  title: 'Time'
                },
                vAxis: {
                  title: 'Popularity'
                }
            };

            var columns = [
                {
                    'type': 'number',
                    'value': 'X'
                },
                {
                    'type': 'number',
                    'value': 'Dogs'
                }
            ]

            var data = [
                    [0, 0],   [1, 10],  [2, 23],
                    [3, 17],  [4, 18],  [5, 9],
                    [6, 11],  [7, 27],  [8, 33],
                    [9, 40],  [10, 32], [11, 35],
                    [12, 30], [13, 40], [14, 42],
                    [15, 47], [16, 44], [17, 48]
                ];

            var chart1 = new Front_google_charts('ex0', columns, options, data);

            chart1.init();

        });

        var Front_google_charts = (function() {

            var htmlElement = null;
            var columns = null;
            var options = null;
            var rowsContent = null;

            function chart(e, c, o, r) {
                google.load('visualization', '1', { packages: ['corechart'] });
                google.setOnLoadCallback(this.drawChart);

                this.htmlElement = e;
                this.columns = c;
                this.options = o;
                this.rowsContent = r;
            }

            chart.prototype.setData = function() {
                var data = new google.visualization.DataTable();

                for (var i = 0; i < this.columns.length; i++) {
                    data.addColumn(this.columns[i].type, this.columns[i].value);
                }

                return data;
            }

            chart.prototype.drawChart = function() {
                var data = setData();
                data.addRows(rowsContent);
                var chart = new google.visualization.LineChart(document.getElementById(htmlElement));
                chart.draw(data, options);
            }

            chart.prototype = {

                init: function() {
                    this.drawChart();
                    return this;
                },

                setSettings: function(e, c, o) {
                    columns = c;
                    htmlElement = e;
                    options = o;
                },

                setRowsContent: function(rows) {
                    rowsContent = rows;
                }
            };

            return chart;

        })();
    </script>

</body>
</html>

如何将 google 图表功能封装在模块中？有可能吗？提前致谢

Answer 1

您可以通过以下方式在模块中插入对象：

(function() {

ObjectToInsert.doSomething();

})(ObjectToInsert);

此外，这将提高性能，因为 JavaScript 解释器将在模块的上下文中查找 doSomething 方法。

来源：

Professional JavaScript fow Web Developers - 尼古拉斯·C·扎卡斯
High Performance JavaScript - 尼古拉斯·C·扎卡斯

Answer 2

我终于做出了自己的解决方案，它确实有效：

https://github.com/termosfera/js_modules/tree/master/google_chart_module

Google 图表内部模块模式

Google chart inside module pattern

javascript

google-visualization

module-pattern