我正在尝试制作一个图表模块，以避免每次我想创建图表时都重复自己。当我尝试获取模块的多个实例时，问题就出现了。
<!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 图表功能封装在模块内？有可能吗？ 提前致谢
最佳答案
您可以通过以下方式在模块中插入对象:
(function() {
ObjectToInsert.doSomething();
})(ObjectToInsert);
此外，这还将提高性能，因为 JavaScript 解释器将在模块上下文中查找 doSomething 方法。
来源:
- Professional JavaScript fow Web Developers - 尼古拉斯·C·扎卡斯
- High Performance JavaScript - 尼古拉斯·C·扎卡斯
关于javascript - 模块模式内的 Google 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27823397/