Очень полное и полное объяснение модуля JavaScript

внешний интерфейс JavaScript NPM ECMAScript 6

В процессе ухода с сегодняшнего дня мне не нужно выходить на работу. Недавно я работал над основными вещами и сделал заметку на github, которая постоянно обновляется. Вы можете пойти и посмотреть ее. Это искренне работа (изначально писалась для себя...) Адрес ссылки:Front-End-Basics

Адрес этой статьи:Модули JavaScript

Адрес github основных заметок:GitHub.com/issues книги…, вы можете смотреть, вы также можете звезды.

текст начинается

Модули JavaScript

представлять

Модуль обычно относится к механизму организации кода, предоставляемому языком программирования, с помощью которого программа может быть разобрана на независимые и общие блоки кода. Так называемая модульность в основном решает несколько аспектов, таких как сегментация кода, изоляция области действия, управление зависимостями между модулями, а также автоматическая упаковка и обработка при публикации в производственной среде.

Преимущества модулей

  1. ремонтопригодность.Поскольку модули независимы, хорошо спроектированный модуль сделает внешний код менее зависимым от самого себя, чтобы его можно было обновлять и улучшать независимо.
  2. Пространства имен.В JavaScript, если переменная объявлена ​​вне функции верхнего уровня, она просто становится доступной глобально. В результате конфликты имен часто возникают случайно. Использование модульной разработки для инкапсуляции переменных позволяет избежать загрязнения глобальной среды.
  3. Код повторного использования.Иногда нам нравится копировать код из ранее написанного проекта в новый проект, это нормально, но лучший подход — избегать дублирования кодовых баз через ссылки на модули.

CommonJS

Первоначально CommonJS был проектом, начатым инженерами Mozilla в 2009 году. Его цель состояла в том, чтобы разрешить разработку и совместную работу JavaScript вне браузера (например, на стороне сервера или на рабочем столе) по модульному принципу.

В спецификации CommonJS каждый файл JavaScript представляет собой независимый контекст модуля (module context), а свойства, созданные по умолчанию в этом контексте, являются закрытыми. Другими словами, переменные (включая функции и классы), определенные в одном файле, являются частными и невидимыми для других файлов.

Следует отметить, что основным применимым сценарием спецификации CommonJS является программирование на стороне сервера, поэтому принята стратегия синхронной загрузки модулей. Если мы зависим от 3 модулей, код будет загружать их один за другим.

Схема реализации модуля в основном включает два ключевых слова, require и module, которые позволяют модулю открывать некоторые интерфейсы, а также импортировать и использовать другие модули.

//sayModule.js
function SayModule () {
    this.hello = function () {
        console.log('hello');
    };

    this.goodbye = function () {
        console.log('goodbye');
    };
}

module.exports = SayModule;

//main.js 引入sayModule.js
var Say = require('./sayModule.js');
var sayer = new Say();
sayer.hello(); //hello

Как решение на стороне сервера, CommonJS требует наличия совместимого загрузчика скриптов в качестве предварительного условия. Загрузчик сценариев должен поддерживать функции с именами require и module.exports, которые импортируют и экспортируют модули друг в друга.

Node.js

Node создал собственную модульную реализацию из некоторых идей из CommonJS. Из-за популярности Node на стороне сервера форма модуля Node (ошибочно) называется CommonJS.

Модули Node.js можно разделить на две категории: основные модули и файловые модули.
основной модульЭто модули, предоставляемые в стандартном API Node.js, такие как fs, http, net и т. д. Это модули, официально предоставляемые Node.js, скомпилированные в двоичный код, а основные модули можно получить напрямую через запрос , например require(' fs'), основной модуль имеет наивысший приоритет загрузки. Если между модулем и основным модулем возникает конфликт имен, Node.js всегда загружает основной модуль.
файловый модульМодули хранятся в виде отдельных файлов (или папок), которые могут быть кодом JavaScript, JSON или скомпилированным кодом C/C++. Если расширение файлового модуля не указано явно, Node.js попытается добавить .js, .json и .node (скомпилированный код C/C++) соответственно.

