[FE201] 前端中階：那些前端會用到的工具們

# [FE201] 前端中階：那些前端會用到的工具們 ###### Date : 2021 Jun.28 - Jul.10 #### jQuery : 再戰十年 - 簡介 1. **Lightwieght Footprint** ( ~30KB ) 2. **CSS3 Compliant** ( easy to use ) 3. **Cross-Browser** ( most value ) - 背景 : 2006 - 2008 年，瀏覽器百家爭鳴時代，一種功能，五種寫法，救世主 => jQuery - 概念 : 使用 $ ( === jQuery ) 來包裝函式 - Ref : https://jquery.com/ - 基礎 - CDN 引入 <script src="URL"></script> ```javascript $(document).ready( () => { $('.btn').click( e => { alert('click!') }) }) ``` - 練習 : ```javascript <script> $(document).ready( () => { $('.btn').click(e => { const value = $('.input').val() $('.input').val('') // append 加在最後； prepend 加在最前面 $('.wrap').append(` <div>${value}</div> `) }) }) </script> <body> <input class="input" name="content" /> <button class="btn">Submin</button> <div class"wrap"> </div> </body> ``` - 常見 DOM 操作 : `.text() .hide() .show() .fadeIn(S) .fadeOut(S)` - 常見 CSS 操作 : `.addClass() .removeClass() .toggleClass() .css('ATTR','VALUE') ` - 實戰 : Todo list ```javascript <script> $(document).ready( () => { $('.btn').click(e => { const value = $('.input').val() $('.input').val('') $('.wrap').append(` <div class="todo"> ${value} <button class="btn-mark">標記完成</button> <button class="btn-delete">刪除</button> </div> `) $('.wrap').on('click', '.btn-delete', e => { $(e.target).parent().fadeOut() }) $('.wrap').on('click', '.btn-mark', e => { const todo = $(e.target()).parent() if (todo.hasClass('completed')) { $(e.target()).text('標記未完成') } else { $(e.target()).text('標記完成') } todo.addClass('completed') }) }) $('btn-removeAll').on('click', () => { // remove 是整個 DOM 不見； empty 是清空 ( innerHTNL='' ) $('.wrap').empty() }) }) </script> <body> <input class="input" name="content" /> <button class="btn">Submin</button> <button class="btn-removeAll">Clear all</button> <div class"wrap"> </div> </body> ``` - jQuery ajax ```javascript <script> $(document).ready( () => { $('.btn').click( () => { const value = $('input').val() if (value === '') { return alert('必須輸入名稱') } $.ajax({ method: 'GET', url: 'https://restcountries.eu/rest/v2/name' + enCodeURI(value), success: data => { for(let item of data) { $('list').append(` <div> ${item.alpha2Code} ${item.name} ${item.nariveName} </div> `) } }, error: err => alert(err) }) }) }) </script> <body> Name : <input class="input"/> <button class="btn">送出</button> <div class="list"> </div> </body> ``` #### Bootstrap : 常見UI library - 簡介 : - 概念 : 使用別人寫好的 css 跟 javascript ，如果要使用 javascript 相關功能就要再引入 bootstrap.js 才會有功能 - 背景 : 因為大多前端工程師不是美術出身的，為了快速開發有點美感的網頁而生，但是有點氾濫很，所以多網頁都長一樣 87% 是用了 bootstrap ，對，我加了 bootstap - 反方 : [You don't need Bootstrap](https://davidhartsough.com/you-dont-need-bootstrap/) ，我自己一開始也是很反對，認為身為一個稱職的前端 css 應該要自己寫，但是某些需求 EX:快速開發的專案，所以對 Bootstrap 沒有抱持太多排斥 - Ref : https://getbootstrap.com - 網格系統 : - 概念 : 把網頁的欄位切好，像是地球的經緯度，方便 RWD 排板等等 - 使用 : ( 後面接格數 1 - 12 ) - `.col-` : <576px - `.col-sm-` : 576px - 768px - `.col-md-` : 768px - 992px - `.col-lg-` : 992px - 1200px - `.col-xl-` : 1200px - 其他 : offset 等等 - Bootstrpa 元件 - Alert, Badge, Breadcrmb, Buttons, Button group, Card, Carousel, Collapse, Dropdown, Forms, Input Group, Jumbotron, List group, Media object, Model, Navbar, ...等 - 可以參閱官方文件 - 主題功能 Bootswatch - Bootstrap 實戰 ```html <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Todo list</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> ``` - 可以從快速官網引入使用 #### SCSS : CSS 預處理器 - CSS 預處理器 - 前端常碰到的問題 : 語法太新不能用 => 自己轉換就好了 - 讓 CSS 變成「程式語言」 - SCSS 簡介 - 裝安 : `npm install -g sass` ( 看板本 sass --version ) - 輸出 : `sass inpute.scss output.css` ( 還會有 output.css.map 產生，debug 好用 ) - 即時編譯 : `sass --watch style.css s.css` ( 存檔後自動編譯 ) - function : $var 變數, @mixin 功能 - 總結 : - 其他預處理器 : less, stylus - 可以將 _variables, _mixins, ... 等拆分，再用 `@import './_variables'` ... 到 main.scss #### SASS : CSS 預處理器 - CSS 的問題 : 全域變數會互相千擾、沒有變數、沒辦法組合 - 預處理器與後處理器的差別 : 後處理器是把原 CSS 加工，以支援舊板本的瀏覽器等等 - Sass 提供的三大類功能 1. 參數與結構化 : Nesting, Variables 2. 模組化 : Impert, Extend, Mixin, Function 3. 自動化 : Condition, Loop - 壓縮 : `npx sass --style=compressed main.sass main.css` ( 產品上線再用 - & 用法 : ```sass .block &1 background: #aaf &__test1 background: #faa &.test2 background: #faf & .test3 background: #faf .test4 background: #ffa ``` - 分別會渲染的 class 是 : ```sass .block1 .block__test1 .block.test2 .block > .test3 .block > .test4 ``` - loop 與 condition - 類似 array 用法 ```sass $direction-arr: center, start, end @each $type in $direction-arr .flex-#{$type} display: flex justify-content: $type align-items: center /* 產生的 CSS 如下 */ .flex-center { display: flex; justify-content: center; align-items: center; } .flex-start { display: flex; justify-content: start; align-items: center; } .flex-end { display: flex; justify-content: end; align-items: center; } ``` - 類似 object 用法 ```sass $direction-obj: (center: center, start: flex-start, end: flex-end) @each $type, $value in $direction-obj .flex-#{$type} display: flex justify-content: $value align-items: center /* 產生的 CSS 如下 */ .flex-center { display: flex; justify-content: center; align-items: center; } .flex-start { display: flex; justify-content: flex-start; align-items: center; } .flex-end { display: flex; justify-content: end; align-items: flex-end; } ``` - 類似 for 與 if 用法 ```sass @for $i from 0 through 5 .h#{5 - $i} @if $i / 2 == 0 font-size: 1 + 0.2rem * $i @else font-size: 1 + 0.3rem * $i /* 產生 CSS 如下 */ .h6 { font-size: 1rem; } .h5 { font-size: 1.3rem; } .h4 { font-size: 1.6rem; } .h3 { font-size: 1.9rem; } .h2 { font-size: 2.2rem; } .h1 { font-size: 2.5rem; } ``` #### Babel : 體驗最新的 JS - 簡介 - 把新的 JavaScript 語法轉成舊語法 - 使用 - init: `npm init` ( 初始化，產生 package.json ) - 安裝 : `npm install --save-dev @babel/core @babel/cli` - 新增 script : > package.json ```json { "name": "my-project", "version": "1.0.0", + "script": { + "build": "babel src -d lib" + } "devDependencies": { "babel-cli": "^6.0.0" } } // 從 src 資料夾編譯 -d (destination) 到 lib 資料夾 ``` - .babelrc ( 裝在 project 的根目錄 ) - 安裝 : `npm install @babel/preset-env --save-dev` - 寫入 `.babelrc` : `{ "presets": ["@babel/preset-env"] }` - 開發完成之後 - 編譯 : `npm run build` #### Gulp : 用程式碼整合流程 - 簡介 - 一個任務管理工具，讓你把種 task 寫在一起，類似 [IFTTT](https://ifttt.com/) - 有很多 plugin 可以達成很多事 - 初探 - 安裝 : `npm install --save-dev gulp` - 建立 : gulpfile.js ```javascript function defaultTask(cg) { // place code for your default task here cb() } exports.default = defaultTask ``` - 實戰 - gulpfile.js ```javascript const { src, dest } = require('gulp') function defaultTask() { return src('src/*.js') .pipe(dest('dist')) } ``` - gulp-babel & gulp-sass ( 需先安裝 ) ```javascript const { src, dest, parallel } = require('gulp') const babel = reuire('gulp-babel') const sass = reuire('gulp-sass') function compilerJS() { return src('src/*.js') .pipe(babel()) .pipe(dest('dist')) } function compilerCSS() { return src('src/*.css') .pipe(sass().on('error', sass.logError)) .pipe(dest('./css')) } // export.default = serires(compilerCSS, compilerJS) // series 是依順序執行下來 export.default = parallel(compilerCss, compilerJS) // parallel 會平行跑，較節省時間 export.compilerCss = compilerCss() // 也可以只輸出其中一個，單獨執行一個任務 ``` - 其他好用 : `gulp-rename` ( 有需要重新命名的都要安裝，.min.js 等 ), `gulp-uglify`, `gulp-clean-css` - 總結 - 有很多 plugin 可以使用，但也可以自己寫 - 小專案蠻適合使用的，主要還是任務管理 #### Webpack : 打包程式碼 - 簡介 - webpack 是一個模組打包工具，把各種資源都包在一起 - 在 node.js 裡是透過 `reuqire('./ben')` 跟 `module.export = ben` 的方式 - 那瀏覽器呢？模組化是透過全域變數的方式，如 : jQuery ，所以才需要 webpack 編譯後給瀏覽器執行 - 不同的模組化規範，CommonJS ( Node.js ), AMD, UMD 等 - 使用 - init : `npm init -y` 產生新的 package.json ( `-y` 可以跳過煩人設定 ) - 安裝 : `npm install webpack webpack-cli --save-dev` - 打包 : `npx webpack` ( 預設會去找 ./src/index.js 的檔案，打包完放在 dist 的資料夾下 ) - 設定 : webpack.config.js 中可以設定 `entry`, `output`, `mode` 等等 - 進階 - mode : 預設是 `production` 會自動壓縮，可以改成 `development` 增加可讀性方便開發 ( 如 jQuery : 330kb => 91 kb ) - CSS-loader : - 原理 : inject CSS into the DOM - 安裝 : `npm install --save-dev css-loader` - 還要安裝 : `npm install --save-dev style-loader` - 使用 : 在 webpack.config.js 中的 rules 加入設定檔 ( 請見官方 doc ) - 實戰 - Bebal-loader - 安裝 : `npm install --save-dev babel-loader` - 使用 : 在 webpack.config.js 中的 rules 加入設定檔 ( 請見官方 doc ) - Sass-loader - 安裝 : `npm install --save-dev sass-loader` - 使用 : 在 webpack.config.js 中的 rules 加入設定檔 ( 請見官方 doc ) - 轉換 : sass-loader => css-loader => style-loader 由後而前 ( 都要先安裝 ) - Webpack-dev-serve - 安裝 : `npm install --save-dev webpack-dev-server` - 設定 webpack.config.js ```javascript { mode: 'development', + devServer: { + contentBase: './dist', + } ... } ``` - 設定 package.json ```json "script":{ + "start": "webpack-dev-server --open", "build": "webpack" } ``` - 在 termial 下 `npm run start` - source map - 自動對應到 source code 為了方便 debug - 設定 webpack.config.js ```javascript mode: 'development', + devtool : 'inline-source-map', ``` - html-webpack-plugin ( 透過 JS 動態把 html template 放上去 ) - 安裝 : `npm install html-webpack-plugin --save-dev` - 設定 webpack.config.js ```javascript mode: 'development', + plugin: [new HtmlWebpackPlugin], ``` - Webpack 跟 Gulp 的差異 - Gulp 做不到 boudle，Webpack 做不到 task，但都可以做資料的轉換，所以才這麼像 - 可參考 : [Webpack 新手教學之淺談模組化與 snowpack](https://blog.huli.tw/2020/01/21/webpack-newbie-tutorial/) --- #### Ref - jQuery - https://jquery.com/ - http://youmightnotneedjquery.com/ - Bootstrap - https://getbootstrap.com/ - https://davidhartsough.com/you-dont-need-bootstrap/ - Sass - https://sass-lang.com/ - Gulp - https://gulpjs.com/ - IFTTT : https://ifttt.com/ - Webpack - https://webpack.js.org/ - JS beautify : https://beautifier.io/ --- #### 心得 2021 Jul.10 - 前面介紹了網頁曾經的老大哥 jQuery ，了解了當時的背景以及火紅的原因，雖然逐漸被淘汰，但仍有不少的開發者愛用，畢竟小的專案還是很好用的 - Bootstrap 呢，對他算是又愛又恨 (？) 認為身為一個前端，CSS 就該給我好好手刻啊！？本來也不是很喜歡用他，不夠靈活又笨重的，但是呢！站在老闆或是多人協作的立場又不一樣了，快速開發、可讀性提高、好維護，好 UI 框架不用嗎？ - Sass/SCSS 就好用很多了，把 CSS 變成像在寫程式的感覺，多了巢狀結構、變數、模組的功能，開發速度整個加速啊，必學推推 - Gulp 算是一個程式的管理工具，對，很像 IFFF 的感覺，例如 : VScode 的 live serve 有一個儲存就重新渲染一次的功能，這就是跟 Gulp 在做的事，但 Gulp 把他發揮的淋漓盡致，有很多 plugin 可以用，但大的專案可能不適合 - Webpack 算是前端開發必備了，沒用過一定也聽過，他可以把資源打包，如 : 圖片、聲音 ...等等，之後的 React, Vue 框架也會看到他的影子，但一樣是個入門容易，精通難的一項工具 - 各個套件的流程基本上都是 `npm install xxx` 安裝，然後去找官方文件，通常照著官方的簡易設定就可以跑，入門容易，但精通難，會碰到很多 config 的設定問題、path 的設定問題、各種 dependent 問題 ... 等，這些搞起來都會搞死人QQ ，還有最重要的問題 : **各種工具的取捨**，我要用什麼？雖然通常是看公司，上面的人會決定好，但有天如果是你決擇？不管了，一律用原生的香草框架 ( 是想逼死誰XD )

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.