10 вопросов по JavaScript, которые вам нужны, чтобы освоить основы

Добавить Автора Переводчик: Front-end Xiaozhi Источник: Киран

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

JavaScript — это клиентский язык программирования. Используется более чем **90%** веб-сайтов по всему миру, это один из самых используемых языков программирования в мире. Итак, сегодня мы собираемся обсудить 10 часто задаваемых вопросов о JavaScript.

1. Как удалить конкретный элемент из массива

Идея: во-первых, использоватьindexOfНайдите элемент массива для удаления索引(index), затем используйтеspliceМетод удаляет элемент, соответствующий этому индексу.

splice()является нечистой функцией, которая изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые элементы.

const array = [2, 5, 9]

const index = array.indexOf(5)
if (index > -1) {
  array.splice(index, 1)
}

console.log(array)
// [ 2, 9 ]

spliceВторой параметр — количество удаляемых элементов. Уведомление,spliceизменяет массив на месте и возвращает новый массив, содержащий удаленные элементы.

Далее мы можем улучшить его. Ниже две функции, первая удаляет только одно совпадение (т.е. из[2,5,9,1,5,8,5]удалить первое совпадение в5), а вторая функция удаляет все совпадения:

// 仅删除第一个匹配项
function removeItemOnce (arr, value) {
  let index = arr.indexOf(value)
  if (index > -1) {
    arr.splice(index, 1)
  }
  return arr
}

// 删除所有匹配项
function removeItemAll (arr, value) {
  let i = 0
  while(i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1)
    } else {
      ++i
    }
  }
}

удалить индекс из массиваiэлемент в:

удалить индекс из массиваiЭлементы в:

array.splice(i, 1)

Если вы хотите удалить значение из массиваnumberдля каждого элемента вы можете сделать это:

for (let i = array.length - 1; i>=0; i--) {
  if (array[i] === number) {
    array.splice(i, 1)
  }
}

если вы просто хотите сделать индексiэлемент больше не существует, но вы не хотите изменять индексы других элементов:

delete array[i]

2. Как использовать jQuery или чистый JS для перенаправления пользователя со страницы на другую страницу

jQuery не требуется，window.location.replace(…)Лучше всего подходит для имитации HTTP-редиректов.window.location.replace(...)чем использоватьwindow.location.href,потому чтоreplace()Исходная страница не сохраняется в истории сеансов, а это значит, что пользователь не застрянет с бесконечной кнопкой «Назад».

Если вы хотите имитировать щелчок по ссылке, вы можете использоватьlocation.href, если вы хотите имитировать перенаправление HTTP, используйтеlocation.replace.

кейс:

//模拟HTTP重定向
window.location.replace("http://stackoverflow.com")

// 模拟单击链接
window.location.href = "http://stackoverflow.com"

Вы также можете сделать это:

$(location).attr('href', 'http://stackoverflow.com')

3. Как работают замыкания в JavaScript

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

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

В приведенном ниже кодеinnerс вызовомfooЛексическое окружение контекста выполнения, созданное приsecret:

function foo() {
  const secret = Math.trunc(Math.random()*100)
  return function inner() {
    console.log(`The secret number is ${secret}.`)
  }
}
const f = foo() // secret 不能从foo 外部直接访问
f() // 访问 secret 的唯一办法就是调用 f

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

Помните, что функции в JavaScript можно передавать как переменные, что означает, что пары этих функций и состояний могут передаваться в программе: аналогично передаче экземпляра класса в C++.

Если бы в JavaScript не было замыканий, между функциями пришлось бы явно передавать больше состояний, что сделало бы список параметров длиннее, а код — более избыточным.

Итак, если вы хотите, чтобы функция всегда имела доступ к частному состоянию, вы можете использовать замыкание, мы часто хотим связать состояние с функциями. Например, в Java или C++, когда вы добавляете частные переменные экземпляра и методы в класс, это связывает состояние с функциональностью.