Способ загрузки
  • Загружать модули по пути

Если требуемый параметр начинается с "/", то имя модуля ищется по абсолютному пути, если параметр начинается с "./", "../", то модуль ищется по относительному дорожка.

  • Загрузите модули, заглянув в каталог node_modules

Если требуемый параметр не начинается с "/", "./", "../" и модуль не является базовым, то модуль необходимо загрузить, выполнив поиск node_modules. Пакеты, полученные с помощью npm, которые мы используем, обычно загружаются таким образом.

загрузить кеш

Модули Node.js не будут загружаться повторно, поскольку Node.js кэширует весь файл модуля загрузки по имени файла, поэтому при повторной загрузке не будет доступа к будущему.
Уведомление:Node.js кэшируется на основе фактического имени файла, а не параметров, предоставленных функцией require(), что означает, что даже если вы загружаете дважды через require('express') и require('./node_modules/express') соответственно, это не будет загружаться повторно, потому что анализируемый файл один и тот же, несмотря на разные параметры.

Модули в Node.js запускаются как синглтоны после загрузки и следуют принципу передачи по значению: если это объект, он эквивалентен ссылке на объект.

процесс загрузки модуля

Работа по загрузке файлового модуля в основном реализуется и завершается модулем нативного модуля, который загружается при запуске, и процесс напрямую вызывает статический метод runMain.

例如运行： node app.js

Module.runMain = function () {
    // Load the main module--the command line argument.
    Module._load(process.argv[1], null, true);
};

//_load静态方法在分析文件名之后执行
var module = new Module(id, parent);

//并根据文件路径缓存当前模块对象，该模块实例对象则根据文件名加载。
module.load(filename);

В частности, три типа файловых модулей, упомянутых выше, различаются суффиксами. Node.js определяет метод загрузки в соответствии с именем суффикса. Конкретный метод загрузки описан ниже.require.extensionsбудет введено.

  • .jsФайл js считывается синхронно через модуль fs, компилируется и выполняется.
  • .nodeАддон написан на C/C++. Загрузка производится методом dlopen.
  • .jsonПрочитайте файл, вызовите JSON.parse для разбора и загрузки.

Далее подробно описан процесс компиляции суффикса js. Шаги, фактически выполняемые Node.js в процессе компиляции js-файлов, заключаются в переносе содержимого js-файлов в начале и в конце. Взяв за пример app.js, упакованный app.js примет следующий вид:

//circle.js
var PI = Math.PI;
exports.area = function (r) {
    return PI * r * r;
};
exports.circumference = function (r) {
    return 2 * PI * r;
};

//app.js
var circle = require('./circle.js');
console.log( 'The area of a circle of radius 4 is ' + circle.area(4));

//app包装后
(function (exports, require, module, __filename, __dirname) {
    var circle = require('./circle.js');
    console.log('The area of a circle of radius 4 is ' + circle.area(4));
});

//这段代码会通过vm原生模块的runInThisContext方法执行（类似eval，只是具有明确上下文，不污染全局），返回为一个具体的function对象。最后传入module对象的exports，require方法，module，文件名，目录名作为实参并执行。

Вот почему в файле app.js не определено требование, но метод существует. Как вы можете видеть из документации API Node.js, есть также__filename,__dirname,module,exportsНесколько переменных, которые не определены, но существуют. в__filenameа также__dirnameВ процессе нахождения пути к файлу он передается после получения анализа.moduleПеременная — это сам объект модуля,exports— это пустой объект ({}, не null), инициализированный в конструкторе модуля.
В этот основной файл остальные модули можно импортировать с помощью метода require. На самом деле этот метод require фактически вызывает метод module._load.
Метод load возвращает объект экспорта модуля после загрузки, компиляции и кэширования модуля. Вот почему только методы, определенные в объекте экспорта в файле circle.js, могут вызываться извне.

Описанный выше механизм загрузки модулей определен в lib/module.js.

