JS работает с несколькими файлами. Создать класс или использовать Webpack и Babel? - PullRequest
Новая
       11

JS работает с несколькими файлами. Создать класс или использовать Webpack и Babel?

1 голос
/ 07 апреля 2019

Мой проект 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() и getInputGraph() (я использую getInputGraph(), чтобы получить массив inputGraph в index.html) соответственно.Я хочу знать, правильно ли я использую эти методы?Поскольку я использую массив inputGraph точно так же, как Object, мне нужно создать для него класс или мне нужно использовать Webpack с Babel или Parcel, поскольку есть больше файлов JS.

abc.js 

 var inputGraph=[];

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

function getInputGraph(){
   return this.inputGraph;
}

def.js 

//some ither functions

index.html 

<!DOCTYPE html>
   <head>
      <script src="./abc.js"></script>
      <script src="./def.js"></script>
   </head>
   <body>
      <script>
         var graphArray = [];
         assignValues();
         graphArray = getInputGraph();
         console.log(graphArray );
      </script>
   </body>
</html>

1 Ответ

2 голосов
/ 07 апреля 2019

У меня есть глобальное заявление ...... правильно ли я использую эти методы?

Нет.В тот момент, когда вы сказали «глобально», вы проиграли.

В этом случае действительно имеет смысл использовать класс для инкапсуляции ваших 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}];

Вам не нужно строго использовать веб-пакет или Babel, но они дают вам некоторые преимущества, которые обычно трудно игнорировать в производственных проектах:

  • Вы получаете один связанный файл вместо нескольких файлов, поэтому вам нужен только один элемент <script src=>, и клиенту не нужно выполнять много запросов.
  • Вы получаете файл, которыйбудет работать даже в браузерах, которые не поддерживают классы (например, IE11)
  • Вы получаете минификацию
  • Вы получаете разрешение зависимостей (вы можете устанавливать зависимости, используя npm)
...