達標好文 技術 Day01【ES6 小筆記】ESLint 工具簡介&安裝教學-來個乾淨的程式碼

什麼是 ESLint？ 每個工程師都會有自己寫 code 的習慣，比如有些人喜歡加; 有些人不喜歡加，有些人喜歡先宣告變數，有些人則習慣不宣告直接使用，但是當...

江江好 ‧ 2019-09-02 ‧團隊火箭隊

達標好文 技術 webpack - 學習筆記

webpack 對現在網頁工程師幾乎是必學技能，在許多框架也看得到它的身影，但是真的要設定時又不知道該如何設定，這篇主要是在記錄小弟自己學習的心得，也希望能幫到...

技術 JS-上傳圖片前預覽圖片

1.以change事件來觸發2.一開始將上傳的檔案轉換為base64字串，Base64是一種基於64個可列印字元來表示二進位資料的表示方法。(參考)2.建立Fi...

技術 [JavaScript]02-JavaScript作用域

作用域 doSomething=()=>{ //函式作用域,變數只存在這裡面 var mood='happy'; console....

技術 [JavaScript]01-JavaScript運作原理

JavaScript如何運作? 直譯/編譯式語言 直譯式語言 原始碼－(直譯器)－代碼生成－(運行)－應用程式 錯誤直接反映在環境中(console) 優點...

技術 ES6 Class / Symbol

大綱 物件列舉屬性 (for-in/Object.keys) 物件屬性特性設定 (ES5 defineProperty / ES6 Symbol) ES6 C...

技術 JS 原型鏈

JS 原型鏈 若要建立兩個汽車的實體，該如何建立? Why use OO 減少重複的程式碼 減少記憶體的使用 使實體有關聯性 類別、物件 類別: 為實體的...

技術 [筆記]Javascript陣列移除重複方法效能比較(是否有更快的作法?)

(資料源放在最下方)不重複數量為170個 參考方法:來源 方法一: 28ms，(ps.出來的結果是物件) var startTime = Date.now();...

技術 D3.js - 基本功能介紹

D3.js（Data-Driven Documents）是一個 JavaScript 的 Library，顧名思義是使用資料驅動文件，它可以操縱 DOM 元素，...

技術 Laravel subdomain的問題處理方法

最近用Laravel + js框架部屬在學校的Linux apache的子網域 但因為Laravel + js框架使用的是設定好的mix方式打包，在路徑改變導致...

達標好文 技術 Files - 圖片轉換處理

此篇記錄一下圖片傳輸的學習筆記，也順便帶大家了解~ 上傳圖片 首先建立一個上傳圖片的 input // 加上 multiple 可上傳多個檔案 <inpu...

技術 Canvas - 文字篇

文字的需求對 canvas 相對較小，但有時候還是用的到，這邊簡短介紹一下 文本樣式 基本上設定方法與 css 大同小異 font 使用方法同 css 的 fo...

技術 Canvas - 色彩與設定篇

上篇學會了繪製圖形，此篇是要帶大家一起新增細部設定與使用色彩GOGOGO! 顏色設定 填入顏色時，需先宣告顏色再開始繪製圖形，可使用方法有以下~ // 填滿圖形...

技術 Canvas - 基礎圖形繪製篇

此篇要來介紹 canvas，它是一個 html 中的元素，並且可以使用 javascript 來操縱，並在網頁上畫出一些圖形，今天就是帶大家一起了解該如何繪製圖...

達標好文 技術 axios 基本使用 & Config

axios 介紹 依賴 ES6 Promise，若不支援請使用 Polyfill 支援 Promise API 可取消請求 (Promise 無法) 自動轉...

技術 RESTful API 練習 (XHR, Fetch詳解)

RestFul API GET 取得資料 POST 新增資料 PUT 完整更新 (會將你設定的覆蓋過去，舊有的屬性消失) PATCH 局部更...

技術 JS 有趣的陣列處理小題目

JS 有趣的小題目 到處看文章，晃到的一個小題目。看似簡單，但還是耗了一些時間才想出解法。 題目來源 原作者也有他的解法可以參考參考~ 目標是把原始資料的...

技術 JS 原型鏈

Why use OO 減少重複的程式碼 減少記憶體的使用 使實體有關聯性 類別、物件 類別: 是一個藍圖，未有實體(instance) Ex:車子設計圖...

技術 JS Conf Animation with concept 心得

JS Conf Youtube錄影 Animation purpose making context clear (突顯內容) displaying hier...

技術 ES6 預設參數,展開,剩餘運算子

ES6 預設參數 (Default parameters) 過去都要先自行檢查是否為 undefined 使用預設參數後 傳入參數 undefined =&g...

技術 JS This 指向誰

this 決定在於函式如何被呼叫 Why use This 可用不同物件，調用同函式 使 API 更簡潔且易於復用 function identify()...

技術 JS Closure 閉包

閉包 Closures are Functions with Preserved data 將變數 "保存" 在 Function 之...

技術 You Might Not Need JQUERY 閱讀整理

前言 看一波 You Might Not Need JQUERY整理一些常用的 順便同時複習 JS 和 JQ 大綱 通用選擇器 DOM選擇器 取得 HTML,...

技術 JS 陣列轉換&小技巧

Array.from 類陣列轉換 NodeList & HTMLCollection 類陣列轉換成陣列已寫另成一篇文 點我~ Array.from...

技術 JS 時間處理

JS 時間處理 注意資料是 number 還是 string 最好統一 確保所有數字為正數 推薦使用函式庫 Moment.js JS30 倒數計時時鐘...

技術 筆記--javascript-windows.onload v.s. jQuery-$(document).ready()

windows.onload VS $(document).ready() windows.onload會等到網站所有的內容全部下載完成，包刮CSS、圖片等全部...

技術 正規式 - 微介紹

建立正規式 正規式也可以叫做正則表達式，在 JavaScript 中可以使用兩個 / 或 new RegExp 來建立，且其型別為物件 const ares =...

技術 JS AJAX、同步非同步、Promise

甚麼是 AJAX Asynchronous JavaScript and XML可以使網頁與伺服器進行非同步更新，不需要重新載入網頁的技術。較舊的PHP網站，...

技術 localStorage 用法

WebStorage / session / cookie 差異 session 關閉視窗即失效cookie 關閉視窗會將資料保存，但容量較小(4KB) We...

技術 Something about front-end