iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 5183 瀏覽

鐵人賽 Modern Web DAY 20

React.js 從【0】到【1】推坑計畫系列第 20 篇

技術【Day 20】可能不需要redux (2) - contextAPI

昨天介紹了 useReducer 的用法，但是還缺少了 global state 的機制啊？怎麼會說可能可以不需要 redux 了？今天就來介紹 context...

莫力全 Kyle Mo ‧ 2019-09-24

2 Like 3 留言 3410 瀏覽

鐵人賽 Modern Web DAY 25

讓 TypeScript 成為你全端開發的 ACE！系列第 25 篇

技術 Day 25. 機動藍圖・類別與介面 X 終極的組合 - Ultimate Combo of Class & Interface

閱讀本篇文章前，仔細想想看試描述類別（Class）的型別推論機制與註記機制。繼承過後的子類別，試描述其類別推論機制與註記機制。子類別跟父類別的推論與...

Maxwell Alexius ‧ 2019-10-05

1 Like 1 留言 3497 瀏覽

鐵人賽 Modern Web DAY 24

讓 TypeScript 成為你全端開發的 ACE！系列第 24 篇

技術 Day 24. 機動藍圖・類別推論 X 註記類別 - Class Type Inference & Annotation

閱讀本篇文章前，仔細想想看大致上已經了解類別的基本用法與性質了嗎？ TypeScript 針對物件方面的型別推論與註記機制為何？如果還沒理解完畢的話...

Maxwell Alexius ‧ 2019-10-04

1 Like 0 留言 6598 瀏覽

鐵人賽 Modern Web DAY 19

React.js 從【0】到【1】推坑計畫系列第 19 篇

技術【Day 19】可能不需要 redux - useReducer

今天要介紹另一個 hooks - useReducer。光看第一行有些讀者可能就會有一些疑問了，udeReducer？看起來跟 redux 的 reducer...

莫力全 Kyle Mo ‧ 2019-09-23

2 Like 2 留言 3908 瀏覽

鐵人賽 Modern Web DAY 28

讓 TypeScript 成為你全端開發的 ACE！系列第 28 篇

技術 Day 28. 機動藍圖・抽象類別 X 藍圖基底 - TypeScript Abstract Class

閱讀本篇文章前，仔細想想看筆者列出到目前為止我們學到跟類別有關的名詞，可以回憶一下它們各自的定義以及實用的地方在哪裡～類別與物件的差別 Class v...

Maxwell Alexius ‧ 2019-10-08

0 Like 0 留言 6285 瀏覽

鐵人賽 Modern Web DAY 18

React.js 從【0】到【1】推坑計畫系列第 18 篇

技術【Day 18】Redux 實戰演練（2）

昨天建立了 redux 的三元素 action、reducer 與 store，也將它們用 provider 包住會用到 state 的元件，今天來試著在元件中...

莫力全 Kyle Mo ‧ 2019-09-22

2 Like 1 留言 4318 瀏覽

鐵人賽 Modern Web DAY 23

讓 TypeScript 成為你全端開發的 ACE！系列第 23 篇

技術 Day 23. 機動藍圖・私有建構子 X 單身狗模式 - Private Constructor & Singleton Pattern

閱讀本篇文章前，仔細想想看還記得存取修飾模式（Access Modifiers）有哪些嗎？你有想過 private 除了類別成員與類別的靜態屬性與方法...

Maxwell Alexius ‧ 2019-10-03

1 Like 0 留言 3277 瀏覽

鐵人賽 Modern Web DAY 22

讓 TypeScript 成為你全端開發的 ACE！系列第 22 篇

技術 Day 22. 機動藍圖・特殊成員 X 存取方法 - TypeScript Class Accessors

閱讀本篇文章前，仔細想想看類別的靜態成員（Static Members）是什麼？與普通成員差異在哪？什麼情況下會採用靜態成員的設計呢？如果還沒理解...

Maxwell Alexius ‧ 2019-10-02

2 Like 1 留言 3976 瀏覽

鐵人賽 Modern Web DAY 17

React.js 從【0】到【1】推坑計畫系列第 17 篇

技術【Day 17】Redux 實戰演練

今天將直接實作 redux，如果不知道 redux 運作概念的讀者可以回去看看昨天的概念介紹喔～今天嘗試將 dark theme 與 light theme 實...

莫力全 Kyle Mo ‧ 2019-09-21

1 Like 0 留言 5275 瀏覽

鐵人賽 Modern Web DAY 16

React.js 從【0】到【1】推坑計畫系列第 16 篇

技術【Day 16】state management - redux 基礎概念

今天開始會進入 React 中比較進階的主題 - state management在前幾天中我們介紹了 state，也介紹了 props，我們了解一個 comp...

莫力全 Kyle Mo ‧ 2019-09-20

