本文內容涵蓋
- Web 應用程式生命週期
- 處理 HTML 以產生網頁
- JS 程式碼的執行順序
- 與事件互動
- 事件迴圈
Web 應用程式生命週期
Web 應用程式真正的生命起始於第四步驟:收到伺服器回傳的頁面時。
Web 應用程式真正的生命起始於第四步驟:收到伺服器回傳的頁面時。
記錄著關於初學 REACT 時,官方文件提及的主要概念,基本上都是文件上的內容,希望用自己是初心者的方式整理關於 JSX、生命週期、事件處理器、官方文件的觀念,可以更記得住。
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
往下瞭解其他概念之前,可以先閱讀「重新介紹 JavaScipt」,如果好幾年沒碰 JavaScript 的話,看一下「三個心法」。
它是一個「打包工具」。將眾多模組與資源打包成一包檔案,並編譯我們需要預先處理的內容,變成瀏覽器看得懂的東西,讓我們可以上傳到伺服器。
前端日新月異,我們寫的內容已不只是寫 HTML、CSS、JavaScript 單純的檔案。前端出現了許多預處理工具及框架,預處理工具如 PUG、SASS、Babel;框架如 Vue、React。不過瀏覽器並看不懂我們寫的預處理內容,每每都需要透過編譯才能使用,也因此出現了自動化工具,Webpack、Gulp、Grunt、Parcel、Browserify…等。
// 原始寫法
function test(fruit) {
// 條件語句
if (fruit === "apple" || fruit === "strawberry") {
console.log("red fruit");
}
}
乍看之下,寫法沒什麼錯誤。可是當我們有更多紅色水果的選項時,如 cherry
(櫻桃)和 cranberries
(蔓越莓),難道我們要增加更多的 ||
邏輯運算子來判斷?
我們用 Array.includes 來改寫一次上面的判斷式:
// 改寫後
function test(fruit) {
// 將選項提取出來,放入陣列當中
const redFruits = ["apple", "strawberry", "cherry", "cranberries"];
if (redFruits.includes("apple")) {
console.log("red fruit");
}
}
i
for(var i = 0; i<10; i++) {
console.log(i)
}
console.log(i) // 10
10
。i
本篇文章翻譯自 How to clone an array in JavaScript - by Yazeed Bzadough on freeCodeCamp @medium,搭配 JS 的拷貝 by Kai @github 提及的概念,整理成筆記。
8.
JSON.parse and JSON.stringify 是深拷貝。其他都是淺拷貝。object
時,會參考到同一個物件,並沒有將此物件拷貝到並建立出新的關聯。object
時,會獨立出來不共用同一個記憶體位置,改動 newObject
時不會動到 oldObject
。將 this
鎖在 function
當中。
為了取代舊有的.bind()
(.bind()
會綁定 this 到指定的 obj
)。
只要 function
內的 this
還要再往下傳的時候,就適合使用 arrow function
。
node.js
JavaScript
運行於瀏覽器外。LTS
是較穩定的版本,Current
是有其他新的功能。iTerm
建立 js
檔案,並用 node
執行寫好的程式。JavaScript
:vim index.js
// index.js
console.log(123)