В C и большинстве других языков программирования после возврата из функции все локальные переменные становятся недоступными, поскольку стек уничтожается. В JavaScript, если функция объявлена внутри другой функции, локальные переменные внешней функции по-прежнему доступны после возврата. Итак, в приведенном выше кодеsecretв отfooВсе еще доступно внутри объекта функции после возврата.

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

частная переменная экземпляра

В приведенном ниже примере функцияtoString Скрывает некоторые детали класса Car.

function Car(manufacturer, model, year, color) {
  return {
    toString() {
      return `${manufacturer} ${model} (${year}, ${color})`
    }
  }
}
const car = new Car('Aston Martin','V8 Vantage','2012','Quantum Silver')
console.log(car.toString())

функциональное программирование

В приведенном ниже коде функцияinnerскрытыйfnа такжеargs.

function curry(fn) {
  const args = []
  return function inner(arg) {
    if(args.length === fn.length) return fn(...args)
    args.push(arg)
    return inner
  }
}

function add(a, b) {
  return a + b
}

const curriedAdd = curry(add)
console.log(curriedAdd(2)(3)()) // 5

событийно-ориентированное программирование

В следующем коде функцияonClickпеременная скрытаBACKGROUND_COLOR.

const $ = document.querySelector.bind(document)
const BACKGROUND_COLOR = 'rgba(200,200,242,1)'

function onClick() {
  $('body').style.background = BACKGROUND_COLOR
}

$('button').addEventListener('click', onClick)

<button>Set background color</button>

модульный

В приведенном ниже примере все детали реализации скрыты в немедленно выполняемом функциональном выражении. функцияtickа такжеtoStringЧастное состояние и функции, которые должны выполнять свою работу, скрыты. Замыкания позволяют нам модулировать и инкапсулировать наш код.

let namespace = {};

(function foo(n) {
  let numbers = []
  function format(n) {
    return Math.trunc(n)
  }
  function tick() {
    numbers.push(Math.random() * 100)
  }
  function toString() {
    return numbers.map(format)
  }
  n.counter = {
    tick,
    toString
  }
}(namespace))

const counter = namespace.counter
counter.tick()
counter.tick()
console.log(counter.toString())

Дело 1:

Этот пример демонстрирует, что локальные переменные не копируются в замыкании. Замыкание сохраняет ссылку на исходную переменную. Кажется, что стек остается в памяти даже после выхода из внешней функции.

function foo () {
  let x = 42
  let inner = function () {
    console.log(x)
  }
  x = x + 1
  return inner
}

let f = foo()
f()

Случай 2:

В приведенном ниже коде три методаlog,incrementа такжеupdateВсе в том же закрытии лексического окружения.

function createObject() {
  let x = 42;
  return {
    log() { console.log(x) },
    increment() { x++ },
    update(value) { x = value }
  }
}

const o = createObject()
o.increment()
o.log() // 43
o.update(5)
o.log() // 5
const p = createObject()
p.log() // 42

Случай 3:

Если используемая переменная используетvarЗаявлено отметить, что использованиеvarОбъявленная переменная поднимается. в связи с введениемletа такжеconst, что вряд ли является проблемой в современном JavaScript.

В приведенном ниже коде каждый раз в цикле создается новыйinnerфункция, переменнаяiперезаписывается, но из-заvarпозволитiподняты на вершину функции, так что все этиinnerфункции перезаписывают одну и ту же переменную, что означаетi(3)Окончательное значение печатается три раза.

function foo () {
  var result = []
  for (var i = 0; i < 3; i++) {
    result.push(function inner () {
      console.log(i)
    })
  }
  return result
}
const result = foo()

for(var i = 0; i < 3; i++) {
  result[i]()
}
// 3 3 3

последний пункт:

Всякий раз, когда функция объявляется в JavaScript, создается замыкание.
Возврат из одной функции в другую — классический пример замыкания, потому что состояние внутри внешней функции неявно доступно возвращающей внутренней функции, даже если внешняя функция завершила выполнение.
Просто используйте внутри функцииeval(), используется замыкание.evalТекст функции может ссылаться на локальные переменные функции в нестрогом режиме, даже используяeval('var foo = ')Создайте новые локальные переменные.
при использовании внутри функцииnew Function()(Function constructor), он переопределяет не свое лексическое окружение, а глобальный контекст. Новая функция не может ссылаться на локальные переменные внешней функции.
В JavaScript замыкание аналогично сохранению ссылки на область видимости (а не копированию) во время объявления функции, которая, в свою очередь, сохраняет ссылку на свою внешнюю область видимости и так далее, вплоть до глобального объекта вверху. цепочки областей видимости.
Создайте замыкание при объявлении функции. Это закрытие используется для настройки контекста выполнения при вызове функции.
Каждый раз при вызове функции создается новый набор локальных переменных.

Каждая функция в JavaScript поддерживает связь со своим внешним лексическим окружением. Лексическое окружение представляет собой карту всех имен (например, переменных, параметров) и их значений в области видимости. Поэтому просто см.functionключевое слово, код внутри функции может получить доступ к переменным, объявленным вне функции.

function foo(x) {
  var tmp = 3;

  function bar(y) {
    console.log(x + y + (++tmp)); // 16
  }

  bar(10);
}

foo(2);

Вывод выше16,параметрxи переменнаяtmpоба существуют во внешней функцииfooв лексическом окружении. функцияbarи его функцияfooСсылка лексического окружения является замыканием.

Функция не должна возвращаться, чтобы создать замыкание. Только благодаря своему объявлению каждая функция замкнута в окружающем ее лексическом окружении, образуя, таким образом, замыкание.

function foo(x) {
  var tmp = 3;

  return function (y) {
    console.log(x + y + (++tmp)); // 16
  }
}

var bar = foo(2);
bar(10); // 16
bar(10); // 17

все еще печатать выше16,потому чтоbarКод все еще может ссылаться на параметрыxи переменнаяtmp, даже если они больше не находятся непосредственно в области видимости.

Однако из-заtmpеще вbarзависает внутри закрытия , поэтому его можно увеличить. каждый раз, когда бар вызывается, он будет увеличиваться1.

Самый простой пример замыкания выглядит так:

var a = 10;

function test() {
  console.log(a); // will output 10
  console.log(b); // will output 6
}
var b = 6;
test();

Когда вызывается функция JavaScript, создается новый контекст выполнения.ec. Наряду с аргументами функции и целевыми объектами этот контекст выполнения также получает ссылку на лексическое окружение, вызвавшее контекст выполнения, что означает переменные, объявленные во внешнем лексическом окружении (в приведенном выше примереaа такжеb) доступны изecполучать.

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

Уведомление, в замыкании видна сама переменная, а не копия.

4. Что такое strict do в JavaScript и чем это объясняется

Цитирование некоторых интересных частей:

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

Строгий режим помогает во многих отношениях:

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

Также обратите внимание, что я считаю возможным“strict mode”Применяется ко всему файлу или только к определенной функции.

// Non-strict code...

(function(){
  "use strict";

  // Define your library strictly...
})();

// Non-strict code...

Это может помочь, если вы смешиваете старый и новый код. Это что-то вроде «строгого использования» в Perl. Помогите нам уменьшить количество ошибок, обнаруживая больше вещей, которые могут нанести ущерб.

Все основные браузеры теперь поддерживают строгий режим.

в нативных модулях ECMAScript (сimportа такжеexportСтрогий режим всегда включен в операторе) и классах ES6 и не могут быть отключены.

5. Как проверить, содержит ли строка подстроку?

Представлен ECMAScript 6string .prototype.include

const string = "foo";
const substring = "oo";

console.log(string.includes(substring));

Однако IE не поддерживаетincludes. В CMAScript 5 или более ранних средах используйтеString.prototype.indexOf. Возвращает, если подстрока не найдена-1:

var string = "foo";
var substring = "oo";

console.log(string.indexOf(substring) !== -1);

Чтобы заставить его работать в старых браузерах, вы можете использовать этоpolyfill:

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    }

    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search, start) !== -1;
    }
  };
}

6. var имя_функции = имя_функции () {} и имя_функции () {}