2 Like 2 留言 4109 瀏覽

鐵人賽 Modern Web DAY 21

讓 TypeScript 成為你全端開發的 ACE！系列第 21 篇

技術 Day 21. 機動藍圖・靜態成員 X 即刻操作 - Static Properties & Methods

閱讀本篇文章前，仔細想想看如何使用類別的繼承（Inheritance）？為何我們設計類別的成員時，會儘量以 private 模式為基準？什麼時候該開放...

Maxwell Alexius ‧ 2019-10-01

2 Like 1 留言 3960 瀏覽

鐵人賽 Modern Web DAY 20

讓 TypeScript 成為你全端開發的 ACE！系列第 20 篇

技術 Day 20. 機動藍圖・類別繼承 X 延用設計 - TypeScript Class Inheritance

閱讀本篇文章前，仔細想想看描述類別存取修飾子（Access Modifiers）的功能與意義。為何類別要實踐某介面時，介面裡的所有規格在類別裡會直接綁...

Maxwell Alexius ‧ 2019-09-30

1 Like 1 留言 6642 瀏覽

鐵人賽 Modern Web DAY 15

React.js 從【0】到【1】推坑計畫系列第 15 篇

技術【Day15 路由神器 - React-router 】

講到 SPA（single page application）與傳統網頁的差異，應該很多人會想到傳統網頁跳頁往往會有一段載入時間，導致畫面空白，讓使用者需要對著...

莫力全 Kyle Mo ‧ 2019-09-19

1 Like 1 留言 4168 瀏覽

鐵人賽 Modern Web DAY 19

讓 TypeScript 成為你全端開發的 ACE！系列第 19 篇

技術 Day 19. 機動藍圖・存取修飾 X 藍圖規劃 - TypeScript Class Access Modifiers

閱讀本篇文章前，仔細想想看 TypeScript 類別（Class）的意義是什麼？ TypeScript 類別跟介面（Interface）的最大差別在哪裡...

Maxwell Alexius ‧ 2019-09-29

2 Like 0 留言 5082 瀏覽

鐵人賽 Modern Web DAY 18

讓 TypeScript 成為你全端開發的 ACE！系列第 18 篇

技術 Day 18. 機動藍圖・類別宣告 X 藍圖設計 - TypeScript Class

閱讀本篇文章前，仔細想想看複合型別 union 與 intersection 的功能與意義代表為何？如果還沒理解完畢的話，可以先翻看前一篇文章喔！今...

Maxwell Alexius ‧ 2019-09-28

2 Like 0 留言 1965 瀏覽

技術 7天搞懂JS進階議題: 目錄

寫在前頭(iT邦幫忙) 這是我參加7日寫作松自我挑戰的文章目錄。因為原本目錄沒有參賽系列連結，所以補上這段 ps. 原本的tag我打錯，懶的改了。本文同步...

lagagain ‧ 2020-02-29

1 Like 0 留言 7132 瀏覽

鐵人賽 Modern Web DAY 14

React.js 從【0】到【1】推坑計畫系列第 14 篇

技術【Day 14】Form in React

今天要來介紹在 React 中如何建構最基本的 form。重點可以歸納出這幾項：建立 state 變數，且與 input value 做綁定設定 onC...

莫力全 Kyle Mo ‧ 2019-09-18

2 Like 2 留言 6233 瀏覽

鐵人賽 Modern Web DAY 17

讓 TypeScript 成為你全端開發的 ACE！系列第 17 篇

技術 Day 17. 機動藍圖・複合型別 X 型別複合 - TypeScript Union & Intersection

閱讀本篇文章前，今天什麼都不用想！直接進入正文，快看下面！筆者就直接讓油門繼續摧下去～正文開始！筆者 O.S.：今天又是數學時間，要學好程式可真不...

Maxwell Alexius ‧ 2019-09-27

3 Like 0 留言 7557 瀏覽

鐵人賽 Modern Web DAY 16

讓 TypeScript 成為你全端開發的 ACE！系列第 16 篇

技術 Day 16. 機動藍圖・介面與型別 X 混用與比較 - TypeScript Interface V.S. Type

閱讀本篇文章前，仔細想想看 TypeScript 的型別系統與介面之間在語法上的差別與介面或型別的使用有何共通點呢？但意義上又會差在哪？如果還沒理解完畢的...

Maxwell Alexius ‧ 2019-09-26

2 Like 4 留言 4994 瀏覽

鐵人賽 Modern Web DAY 15

讓 TypeScript 成為你全端開發的 ACE！系列第 15 篇

技術 Day 15. 機動藍圖・功能多樣性 X 多樣性介面 - More on TypeScript Interface

閱讀本篇文章前，仔細想想看到目前為止對於 TypeScript Interface 介面的理解到什麼程度呢？你認為 TypeScript 和第三方套件...

