鐵人賽

2018 總回顧

這是我在 2018 年最值得聊聊的十件事 (*´∀`)~♥

年度回顧 2019鐵人賽 鐵人賽 WorldGym 香港 寶可夢 吃什麼 AMP You-Dont-Know-JS 你懂JavaScript嗎? 你所不知道的JS · 留言


你懂 JavaScript 嗎?#30 總結

總結鐵人賽這 30 天的想法與感謝。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#29 語法(Syntax)

本文主要會談到 ES6 新增的熱門語法,包含以區塊為範疇的宣告、分散與其餘運算、預設參數值、解構、物件字面值擴充功能、範本字面值、箭號函式。。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#28 ES? 現在 vs 未來

本文主要會談到如何在 JavaScript 快速演進的狀況下,漸進的適應新功能?來嘗試 Transpiling 與 Shims/Polyfills 吧。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#27 基準化分析與微調(Benchmarking and Tuning)- 使用 Benchmark.js 和 jsPerf 分析程式碼效能

本文主要會談到如何使用工具來做基準化分析。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 效能調校 · 留言


你懂 JavaScript 嗎?#26 程式效能(Program Performance)

本文主要會談到 web worker、SIMD 與 asm.js。到目前為止我們只談論了如何有效的運用非同步處理模式,現在就來探討為什麼非同步處理對 JavaScript 來說這麼重要,其中最明顯的理由就是效能,本文主要探討的是更整體的程式層級的效能。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 Web Workers Worker 效能調校 · 留言


你懂 JavaScript 嗎?#25 產生器(Generator)

本文主要會談到 generator 的基本概念與範例;從 callback 演進到 ES6 promise 與 generator 再進化到 ES7 async 和 await。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#24 Promise

本文主要會談到 promise 是什麼?promise 的錯誤處理、模式與限制。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#23 Callback

本文主要會談到情境切換、callback vs callback hell、控制權轉移、解決 callback 的信任問題的解法-分別回呼與錯誤優先處理。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#22 非同步:現在和以後

本文主要會談到事件迴圈與共時

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#21 ES6 Class

本文主要是探討 ES6 Class 的美好與陷阱。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? ES6 鐵人賽 · 留言


你懂 JavaScript 嗎?#20 行為委派(Behavior Delegation)

本文主要會談到-什麼是行為委派?和類別有什麼差異?行為委派的優點是什麼?模型比較?什麼是 OLOO?如何使用委派機制達到去類別化?如何撰寫更簡潔易懂的程式碼?物件間要怎麼做內省?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#19 原型(Prototype)

本文主要會談到-類別、建構子與實體;什麼是原型串鏈?原型串鏈的功用是?什麼是原型式繼承?疑難雜症大解惑-如何分辨屬性是位於該物件或原型串鏈上的?如何分辨誰是誰的實體?誰是誰的建構子?原型串鏈有終點嗎?如何建立兩物件的連結?物件屬性的設定與遮蔽規則有哪些?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#18 (簡易版)物件導向概念

本文主要會談到簡單的物件導向概念,作為後續「原型」(Prototypes)的暖身。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#17 物件(Object)

關於物件,本文會提到-語法:宣告式與建構形式;型別:再次複習 typeof、使用 instanceof 判定物件子型別;內容:屬性值的存取、物件的複製(淺拷貝與深拷貝)、屬性描述器、不可變的物件、取值器與設值器、檢視屬性是否存在、屬性列舉;迭代:一些迭代出陣列的值的方法。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#16 this

本文主要會談到-this 是什麼?判斷 this 的值的四個規則與例外。語彙的 this,這裡會提到箭頭函數中的 this 的不同之處。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#15 閉包(Closure)

本文主要會談到-閉包是什麼?有什麼功用?迴圈與閉包搭配使用時的謬誤與陷阱。模組模式是什麼?如何管理模組?探討模組依存性載入器/管理器與 ES6 模組。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#14 動態範疇(Dynamic Scope)

本文主要是比較動態範疇與語彙範疇的差異。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#13 拉升(Hoisting)

本文主要會談到-什麼是拉升(hoisting)?變數與函式的拉升有什麼不同?怎麼處理在 script 標籤內宣告的全域變數?是否也有拉升的狀況?拉升 vs 重複宣告的變數與函式,要怎麼處理?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#12 函式範疇與區塊範疇(Function vs Block Scope)

本文會提到範疇的劃分單位可分為兩種-函式範疇與區塊範疇,它們有什麼不同?各有什麼優點?函式範疇的重要觀念與相關應用-函式宣告與函式運算式、匿名與具名函式、即刻調用函式運算式。區塊範疇的重要觀念與相關應用-const 與 let、垃圾回收。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 ES6 · 留言


你懂 JavaScript 嗎?#11 語彙範疇(Lexical Scope)

本文會提到什麼是語彙範疇?這階段要做什麼事情?什麼會改變語彙範疇?有什麼影響?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#10 範疇(Scope)

本文會提到什麼是「範疇」?範疇的功用是?編譯器怎麼理解程式碼?什麼是巢狀範疇?從 LHS 與 RHS 來理解 JavaScript 查找變數的報錯機制。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#9 文法(Grammar)

JavaScript 的文法是描述其語法(syntax),例如:運算子、關鍵字等,如何結合在一起,形成格式正確的有效程式的一種結構化方式。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#8 強制轉型(Coercion)

強制轉型(coercion)到底是一個有用的功能,還是設計上的缺陷呢?

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 Jest Unit Test 單元測試 · 留言


你懂 JavaScript 嗎?#7 原生功能(Natives)

本文主要會談到...何謂 Natives(原生功能)?怎麼用?物件包裹器、陷阱、解封裝;各類建構子的原生功能、原生的原型。雖然優先使用字面值而非使用建構子建立物件,還是需要來看一些需要關心的議題和警惕用的錯誤用法。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? javascript array javascript date 鐵人賽 javascript prototype · 留言


你懂 JavaScript 嗎?#6 值(Values)Part 2 - 特殊值

本文主要內容為探討基本型別的特殊值並能適當地使用它們。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#5 值(Values)Part 1 - 陣列、字串、數字

本文主要會談到關於陣列、字串、數字的錯誤操作方式與疑難雜症的解法。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? javascript array 鐵人賽 · 留言


你懂 JavaScript 嗎?#4 型別(Types)

本文主要會談到 (1) 何謂「型別」?內建型別有哪些?常見疑難雜症與解法;(2) 未定義(undefined)vs 未宣告(undeclared)。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? javascript array 鐵人賽 · 留言


你懂 JavaScript 嗎?#3 暖身 (๑•̀ㅂ•́)و✧ Part 2 - 變數、嚴格模式、IIFEs、閉包、模組、this、原型、Polyfill 與 Transpiler

在上一篇暖身文章中大致聊過了一些基本知識,像是運算子、運算式、值與型別、變數、條件式、迴圈,本文還會再探討一些基礎概念,像是變數、函式範疇、拉升、巢狀範疇、嚴格模式、IIFE、閉包、模組、this、原型、Polyfill 與 Transpiler。本文也僅是概念而已,之後會有單篇章節細細討論的,所以就算是暖身 Part 2 摟。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 javascript prototype · 留言


你懂 JavaScript 嗎?#2 暖身 (๑•̀ㅂ•́)و✧ Part 1 - 運算子、運算式、值與型別、變數、條件式、迴圈

本文主要內容為程式設計簡介,在此可看到在初學階段所必須理解的各種專有名詞。

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


你懂 JavaScript 嗎?#1 預備...GO!

這次鐵人賽的主題是「你懂 JavaScript 嗎?」,主要內容是「You Don't Know JS」系列書的讀書筆記。為什麼要讀這一系列的書呢?由於近幾年的年度願望中都有「讀完 You Don't Know JS 系列書」這一項(掩面),但苦於各種理由而導致進度嚴重落後(哭),那麼就讓我藉由這次鐵人賽一口氣讀完吧(握拳)!

You-Dont-Know-JS javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 · 留言


Nightwatch101:手牽手一起來學 Nightwatch!

本篇文章主要是將去年底今年初參加「2018 iT 邦幫忙鐵人賽」與後續在 VueJS 台灣 meetup 201803@五倍紅寶石所分享的文件做收納整理。

Nightwatch Nightwatch101 Selenium Selenium WebDriver End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


2017 總回顧

這是我在 2017 年最值得聊聊的十件事 (*´∀`)~♥