разница заключается вfunctionOneявляется функциональным выражением, поэтому только при достижении строкибудет определено,а такжеfunctionTwoэто объявление функции, определяемое при выполнении функции или скрипта вокруг нее (из-за подъема).

Например, функциональное выражение

// TypeError: functionOne is not a function
functionOne();

var functionOne = function() {
  console.log("Hello!");
};

Объявление функции:

// "Hello!"
functionTwo();

function functionTwo() {
  console.log("Hello!");
}

В прошлом обработка объявлений функций, определенных в блоках, была непоследовательной в разных браузерах. Строгий режим (представленный в ES5) решает эту проблему, ограничивая объявление функции его блоком.

'use strict';    
{ // note this block!
  function functionThree() {
    console.log("Hello!");
  }
}
functionThree(); // ReferenceError

function abc(){}также имеет имя области действияabcОпределяется в области, в которой встречается определение. пример:

function xyz(){
  function abc(){};
  // abc 在这里定义...
}
// ...不是在这里

Если вы хотите использовать псевдоним функции во всех браузерах, вы можете сделать это:

function abc(){};
var xyz = abc;

В этом примере и xyz, и abc являются псевдонимами одного и того же объекта.

console.log(xyz === abc) // true

Имя ему присваивается автоматически. но когда вы определяете это

var abc = function(){};
console.log(abc.name); //  ""

этоnameНазванная пустой, мы создаем анонимную функцию и присваиваем ее некоторой переменной. Еще одна веская причина использовать комбинированные стили — использовать короткое внутреннее имя для ссылки на себя, а для внешних пользователей — длинное, не конфликтующее имя:

// 假设 really.long.external.scoped 为 {}
really.long.external.scoped.name = function shortcut(n){
  // 它递归地调用自己:
  shortcut(n - 1);
  // ...
  // 让它自己作为回调传递：:
  someFunction(shortcut);
  // ...
}

В приведенном выше примере мы могли бы сделать то же самое с внешними именами, но это было бы слишком громоздко (и медленнее). Другой способ обратиться к себеarguments.callee, который также относительно длинный и не поддерживается в строгом режиме.

На самом деле JavaScript обрабатывает эти два оператора по-разному. Вот объявление функции:

function abc(){}

здесьabcМожет быть определен в любом месте текущей области:

// 我们可以在这里调用
abc(); 

// 在这里定义
function abc(){}

// 也可以在这里调用 
abc();

Кроме того, несмотря наreturnутверждение, которое также может быть поднято:

// 我们可以在这里调用
abc(); 
return;
function abc(){}

Вот выражение функции:

var xyz = function(){};

здесьxyzопределяется с точки присваивания:

// 我们不可以在这里调用
xyz(); 

// 在这里定义 xyz
xyz = function(){}

// 我们可以在这里调用
xyz();

Настоящая причина различия между объявлениями функций и функциональными выражениями.

var xyz = function abc(){};
console.log(xyz.name); // "abc"

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

var abc = function(){};

Мы знаем, что если мы не определим нигде в цепочке областей видимостиabc, то мы определяем его в глобальной области видимости. Хотяeval()При внутреннем использовании этот тип определения также является гибким. И определить:

function abc(){};

зависит от контекста и может заставить вас угадать, где это на самом деле определено, особенно вeval()в случае - зависит от браузера.

7. Как удалить свойства из объектов JavaScript?

Мы можем удалить свойство объекта следующим образом:

delete myObject.regex;
// 或者
delete myObject['regex'];
//  或者
var prop = "regex";
delete myObject[prop];

кейс:

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};
delete myObject.regex;

console.log(myObject);

Объекты в JavaScript можно рассматривать как карты между ключами и значениями.deleteОператор используется для удаления одного ключа за раз (часто называемого свойствами объекта).

var obj = {
  myProperty: 1    
}
console.log(obj.hasOwnProperty('myProperty')) // true
delete obj.myProperty
console.log(obj.hasOwnProperty('myProperty')) // false

deleteОператор не освобождает память напрямую, это отличается от простогоnullилиundefinedСвойству присваивается значение, но само свойство удаляется из объекта.

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

