Question

所以，我正在这个网站上工作并创建了多个图表（除了我在每个图表中绘制的数据之外，它们都非常相似）。目前，我有javascript文件，每个图表一个，其中包含大部分相同的功能和变量（高度，宽度等），唯一的区别在于数据的来源和其他一些东西。

但是，我希望能够将这些javascript文件中的几个包含到网页中（以便所有图表一起显示）。但这不起作用，因为javascript文件中有常见的变量和函数名称（因为它们几乎是相同的脚本，如上所述）。 避免此冲突的最佳方法是什么，以便我可以在同一网页中包含多个图表？

我认为将公共代码分解出来可能是一个好主意，也许它可以让每个图表都是某个对象的实例。如果每个图表都是一个“图表”对象的实例，是否允许我在同一个网页中包含多个html / javascript文件？

如果问题含糊不清或已被问过，请道歉！

编辑：所以我稍后会发布特定的代码，但我的javascript文件基本上是这样的：

chartA.js:
var height = 10;
var width = 40;
var colors = ...;
var dataSource = chartA_data.json
function addDataToChart(source) {
    //this adds the data in source to the html for chartA
}
addDataToChart(dataSource);

 chartB.js:
 var height = 10;
 var width = 40;
 var colors = ...;
 var dataSource = chartB_data.json 
 function addDataToChart(source) {
    //this adds the data in source to the html for chartA
}
 addDataToChart(dataSource);

所以，基本上，除了dataSource变量之外，两个js文件是相同的。使用chartA和chartB作为对象的实例创建图表对象是否有效？

Answer 1

创建图表对象，将chartA和chartB作为实例对象，工作？

这绝对是一种做法。这个例子过于简单了，但你会明白这个想法：

＆＃13;

"Undefined function 'det' for input arguments of type 'cell'."

＆＃13;

function Chart(args) {
  this._name = args.name;
  this._height = args.height;
  this._width = args.width;
  this._dataFetchingStrategy = args.dataFetchingStrategy;
  
  //You may not want to call the rendering process immediately, but
  //it was simpler for the example
  this._render();
}

Chart.prototype = {
  constructor: Chart,
  
  _render: function () {
    var el = this.el = document.createElement('div');
    el.classList.add('chart');
    el.style.height = this._height + 'px';
    el.style.width = this._width + 'px';
    el.appendChild(document.createTextNode(this._name));
    this._contentEl = el.appendChild(document.createElement('div'));
    this.refresh();
  },
  
  refresh: function () {
    this._dataFetchingStrategy(function (data) {
      this._contentEl.innerHTML = data;
    }.bind(this));
  }
};


[
  new Chart({ 
    name: 'Chart A', 
    height: 100, 
    width: 100,
    dataFetchingStrategy: function (cb) {
      cb('Data for chart A');
    }
  }),
  
  new Chart({ 
    name: 'Chart B', 
    height: 150, 
    width: 200,
    dataFetchingStrategy: function (cb) {
      setTimeout(cb.bind(null, 'Data for chart B'), 1500);
    }
  })
].forEach(function (chart) {
  document.body.appendChild(chart.el);
});

＆＃13;

Javascript - 创建同一对象的实例并分解公共代码

1 个答案: