Как разделить код между файлами в JavaScript?

JavaScript — это мощный и популярный язык программирования, который широко используется для веб-разработки. Одной из ключевых особенностей JavaScript является возможность совместного использования кода между файлами. Это может быть полезно для организации больших проектов, повторного использования кода и поддержания качества кода. В этой статье мы увидим различные способы совместного использования кода между файлами в изученном JavaScript.

Подходы: Ниже приведены два разных подхода для ES5 и ES6:

Подход ES5:

Использование «глобальных» переменных/функций.Этот подход включает создание переменных или функций в глобальной области видимости, что делает их доступными из любой точки вашей кодовой базы. Недостатком этого подхода является то, что он может привести к конфликтам имен и затруднить организацию и сопровождение кода.
Использование ключевых слов «module.exports» и «require«.Этот подход основан на модульной системе CommonJS, которая использовалась в Node.js. С помощью module.exports вы можете экспортировать любую переменную, функцию или объект из файла. Чтобы использовать это экспортированное значение в другом файле, вы используете требуемую функцию для импорта экспортированного значения. Этот подход позволяет вам организовывать код в модули и широко используется для JavaScript на стороне сервера, но в среде браузера вам понадобится сборщик модулей, такой как webpack или Browserify.
Использование шаблонов модулей.Существует несколько различных шаблонов модулей, которые можно использовать для совместного использования кода между файлами в JavaScript. Одним из популярных шаблонов является шаблон раскрытия модуля, который используется для создания одной глобальной переменной, обеспечивающей доступ к группе функций и переменных. Используя этот шаблон, вы можете организовать свой код и сохранить глобальную область видимости чистой.

Подход ES6:

Использование ключевых слов «экспорт» и «импорт«.Этот подход основан на модульной системе ECMAScript, стандарте для модулей JavaScript. Ключевое слово export используется для экспорта любой переменной, функции или объекта из файла, а ключевое слово import используется для импорта этих экспортированных значений в другой файл. Этот подход широко используется для JavaScript на стороне клиента, но он также поддерживается на стороне сервера такими инструментами, как Node.js.
Использование именованного экспорта и экспорта по умолчанию.Этот подход позволяет экспортировать несколько значений из одного файла и присваивать им индивидуальные имена. Таким образом, вы можете импортировать только те значения, которые вам нужны. Это также позволяет вам установить экспорт по умолчанию, который можно импортировать без имени.
Объединение экспорта из нескольких файлов с помощью оператора export * from:эта функция позволяет вам импортировать все экспорты из файла в один объект, что может быть полезно, если вы хотите импортировать множество экспортов из одного файла.
Использование динамического импорта с функцией import():эта функция позволяет динамически загружать модули во время выполнения, что может быть полезно в сценариях, когда вам не требуется загружать весь код сразу.
Деструктурирование назначения для импорта:эта функция позволяет импортировать определенные переменные, функции или объекты путем деструктурирования оператора импорта.

Как видите, подходы ES5 и ES6 имеют свои преимущества и недостатки, и важно понимать различные варианты, прежде чем решить, какой подход использовать в вашем приложении.

Пример 1: Использование «глобальных» переменных/функций. К переменной или функции, определенной в глобальной области видимости (т. е. вне какой-либо функции или блока), можно получить доступ из любого файла. Однако использование глобальных членов данных считается плохой практикой, так как это может привести к конфликтам имен и сделать код трудным для чтения.

helper.js: файл helper.js можно создать следующим образом:

Javascript

// Defining a global function

function sum(a, b) {

return a + b;

}

// Defining another global function

function multiply(a, b) {

return a * b;

}

main.js:Затем эти функции могут быть вызваны в другом файле main.js следующим образом:

Javascript

// Function calls

console.log(sum(4, 6));

console.log(multiply(4, 6));

Вывод:

10

24

Пример 2: Использование ключевых слов «экспорт» и «импорт». Вы можете использовать ключевое слово экспорта, чтобы указать, какой код вы хотите передать, а затем использовать ключевое слово импорта, чтобы получить доступ к нему в другом файле.

helper.js:Например, файл helper.js можно создать следующим образом:

Javascript

// Defining a function to be exported

function sum(a, b) {

return a + b;

}

// Defining another function to be exported

function multiply(a, b) {

return a * b;

}

// Exporting the functions

export { sum, multiply };

main.js:Затем эти функции могут быть вызваны в другом файле main.js следующим образом:

Javascript

// Importing the exported functions

// from the helper.js file

import { sum, multiply } from './helper.js';

// Function calls

console.log(sum(4, 6));

console.log(multiply(4, 6));

Вывод:

10

24

Пример 3. Использование шаблонов модулей. Существуют различные шаблоны для организации кода в модулях, такие как шаблон раскрывающегося модуля и шаблон Одиночка. Эти шаблоны могут помочь вам структурировать код таким образом, чтобы его можно было повторно использовать, и скрыть детали реализации.

helper.js:Например, файл helper.js можно создать следующим образом:

Javascript

// Defining a Helper module

const Helper = (function () {

    // Defining a function to be exported

    function sum(a, b) {

        return a + b;

    }

    // Defining another function to be exported

    function multiply(a, b) {

        return a * b;

    }

    // Returning the functions

    return {

        sum: sum,

        multiply: multiply,

    };

})();

// Exporting the Helper module

export default Helper;

main.js: Затем эти функции могут быть вызваны в другом файле main.js следующим образом:

Javascript

// Importing the Helper module

import Helper from './helper';

// Calling the imported functions

console.log(Helper.sum(4, 6));

console.log(Helper.multiply(4, 6));

Вывод:

10

24

В заключение, существует несколько способов совместного использования кода между файлами в JavaScript. Самый современный и рекомендуемый подход — использовать ключевые слова экспорта и импорта, которые являются частью модульной системы ECMAScript. Это позволяет вам указать, каким кодом вы хотите поделиться, и получить к нему доступ из других файлов четким и лаконичным способом.

В качестве альтернативы вы можете использовать шаблоны модулей, такие как шаблон раскрывающегося модуля или шаблон Singleton, чтобы организовать свой код таким образом, чтобы его можно было повторно использовать. Однако эти подходы могут быть более подробными и могут потребовать дополнительной настройки. Вы также можете использовать глобальные переменные для совместного использования кода, но обычно это не рекомендуется, так как это может привести к конфликтам имен и затруднить понимание того, как работает ваш код.