Подробное объяснение require и import

JavaScript

предисловие

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

1 require

Функции:

  • 1. Загрузка во время выполнения
  • 2. Скопировать на эту страницу
  • 3. Импортировать все

1.1 CommonJS

Node.js использует мышление CommonJS. В CommonJS есть глобальный метод require() для загрузки модулей.

1.1.1 Использование
var math = require('math');
math.add(2, 3);

var math = require('math');
const Math = new math(2, 3)
Math.add();
1.1.2 Способ написания модуля

Метод записи модуля делится на экспорт и модуль.экспорт.

exports.add = (x,y) => x+y;

module.exports = class math {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return  x+y;
  }
};

1.2 AMD

require.js и cujo.js используют мышление AMD.

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

Вторая строка math.add(2, 3) запускается после первой строки require('math'), поэтому она должна дождаться загрузки math.js. То есть, если загрузка занимает много времени, все приложение просто останавливается и ждет. Для серверной стороны это не проблема, потому что все модули хранятся на локальном жестком диске и могут загружаться синхронно, а время ожидания — это время чтения жесткого диска. Однако для браузера это большая проблема, т.к. модули все размещаются на стороне сервера, а время ожидания зависит от скорости интернета, может пройти много времени и браузер находится в "подвешенном состоянии" " состояние. Поэтому модули на стороне браузера не могут использовать «синхронную загрузку» (синхронно), а могут использовать только «асинхронную загрузку». Это предыстория рождения спецификации AMD.

1.2.1 Использование
//require([module], callback);
require(['math'], function (math) {
 math.add(2, 3);
});
1.2.1 Способ написания модуля

define(id?, dependencies?, factory)

  • id: строка, имя модуля (необязательно)
  • зависимости: это модуль зависимостей, который мы хотим загрузить (необязательно), используя относительный путь. , обратите внимание, что формат массива
  • factory: фабричный метод, который возвращает функцию модуля

Модуль не зависит от того, как написаны другие модули.

// math.js
define(function (){
    var add = function (x,y){
        return x+y;
    };
    return {
        add: add
    };
});

Модули также зависят от других модулей

define(['a','b'], function(a,b){
    function foo(){
        a.doSomething();// 依赖前置，提前执行
        b.doSomething();
    }
    return {
        foo : foo
    };
});

Когда функция require() загружает вышеуказанный модуль, она сначала загружает файл Lib.js.

1.3 CMD

sea.js использует CMD-мышление. CMD — это аббревиатура от «Общее определение модуля». Подобно requirejs, но seajs зависит от ближайшего, отложенного выполнения, requirejs зависит от фронта, выполняемого заранее.

1.3.1 Использование
seajs.config({
  alias: {
    'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'
  }
});

seajs.use(['./hello', 'jquery'], function(hello, $) {
  $('#beautiful-sea').click(hello.sayHello);
});
1.3.1 Написание модуля
define(function(require, exports, module) {
  var $ = require('jquery');

  exports.sayHello = function() {
    $('#hello').toggle('slow');
  };
   var b = require("b");
   b.doSomething();    // 依赖就近，延迟执行
});

2 import

Функции:

  • 1. Загружать во время компиляции
  • 2. Просто процитируйте определение
  • 3. Загрузка по требованию

Сопоставимыеrequireособенности, найденоimportпобедитьrequire, рекомендуется использоватьimportзаменятьrequire

2.1.1 Использование

Существует два способа импорта модулей: именованный импорт (импорт имени) и импорт по умолчанию (импорт определения) иimport().

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
  • name - имя экспортируемого значения, полученное от импортируемого модуля
  • член, членN - из модуля экспорта импортирует несколько членов с указанным именем
  • defaultMember — из модуля экспорта импортируйте элемент экспорта по умолчанию.
  • alias, aliasN - псевдоним, переименование указанного импортируемого члена
  • имя-модуля — модуль для импорта. это имя файла
  • as - переименовать имя импортированного участника ("идентификатор")
  • from - импорт из существующего модуля, файла скрипта и т.д.
import()

import() возвращает объект Promise.

// 报错
if (x === 2) {
  import MyModual from './myModual';
}

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

if(x === 2){
  import('myModual').then((MyModual)=>{
    new MyModual();
  })
}
2.2.1 Написание модуля

Существует два способа экспорта модулей: именованный экспорт (экспорт имени) и экспорт по умолчанию (экспорт определения).Каждый модуль может иметь несколько именованных экспортов, в то время как экспорт по умолчанию — только один для каждого модуля.

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
 
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
 
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
  • имя1... имяN - Экспортированные "идентификаторы". После экспорта на него можно ссылаться в другом модуле, используя *import через этот «идентификатор».
  • default — устанавливает экспорт по умолчанию для модуля. После установки импорт не передает «идентификатор» и напрямую ссылается на импорт по умолчанию
  • - Наследовать модуль и экспортировать все методы и свойства унаследованного модуля
  • as - переименовать экспорт "идентификатор"
  • from - экспорт из существующего модуля, файла скрипта...

использованная литература

Happy coding .. :)

Категории