Maxwell Alexius ‧ 2019-09-25

2 Like 1 留言 7534 瀏覽

鐵人賽 Modern Web DAY 14

讓 TypeScript 成為你全端開發的 ACE！系列第 14 篇

技術 Day 14. 機動藍圖・函式超載 X 究極融合 - Function Overload & Interface Merging

閱讀本篇文章前，仔細想想看試問介面跟型別系統的差異性在哪？為何要儘量對程式碼進行抽象化的動作？如果還沒理解完畢的話，可以先翻看前一篇文章喔！什...

Maxwell Alexius ‧ 2019-09-24

3 Like 0 留言 6332 瀏覽

鐵人賽 Modern Web DAY 13

讓 TypeScript 成為你全端開發的 ACE！系列第 13 篇

技術 Day 13. 機動藍圖・介面的延展 X 功能與意義 - Interface Extension & Significance

閱讀本篇文章前，仔細想想看如何宣告介面（Interface）？介面跟型別（Type）在語法上的差別與規則會是什麼？（筆者目前還沒講概念上的差別，讀者先...

Maxwell Alexius ‧ 2019-09-23

2 Like 0 留言 6790 瀏覽

鐵人賽 Modern Web DAY 12

讓 TypeScript 成為你全端開發的 ACE！系列第 12 篇

技術 Day 12. 機動藍圖・介面宣告 X 使用介面 - TypeScript Interface Intro.

《機動藍圖》篇章概要本系列第二部分：《機動藍圖》（The Agile Blueprint）篇章涵括的範圍就是 TypeScript 的重頭戲。不外乎，筆者想...

Maxwell Alexius ‧ 2019-09-22

0 Like 0 留言 5906 瀏覽

鐵人賽 Modern Web DAY 11

React.js 從【0】到【1】推坑計畫系列第 11 篇

技術【Day 10】CSS && Inline-style

到昨天為止都著重在 JS 的部分，基本的功能已經可以完成了，但除了功能以外，網頁應用的外觀也是很重要的，所以今天就暫時把 JS 擺在一邊，看看在 React 中...

莫力全 Kyle Mo ‧ 2019-09-15

1 Like 0 留言 5838 瀏覽

鐵人賽 Modern Web DAY 9

讓 TypeScript 成為你全端開發的 ACE！系列第 9 篇

技術 Day 09. 前線維護・選用屬性 X 型別擴展 - Optional Properties

閱讀本篇文章前，仔細想想看明文型別（Literal Type）是什麼？如何使用型別化名（Type Alias）？使用化名的好處是什麼？變數被指派廣義...

Maxwell Alexius ‧ 2019-09-19

2 Like 1 留言 9795 瀏覽

鐵人賽 Modern Web DAY 5

讓 TypeScript 成為你全端開發的 ACE！系列第 5 篇

技術 Day 05. 前線維護・陣列型別 X 型別陣列 - Array Types

閱讀本篇文章前，仔細想想看定義一個函式，最需要注意的點有哪些？什麼情形必須積極作型別註記呢？函式的輸出部分通常（但不是全部）可以不用作型別註記的原因為...

Maxwell Alexius ‧ 2019-09-15

5 Like 3 留言 11566 瀏覽

鐵人賽 Modern Web DAY 4

讓 TypeScript 成為你全端開發的 ACE！系列第 4 篇

技術 Day 04. 前線維護・函式型別 X 積極註記 - Function Types

閱讀本篇文章前，仔細想想看大概可以解釋普通 JS 物件（也就是 JSON 格式，或筆者所謂的狹義物件）在 TypeScript 裡的推論機制。知道筆者...

Maxwell Alexius ‧ 2019-09-14

0 Like 0 留言 797 瀏覽

技術 PHP-資料庫串接handlebars顯示到HTML筆記(2)

action.js $(document).ready(function(){ var commodity_template = $('#commodity...

Ci_Yao_Yan ‧ 2019-09-12

1 Like 0 留言 814 瀏覽

技術 PHP-資料庫串接handlebars顯示到HTML筆記(1)

data.php $sql = 'SELECT * FROM commodity ORDER BY id ASC'; $statement = $pdo-&gt...

Ci_Yao_Yan ‧ 2019-09-12

1 Like 0 留言 4198 瀏覽

鐵人賽 Modern Web DAY 7

React.js 從【0】到【1】推坑計畫系列第 7 篇

技術【Day 7】型別檢查 && PropTypes

昨天講解了 props 的應用，讓子元件可以接收來自父元件的資料。但是隨著應用規模的提升，透過型別檢查可以減少許多可能的錯誤。要達成這個目的，許多人會選擇 fl...

莫力全 Kyle Mo ‧ 2019-09-11

技術 【Day 20】可能不需要redux (2) - contextAPI