年度回顧 2018鐵人賽 鐵人賽 Modern Web WorldGym End-to-End Testing Nightwatch Nightwatch101 Unit Test 單元測試 北海道 · 留言


Nightwatch101 #30:總結

整理一下走到目前為止的想法。

Nightwatch Nightwatch101 Selenium Selenium WebDriver Selenium IDE End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #29:Selenium IDE

Selenium IDE 可說是導入自動化測試的起手式。它很類似按鍵精靈,錄製好腳本後,執行腳本來自動完成文字輸入、點擊或跳頁等動作,確認執行動作皆如預期,若不符合預期狀況則停止並報錯,可協助確認 UI 功能是否正常執行,大大減低手動測試所花費的時間和精力。

Nightwatch Nightwatch101 Selenium Selenium IDE End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #28:獨立使用 ChromeDriver 跑測試

這篇要說明一個更輕巧簡便的測試方法-不經 Selenium Server 而獨立使用 Webdriver 來啟動測試的方法,以 ChromeDriver 為例。

Nightwatch Nightwatch101 Selenium Selenium WebDriver ChromeDriver End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #27:進階測試範例

綜合使用前面篇章所提到的內容-標籤、Page Objects 和客製化斷言,我們來做個範例...

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #26:客製化測試報告

由於在 nightwatch.conf.js 的 output_folder 設定了測試報告的路徑,因此在專案目錄底下可看到 reports 的資料夾,裡面的 JUnit XML 測試報告檔案即是按 group 所放置,像是這樣...

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #25:客製化斷言(Custom Assertions)

