iT邦幫忙

frontend相關文章
共有 109 則文章
鐵人賽 Modern Web

技術 Day 44. 通用武裝・介面與類別 X 泛型註記機制 - TypeScript Generic Class & Interface

閱讀本篇文章前,仔細想想看 泛用型別化名的如何進行宣告? 泛用化名註記在變數時的注意事項為何? 泛用函式的特點為何? 如果還不清楚可以看一下前一篇文章喔...

鐵人賽 Modern Web

技術 Day 43. 通用武裝・泛型註記 X 推論未來 - TypeScript Generic Declaration & Annotation

閱讀本篇文章前,仔細想想看 泛用型別的意義是什麼? 泛用型別大致上有哪些種類或形式? 如果還不清楚可以看一下前一篇文章喔~ 以下就直接正文開始~ 泛用...

鐵人賽 Modern Web DAY 30
React + D3 的正確姿勢 系列 第 30

技術 Day30-結語

前言 不知不覺就到最後一天了,沒想到這次竟然也可以完賽,果然每天屁話個幾句就可以順利產出文章了(X 為了呼應上面所說,所以今天就來當個文章小偷來分類一下這次系列...

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29
React + D3 的正確姿勢 系列 第 29

技術 Day29-React + D3(二)

前言 昨天的文章利用 componentDidMount 結合 D3 ,但相信讀者一定會覺得這樣的寫法又臭又長,而且這個 class 裡面也才寫了一個 comp...

鐵人賽 Modern Web DAY 28
React + D3 的正確姿勢 系列 第 28

技術 Day28-React + D3(一)

前言 前面的文章都介紹完圖表的繪製後,今天終於要回歸主題,把 D3 跟 React 結合在一起了,今天跟明天的文章都會把以前所講的內容做一個統整,假如對 Rea...

鐵人賽 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
React + D3 的正確姿勢 系列 第 27

技術 Day27-bubble chart(using D3.js)

前言 今天要來介紹本系列文最後一個圖表了,由於鐵人賽時間真的很有限沒辦法介紹全部的圖表,但筆者已經盡量把最常用的幾種圖表都介紹給大家了,相信大家學會這幾種圖表一...

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26
React + D3 的正確姿勢 系列 第 26

技術 Day26-donut chart(using D3.js)

前言 昨天的文章介紹了圓餅圖,今天要來介紹圓餅圖的變形版:環圈圖,其實筆者自己比較少用圓餅圖,只要是這種要計算數據比例的統計圖現在都改用環圈圖了,至於為什麼會有...

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25
React + D3 的正確姿勢 系列 第 25

技術 Day25-pie chart(using D3.js)

前言 今天要來介紹一個比較特別的圖表,在前天的文章提到長條圖,用來反映事物分布、集中情況,昨天的文章提到折線圖,用來顯示數據的變化趨勢,但是這些都無法得知單一數...

鐵人賽 Modern Web DAY 24
React + D3 的正確姿勢 系列 第 24

技術 Day24-line chart(using D3.js)

前言 在講完長條圖之後接下來要介紹的是折線圖,折線圖也是視覺化中非常重要且基礎的一種圖表,廢話不多說馬上開始今天的文章吧! 折線圖 折線圖是用直線段將各數據點連...

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

技術 Day 24 - 簡單使用 LINE LIFF API

前言 以下就為大家帶來簡單的實作以及如何去使用它。 實作 在views/下新增一個liff_test.html並加入以下內容 <html> &l...

鐵人賽 Modern Web DAY 23
React + D3 的正確姿勢 系列 第 23

技術 Day23-multi bar chart(using D3.js)

前言 昨天的文章講完如何繪製長條圖後,今天要來講點進階版的長條圖了,其實說進階也沒到多進階就只是讓同一個 band 可以多畫一些 rect 出來形成多重長條圖而...

鐵人賽 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
React + D3 的正確姿勢 系列 第 22

技術 Day22-bar chart(using D3.js)

前言 從今天開始的文章就正式進入實作的過程啦~ 這次的系列文預計會帶給大家 5 種不一樣的圖表,視覺化是個非常深奧的世界,筆者我也只會一點皮毛而已XD 所以這次...

鐵人賽 Modern Web DAY 21
React + D3 的正確姿勢 系列 第 21

技術 Day21-D3基本介紹(transform)

前言 今天的內容會比較輕鬆一些,前幾天的文章內容可能有點太多而且不太好消化,所以今天筆者就打算講一點輕鬆的內容,但這個內容也是非常重要的,想要把一張圖表繪製好這...

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 20
React + D3 的正確姿勢 系列 第 20

技術 Day20-D3基本介紹(chart event、tooltip)

前言 在講完所有的圖表設定後,今天要來介紹如何讓我們設計好的圖表可以跟使用者進行互動,為了要讓圖表能進行互動我們就必須要將圖表設定一些 event ,這樣使用者...

鐵人賽 Modern Web DAY 21

技術 JS 原力覺醒 Day21 - 原型

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

鐵人賽 Modern Web DAY 19
React + D3 的正確姿勢 系列 第 19

技術 Day19-D3基本介紹(Axis)

前言 在昨天的文章講完如何傳資料進去圖表後,今天要來介紹另一個重要的觀念: Axis 了,其實 Axis 代表的就是座標軸上的設定,透過客製化調整 Axis 的...

鐵人賽 Modern Web DAY 20

技術 JS 原力覺醒 Day20 - 物件

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

鐵人賽 Modern Web DAY 18
React + D3 的正確姿勢 系列 第 18

技術 Day18-D3基本介紹(data)

前言 在昨天的文章講完如何先初始化一個 svg 容器來填入圖表後,今天要來介紹如何把資料傳進去 svg 內進行圖表繪製嘍! selectAll 昨天介紹了 d3...

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 17
React + D3 的正確姿勢 系列 第 17

技術 Day17-D3基本介紹(select、append、attr)

前言 從今天開始的文章就正式進入 D3 的圖表繪製設定了,光最基本的輸入輸出區域就花了不少篇幅說明 (其實是為了拖台錢讓鐵人賽更容易完賽XD) ,總之接下來的文...

鐵人賽 Modern Web DAY 18

技術 JS 原力覺醒 Day18 - Functional Programming

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