требуется функция

Объекты, представленные require, в основном являются функциями. Когда Node вызывает require() и передает ему путь к файлу, Node выполняет следующие шаги:

  • Решение: найти абсолютный путь к файлу;
  • Загрузка: определить тип содержимого файла;
  • Обертка: упаковка, придающая этому файлу частную область. Это способ сделать модули require и module локальными ссылками;
  • Оценка: где виртуальная машина обрабатывает загруженный код;
  • Кэширование: когда вам нужно снова использовать этот файл, вам не нужно повторять вышеуказанные шаги.
require.extensions, чтобы увидеть поддержку трех файлов


Вы можете четко увидеть функции и операции, которые Node использует для каждого расширения: module._compile для файлов .js, JSON.parse для файлов .json, Файлы .node используют process.dlopen.

политика поиска файлов

  • Загрузка из кеша файлового модуля

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

  • Загрузка из родного модуля

Приоритет нативного модуля уступает только приоритету кеша файлового модуля. Метод require сначала проверяет, находится ли модуль в списке собственных модулей после разбора имени файла. Возьмем в качестве примера модуль http, хотя естьhttp,http.js,http.node,http.jsonдокумент,require(“http”)Ни из этих файлов не грузятся, а из нативных модулей.
Нативные модули также имеют область кеша, которая также предпочтительно загружается из области кеша. Если область кеша не была загружена, вызывается метод загрузки собственного модуля для загрузки и выполнения.

  • Загрузить из файла

Когда кеш файлового модуля не существует и это не собственный модуль, Node.js анализирует параметры, переданные методом require, и загружает фактический файл из файловой системы Подробности упаковки и компиляции в процессе загрузки упоминались ранее. , Вызовите метод загрузки. ··

当 Node 遇到 require(X) 时，按下面的顺序处理。

（1）如果 X 是内置模块（比如 require('http'）) 
　　a. 返回该模块。 
　　b. 不再继续执行。

（2）如果 X 以 "./" 或者 "/" 或者 "../" 开头 
　　a. 根据 X 所在的父模块，确定 X 的绝对路径。 
　　b. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。
        X
        X.js
        X.json
        X.node

　　c. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，不再继续执行。
        X/package.json（main字段）
        X/index.js
        X/index.json
        X/index.node

（3）如果 X 不带路径 
　　a. 根据 X 所在的父模块，确定 X 可能的安装目录。 
　　b. 依次在每个目录中，将 X 当成文件名或目录名加载。

（4） 抛出 "not found"

циклические зависимости модуля
//创建两个文件，module1.js 和 module2.js，并且让它们相互引用
    // module1.js
    exports.a = 1;
    require('./module2');
    exports.b = 2;
    exports.c = 3;
    
    // module2.js
    const Module1 = require('./module1');
    console.log('Module1 is partially loaded here', Module1);

Модуль 2 должен быть загружен до того, как модуль 1 будет полностью загружен, а модуль 2 нуждается в загрузке модуля 1. В этом состоянии все, что мы можем получить от объекта экспорта, — это часть до возникновения циклической зависимости. В приведенном выше коде импортируется только атрибут a, потому что после введения module2 необходимо загрузить и b, и c.

Node упрощает эту проблему, запуская создание объектов экспорта во время загрузки модуля. Если ему необходимо импортировать другие модули и существует циклическая зависимость, он может быть импортирован только частично, то есть только часть, определенная до возникновения циклической зависимости.

AMD

AMD — это сокращение от «Определение асинхронного модуля» или «Определение асинхронного модуля», и оно было рождено в ходе обсуждения CommonJS. AMD в первую очередь заботится о сцене загрузки модуля браузера, используя асинхронную загрузку и обратные вызовы.

AMD нужен тот же загрузчик скриптов, что и CommonJS, хотя AMD нужна только поддержка метода define. Метод define принимает три параметра: имя модуля, массив зависимостей, с которыми работает модуль, и функцию, которая будет выполняться после того, как все зависимости будут доступны (эта функция получает зависимости как параметры в том порядке, в котором они были объявлены). Требуются только параметры функции. define — это и способ ссылки на модуль, и способ определения модуля.

