iT邦幫忙

frontend-force相關文章
共有 27 則文章
鐵人賽 Modern Web DAY 30

技術 JS 原力覺醒 Day30 - 我是怎麼活過這三十天的?

總算來到最後一天了,最後一天不會有技術內容,只會有很純的純 Mur Mur,想聽的再請留下。最後我打算記錄一下這三十天的感受,給其他沒參加過鐵人但是正在猶豫要不...

鐵人賽 Modern Web DAY 29

技術 JS 原力覺醒 Day29 - Set / Map

ES6 之後加入兩種新的資料結構:Map 跟 Set 。 Map 與 Set 都是像字串跟陣列這樣可以被尋訪的類型,也就是說可以使用 for 迴圈去一個一個查...

鐵人賽 Modern Web DAY 28

技術 JS 原力覺醒 Day28 - JS 裡的資料結構

隨著硬體規格條件的提升, 網站商業邏輯的運作也慢慢從以往的後端伺服器轉移到客戶端,因此前端領域的專業知識就變得越來越重要,隨著前端技術被重視,也開始慢慢出現 R...

鐵人賽 Modern Web DAY 27

技術 JS 原力覺醒 Day27 - JS 常用 API - Object.assign && Object.defineProperty

今天要講的是是兩個在操作物件時常用到的 JS API ,有時候我們會需要做一些比較進階的操作,例如對物件屬性做一些比較細節的微調;還有複製物件,但是複製物件的話...

鐵人賽 Modern Web DAY 26

技術 JS 原力覺醒 Day26 - 常用 API: setTimeout / setTimeInterval

來講一下常用到的瀏覽器 API ,其實前面在講 Event Queue 的時候就已經提過 setTimeout 了,不過這邊就讓我們從更具實用性的層面來看這些方...

鐵人賽 Modern Web DAY 25

技術 JS 原力覺醒 Day25 - CRP : 關鍵渲染路徑

當使用者進入頁面、瀏覽器收到請求並回傳前端相關檔案後,到最後使用者看到的畫面呈現之前,還有很多步驟會被執行,這一連串步驟的總和就稱為 Critical Rend...

鐵人賽 Modern Web DAY 24

技術 JS 原力覺醒 Day24 - DOM

今天要講的是瀏覽器的 DOM 的概念,內容雖然跟 JS 語言比較沒有關係,但是除非你只寫後端 node.js ,否則只要跟介面相關一定會碰到需要處理 DOM 元...

鐵人賽 Modern Web DAY 23

技術 JS 原力覺醒 Day23 - Class 語法糖

講完了原型鍊,現在我們知道如何透過建構函式去做到類似類別的效果,也透過設定物件的 prototype 屬性達到物件的繼承效果, ES6 之後,甚至出現了 cl...

鐵人賽 Modern Web DAY 22

技術 JS 原力覺醒 Day22 - 原型共享與原型繼承

前一天我們提到 JS 的原型,以及為什麼會有原型的出現 :為了模擬物件導向的行為。 那麼原型實際上帶來什麼好處?又是透過什麼方式達到繼承的目的? Outline...

鐵人賽 Modern Web DAY 21

技術 JS 原力覺醒 Day21 - 原型

上一篇提到 JS 是物件原型導向,而非物件導向的語言,如果想要像物件導向那樣達成物件之間屬性的共用,就需要借助原型的幫忙,所以了解「原型」的概念,對於我們後續...

鐵人賽 Modern Web DAY 20

技術 JS 原力覺醒 Day20 - 物件

今天要提到 JS 裡面物件的概念,「物件」的概念在 JS 裡面是非常重要的,也是 JS 的基本元素。但是相對於物件導向語言的物件,意義上又有一點不一樣。就像前面...

鐵人賽 Modern Web DAY 19

技術 JS 原力覺醒 Day19 - 一級函式與高階函式

今天要提到的是讓 JS 很適合用來撰寫 Functional Programming 的兩個特性的名詞解釋:「 一級函式」與「高階函式」,如果你寫 JS 一段時...

鐵人賽 Modern Web DAY 18

技術 JS 原力覺醒 Day18 - Functional Programming

今天要介紹 Functional Programming ( 簡稱FP ) ,FP 是一種程式設計的思考方式,寫程式寫過一段時間的人幾乎都會聽過這個概念,對某...

鐵人賽 Modern Web DAY 17

