[[344637]]

JavaScript 是一種客戶端編程語言。全球超過**90%**的網(wǎng)站都在使用它，它是世界上最常用的編程語言之一。因此，今天我們業(yè)討論 10 個有關 JavaScript 的常見問題。

1.如何從數(shù)組中移除一個特定的項

思路：首先，使用indexOf查找要刪除的數(shù)組元素的索引(index)，然后使用splice方法刪除該索引所對應的項。

splice()是一個非純函數(shù)，通過刪除現(xiàn)有元素和/或添加新元素來更改數(shù)組的內(nèi)容。

const array = [2, 5, 9] 
 
const index = array.indexOf(5) 
if (index > -1) { 
  array.splice(index, 1) 
} 
 
console.log(array) 
// [ 2, 9 ] 

splice的第二個參數(shù)是要刪除的元素數(shù)量。注意，splice會在適當?shù)奈恢眯薷臄?shù)組，并返回一個包含已刪除元素的新數(shù)組。

接著，我們可以來完善一下。下面有兩個函數(shù)，第一個函數(shù)僅刪除一個匹配項(即從[2,5,9,1,5,8,5]中刪除第一個匹配項5)，而第二個函數(shù)則刪除所有匹配項：

// 僅刪除第一個匹配項 
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 
    } 
  } 
} 

刪除數(shù)組中索引i處的元素：

刪除數(shù)組中索引i處的元素:

array.splice(i, 1) 

如果你想從數(shù)組中刪除值為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(...)優(yōu)于使用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 閉包是如何工作的

閉包是一個函數(shù)和對該函數(shù)外部作用域的引用(詞法環(huán)境)，詞法環(huán)境是每個執(zhí)行上下文(堆棧)的一部分，并且是標識符(即局部變量名稱)和值之間的映射。

JavaScript 中的每個函數(shù)都維護對其外部詞法環(huán)境的引用。此引用用于配置調(diào)用函數(shù)時創(chuàng)建的執(zhí)行上下文。不管何時調(diào)用函數(shù)，該引用使函數(shù)內(nèi)的代碼能夠查看在函數(shù)外聲明的變量。

在下面的代碼中，inner與調(diào)用foo時創(chuàng)建的執(zhí)行上下文的詞法環(huán)境一起形成一個閉包，并對外部隱藏了變量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 的唯一辦法就是調(diào)用 f 

換句話說，在JavaScript中，函數(shù)帶有對私有狀態(tài)的引用，只有它們(以及在相同的詞法環(huán)境中聲明的任何其他函數(shù))可以訪問該私有狀態(tài)。這個狀態(tài)對函數(shù)的調(diào)用者是不可見的，這為數(shù)據(jù)隱藏和封裝提供了一種優(yōu)秀的機制。

請記住，JavaScript中的函數(shù)可以像變量一樣傳遞，這意味著這些功能和狀態(tài)的對可以在程序中傳遞:類似于在c++中傳遞類的實例。

如果JavaScript沒有閉包，則必須在函數(shù)之間顯式傳遞更多狀態(tài)，從而使參數(shù)列表更長，代碼更冗余。

所以，如果你想讓一個函數(shù)總是能夠訪問私有狀態(tài)，你可以使用一個閉包，我們經(jīng)常想把狀態(tài)和函數(shù)聯(lián)系起來。例如，在Java或c++中，當你向類添加私有實例變量和方法時，這是將狀態(tài)與功能關聯(lián)起來。

在 C 語言和大多數(shù)其他編程語言中，函數(shù)返回后，由于堆棧被銷毀，所有的局部變量都不再可訪問。在JavaScript中，如果在另一個函數(shù)中聲明一個函數(shù)，那么外部函數(shù)的本地變量在返回后仍然可以訪問。這樣，在上面的代碼中，secret在從foo返回后仍然對函數(shù)對象內(nèi)部可用。

閉包在需要與函數(shù)關聯(lián)的私有狀態(tài)時非常有用。這是一個非常常見的場景，JavaScript直到2015年才有類語法，它仍然沒有私有字段語法，閉包滿足了這一需求。

私有實例變量

在下面的事例中，函數(shù) toString 隱藏了 Car 類的一些細節(jié)。

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()) 

函數(shù)式編程

在下面的代碼中，函數(shù)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 

面向事件的編程

在以下代碼中，函數(shù)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> 

模塊化

在下面的示例中，所有實現(xiàn)細節(jié)都隱藏在一個立即執(zhí)行的函數(shù)表達式中。函數(shù)tick和toString隱藏了私有狀態(tài)和函數(shù)，它們需要完成自己的工作。閉包使我們能夠模塊化和封裝我們的代碼。

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：