// file lib/sayModule.js
define(function (){
    return {
        sayHello: function () {
            console.log('hello');
        }
    };
});

//file main.js
define(['./lib/sayModule'], function (say){
    say.sayHello(); //hello
})

main.js как входной модуль всего приложения, мы используем ключевое слово define для объявления модуля и внешних зависимостей (без имени модуля жизни), когда мы выполняем код модуля, он определяется во втором параметре определить функцию Функция, которая будет выполняться после того, как фреймворк загрузит все остальные зависимые модули. Этот метод отсрочки выполнения кода также обеспечивает одновременную загрузку зависимостей.

RequireJS

RequireJS — это интерфейсная модульная библиотека инструментов управления, которая следует спецификации AMD, загружает все требуемые или зависимые реализации модуля через функцию, а затем возвращает новую функцию (модуль), все наши сведения о новом Бизнес-код модуля работает внутри этой функции, а загруженные модули можно использовать без ограничений.

<script data-main='scripts/main' src='scripts/require.js'></script>
//scripts下的main.js则是指定的主代码脚本文件，所有的依赖模块代码文件都将从该文件开始异步加载进入执行。

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

define({
    methodOne: function (){},
    methodTwo: function (){}
});

//等价于

define(function (){
    return {
        methodOne: function (){},
        methodTwo: function (){}
    };
});

2. Ненезависимые модули, зависящие от других модулей

define([ 'moduleOne', 'moduleTwo' ], function(mOne, mTwo){
    ...
});

//或者

define( function( require ){
    var mOne = require( 'moduleOne' ),
        mTwo = require( 'moduleTwo' );
    ...
});

Как показано в приведенном выше коде, определение с массивом зависимых модулей и без массива зависимых модулей загружается с требованием. Эти два типа модулей определения называются режимом AMD. Модуль определения ясен, не загрязняет глобальные переменные и четко показывает зависимости. Режим AMD может использоваться в среде браузера и допускает асинхронную загрузку модулей, а также динамическую загрузку модулей по запросу.

CMD

CMD (Common Module Definition), в CMD модуль — это файл.

Глобальная функция define используется для определения модуля.
Фабрика параметров может быть функцией, объектом или строкой.
Когда factory является объектом или строкой, интерфейс, представляющий модуль, является объектом или строкой.

Определите модуль данных JSON:

define({ "foo": "bar" });

Когда фабрика является функцией, она представляет метод построения модуля, а интерфейс, предоставляемый модулем, можно получить, выполнив метод построения.

define( function(require, exports, module) { 
    // 模块代码
});

SeaJS

Основные функции sea.js:

  1. Следуйте спецификации CMD и пишите код модуля, например NodeJS.
  2. Зависимость загружается автоматически, а конфигурация понятна и лаконична.

seajs.useИспользуется для загрузки одного или нескольких модулей на странице.


 // 加载一个模块 
seajs.use('./a');

// 加载模块，加载完成时执行回调
seajs.use('./a'，function(a){
    a.doSomething();
});

// 加载多个模块执行回调
seajs.use(['./a','./b']，function(a , b){
    a.doSomething();
    b.doSomething();
});
AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机或者方式不同。
Многие говорят, что requireJS — это модуль асинхронной загрузки, а SeaJS — модуль синхронной загрузки.Это понимание на самом деле неточное.На самом деле модули загрузки асинхронные, но AMD полагается на фронт.js может легко узнать, кто является зависимым модулем. и загрузите его немедленно. И CMD близок к зависимости, вам нужно использовать модуль для преобразования модуля в строку, чтобы проанализировать его, чтобы узнать, какие модули зависимы.Это также момент, за который многие люди критикуют CMD, жертвуя производительностью чтобы обеспечить удобство разработки, на самом деле требуется короткое время для анализа модуля, который будет проигнорирован.