deleteтолько пометьте его дескриптор какconfigurableсвойство действительно.

8. Какой оператор равенства (== vs ===) следует использовать при сравнениях в JS?

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

==Оператор сравнивает на равенство после преобразования типа.===оператор не конвертирует, поэтому если два значения разного типа, то===просто вернет false.

В JavaScript есть два набора операторов равенства:===а также!==, и их братья-близнецы==а также!=. Если два операнда имеют одинаковый тип и одно и то же значение, то===Результатtrue,а также!==Результатfalse.

Вот некоторые примеры:

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

Кое-что из вышеперечисленного может показаться запутанным, поэтому попробуйте использовать строгие операторы сравнения (===). Для ссылочных типов==а также===Работа непротиворечива (за исключением особых случаев).

var a = [1,2,3];
var b = [1,2,3];

var c = { x: 1, y: 2 };
var d = { x: 1, y: 2 };

var e = "text";
var f = "te" + "xt";

a == b            // false
a === b           // false

c == d            // false
c === d           // false

e == f            // true
e === f           // true

Особым случаем является сравнение строкового литерала со строковым объектом из-за того, что объектtoStringилиvalueOfметод, значение объекта совпадает со значением литерала.

Рассмотрите возможность объединения строковых литералов сStringСравните строковые объекты, созданные конструктором:

"abc" == new String("abc")    // true
"abc" === new String("abc")   // false

это здесь,==оператор проверяет значения двух объектов и возвращаетtrue,но=== видит, что они не одного типа и возвращаетfalse. Какой из них правильный?Это зависит от того, что вы хотите сравнить.

Наш совет — полностью обойти проблему, просто не используйтеStringконструктор для создания строковых объектов.

Используйте оператор == (равно)

true == 1; //true, 因为 true 被转换为1，然后进行比较
"2" == 2;  //true, 因为 “2” 被转换成 2，然后进行比较

Используйте оператор ===

true === 1; //false
"2" === 2;  //false

9. Каков наиболее эффективный способ глубокого копирования объекта в JavaScript?

Быстрое клонирование, потеря данных –JSON.parse/stringify

Если вы не используете в объектеDate,функция,undefined,Infinity,RegExp,Map,Set, blob, , разреженный массив, типизированный массив или другие сложные типы, вы можете глубоко скопировать объект с помощью простой строки кода:

JSON.parse(JSON.stringify(object))

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(), 
  undef: undefined,  // 丢失
  inf: Infinity,  // 被设置为 null
  re: /.*/,  // 丢失
}
console.log(a);
console.log(typeof a.date);  // object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
/*
object
{
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: '2020-09-04T00:45:41.823Z',
  inf: null,
  re: {}
}

*/
console.log(typeof clone.date);  // string

Надежное клонирование с библиотеками

Поскольку клонирование объектов — дело непростое (сложные типы, циклические ссылки, функции и т. д.), большинство основных библиотек предоставляют функции для копирования объектов. Если вы уже используете библиотеку, убедитесь, что в ней есть возможности клонирования объектов. Например

lodash–cloneDeep; способен пройтиlodash.clonedeepМодули импортируются по отдельности, если вы еще не используете библиотеку, обеспечивающую функциональность глубокого копирования, это может быть лучшим вариантом.
УгловойJS –angular.copy
jQuery –jQuery.extend(true, { }, oldObject); .clone()Клонировать только элементы DOM

ES6

ES6 предоставляет два механизма поверхностного копирования:Object.assign()а такжеspreadграмматика. Он копирует значения всех перечисляемых собственных свойств из одного объекта в другой. Например

var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1};  // Spread Syntax

В предыдущих тестах главной проблемой была скорость.

JSON.parse(JSON.stringify(obj))

Это самый медленный способ глубокого копирования объекта, он быстрее, чемjQuery.extendна 10-20% медленнее.

когдаdeepустановлен флагfalse(неглубокий клон),jQuery.extendочень быстро. Это хороший вариант, так как он включает в себя некоторую дополнительную логику для проверки типа и не копирует неопределенные свойства и т. Д., Но он также замедляет вас.