Nightwatch 允許開發者定義自己的斷言指令,擴充 `.assert` 和 `.verify` 命名空間。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #24:客製化指令(Custom Commands)

Nightwatch 允許開發者定義自己的客製化指令(Custom Commands),這對將常用的功能抽出來成為模組,很有幫助。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #23:使用 Sections 優化 Page Objects

Page Objects 預先定義一個頁面裡面的元素(element)、區塊(section)和命令(command),意即將一個網頁切分成許多個片段,然後利用物件把這些片段包裝起來使用,例如:將一個頁面區分為 header、footer 等,然後在測試程式中就用這樣的 header 或 footer 為單位操作 DOM element。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #22:Page Objects

Page Objects 預先定義一個頁面裡面的元素(Element)、區塊(Section)和命令(Command),意即將一個網頁切分成許多個片段,利用物件把這些片段包裝起來使用,例如:將一個頁面區分為 header、footer 等,然後在測試程式中就用這樣的 header 或 footer 為單位操作 DOM element。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #21:平行執行測試程式

本篇來看看 Nightwatch Test Runner 如何同時指定不同環境來跑測試、調整 Terminal Output 的顯示結果和經由 Test Workers 實現平行執行。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #20:禁跑特定測試(Disable Tests)

本篇要來聊聊禁跑特定 Test Suite 和 Test Case 的方法。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #19:依照標籤做測試(Test Tags)

Nightwatch 允許開發者使用標籤(tag)標記測試程式,在跑測試的時候可指定跑特定標籤的部份。使用標籤的好處是一個測試可有多個不同的標籤,不必受限於分類的唯一和垂直特性,相較有彈性。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #18:依照分組做測試(Test Groups)

Nightwatch 允許開發者將測試程式分組(group)測試,分組的方式就是將測試程式碼放進同一個資料夾,群組名稱即資料夾名稱。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #17:Nightwatch Test Runner

Nightwatch 提供 Command Line Test Runner,便於設定、跑測試和產生測試報告。本篇先來探討安裝方式的差異和如何針對單檔、多檔、單檔+資料夾進行測試。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #16:簡單測試範例

來個簡單範例-拿我們家新上線的功能-購物車和新版結帳頁來玩玩!

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #15:External Globals