此示例演示局部變量未在閉包中復制。閉包保留對原始變量本身的引用。似乎即使外部函數(shù)退出后，堆棧仍在內(nèi)存中保留。

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

事例 2：

在下面的代碼中，三種方法log ，increment 和update 都在同一詞法環(huán)境閉包中。

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，這在現(xiàn)代JavaScript 中幾乎沒有問題。

在下面的代碼中，每次循環(huán)中，都會創(chuàng)建一個新的inner函數(shù)，變量i被覆蓋，但是因var會讓 i 提升到函數(shù)的頂部，所以所有這些inner函數(shù)覆蓋的都是同一個變量，這意味著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中聲明函數(shù)時，都會創(chuàng)建一個閉包。
• 從一個函數(shù)內(nèi)部返回另一個函數(shù)是閉包的經(jīng)典例子，因為外部函數(shù)內(nèi)部的狀態(tài)對于返回的內(nèi)部函數(shù)是隱式可用的，即使外部函數(shù)已經(jīng)完成執(zhí)行。
• 只要在函數(shù)內(nèi)使用eval()，就會使用一個閉包。eval的文本可以引用函數(shù)的局部變量，在非嚴格模式下，甚至可以通過使用eval('var foo = ')創(chuàng)建新的局部變量。
• 當在函數(shù)內(nèi)部使用new Function()(Function constructor)時，它不會覆蓋其詞法環(huán)境，而是覆蓋全局上下文。新函數(shù)不能引用外部函數(shù)的局部變量。
• 在JavaScript中，閉包類似于在函數(shù)聲明時保留對作用域的引用(而不是復制)，后者又保留對其外部作用域的引用，以此類推，一直到作用域鏈頂端的全局對象。
• 聲明函數(shù)時創(chuàng)建一個閉包。當調(diào)用函數(shù)時，此閉包用于配置執(zhí)行上下文。
• 每次調(diào)用函數(shù)時都會創(chuàng)建一組新的局部變量。

JavaScript 中的每個函數(shù)都維護與其外部詞法環(huán)境的鏈接。詞法環(huán)境是所有名稱的映射(例如，變量，參數(shù))及其范圍內(nèi)的值。因此，只要看到function關鍵字，函數(shù)內(nèi)部的代碼就可以訪問在函數(shù)外部聲明的變量。

function foo(x) { 
  var tmp = 3; 
 
  function bar(y) { 
    console.log(x + y + (++tmp)); // 16 
  } 
 
  bar(10); 
} 
 
foo(2); 

上面輸出結果是16，參數(shù)x和變量tmp都存在于外部函數(shù)foo的詞法環(huán)境中。函數(shù)bar及其與函數(shù)foo的詞法環(huán)境的鏈接是一個閉包。

函數(shù)不必返回即可創(chuàng)建閉包。僅僅憑借其聲明，每個函數(shù)都會在其封閉的詞法環(huán)境中關閉，從而形成一個閉包。

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內(nèi)的代碼仍然可以引用參數(shù)x和變量tmp，即使它們不再直接的作用域內(nèi)。

但是，由于tmp仍然在bar的閉包內(nèi)部徘徊，因此可以對其進行遞增。每次調(diào)用bar時，它將增加1。

閉包最簡單的例子是這樣的:

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

當調(diào)用一個JavaScript函數(shù)時，將創(chuàng)建一個新的執(zhí)行上下文ec。連同函數(shù)參數(shù)和目標對象，這個執(zhí)行上下文還接收到調(diào)用執(zhí)行上下文的詞法環(huán)境的鏈接，這意味著在外部詞法環(huán)境中聲明的變量(在上面的例子中，a和b)都可以從ec獲得。

每個函數(shù)都會創(chuàng)建一個閉包，因為每個函數(shù)都有與其外部詞法環(huán)境的鏈接。

注意，變量本身在閉包中是可見的，而不是副本。

4. use strict 在 JavaScript 中做了什么，背后的原因是什么

引用一些有趣的部分：

嚴格模式是ECMAScript 5中的一個新特性，它允許我們將程序或函數(shù)放置在嚴格的操作上下文中。這種嚴格的上下文會防止某些操作被執(zhí)行，并引發(fā)更多異常。

嚴格模式在很多方面都有幫助：

• 它捕獲了一些常見的編碼漏洞，并拋出異常。
• 當采取相對不安全的操作(例如訪問全局對象)時，它可以防止錯誤或拋出錯誤。
• 它禁用令人困惑或考慮不周到的特性。

