前端小記1

1.前端佈局框架

（1）Bootstrap

地址》》http://getbootstrap.com/

概述：簡潔直觀強悍的前端開發框架，讓web開發更迅速簡單。目前已有bootstrap4，是世界上最受歡迎前端框架，用於構建響應式、移動設備優先的網站。bootstrap中許多組件須要依賴JavaScript才能運行，具體依賴jQuery、Popper.js

安裝：npm install bootstrap

盒模型：爲了在CSS中更直觀設置尺寸，將全局box-sizing值從content-box修改成border-box，確保padding不會影響元素最終的寬度計算，但可能會致使第三方組件出現問題。eg:Google地圖和Google定製搜索。極少數狀況須要充值box-sizing。

（2）Foundation

地址》》http://foundation.org.cn/

簡介：Foundation相似Bootstrap，是一個免費的前端框架，用於快速開發。在Facebook、eBay、Samsung、Amazon、Disney等網站上使用。

（3）Uikit

地址》》http://www.getuikit.net/

簡介：一款輕量級、模塊化的前端框架，可快速構建強大的web前端界面。基於Less開發。

注意：UIkit 兼容 IE9 以上現代瀏覽器。在 IE8 及其如下版本中，全部JavaScript 都會失效。

（4）Web Components

地址》》https://www.jianshu.com/p/e8994b92bb7a

簡介：Web Components不是一個規範，是由W3C提出的另外4個規範的合集。

對比：

與React》》Web Components是HTML提出的模塊化，目的是複用web組件，主要思想是封裝。而React是爲了搭建交互式UI，主要針對不一樣的狀態顯示不一樣的View處理的是View與data的同步。

與React Components》》這兩個組件系統相比，Web Components優勢在於：HTML規範、複用性移植性高、CSS樣式隔離；React Components優勢在於：virtual dom支持服務器渲染，seo友好，編寫測試方便、瀏覽器支持狀況好、抽象作的更好組件狀態管理。

與Vue.js》》Vue.js實現了CSS的模塊化，組件的建立、註冊、繼承、生命週期都和Web Components很像。Vue.js和Polymer區別在於Vue.js不依賴於Web components，不須要polyfill。

 

2.構建工具及包管理器

（1）Grunt

簡介》》如今前端自動化已常見，各類工具層出不窮，grunt、gulp、webpack是應用最廣的三種工具，雖然grunt看似已垂垂老矣，可是之前不少項目一直是用的grunt，項目維護仍是可能會用到的。

經常使用插件：

合併》》grunt-contrib-concat

壓縮》》grunt-contrib-uglify

引用替換》》grunt-usemin(grunt-contrib-copy, grunt-contrib-clean)

（2）yeoman

簡介》》幫助建立項目，提供更好的工具來使得項目更多樣化。Yeoman提供generator系統，一個generator是一個插件，在完整項目上使用‘yo’命令，會運行generator。經過官方Generators推出了Yeoman工做流，工做流是一個健壯、有本身特點的客戶端堆棧，包含能快速構建網絡應用的工具和框架。Yeoman主要提供三個工具：腳手架（yo），構建工具（grunt）、包管理器（bower）。這三個工具是分別獨立開發的，可是須要配合使用來實現高效工做流。

（3）Bower

簡介》》前端包管理工具，幫助咱們管理web站點上各類框架，類庫等。主要做用：跟蹤前端包，保證最新，管理前端裏面的HTML,CSS,JS，甚至是圖片，最大的好處是對前端進行了優化。若是多個包依賴於一個包，那麼Bower只下載一次依賴包，這稱爲扁平依賴，有助於減小頁面加載。

對比：與npm

    如今npm經常使用於Node.js模塊，npm是嵌套依賴樹關係。npm嵌套依賴用在服務器上很好，不用關心版本衝突問題。Bower是專門爲前端建立的，對於依賴的管理屬於扁平化。

（4）npm

簡介》》做爲node的包管理工具，一般稱爲node包管理器。主要功能管理node包，包括安裝、卸載、更新、查看、搜索、發佈等。