隨著測試環境和加入功能愈來愈多元複雜,設定檔 `nightwatch.conf.js` 漸漸的就變成了一個龐然大物。大怪物來了 (☉д⊙) 來幫設定檔減肥 + 美化吧! (ノ◕ヮ◕)ノ*:・゚✧

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #14:Asynchronous Test Hooks

所有的鉤子(Test Hooks)-before[Each] 與 after[Each] method 都可以執行非同步(asynchronous)的動作。如果要執行非同步的動作,就要傳入 callback 作為第二個參數,並在最後執行這個 callback。若不呼叫這個 callback 會導致逾時錯誤(timout error)。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #13:Test Hooks

Nightwatch 提供 before/after 與 beforeEach/afterEach 鉤子。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 Chai BDD · 留言


Nightwatch101 #12:BDD Verify

在上一篇 Assert 提到,.assert 和 .verify 的 library 基本上是做相同的事情,差別只在於斷言(assertion)失敗時的處理方式。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 Chai BDD · 留言


Nightwatch101 #11:BDD Assert

Nightwatch 斷言庫(Assertion Library)除了提供上一篇提到的 Expect 外,還有 Assert 和 Verify。在 Nightwatch 中,.assert 和 .verify 的 library 基本上是做相同的事情,差別只在於斷言失敗時的處理方式。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 Chai BDD · 留言


Nightwatch101 #10:BDD Expect

Nightwatch 的 BDD Expect 是源自於 Chai 的 Expect API,並且只能用於網頁元素的比對。expect 比 assert 更有彈性和口語化,缺點是不能串起來(chain)使用。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 Chai BDD · 留言


Nightwatch101 #9:指令 Part 3

指令分為兩種-Nightwatch 提供的指令與開發者撰寫的客製化指令,以下繼續 Part 3,來聊聊與執行流程相關的指令。

Nightwatch Nightwatch101 End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #8:指令 Part 2

指令分為兩種-Nightwatch 提供的指令與開發者撰寫的客製化指令,以下繼續 Part 2,來聊聊 Cookie、Window 和 Log 相關的指令。

Nightwatch Nightwatch101 End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #7:指令 Part 1

這篇 Part 1 先來看一些 UI 操作相關的指令,例如元素定位、設值、點擊和檢視是否存在或可見等。

Nightwatch Nightwatch101 End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #6:使用 Xpath 定位網頁元素

做 End-to-End Testing 的第一步就是抓到網頁的元素,而定位網頁元素有兩種方法「CSS Selector」和「Xpath」,在本篇使用 Xpath。

Nightwatch Nightwatch101 End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #5:使用 CSS Selector 定位網頁元素

做 End-to-End Testing 的第一步就是抓到網頁的元素,而定位網頁元素有兩種方法「CSS Selector」和「Xpath」,以下使用 CSS Selector。

Nightwatch Nightwatch101 End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #4:設定檔

Nightwatch 提供了 Command-line Test Runner,用來跑各種類型的測試,例如:指定測試環境、依群組或標籤或個別檔案、循序或平行執行等。其設定檔的預設名稱是 nightwatch.json 或 nightwatch.conf.js,如果兩者都出現,會優先選擇 nightwatch.conf.js,設定檔位置在這個專案的根目錄底下。

Nightwatch Nightwatch101 Selenium Selenium WebDriver End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #3:環境建置

環境建置。

Nightwatch Nightwatch101 Selenium End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #2:Nightwatch 與 Selenium Webdriver

介紹 Nightwatch、Selenium Webdriver 與運作原理。

Nightwatch Nightwatch101 Selenium Selenium WebDriver End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言


Nightwatch101 #1:使用 Nightwatch 實現 End-to-End Testing

這一系列 2018 鐵人賽「Nightwatch101:使用 Nightwatch 實現 End-to-End Testing」會有以下內容:Nightwatch 與 Selenium Webdriver、使用 CSS Selector和 Xpath 定位網頁元素、API(Commands、Expect、Assert、Verify)、Test Hooks、Nightwatch Test Runner、Page Objects、客製化指令與斷言、客製化測試報告、測試程式範例、Selenium IDE。希望大家不吝指教 :)

Nightwatch Nightwatch101 Selenium Selenium WebDriver End-to-End Testing 鐵人賽 2018鐵人賽 自動化測試 · 留言