为什么说是执行时机处理不同？
Модули также загружаются асинхронно. AMD выполнит модуль после завершения загрузки модуля. После того, как все модули будут загружены и выполнены, они войдут в функцию обратного вызова для выполнения основной логики. Результатом этого является то, что порядок выполнения модуля зависимые модули не обязательно совпадают с порядком записи. , в зависимости от скорости сети, какой из них загружается первым и какой из них выполняется первым, но основная логика должна выполняться после загрузки всех зависимостей.
После того, как CMD загружает зависимый модуль, он не выполняет его, а просто загружает.После того, как все зависимые модули загружены, он входит в основную логику и выполняет соответствующий модуль только тогда, когда встречает запрос, так что порядок выполнения модулей точно такой же, как и порядок написания.

UMD

Unified Module Definition (UMD: Universal Module Definition) — это попытка объединить AMD и CommonJS, общепринятой практикой является перенос синтаксиса CommonJS в код, совместимый с AMD.

(function(define) {
    define(function () {
        return {
            sayHello: function () {
                console.log('hello');
            }
        };
    });
}(
    typeof module === 'object' && module.exports && typeof define !== 'function' ?
    function (factory) { module.exports = factory(); } :
    define
));

Основной идеей этого режима является так называемое IIFE (Immediately Invoked Function Expression), которое определяет требуемый тип параметра в соответствии с окружением.

Модуль ES6 (модуль)

строгий режим

Модули ES6 автоматически используют строгий режим, с или без «use strict»; в заголовке модуля. Строгий режим в основном имеет следующие ограничения.

  • Переменные должны быть объявлены перед использованием
  • Параметры функции не могут иметь атрибуты с одинаковыми именами, иначе будет сообщено об ошибке
  • Нельзя использовать с заявлением
  • Нельзя присваивать значения свойствам только для чтения, иначе будет сообщено об ошибке
  • Вы не можете использовать префикс 0 для представления восьмеричного числа, иначе будет сообщено об ошибке
  • Невозможно удалить неудаляемые атрибуты, иначе будет сообщено об ошибке
  • Переменная delete prop не может быть удалена, будет сообщено об ошибке, только свойство delete global[prop]
  • eval не вводит переменные во внешнюю область видимости
  • eval и аргументы не могут быть переназначены
  • arguments не отражает автоматически изменения в аргументах функции
  • нельзя использовать arguments.callee
  • нельзя использовать arguments.caller
  • запретить этому указывать на глобальный объект
  • Не удается получить стек вызовов функций с помощью fn.caller и fn.arguments
  • Добавлены зарезервированные слова (например, protected, static и interface)

Модуль Модуль

Модуль — это файл, который предоставляет свои свойства или методы другим модулям.

ЭкспортЭкспорт

Как модуль, он может выборочно раскрывать (предоставлять) свои собственные свойства и методы другим модулям для использования другими модулями.

// profile.js
export var firstName = 'qiqi';
export var lastName = 'haobenben';
export var year = 1992;

//等价于

var firstName = 'qiqi';
var lastName = 'haobenben';
var year = 1992;
export {firstName, lastName, year}

1、 通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

//上面代码使用as关键字，重命名了函数v1和v2的对外接口。重命名后，v2可以用不同的名字输出两次。

2、 需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 报错
export 1;

// 报错
var m = 1;
export m;

//上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出1，第二种写法通过变量m，还是直接输出1。1只是一个值，不是接口。

/ 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

//上面三种写法都是正确的，规定了对外的接口m。其他脚本可以通过这个接口，取到值1。它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系。

3、最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，接下来说的import命令也是如此。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

импорт импорт

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

1、 import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { lastName as surename } from './profile';

2、import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js路径可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

3、注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。

foo();

import { foo } from 'my_module';

//上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。

4、由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。

/ 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

5、最后，import语句会执行所加载的模块，因此可以有下面的写法。

import 'lodash';
//上面代码仅仅执行lodash模块，但是不输入任何值。

экспорт по умолчанию

Каждый модуль поддерживает наш экспорт一个Переменные без имен реализуются с использованием ключевого оператора экспорта по умолчанию.

export default function(){
            console.log("I am default Fn");
        }
//使用export default关键字对外导出一个匿名函数，导入这个模块的时候，可以为这个匿名函数取任意的名字

//取任意名字均可
import sayDefault from "./module-B.js";
sayDefault();
//结果：I am default Fn

1、默认输出和正常输出的比较

// 第一组
export default function diff() { // 输出
  // ...
}

import diff from 'diff'; // 输入

// 第二组
export function diff() { // 输出
  // ...
};

import {diff} from 'diff'; // 输入

//上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。
Команда экспорта по умолчанию используется для указания вывода модуля по умолчанию. Очевидно, модуль может иметь только один вывод по умолчанию, поэтому команду экспорта по умолчанию можно использовать только один раз. Поэтому после команды импорта фигурные скобки не используются, потому что может быть соответствующий только один метод.

2、因为export default本质是将该命令后面的值，赋给default变量以后再默认，所以直接将一个值写在export default之后。

/ 正确
export default 42;

// 报错
export 42;

//上面代码中，后一句报错是因为没有指定对外的接口，而前一句指定外对接口为default。

3、如果想在一条import语句中，同时输入默认方法和其他变量，可以写成下面这样。

import _, { each } from 'lodash';

//对应上面代码的export语句如下
export default function (){
    //...
}
export function each (obj, iterator, context){
    //...
}

Сочетание экспорта и импорта

Если в модуле сначала импортировать и экспортировать один и тот же модуль, оператор импорта можно написать вместе с оператором экспорта.

export { foo, bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';
export { foo, bar };

/ 接口改名
export { foo as myFoo } from 'my_module';

// 整体输出
export * from 'my_module';
Меры предосторожности
1. Объявленные переменные доступны для внешнего мира только для чтения. Однако экспортируется значение типа объекта, которое можно изменить.
2. Импортировать несуществующую переменную, значение которой не определено.

Циклические ссылки в ES6

В ES6 imports — это представление exprts только для чтения.Проще говоря, imports указывает на исходные данные exports, например:

//------ lib.js ------
export let counter = 3;
export function incCounter() {
    counter++;
}

//------ main.js ------
import { counter, incCounter } from './lib';

// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4

// The imported value can’t be changed
counter++; // TypeError

Поэтому работать с циклическими ссылками в ES6 очень просто, посмотрите на следующий код:

//------ a.js ------
import {bar} from 'b'; // (1)
export function foo() {
  bar(); // (2)
}

//------ b.js ------
import {foo} from 'a'; // (3)
export function bar() {
  if (Math.random()) {
    foo(); // (4)
  }
}

Предполагая, что модуль a загружается первым, после загрузки модуля a bar косвенно указывает на bar в модуле b. Будь то загрузка завершенного импорта или незавершенного импорта, существует косвенная связь между импортом и экспортом, поэтому она всегда работает.

пример

//---module-B.js文件---
//导出变量：name
export var name = "cfangxu";

moduleA模块代码：
//导入 模块B的属性 name    
import { name } from "./module-B.js";   
console.log(name)
//打印结果：cfangxu

Пакетный экспорт

//属性name
var name = "cfangxu";
//属性age
var age  = 26;
//方法 say
var say = function(){
            console.log("say hello");
         }
//批量导出
export {name,age,say}

Пакетный импорт

//导入 模块B的属性
import { name,age,say } from "./module-B.js";
console.log(name)
//打印结果：cfangxu
console.log(age)
//打印结果：26
say()
//打印结果：say hello

переименовать импортированную переменную

import {name as myName} from './module-B.js';
console.log(myName) //cfangxu

Общий импорт

/使用*实现整体导入
import * as obj from "./module-B.js";

console.log(obj.name)
//结果："cfangxu"
console.log(obj.age)
//结果：26
obj.say();
//结果：say hello

Рекомендуемая информация

Категории