Кодом (и почти всем остальным) легче управлять, когда он разбит на небольшие куски. Это мышление, лежащее в основе сохранения функций только для одной задачи или наличия файлов, содержащих только несколько или один компонент за раз. Если у вас сложное приложение и вам нужно пролистать сотни или тысячи строк кода, тогда работа по отладке или простому пониманию приложения становится намного сложнее.
К счастью, Javascript помогает нам в этом, имея «импорт» и «экспорт». Вот как вы можете написать код в одном файле и поделиться этим кодом, чтобы его можно было использовать в другом файле или файлах.
В примерах, которые я собираюсь рассмотреть в этой статье, будут использоваться Node.js и React.js. Файлы React были созданы с помощью create-react-app. Я начну с рассмотрения примера ES5 в Node, в котором используются операторы require, а затем покажу то же самое, используя операторы импорта ES6.
Пример ES5
Использование синтаксиса ES5 в Node означает, что совместное использование кода между файлами осуществляется с помощью операторов «require» и «module.exports». «Модуль» в Javascript можно рассматривать как контейнер, содержащий связанный код, который затем можно экспортировать в другой файл.
Вот первые три строки для приложения React, которое сначала будет отображать на странице три цветных блока.
//App.js
var React = require('react');
var Component = React.Component;
require('./App.css');
var Color = require('./Shapes');
Это настройка нескольких переменных и требует несколько файлов и библиотек. Первый - React, который устанавливается равным библиотеке «react» с помощью оператора «require». Второй - Component, который равен модулю Component библиотеки React. Третья строка просто использует «require» для включения файла .css, который не нужно устанавливать в качестве переменной. И, наконец, переменной Color присваивается значение того, что экспортируется из файла «Shapes.js», который мы вскоре увидим.
Остальная часть этого файла выглядит так.
//App.js
class App extends Component {
render() {
return (
<div className="App">
<div className="colors">
<Color name="red"/>
<Color name="green"/>
<Color name="blue"/>
</div>
</div>
);
}
}
module.exports = App;
Это определение компонента приложения, который вызывает три компонента Color и, наконец, экспортирует этот компонент с module.exports.
Компонент Color выглядит очень похоже.
//Shapes.js
var React = require('react');
var Component = React.Component;
class Color extends Component {
render() {
const divStyle = {
backgroundColor: this.props.name,
color: 'white',
fontSize: '20px',
height: '100px',
width: '100px'
}
return (
<div style={divStyle}>{this.props.name}</div>
)
}
}
module.exports = Color;
Опять же, требуя необходимых библиотек React, определяя компонент и экспортируя его. Единственное дополнение - это объект «divStyle», который содержит значения CSS.
Результаты выглядят так.
Довольно просто, правда?
Экспорт нескольких компонентов
Вы можете экспортировать более одного объекта из файла. Что, если мне нужен еще один компонент на этой странице? Я мог бы создать новый файл и потребовать его в «App.js» или просто добавить его в существующий файл и экспортировать их оба.
Это действительно будет зависеть от ваших предпочтений и вашего приложения. В идеале компоненты должны быть повторно использованы в разных приложениях, поэтому вы должны составлять их так, чтобы они стояли сами по себе. Однако, если в вашем приложении есть два компонента, которые всегда будут работать вместе, может иметь смысл объединить их в один файл и экспортировать вместе.
Если я добавлю еще один компонент под названием Animal в файл «Shapes.js», он будет выглядеть следующим образом.
//Shapes.js
var React = require('react');
var Component = React.Component;
class Color extends Component {
render() {
const divStyle = {
backgroundColor: this.props.name,
color: 'white',
fontSize: '20px',
height: '100px',
width: '100px'
}
return (
<div style={divStyle}>{this.props.name}</div>
)
}
}
class Animal extends Component {
render() {
const divStyle = {
fontSize: '20px',
height: '100px',
width: '100px',
border: '1px solid black',
borderRadius: '50%'
}
return (
<div style={divStyle}>{this.props.name}</div>
)
}
}
module.exports = Color;
Но теперь возникла проблема. Я экспортирую только цвет. Как экспортировать их обоих?
Сначала я добавляю оба компонента в module.exports.
//Shapes.js
module.exports = {
Color: Color,
Animal: Animal
}
Итак, теперь этот файл экспортирует объект модуля с двумя компонентами в нем. Поскольку экспорт теперь немного другой, импорт тоже должен немного измениться.
//App.js
var {Color} = require('./Shapes');
var {Animal} = require('./Shapes');
Здесь мы назначаем переменные каждому компоненту, но заключаем имя переменной в "{}". Вы можете называть их как хотите, но имя переменной должно соответствовать ключу объекта экспорта из «Shapes.js». И вы должны использовать это имя переменной при вызове компонента React.
Так что это тоже сработает. Это будет не очень понятно, но это сработает.
//Shapes.js
module.exports = {
Foo: Color,
Bar: Animal
}
//App.js
var {Foo} = require('./Shapes');
var {Bar} = require('./Shapes');
class App extends Component {
render() {
return (
<div className="App">
<div className="colors">
<Foo name="red"/>
<Foo name="green"/>
<Foo name="blue"/>
</div>
<div className="animals">
<Bar name="dog" />
<Bar name="cat" />
<Bar name="bird" />
</div>
</div>
);
}
}
Результат выглядит так.
Пример ES6
Если вы используете ES6, то идея импорта и экспорта такая же, но синтаксис немного отличается.
Вместо «require» теперь вы используете «import», и вы также можете использовать оператор «export default», если у вас есть только одна вещь для экспорта из файла.
//App.js
import React, {Component} from 'react';
import './App.css';
import {Color, Animal} from './Shapes';
...
export default App;
//Shapes.js
import React, {Component} from 'react';
export class Color extends Component {...
export class Animal extends Component {...
В Shapes.js я экспортирую каждый класс отдельно. Если бы мне не нужно было экспортировать их оба или у меня был только один, я также мог бы использовать там оператор export default.
Вот и все, что касается основ импорта и экспорта между файлами. Самое важное, что нужно помнить обо всем этом, - это то, что их нельзя смешивать. Если вы используете операторы «require», вам необходимо использовать «module.exports». Или, если вы используете «импорт», вы можете использовать «экспорт» или «экспорт по умолчанию». Надеюсь, вы нашли это полезным. Пожалуйста, оставьте комментарий или вопрос ниже. Спасибо!