Если вы хотите скопировать объект, и вы знаете структуру объекта. Тогда вы можете написать простойfor (var i in obj)цикл для клонирования вашего объекта при проверкеhasOwnProperty, что будет намного быстрее, чем jQuery.

var clonedObject = {
  knownProp: obj.knownProp,
  ..
}

обрати внимание наDateОбъекты, используемые в JSONJSON.parse(JSON.stringify(obj))метод.JSON.stringify(new Date())возвращает строковое представление даты в формате ISO,JSON.parse()не преобразует его обратноDateобъект.

10. Как включить файл JavaScript в другой файл JavaScript?

Старые версии JavaScript неimport,includeилиrequire, так много различных подходов было разработано для этой проблемы.

Но с 2015 года (ES6) в JavaScript уже есть модульный стандарт ES6 для импорта модулей в Node. Для совместимости со старыми браузерами вы можете использоватьWebpackа такжеRollupинструменты сборки, такие как Babel, и/или инструменты компиляции, такие как Babel.

ES6 Module

Начиная с версии 8.5, Node.js поддерживает модули ECMAScript (ES6) с--experimental-modules флаг, и, по крайней мере, Node.js v13.8.0 не имеет этого флага. Чтобы включить ESM (в отличие от модульной системы в стиле commonjs до Node.js [CJS]), вы можетеpackage.jsonиспользуется в“type”:“module”. или дайте файлу расширение.mjs. (Аналогичным образом, если по умолчанию используется ESM, модули, написанные на Node.js, ранее называвшиеся модулями CJS, могут называться как.cjs. )

использоватьpackage.json:

{
    "type": "module"
}

существуетmodule.js：середина

export function hello() {
  return "Hello";
}

main.js:

import { hello } from './module.js';
let val = hello();  // val is "Hello";

использовать.mjs, будут соответствующиеmodule.mjs:

export function hello() {
  return "Hello";
}

существуетmain.mjsсередина

import { hello } from './module.mjs';
let val = hello();  // val is "Hello";

Начиная с Safari 10.1, Chrome 61, Firefox 60 и Edge 16, браузеры поддерживают прямую загрузку модулей ECMAScript (такие инструменты, как Webpack, не требуются). Нет необходимости использовать Node.js.mjsрасширение; браузеры полностью игнорируют расширения файлов в модулях/скриптах.

<script type="module">
  import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
  hello('world');
</script>

// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

Динамический импорт в браузере

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

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

Node.js require

Больше используется в Node.js илиmodule.exports/require

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}

// server.js const myModule = require('./mymodule'); let val = myModule.hello(); // val is "Hello"

Загружать файлы динамически

Мы можем динамически создаватьscript Чтобы динамически импортировать файлы:

function dynamicallyLoadScript(url) {
    var script = document.createElement("script"); 

    document.head.appendChild(script); 
}

Обнаружить, когда скрипт выполняется

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

Например:my_lovely_script.jsВключатьMySuperObject:

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined

Затем нажмите F5, чтобы перезагрузить страницу, и это может сработать. Что же тогда делать?

Мы можем использовать функции обратного вызова для решения некоторых проблем.

function loadScript(url, callback)
{
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    script.onload = callback;

    head.appendChild(script);
}

затем напишите вlambdaКод для использования после загрузки скрипта в функцию

var myPrettyCode = function() {
   // Here, do whatever you want
};

Затем запустите код:

loadScript("my_lovely_script.js", myPrettyCode);

Обратите внимание, что скрипт может выполняться до или после загрузки DOM, в зависимости от браузера и от того, включена ли строка.script.async = false;.

оригинал:hacker noon.com/10-Essen вопрос аааа…

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

общаться с

Статьи постоянно обновляются каждую неделю, и их можно искать в WeChat.[Мир] Большой ходСначала прочитай, ответь【Благосостояние】Вас ждет много фронтенд-видео, эта статья GitHubGitHub.com/QQ449245884…Он был записан, добро пожаловать в Star.