Question

我的Javascript项目有2个JS文件（假设abc.js，def.js）和一个html文件（index.html）。在abc.js文件中，我全局声明了一个名为inputGraph[]的数组。同样在abc.js文件中，我有一种称为assignValues()的方法，该方法用于将值分配给inputGraph[]数组。我在同一个文件getInputGraph()中有另一个方法，该方法返回inputGraph数组。在index.html文件中，我导入了以上js文件，并在<script></script>和assignValues()的{{1}}标记内导入了（我使用getInputGraph()来获取getInputGraph()数组inputGraph）。我想知道我使用这些方法的方式对吗？由于我像对象一样使用index.html数组，因此我需要为其创建一个类，还是需要将Webpack与Babel或Parcel一起使用，因为存在更多的JS文件。

abc.js

inputGraph

def.js

 var inputGraph=[];

    function assignValues(){
       for(let i=0; i<5; i++){
          inputGraph.push(i);
       }
    }

function getInputGraph(){
   return this.inputGraph;
}

index.html

//some ither functions

Answer 1

我有一个全局声明的......是我使用这些方法的方式正确吗？

不。当您说“全球”时，您就输了。

在这种情况下，使用类来封装您的graphArray，assignValue()和getInputGraph()属性确实很有意义

这种效果的东西：

class Graph {
  constructor() {
    this.graphArray = [];
  }

  assignValues() {
    // do something to this.graphArray
    // for example:
    this.graphArray.push({x: 42, y: 57});
  }

  getInputGraph() {
    // return a new graph array
    return [{x: 43, y: 58}];
  }
}

// usage
const graph = new Graph();
graph.graphArray = graph.getInputGraph();
graph.assignValues();
console.log(graph.graphArray); // [{x: 43, y:58}, {x: 42, y: 57}];

您严格不需要使用webpack或Babel，但是它们为您提供了一些通常在生产项目中难以忽视的优势：

您将获得一个捆绑文件，而不是几个文件，因此只需要一个<script src=>元素，客户端就不需要执行很多请求。
您将获得一个即使在不支持类（即IE11）的浏览器中也可以使用的文件
你得到了缩小
您可以获得依赖关系的解析（可以使用npm安装依赖项）

JS在多个文件上起作用。创建课程还是使用Webpack和Babel？

1 个答案: