JavaScript

DOMContentLoaded

document.addEventListener("DOMContentLoaded", function() {
  . . .
});

這是一個事件監聽器，它監聽瀏覽器的 "DOMContentLoaded" 事件，即 HTML 檔案體加載、解釋完畢事件，事件觸發時將呼叫 " . . ." 處的代碼，從而避免了錯誤發生.

async和 defer

瀏覽器遇到 async 腳本時不會阻塞頁面渲染，而是直接下載然后運行，這樣腳本的運行次序就無法控制，只是腳本不會阻止剩余頁面的顯示，當頁面的腳本之間彼此獨立，且不依賴于本頁面的其它任何腳本時，async 是最理想的選擇，

添加 defer 屬性的腳本將按照在頁面中出現的順序加載，

如果腳本無需等待頁面決議，且無依賴獨立運行，那么應使用 async，
如果腳本需要等待頁面決議，且依賴于其它腳本，呼叫這些腳本時應使用 defer，將關聯的腳本按所需順序置于 HTML 中，

常用彈出框

alert() 彈出個提示框（確定）

confirm() 彈出個確認框（確定，取消）

prompt() 彈出個輸入框讓你輸入東西

js節點和事件

洗掉當前節點dom

panel 是訊息框，panel.parentNode 就是指 panel 的上一級，就是整個 DOM，然后再來用這個父親來干掉這個兒子，兒子不能自己干掉自己，所以要這么做，

closeBtn.onclick = function() {
  panel.parentNode.removeChild(panel);
}

有時候在事件處理函式內部，您可能會看到一個固定指定名稱的引數，例如event，evt或簡單的e，這被稱為事件物件，它被自動傳遞給事件處理函式，以提供額外的功能和資訊，

function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

事件物件 e 的 target 屬性始終是事件剛剛發生的元素的參考，

可以使用任何您喜歡的名稱作為事件物件 - 您只需要選擇一個名稱，然后可以在事件處理函式中參考它，開發人員最常使用 e / evt / event，因為它們很簡單易記，堅持標準總是很好，

e.preventDefault()

如果事件是可取消的，則 preventDefault() 方法會取消該事件，這意味著屬于該事件的默認操作將不會發生，

form.onsubmit = function(e) {
  if (fname.value =https://www.cnblogs.com/ggonekim/archive/2023/03/03/=='' || lname.value =https://www.cnblogs.com/ggonekim/archive/2023/03/03/=='') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}

舉例，在以下情況下有用：

單擊“提交”按鈕，阻止其提交表單
單擊鏈接，防止鏈接跟隨 URL

事件冒泡和捕捉

瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程式，如果是，則運行它
然后它移動到下一個直接的祖先元素，并做同樣的事情，然后是下一個，等等，直到它到達<html>元素，

用 stopPropagation() 修復問題

當在事件物件上呼叫該函式時，它只會讓當前事件處理程式運行，但事件不會在冒泡鏈上進一步擴大，因此將不會有更多事件處理器被運行 (不會向上冒泡)，

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

"this"的含義

greeting: function() {
  alert('Hi! I\'m ' + this.name.first + '.');
}

關鍵字"this"指向了當前代碼運行時的物件 ( 原文：the current object the code is being written inside )

可以用var that=this來拷貝當前物件指向，

物件原型

面向物件編程（Object Oriented Programming，縮寫為 OOP）

在傳統的 OOP 中，首先定義“類”，此后創建物件實體時，類中定義的所有屬性和方法都被復制到實體中，在 JavaScript 中并不如此復制——而是在物件實體和它的構造器之間建立一個鏈接（它是__proto__屬性，是從建構式的prototype屬性派生的），之后通過上溯原型鏈，在構造器中找到這些屬性和方法，

理解物件的原型（可以通過 Object.getPrototypeOf(obj)或者已被棄用的__proto__與建構式的 prototype 屬性之間的區別是很重要的，前者是每個實體上都有的屬性，后者是建構式的屬性，也就是說，Object.getPrototypeOf(new Foobar()) 和 Foobar.prototype 指向著同一個物件，

必須重申，原型鏈中的方法和屬性沒有被復制到其他物件——它們被訪問需要通過前面所說的“原型鏈”的方式，

盡管原型鏈看起來很像是繼承的層級結構，并且在某些方面，原型鏈的行為與繼承的行為也很類似，但是在其他方面，二者之間仍然存在區別，在繼承方式下，當一個子類完成繼承時，由該子類所創建的物件既具有其子類中單獨定義的屬性，又具有其父類中定義的屬性（以及父類的父類，依此類推），而在原型鏈中，每一個層級都代表了一個不同的物件，不同的物件之間通過 __proto__ 屬性鏈接起來，原型鏈的行為并不太像是繼承，而更像是委派（delegation），委派同樣是物件中的一種編程模式，當我們要求物件執行某項任務時，在委派模式下，物件可以自己執行該項任務，或者要求另一個物件（委派的物件）以其自己的方式執行這項任務，在許多方面，相對于繼承來說，委派可以更為靈活地在許多物件之間建立聯系（例如，委派模式可以在程式運行時改變、甚至完全替換委派物件），

new的程序:

? 創建一個空物件，將它的參考賦給 this，繼承函式的原型，

? 通過 this 將屬性和方法添加至這個物件

? 最后回傳 this 指向的新物件，也就是實體（如果沒有手動回傳其他的物件）

// ES5建構式
let Parent = function (name, age) {
    //1.創建一個新物件，賦予this，這一步是隱性的，
    // let this = {};
    //2.給this指向的物件賦予構造屬性
    this.name = name;
    this.age = age;
    //3.如果沒有手動回傳物件，則默認回傳this指向的這個物件，也是隱性的
    // return this;
};
const child = new Parent();

繼承

當一個方法擁有相同的函式名，但是在不同的類中可以具有不同的實作時，我們稱這一特性為多型（polymorphism），當一個方法在子類中替換了父類中的實作時，我們稱之為子類重寫/多載（override）了父類中的實作，

class Professor extends Person {
	// 只繼承父類屬性
  teaches;

  constructor(name, teaches) {
  // 呼叫父類方法
    super(name);
    this.teaches = teaches;
  }

  introduceSelf() {
    console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);
  }

  grade(paper) {
    const grade = Math.floor(Math.random() * (5 - 1) + 1);
    console.log(grade);
  }

}

因為我們想在創建新的 Professor 時設定 teaches，我們需要宣告一個需要 name 和 teaches 引數的建構式，建構式中需要做的第一件事是使用 super() 呼叫父類的建構式，并傳遞 name 引數，父類的建構式會設定 name 屬性，然后 Professor 的建構式接著設定 teaches 屬性，

class關鍵字宣告類

class Person {

  name;

  constructor(name) {
    this.name = name;
  }

  introduceSelf() {
    console.log(`Hi! I'm ${this.name}`);
  }

}

私有方法

與私有資料屬性一樣，你也可以宣告私有方法，而且名稱也是以 # 開頭，只能在類自己的方法中呼叫

class Example {

  somePublicMethod() {
    this.#somePrivateMethod();
  }

  #somePrivateMethod() {
    console.log('You called me?');
  }
}

const myExample = new Example();

myExample.somePublicMethod(); // 'You called me?'

myExample.#somePrivateMethod(); // SyntaxError

物件和文本之間的轉換

parse(): 以文本字串形式接受 JSON 物件作為引數，并回傳相應的物件，
stringify(): 接收一個物件作為引數，回傳一個對應的 JSON 字串，

requestAnimationFrame

window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個影片，并且要求瀏覽器在下次重繪之前呼叫指定的回呼函式更新影片，該方法需要傳入一個回呼函式作為引數，該回呼函式會在瀏覽器下一次重繪之前執行，

Promise（）

fetch（）API

fetch（）API是一種現代的、基于 Promise 的、用于替代 XMLHttpRequest 的方法，

const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');

console.log(fetchPromise);

fetchPromise.then( response => {
  console.log(`已收到回應：${response.status}`);
});

console.log("已發送請求……");

呼叫 fetch() API，并將回傳值賦給 fetchPromise 變數，
緊接著，輸出 fetchPromise 變數，輸出結果應該像這樣：Promise { <state>: "pending" }，這告訴我們有一個 Promise 物件，它有一個 state屬性，值是 "pending"，"pending" 狀態意味著操作仍在進行中，
將一個處理函式傳遞給 Promise 的 then() 方法，當（如果）獲取操作成功時，Promise 將呼叫我們的處理函式，傳入一個包含服務器的回應的 Response 物件，
輸出一條資訊，說明我們已經發送了這個請求，

?

Promise.all()

它接收一個 Promise 陣列，并回傳一個單一的 Promise，

