JavaScript 中 10 個須要掌握基礎的問題

時間 2020-10-19

標籤 javascript 前端 java c++ git github 編程 json 數組瀏覽器欄目 JavaScript 简体版

原文原文鏈接

做者：hackernoon
譯者：前端小智
來源：Kiran
https://mp.weixin.qq.com/s/q0...

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。javascript

JavaScript 是一種客戶端編程語言。全球超過90％的網站都在使用它，它是世界上最經常使用的編程語言之一。所以，今天咱們業討論 10 個有關 JavaScript 的常見問題。前端

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

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

splice()是一個非純函數，經過刪除現有元素和/或添加新元素來更改數組的內容。c++

const array = [2, 5, 9]

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

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

splice的第二個參數是要刪除的元素數量。注意，splice會在適當的位置修改數組，並返回一個包含已刪除元素的新數組。git

接着，咱們能夠來完善一下。下面有兩個函數，第一個函數僅刪除一個匹配項（即從[2,5,9,1,5,8,5]中刪除第一個匹配項5），而第二個函數則刪除全部匹配項：github

// 僅刪除第一個匹配項
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處的元素:json

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的閉包內部徘徊，所以能夠對其進行遞增。每次調用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. use strict 在 JavaScript 中作了什麼，背後的緣由是什麼

引用一些有趣的部分：

嚴格模式是 ECMAScript 5中的一個新特性，它容許咱們將程序或函數放置在嚴格的操做上下文中。這種嚴格的上下文會防止某些操做被執行，並引起更多異常。

嚴格模式在不少方面都有幫助：

它捕獲了一些常見的編碼漏洞，並拋出異常。
當採起相對不安全的操做(例如訪問全局對象)時，它能夠防止錯誤或拋出錯誤。
它禁用使人困惑或考慮不周到的特性。

另外，請注意，我信能夠將「strict mode」應用於整個文件，也能夠僅將其用於特定函數。

// Non-strict code...

(function(){
  "use strict";

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

// Non-strict code...

若是是在混合使用舊代碼和新代碼的狀況，這可能會有所幫助。它有點像在Perl中使用的「use strict」。經過檢測更多可能致使損壞的東西，幫助咱們減小更多的錯誤。

如今全部主流瀏覽器都支持嚴格模式。

在原生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或更早的環境中，使用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是一個函數表達式，所以只在到達這一行時纔會定義，而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. JS 的比較中應使用哪一個等於運算符（== vs ===）？

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

==運算符會進行類型轉換後比較相等性。 ===運算符不會進行轉換，所以若是兩個值的類型不一樣，則===只會返回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模塊單獨導入，若是你還沒有使用提供深拷貝功能的庫，那麼它多是你的最佳選擇
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)循環來克隆你的對象，同時檢查hasOwnProperty，這將比jQuery快得多。

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

注意在 Date 對象JSON上使用JSON.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這樣的編譯工具。

ES6 Module

從v8.5開始，Node.js就支持ECMAScript (ES6)模塊，帶有--experimental-modules 標誌，並且至少Node.js v13.8.0沒有這個標誌。要啓用ESM(相對於Node.js以前的commonjs風格的模塊系統[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;。

原文：https://hackernoon.com/10-ess...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

文章每週持續更新，能夠微信搜索 【大遷世界】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。