# [FE201] 前端中階：那些前端會用到的工具們 ###### tags:`Frontend` [TOC] ## jQuery > Lightweight Footprint Only 30kB **minified** and gzipped. Can also be included as an AMD module * minified 簡單化+單純化，把壟詞贅字刪掉 jQuery 是一個 **JavaScript library** ### jQuery 為什麼會出現 2006 年附近是個瀏覽器百家爭鳴的時代， IE, Chrome, Opera, Safari, Firefox ... 然後使用者比率也差不多，所以寫一種 JS 要最多寫五種以上的版本，所以 JQuery 就誕生並獲得人氣拉~ ### 語法 + 實作(note) `$ === jQuery`，用`.()`來把元素轉換成 JQ 元素 $().val('defautl-val') //設定預設值 $().val() // 取得值 .ready() // ## bootstrap [好模板網站](https://bootswatch.com/) 使用前記得要先引入 stylesheet 和 js > 要注意版本，有些語法在最新版本不支援，例如 badge 的某些語法 [資料](https://github.com/twbs/bootstrap/issues/31217) ### Grid system 通常以 12 column 為預設 ## CSS 預處理器 > 有些筆記是補充影片的部分 程式碼 => SCSS 或 SASS => CSS ```css= /* 常用指令: */ --watch 看指定的檔案有沒有改變，有改變就做壓縮 --style=compressed 就是minify，把註解空格拿掉 /* 常用符號: */ & 重複上一層的選擇器的字串 /* 常用顏色變數命名: */ primary secondary warning text background /* 常用檔案命名: */ _mixins.sass _variables.sass _components.sass 會跨頁的元件 _layouts.sass 會跨頁, 更大的, 比較少出現元件 /* 一些 SCSS 程式碼: */ @import filename %btn @extend %btn 引入 attribute，用"," 來一次做完 @mixin name 包住要重複使用的屬性 @include name 釋放 mixin 或是用 +name 釋放 mixin 跟 extend不同，可以使用變數、隨著"+'會重複出現多次、通常用在一組功能 @function => 可以回傳數值 用@return、通常用在一個屬性之下做運算 @each $type in $types .flex-#{$type} @each $key, $value in $types .flex-#{$type} 用 $arr: value, value2 或是 $obj: (key: value, key2: value2) @for $i from 0 through 5 .h#{5 - $i + 1} font-size: 1 + 0.2rem * $i @if $i / 2 == 0 do soth @else do soth ``` ## gulp src dest series parellel, babel, sass, uglify, minify/css, rename + gulp 就是個管理流程的 library， 函式可以自己寫或去 npm 找現成的，[Babel: Using Plugins](https://gulpjs.com/docs/en/getting-started/creating-tasks/#compose-tasks) 這次練習有用到 babel，有些地方它沒轉換好。gulp 就只是自動幫你跑那些 library，如果 library 出錯，gulp 執行後的檔案也會出錯，不會因為你用自動工具 gulp 就不會出錯XD，詳見[Gulp 練習紀錄](/77oQIV9MQoaQMWXi9e03cw) ## webpack * ECMA 這個規範寫出來的，不同==執行環境==所使用的模組、模組化規範不一樣，瀏覽器的版本不一定會支援這些語法，所以就有了 webpack 誕生 * 瀏覽器不支援的功能，用額外的工具來轉換就可以了 * Webpack 把不同模組包在一起讓瀏覽器可以執行它們的工具，連 CSS 也可以 import啦 * 使用 webpack 的原因之一是原生的瀏覽器沒辦法打包 npm 安裝的模組，而 webpack 除了解決這個問題之外，還順便擴展了「模組」的定義，任何資源都可以視為一個模組，搭配強大的 ==loader== 與 ==plugin== 系統 * ==要轉換的檔案/你寫的 raw 程式碼，通常會放在 src，輸出到 dist== * 想要壓縮 module的話可以把 production mode 打開 npm, npx, global