當且僅當陣列中所有的 Promise 都被兌現時，才會通知 then() 處理函式并提供一個包含所有回應的陣列，陣列中回應的順序與被傳入 all() 的 Promise 的順序相同，
會被拒絕——如果陣列中有任何一個 Promise 被拒絕，此時，catch() 處理函式被呼叫，并提供被拒絕的 Promise 所拋出的錯誤，

const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
const fetchPromise3 = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');

Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
  .then( responses => {
    for (const response of responses) {
      console.log(`${response.url}：${response.status}`);
    }
  })
  .catch( error => {
    console.error(`獲取失敗：${error}`)
  });

Promise.any()

在 Promise 陣列中的任何一個被兌現時它就會被兌現，如果所有的 Promise 都被拒絕，它也會被拒絕，

const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
const fetchPromise3 = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');

Promise.any([fetchPromise1, fetchPromise2, fetchPromise3])
  .then( response => {
    console.log(`${response.url}：${response.status}`);
  })
  .catch( error => {
    console.error(`獲取失敗：${error}`)
  });

async 和 await

async關鍵字為你提供了一種更簡單的方法來處理基于異步 Promise 的代碼，在一個函式的開頭添加 async，就可以使其成為一個異步函式，

async function myFunction() {
  // 這是一個異步函式
}

在異步函式中，你可以在呼叫一個回傳 Promise 的函式之前使用 await 關鍵字，這使得代碼在該點上等待，直到 Promise 被完成，這時 Promise 的回應被當作回傳值，或者被拒絕的回應被作為錯誤拋出，

Web Worker

Web Worker 的意義在于可以將一些耗時的資料處理操作從主執行緒中剝離，使主執行緒更加專注于頁面渲染和互動，

當在 HTML 頁面中執行腳本時，頁面的狀態是不可回應的，直到腳本已完成，

web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能，您可以繼續做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行，

懶加載
文本分析
流媒體資料處理
canvas 圖形繪制
影像處理

需要注意：

有同源限制
無法訪問 DOM 節點
運行在另一個背景關系中，無法使用Window物件
Web Worker 的運行不會影響主執行緒，但與主執行緒互動時仍受到主執行緒單執行緒的瓶頸制約，換言之，如果 Worker 執行緒頻繁與主執行緒進行互動，主執行緒由于需要處理互動，仍有可能使頁面發生阻塞
共享執行緒可以被多個瀏覽背景關系（Browsing context）呼叫，但所有這些瀏覽背景關系必須同源（相同的協議，主機和埠號）

// 在 "generate.js" 中創建一個新的 worker
const worker = new Worker('./generate.js');

// 當用戶點擊 "Generate primes" 時，給 worker 發送一條訊息，
// 訊息中的 command 屬性是 "generate", 還包含另外一個屬性 "quota"，即要生成的質數，
document.querySelector('#generate').addEventListener('click', () => {
  const quota = document.querySelector('#quota').value;
  worker.postMessage({
    command: 'generate',
    quota: quota
  });
});

// 當 worker 給主執行緒回發一條訊息時，為用戶更新 output 框，包含生成的質數（從 message 中獲取），
worker.addEventListener('message', message => {
  document.querySelector('#output').textContent = `Finished generating ${message.data} primes!`;
});

// 監聽主執行緒中的訊息，
// 如果訊息中的 command 是 "generate"，則呼叫 `generatePrimse()`
addEventListener("message", message => {
  if (message.data.command === 'generate') {
    generatePrimes(message.data.quota);
  }
});

// 生成質數 (非常低效)
function generatePrimes(quota) {

  function isPrime(n) {
    for (let c = 2; c <= Math.sqrt(n); ++c) {
      if (n % c === 0) {
          return false;
       }
    }
    return true;
  }

  const primes = [];
  const maximum = 1000000;

  while (primes.length < quota) {
    const candidate = Math.floor(Math.random() * (maximum + 1));
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }

  // 完成后給主執行緒發送一條包含我們生成的質數數量的訊息訊息，
  postMessage(primes.length);
}

基本dom操作

document.querySelector

它允許你使用 CSS 選擇器選擇元素，呼叫會匹配它在檔案中遇到的第一個對應元素

document.querySelectorAll

匹配檔案中每個匹配選擇器的元素，并把它們的參考存盤在一個array中

document.getElementById

document.getElementsByTagName

創建和放置節點

document.createElement

document.appendChild

移動和洗掉元素

document.removeChild

洗掉自身節點：

document.parentNode.removeChild

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545671.html

標籤：其他

上一篇：JS物件

下一篇：Landsat資料在USGS中無法下載Surface Reflectance產品的解決方法