Интервью: В чем разница между require и import?

интервью
Интервью: В чем разница между require и import?

Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.

предисловие

requireиimportВ процессе ежедневной разработки часто используется метод внедрения модулей, обычно в проекте нам в принципе не нужно к ним привязываться и использовать их напрямую, но в чем разница между этими двумя методами? Давайте посмотрим на кусок кода сегодня...

require/exports

// module.js
    let counts = 1;
    function sayHello() {
        alert(`"hello , ${counts}`)
    }

    setTimeout(() => {
    counts += 2
    }, 3000);

    module.exports = {counts, sayHello};

    index.js
    const { counts, sayHello } = require('./module.js');
    
    // 注意此处的代码结果
    const click = () => {
        console.log('counts: ', counts) // 每次点击事件，打印的 counts 始终为 1
        sayHello(); // 1  ==》 3秒钟后 =>> 3
    }

    ...
    <!-- 此处counts始终是 1 -->
    <p>import {counts}</p> 
    <Button type="primary" onClick={click}>require </Button>

Анализ результатов: Измените значение переменной в исходном файле наrequireвводитьcountsпеременная, полученное значение всегда является инициализированным значением

import/export

// module.js
    let counts = 1;
        function sayHello() {
        alert(`"hello , ${counts}`)
    }
    setTimeout(() => {
        counts += 2
    }, 3000);
    export { counts, sayHello };

    // index.js
    import { counts, sayHello } from './module.js';
    
    // 注意此处的代码结果
    const click = () => {
        console.log('counts: ', counts) // 初始为 1， ==》 3秒钟后 =>> 3
        sayHello(); // 初始为 1， ==》 3秒钟后 =>> 3
    }

    ...
    <!-- 此counts处始终是 1 -->
    <p>import {counts}</p> 
    <Button type="primary" onClick={click}>require </Button>

Анализ результатов: зачетimportвводитьcountsПосле изменения значения переменной в исходном файле значение импортируемой переменной также изменится.

Разница между требованием и импортом

  1. Импортироватьrequireэкспортexports/module.exportsдаCommonJSстандарт, обычно применимый к сфереNode.js
  2. import/exportдаES6стандарт, обычно применимый к сфереReact
  3. requireдапроцесс присвоенияи являетсявыполнять во время выполнения, это,синхронная загрузка
  4. requireЕго можно понимать как глобальный метод, потому что это метод, то есть он может выполняться где угодно.
  5. importдапроцесс деконструкциии являетсявыполнять во время компиляции, понимаемый какАсинхронная загрузка
  6. importОн будет повышен до головы всего модуля, с липкостью, но рекомендуется писать его вверху файла.

commonjsРезультатом является копия значения, иes6Вывод — это ссылка на значение;

commonjsзагружается во время выполнения,es6интерфейс вывода времени компиляции;

Производительность require и import

requireпроизводительность относительноimportнемного ниже.

так какrequireМодуль вводится во время выполнения и также присваивается переменной, в то время какimportтолько на основеimportИнтерфейс в модуле представляет указанный модуль во время компиляции, поэтому производительность немного выше.

Эпилог

Если эта статья вам помогла, ставьте лайк 👍 и подписывайтесь на ⭐️.

Если в статье есть ошибка, надеюсь исправить ее в комментариях 🙏🙏.

Категории