另外，請注意，我信可以將“strict mode”應用于整個文件，也可以僅將其用于特定函數(shù)。

// Non-strict code... 
 
(function(){ 
  "use strict"; 
 
  // Define your library strictly... 
})(); 
 
// Non-strict code...  

如果是在混合使用舊代碼和新代碼的情況，這可能會有所幫助。它有點像在Perl中使用的“use strict”。通過檢測更多可能導致?lián)p壞的東西，幫助我們減少更多的錯誤。

現(xiàn)在所有主流瀏覽器都支持嚴格模式。

在原生ECMAScript模塊(帶有import和export語句)和ES6類中，嚴格模式始終是啟用的，不能禁用。

5.如何檢查字符串是否包含子字符串?

ECMAScript 6 引入了string .prototype.include

const string = "foo"; 
const substring = "oo"; 
 
console.log(string.includes(substring)); 

不過，IE 不支持 includes。在 CMAScript 5或更早的環(huán)境中，使用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 functionName = function() {} 與 function functionName() {}

不同之處在于functionOne是一個函數(shù)表達式，因此只在到達這一行時才會定義，而functionTwo是一個函數(shù)聲明，在它周圍的函數(shù)或腳本被執(zhí)行(由于提升)時就定義。

如，函數(shù)表達式

// TypeError: functionOne is not a function 
functionOne(); 
 
var functionOne = function() { 
  console.log("Hello!"); 
}; 

函數(shù)聲明:

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

過去，在不同的瀏覽器之間，在塊中定義的函數(shù)聲明的處理是不一致的。嚴格模式(在ES5中引入)解決了這個問題，它將函數(shù)聲明的范圍限定在其封閉的塊上。

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

function abc(){}也具有作用域-名稱abc在遇到該定義的作用域中定義。例：

function xyz(){ 
  function abc(){}; 
  // abc 在這里定義... 
} 
// ...不是在這里 

如果想在所有瀏覽器上給函數(shù)起別名，可以這么做：

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

在本例中，xyz和abc都是同一個對象的別名

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

它的名稱是自動分配的。但是當你定義它的時候

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

它的name稱為空，我們創(chuàng)建了一個匿名函數(shù)并將其分配給某個變量。使用組合樣式的另一個很好的理由是使用簡短的內(nèi)部名稱來引用自身，同時為外部用戶提供一個長而不會沖突的名稱：

// 假設 really.long.external.scoped 為 {} 
really.long.external.scoped.name = function shortcut(n){ 
  // 它遞歸地調(diào)用自己: 
  shortcut(n - 1); 
  // ... 
  // 讓它自己作為回調(diào)傳遞：: 
  someFunction(shortcut); 
  // ... 
} 

在上面的例子中，我們可以對外部名稱進行同樣的操作，但是這樣做太笨拙了(而且速度更慢)。另一種引用自身的方法是arguments.callee，這種寫法也相對較長，并且在嚴格模式中不受支持。

實際上，JavaScript對待這兩個語句是不同的。下面是一個函數(shù)聲明：

function abc(){} 

這里的abc可以定義在當前作用域的任何地方：

// 我們可以在這里調(diào)用 
abc();  
 
// 在這里定義 
function abc(){} 
 
// 也可以在這里調(diào)用  
abc();  

此外，盡管有 return 語句，也可以提升：

// 我們可以在這里調(diào)用 
abc();  
return; 
function abc(){} 

下面是一個函數(shù)表達式:

var xyz = function(){}; 

這里的xyz是從賦值點開始定義的:

// 我們不可以在這里調(diào)用 
xyz();  
 
// 在這里定義 xyz 
xyz = function(){} 
 
// 我們可以在這里調(diào)用 
xyz();  

函數(shù)聲明與函數(shù)表達式之間存在差異的真正原因。

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

就個人而言，我們更喜歡使用函數(shù)表達式聲明，因為這樣可以控制可見性。當我們像這樣定義函數(shù)時:

var abc = function(){}; 

我們知道，如果我們沒有在作用域鏈的任何地方定義abc，那么我們是在全局作用域內(nèi)定義的。即使在eval()內(nèi)部使用，這種類型的定義也具有彈性。而定義:

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 操作符不是直接釋放內(nèi)存，它不同于簡單地將null或undefined值賦給屬性，而是將屬性本身從對象中刪除。

注意，如果已刪除屬性的值是引用類型(對象)，而程序的另一部分仍然持有對該對象的引用，那么該對象當然不會被垃圾收集，直到對它的所有引用都消失。