技術 JS 原力覺醒 Day17 - this 的四種繫結

今天要談到的是 JS 裡面最常被提出來討論的部分,也就是 this 的指向,前面有提到當全域執行環境被產生出來之後,除了全域物件 window ,一個指向這個...

鐵人賽 Modern Web DAY 16

技術 JS 原力覺醒 Day16 - Async / Await:Promise 語法糖

Promise 讓我們有一個可以很方便寫出非同步函式的方法,不過像這樣非同步的程式碼對於我們在閱讀或是 Debug 要判斷執行的先後順序上可能會比較不值觀,今天...

鐵人賽 Modern Web DAY 15

技術 JS 原力覺醒 Day15 - Macrotask 與 MicroTask

上一篇針對 Promise 的語法做了一個基本的解說,但其實今天的內容才是我想講的,Promise 的運作邏輯不難理解,但若是 Promise 在整個 JS 以...

鐵人賽 Modern Web DAY 14

技術 JS 原力覺醒 Day14 - 一生懸命的約定:Promise

上一章節我們提到有一些 JS 的 Web API 會需要在「背景執行」,同時又不影響整個網頁主程式的運行,這些 API 利用瀏覽器 Event Queue 的機...

鐵人賽 Modern Web DAY 13

技術 JS 原力覺醒 Day13 - Event Queue & Event Loop 、Event Table

我們越來越深入 JS 運作方式的重要部份了,今天要提到 「 Event Loop 」的概念,這是 JS 最獨特的地方,幾乎沒有其他語言有這個特性。 Outlin...

鐵人賽 Modern Web DAY 12

技術 JS 原力覺醒 Day12- 傳值呼叫、傳址呼叫

今天要談的是另一個 JS 裡面很重要的特性,我們在做變數宣告與赴值時, JS 引擎是如何為我們保留記憶體位置的?還記得前面有提到 JS 裡面概括可以分為兩大類別...

鐵人賽 Modern Web DAY 11

技術 JS 原力覺醒 Day11 - Falsy / Truthy

上一章節的強制轉型,在布林值轉換的部分有提到 Truthy 與 Falsy ,這個特性我們應該常常碰到,至於背後的運作邏輯如何,今天就讓我們來看看吧: Outl...

鐵人賽 Modern Web DAY 10

技術 JS 原力覺醒 Day010 - 自動轉型 (Coercion)

當 JS 想要對兩個不同型別的數值做運算時, 這兩個數值必須都是同一種類型。這時有兩種方式來達成轉型,一種是使用 JS 內建的方法,像是 toString()...

鐵人賽 Modern Web DAY 9

技術 JS 原力覺醒 Day9 - 原始型別與物件型別

今天要講到 JS 型別概念,雖然你平常寫 JS 的時候可以看到很多種類別,但其實大致上可以分為兩個比較主要的大分類。 Outline 物件型別 ( Obje...

鐵人賽 Modern Web DAY 8

技術 JS 原力覺醒 Day08 - Closures

Outline Closure 的形成 經典範例 Closure 的形成 函數內的變數在函式執行完之後,就無法再被參照到,這個時候一開始被分派的記憶體就會被...

鐵人賽 Modern Web DAY 7

技術 JS 原力覺醒 Day07 - 陳述式 表達式

這很基本,不過為了了解後面的說明,還是要提一下,JavaScript 有兩種語法分類:陳述式與表達式。而了解這兩種語法分類之後,後半段會提到,JavaScrip...

鐵人賽 Modern Web DAY 6

技術 JS 原力覺醒 Day06 - 提升 Hoisting

今天我們要提到另外一個講到 JS 一定會提到的概念,就是提升 ( Hoisting ),提升是 JavaScript 裡面特有的行為,指的是在宣告一個變數或是函...

鐵人賽 Modern Web DAY 5

技術 JS 原力覺醒 Day05 - Scope Chain

在上一章我們針對什麼是範疇 ,以及兩種不同的範疇做了說明,而如果 JS 在範疇內找不到某變數, 就會向外尋找。在這章節我會針對這個預設行為做比較詳細的說明。 O...

鐵人賽 Modern Web DAY 4

技術 JS 原力覺醒 Day04 - Function Scope / Block Scope

今天我們要來談談「範疇( Scope )」。 Outline 詞彙環境 ( Lexical Environment ) 什麼是範疇 ( Scope )...