分類:: development

完全解析 JavaScript import、export

import、export 是 JavaScript 模組管理的方法,可以將每個檔案視為一個獨立的模組匯出,並在另一個檔案匯入使用。透過此方式每個檔案更能專注在特定的功能上,且能避免單一檔案過度龐大。 相容性介紹此方法前,還是要了解一下相容性,目前來說許多主流瀏覽器都是可以運行的,但是寫法需要稍做調整,而 Node.js 則是要到 13.2 才可直接運行模組化。 瀏覽器中運行如果要在瀏覽器運行模

爬蟲、E2E 測試兩相宜的好工具 - Puppeteer

Puppeteer 是 Node.js 的函式庫,它提供各種 API 來控制 Chrome 或 Chromium 瀏覽器,而此瀏覽器也是目前主流的瀏覽器,用來做為測試、爬蟲都相當合適,並且所提供的 API 語法淺顯易懂,只要具有 jQuery 的使用經驗就可以很快速地上手。 安裝官方提供兩個版本,一個包含 Chromium,另一個則無,如果有安裝 Chrome 的情況下可以不需要另外下載 Chro

JavaScript Promise 全介紹

最近直播介紹如何串接開源資料,也剛好許多朋友詢問到 Ajax、Promise 相關的問題,因此重新撰寫一篇文來介紹 Promise,這篇文章也與過去形勢不太一樣,試著先將常見的問題放在前頭,接下來才開始介紹 Promise。 另外本文的內容較多,Promise 想看簡易版可參考:/javascript/2017/12/29/javascript-proimse/。 使用 Vuejs 結合

單元測試 - 非同步及 Ajax

本篇延續上一篇:十分鐘上手前端單元測試 - 使用 Jest JavaScript 是屬於同步,單執行緒的程式語言,因此當有非同步的事件時就會被往放到事件佇列,直到所有程式碼運行過後才會執行事件佇列內的程式,如果不熟悉這段觀念就會使程式的運行不符合預期,相關概念可以看此文章一次只能做一件事情的 JavaScript。 另外,現在的非同步大多都使用 Promise 來撰寫,包含 ES6 的 Fetch

十分鐘上手前端單元測試 - 使用 Jest

隨著應用程式越來越大,人工流程的測試也會耗去許多的時間,許多功能再開發後都必須重新進行點擊特定目標、撰寫複雜表單、送出來檢驗功能的正確性,當功能越來越複雜時,人工測試所花的時間也會越來越常,因此改用測試工具相對會節省去許多時間。尤其到了上線時才發現錯誤,那時候心中真的會吶喊 No、No、No~。 前端的測試常見的有兩大類別: Unit Test:中文稱為單元測試,是以一個行為進行測試,可驗證運行

前端開發者,圖片常犯的五個粗心錯誤

前端開發者是透過程式碼將資訊呈現成畫面,因此畫面的好壞也多少影響品質,在觀看許多履歷或作業的過程中,會發現許多相似的錯誤,而這些錯誤都是有跡可循,並且可以避免的;本篇先以常見的圖片問題與大家分享,看是否你也犯了這些錯誤呢? 一、圖片變形新手錯誤率:⭐⭐⭐⭐令人感受的粗心度:👎👎👎👎 圖片變形是最明顯的錯誤,大部分的使用者都能看到這樣的問題,而這些問題會讓人感受到開發者的不細心。 要避免圖片

一分鐘切換成中文版 VSCode(完整圖文版)

雖然開發者都具有一定的英文閱讀能力,但如果在不熟悉的情況下,就比較難以快速上手一個新工具。如果要快速掌握一個完整的工具或技術,最好的方式還是先切換成熟悉的語言。 而 VSCode 雖然預設並無法直接切換語系,但官方有提供各國的語言套件,讓開發者可以自行選用。 切換成中文版如果你對於 VSCode 有興趣,別因為 VSCode 預設開啟是英文版就急著關閉,預設雖然是使用英文版,也找不到語系切換的地方

十分鐘快速掌握 Markdown

Markdown 是目前非常普遍用來撰寫文檔的語言,一開始的目標就是使用「易讀易寫的純文字格式編寫文件」,此初衷讓使用者可以專注在文字的本身,而不需要透過其它工具來切換格式。以 Word 撰寫文檔來說,就必須透過上方的工具列來切換標題、列表、粗體、斜體等等;而 Markdown 並沒有這樣的工具列,完全都是使用標示符號來完成這些需求。 常見應用大部分情況下 Markdown 是用來撰寫程式語言相