delete只對其描述符標記為configurable的屬性有效。

8. JS 的比較中應使用哪個等于運算符(== vs ===)?

嚴格相等運算符(===)的行為與抽象相等運算符(==)相同，除非不進行類型轉(zhuǎn)換，而且類型必須相同才能被認為是相等的。

==運算符會進行類型轉(zhuǎn)換后比較相等性。===運算符不會進行轉(zhuǎn)換，因此如果兩個值的類型不同，則===只會返回false。

JavaScript有兩組相等運算符:===和!==，以及它們的孿生兄弟==和!=。如果這兩個操作數(shù)具有相同的類型和相同的值，那么===的結果就是 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構造函數(shù)創(chuàng)建的字符串對象進行比較：

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

在這里，==操作符檢查兩個對象的值并返回true，但是===看到它們不是同一類型并返回false。哪一個是正確的?這取決于你想要比較的是什么。

我們的建議是完全繞開該問題，只是不要使用String構造函數(shù)來創(chuàng)建字符串對象。

使用==運算符(等于)

true == 1; //true, 因為 true 被轉(zhuǎn)換為1，然后進行比較 
"2" == 2;  //true, 因為 “2” 被轉(zhuǎn)換成 2，然后進行比較 

使用===操作符

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

9.在 JavaScript 中深拷貝一個對象的最有效方法是什么?

快速克隆，數(shù)據(jù)丟失– JSON.parse/stringify

如果您沒有在對象中使用Date、函數(shù)、undefined、Infinity、RegExp、Map、Set、blob、、稀疏數(shù)組、類型化數(shù)組或其他復雜類型，那么可以使用一行簡單代碼來深拷貝一個對象：

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 

使用庫進行可靠的克隆

由于克隆對象不是一件簡單的事情(復雜類型、循環(huán)引用、函數(shù)等等)，大多數(shù)主要的庫都提供了拷貝對象的函數(shù)。如果你已經(jīng)在使用一個庫，請檢查它是否具有對象克隆功能。例如

• lodash – cloneDeep; 可以通過lodash.clonedeep模塊單獨導入，如果你尚未使用提供深拷貝功能的庫，那么它可能是你的最佳選擇
• AngularJS – 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)循環(huán)來克隆你的對象，同時檢查hasOwnProperty，這將比jQuery快得多。

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

注意在 Date 對象JSON上使用JSON.parse(JSON.stringify(obj))方法。JSON.stringify(new Date())以ISO格式返回日期的字符串表示，JSON.parse()不會將其轉(zhuǎn)換回Date對象。

10.如何在另一個JavaScript文件中包含一個JavaScript文件?

舊版本的JavaScript沒有import、include或require，因此針對這個問題開發(fā)了許多不同的方法。

但是從2015年(ES6)開始，JavaScript已經(jīng)有了ES6模塊標準，可以在Node中導入模塊。為了與舊版瀏覽器兼容，可以使用Webpack和Rollup之類的構建工具和/或Babel這樣的編譯工具。

ES6 Module

從v8.5開始，Node.js就支持ECMAScript (ES6)模塊，帶有--experimental-modules標志，而且至少Node.js v13.8.0沒有這個標志。要啟用ESM(相對于Node.js之前的commonjs風格的模塊系統(tǒng)[CJS])，你可以在 package.json中使用“type”:“module”?；蛘邽槲募峁U展名.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，F(xiàn)irefox 60 和 Edge 16 開始，瀏覽器就已經(jīng)支持直接加載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); 
} 

瀏覽器中的動態(tài)導入

動態(tài)導入允許腳本根據(jù)需要加載其他腳本

<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"

動態(tài)加載文件

我們可以通過動態(tài)創(chuàng)建 script 來動態(tài)引入文件：

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

檢測腳本何時執(zhí)行

現(xiàn)在，有一個個大問題。上面這種動態(tài)加載都是異步執(zhí)行的，這樣可以提高網(wǎng)頁的性能。這意味著不能在動態(tài)加載下馬上使用該資源，因為它可能還在加載。

例如：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重新加載頁面，可能就有效了。那么該怎么辦呢?

我們可以使用回調(diào)函數(shù)來解決些問題。

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函數(shù)中加載腳本后要使用的代碼

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

然后，運行代碼：

loadScript("my_lovely_script.js", myPrettyCode); 

 

請注意，腳本可能在加載DOM之后或之前執(zhí)行，具體取決于瀏覽器以及是否包括行script.async = false;。

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。