月薪5萬，全靠這款高質量Web前端開發框架！

CSDN學院發表於2020-04-04
Web前端框架

文章轉自：獨家記憶0408

 

一個前端開發框架其實就是一系列產品化的HTML/CSS/JavaScript元件的集合，我們可以在設計中使用它們。前端開發框架有很多，其中有一些寫得很棒。為了大家的使用便利，下文列舉了目前最強大應用最廣泛的幾款前端開發框架。記住，這些框架並不僅僅是CSS 柵格之類的一些東西，它們包括的是整套的前端開發框架。

1.vue

vue如今可謂是一匹黑馬,github star數已居第一位！前端開發對於vue的使用已經越來越多，它的優點就不做介紹了, 
本篇是我對vue使用過程中以及對一些社群朋友提問我的問題中做的一些總結,幫助大家免踩坑。

  1. 路由變化頁面資料不重新整理問題
  2. setTimeout/setInterval(泛指非同步回掉函式的this指向)this指向改變，無法用this訪問VUe例項
  3. setInterval路由跳轉繼續執行並沒有及時進行銷燬
  4. vue 滾動行為用法,進入路由需要滾動到瀏覽器底部 頭部等等
  5. 實現vue路由攔截瀏覽器的需求,進行 一系列操作 草稿儲存等等
  6. v-once 只渲染元素和元件一次，優化更新渲染效能
  7. vue本地代理配置 解決跨域問題,僅限於開發環境
  8. 本地開發 沒有任何問題 部署伺服器 就404啊這些問題
  9. 詳細參考：https://blog.csdn.net/u011573061/article/details/79404175

附一些前端教程：

ASP.NET 90分鐘入門  新手進階門檻 https://edu.csdn.net/course/detail/5215?utm_source=weeklytop5
Javascript DOM操作 https://edu.csdn.net/course/detail/5794?utm_source=weeklytop5
ArcGIS for JavaScript https://edu.csdn.net/course/detail/1071?utm_source=weeklytop5
徹底掌握 Javascript 語言 (2017 版)【講師輔導】 https://edu.csdn.net/course/detail/4481?utm_source=weeklytop5
Javascript深入淺出 https://edu.csdn.net/course/detail/5787?utm_source=weeklytop5
【前端】JS++直擊企業筆面試的深度HTML/CSS https://edu.csdn.net/course/detail/9276?utm_source=blog11xk
【前端】JS++直擊企業筆面試的深度JavaScript https://edu.csdn.net/course/detail/9275?utm_source=blog11xk
WebGL視訊教程 https://edu.csdn.net/course/detail/9274?utm_source=blog11xk
Three.js視訊教程(WebGL) https://edu.csdn.net/course/detail/9273?utm_source=blog11xk
原生JS掃雷遊戲實戰開發 https://edu.csdn.net/course/detail/9249?utm_source=blog11xk

 

2.React

React是一個用於構建使用者介面的JavaScript庫。React主要用於構建UI，很多人認為React是MVC中的V（檢視）。React起源於Facebook的內部專案。React 擁有較高的效能，程式碼邏輯非常簡單。

React特點：

  • 宣告式設計−React採用宣告正規化，可以輕鬆描述應用。
  • 高效 −React通過對DOM的模擬，最大限度地減少與DOM的互動。
  • 靈活 −React可以與已知的庫或框架很好地配合。
  • JSX − JSX是 JavaScript語法的擴充套件。React開發不一定使用JSX，但建議使用。
  • 元件 − 通過React構建元件，使得程式碼更加容易得到複用，能夠很好的應用在大專案的開發中。
  • 單向響應的資料流 − React 實現了單向響應的資料流，從而減少了重複程式碼，這也是它為什麼比傳統資料繫結更簡單。
  • React 基礎：參看 https://blog.csdn.net/sinat_38328891/article/details/79485583

React 詳解：參看 https://blog.csdn.net/chenshun123/article/details/78999236

 

3. Bootstrap

Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器相容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI元件，柵格系統以及一些常用的JavaScript外掛。

Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：

腳手架——全域性樣式，響應式的12列柵格佈局系統。記住Bootstrap在預設情況下並不包括響應式佈局的功能。因此，如果你的設計需要實現響應式佈局，那麼你需要手動開啟這項功能。

基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。

元件——收集了大量可以重用的元件，如下拉選單（dropdowns），按鈕組（button groups），導航皮膚（navigation control）——包括：tabs,pills,lists標籤，麵包屑導航（breadcrumbs）以及頁碼（pagination），縮圖(thumbnails)，進度條（progress bars），媒體物件（media objects）等等。

JavaScript——包括一系列jQuery的外掛，這些外掛可以實現元件的動態頁面效果。外掛主要包括模態視窗（modals），提示效果（tool tips），“泡芙”效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。

Bootstrap已經足夠強大，能夠實現各種形式的 Web 介面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。

 

jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽介面元件引入到jQuery UI中。

jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery Mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。

Fuel UX —— 它為Bootstrap新增了一些輕量的JavaScript控制元件。Fuel UI 安裝，修改，更新以及優化都很簡單方便。

StyleBootstrap.info —— Bootstrap提供了自己的幾種介面風格，StyleBootstrap提供了更多的配色選項，並且你可以給每個元件都應用不同的配色。

BootSwatchr —— 利用這個工具你可以立刻檢視主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。

Bootswatch —— 提供大量免費的Bootstrap主題。

Bootsnipp —— 線上前端框架互動元件製作工具，是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。

LayoutIt —— 通過介面拖放生成器簡便快捷地建立基於Bootstrap的前端程式碼。通過拖放動作將Bootstrap風格的元件加入到你的個人設計裡並且可以方便地修改他們的屬性，簡單便捷。

附一些前端教程：

ASP.NET 90分鐘入門  新手進階門檻 https://edu.csdn.net/course/detail/5215?utm_source=weeklytop5
Javascript DOM操作 https://edu.csdn.net/course/detail/5794?utm_source=weeklytop5
ArcGIS for JavaScript https://edu.csdn.net/course/detail/1071?utm_source=weeklytop5
徹底掌握 Javascript 語言 (2017 版)【講師輔導】 https://edu.csdn.net/course/detail/4481?utm_source=weeklytop5
Javascript深入淺出 https://edu.csdn.net/course/detail/5787?utm_source=weeklytop5
【前端】JS++直擊企業筆面試的深度HTML/CSS https://edu.csdn.net/course/detail/9276?utm_source=blog11xk
【前端】JS++直擊企業筆面試的深度JavaScript https://edu.csdn.net/course/detail/9275?utm_source=blog11xk
WebGL視訊教程 https://edu.csdn.net/course/detail/9274?utm_source=blog11xk
Three.js視訊教程(WebGL) https://edu.csdn.net/course/detail/9273?utm_source=blog11xk
原生JS掃雷遊戲實戰開發 https://edu.csdn.net/course/detail/9249?utm_source=blog11xk

 

4. Fbootstrapp

Fbootstrapp基於Bootstrap並且提供了跟Facebook iframe apps和設計相同的功能。包含用於所有標準元件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導航等等，風格與Facebook類似。

 

5. Kickstrap

Kickstrap是Bootstrap的一個變體。它基於Bootstrap，並在它的基礎上新增了許多app，主題以及附加功能。這使得這個框架可以單獨地用於構建網站，而不需要額外安裝什麼。你需要做的僅僅是把它放到你的網站上，然後用就可以了。

App 是一些頁面載入完成之後載入執行的JavaScript和CSS打包檔案。預設載入的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行新增更多的app。

 

選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。

附加功能是一些用來擴充套件Bootstrap UI 庫的附件，它們的語法基本相同或者相似。

 

6. Foundation

Foundation 是一款強大的，功能豐富的並且支援響應式佈局的前端開發框架，你可以通過Foundation快速建立原型，利用它所包含的大量佈局框架，元素以及最優範例快速建立在各種裝置上可以正常執行的網站以及app。Foundation在構建的時候秉承移動優先的策略，它擁有大量實用的語義化功能，並且使用Zepto類庫來取代jQuery，這樣可以帶來更好的使用者體驗，並且提高執行的速度。

Foundation擁有一套12列的靈活可巢狀的網格系統，你可以用它快速建立適應多種瀏覽裝置的佈局。它有很多的功能。它定義了很多的樣式，比如字型排版，按鈕，表單，以及多種多樣的導航控制元件。它也提供了很多的CSS元件，例如操作皮膚（panels），價格表（price tables），進度條（progress bars），表格（tables）以及可以適應不同裝置的可伸縮視訊（flex video）。與此同時，Foundation還包括了很多的JavaScript外掛，如下拉選單（dropdowns），joyride（網站功能引導外掛），magellan（網站固定導航外掛），orbit（支援觸控的響應式圖片輪播外掛），reveal（彈出框外掛），sections（強大的tab外掛）以及tooltips（工具提示）等。

Foundation框架還提供了很多有用的擴充套件。

模板（Stencils）——Foundation框架中的所有UI元素都有Omnigraffle stencils以及向量PDF兩種格式的下載，你可以用它們來方便快捷的繪製線框圖和原型圖。

HTML模板 —— HTML模板可以方便地用來快速建立頁面佈局。你所要做的僅僅是複製得到模板程式碼，然後丟到頁面的標籤之間就好了。

圖示字型（Icon Fonts） —— 包含自定義圖示的一種網頁字型。

SVG 社交網路圖示（Social Icons）—— 一組不依賴解析度的社交網路圖示（可縮放向量圖示）。

響應式表格——Foundation框架中響應式表格的實現機制是固定表格的左邊第一列，然後表格的其他列可以通過滾動條拖拉進行訪問。

關閉帆布佈局（Off-Canvas Layouts）—— 這些佈局可以允許一些網頁內容或者導航控制元件在移動端裝置上預設隱藏，當瀏覽螢幕變大或者使用者進行相應操作的時候這些內容再出現。當使用者進行相關操作的時候，網頁內容或者導航控制元件將會滑動出現。

如你所見，對於web開發者以及設計師來說，Foundation就像是一個巨大的寶藏。在下載框架的時候，你可以自定義下載框架的內容。

 

7. GroundworkCSS

GroundworkCSS 是前端框架家族裡面新添的一款小清新框架。它是基於Sass和Compass的一個高階響應式的HTML5，CSS以及JavaScript工具包，可以用於快速建立原型並且建立在各種瀏覽裝置上可以正常工作的網站和app。

GroundworkCSS擁有一個靈活，可巢狀的流式網格系統，方便你建立任何佈局。這個框架有很多讓人印象深刻的功能，比如在平板以及移動端上的網格系統，當螢幕的寬度小於768或者480畫素時，頁面中原本並列排版的表格列（grid column）會自動變為獨立的行，而不是摺疊在一起。另一個很酷的功能是jQuery的響應式文字（ResponsiveText）外掛，這個外掛可以動態調整頁面文字的大小以適應瀏覽裝置的螢幕大小。這個外掛對於可伸縮的標題以及建立響應式表格的時候特別有用。

 

GroundworkCSS包含了大量的UI元件，如tabs、響應式資料表格導航、按鈕、表單、響應式導航控制元件、tiles（一套替代radio按鈕以及其他預設表單元素的優雅元件）、工具提示、對話方塊、Cycle2（一款強大的，響應式的內容滑塊）以及其他很多的有用元件。它還提供了很多向量社交網路圖示以及圖示字型。

 

你可以通過切換頁面上方的導航按鈕選擇不同的瀏覽裝置要來檢視這款框架的效果。通過這種方式，你可以測試在不同的瀏覽裝置上各種元件的響應式佈局情況。

 

GroundworkCSS的文件寫的非常好，並且包含著很多的示例，為了讓你更快的上手，他還提供了多種響應式的模板。對於這款框架，唯一我可以想到的缺點就是不能自定義要下載的框架內容。

 

8. Gumby

Gumby 是一款基於Sass和Compass的簡單靈活並且穩定的前端開發框架。

它的流式-固定佈局（fluid-fixed layout）可以根據桌面端以及移動裝置的解析度自動優化要呈現的網頁內容。它支援多種網格佈局，包括多列混雜的巢狀模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網格系統上進行設計。

Gumby提供了一個功能豐富的UI工具包，包括按鈕，表單，移動端導航，tabs，跳轉連結（skip links），撥動開關（toggles and switches，可以方便快捷地切換元素的class，而不需要進行額外的js操作），抽屜功能（drawers），響應式圖片以及retina圖片等等。為了緊跟最近的設計潮流，Gumby的UI元素中還包括了Metro風格的扁平化設計，你也可以用Pretty風格的漸變設計，或者按照你的想法糅合兩種設計風格。該框架還提供了一套出眾的響應式，擁有獨立解析度的Entypo圖示，你可以在自己的web專案中盡情使用。

Gumby有一個很好自定義下載選擇器，你可以自行配置各個元件的顏色，並且按自己的需求方便地下載。

 

9. HTML KickStart

HTML Kickstart 是一款可以用來方便建立任何佈局的集合HTML5，CSS和jQuery的工具包。它提供了乾淨，符合標準以及跨瀏覽器相容的程式碼。

這款框架提供了多種樣式表，包括網格，排版，表單，按鈕，表格，列表以及一些跨瀏覽器相容的web元件比如JavaScript的幻燈片功能，tabs，麵包屑導航，包含子選單的選單以及工具提示等等。

你可以使用99Lime UIKIT提供的UI元件來搭建你的產品線框圖。

 

10.Kube

 

最後，如果你的新專案需要一款實在的，不需要複雜的額外功能元件的，足夠簡單的框架，那麼 Kube 將會是你正確的選擇。Kube是一款最小化的，支援響應式的前端框架，它沒有強加的樣式設計，因此給了你充分的自由來開發自己的樣式表。它提供了一些web元素的基本樣式，比如網格，表單，排版，表格，按鈕，導航，連結以及圖片等等。

 

Kube框架包括一個簡潔的CSS檔案用於方便地建立響應式佈局，還包括了兩個JS檔案來完成tab以及頁面的按鈕操作。如果你希望得到Kube最大化的靈活性以及個性化定製，那麼你可以下載開發者版本（developer version），這個版本包括了LESS檔案（包括各種變數，mixins以及模組）。

 

如何選擇一款優秀的前端開發框架？

 

可以根據以下評估標準：

將根據以下標準對這些框架進行評估：

學習曲線

針對簡單任務的開發效率

針對複雜、特殊任務的開發效率

依賴管理

程式碼效能/安全優化調整的能力

平臺升級/冗餘能力

在企業市場中的認同度

開發、使用SOAP和REST服務的複雜性

 

總結：

靈活運用框架，將會得到意想不到的效果。這個看怎麼靈活運用，有好的方案大家分享一下共同學習，進步。

學習前端，重在分享！

 

文末彩蛋：

1.CSDN學院助學會員：僅需百元- 1300門課+600次下載特權，一次購買，全年無憂！點選檢視。

2.CSDN學院知識週刊：每週更新學院優惠課程活動及精品上新內容，點選檢視！

3.技術教程推薦：

ASP.NET 90分鐘入門  新手進階門檻 https://edu.csdn.net/course/detail/5215?utm_source=weeklytop5
Javascript DOM操作 https://edu.csdn.net/course/detail/5794?utm_source=weeklytop5
ArcGIS for JavaScript https://edu.csdn.net/course/detail/1071?utm_source=weeklytop5
徹底掌握 Javascript 語言 (2017 版)【講師輔導】 https://edu.csdn.net/course/detail/4481?utm_source=weeklytop5
Javascript深入淺出 https://edu.csdn.net/course/detail/5787?utm_source=weeklytop5
【前端】JS++直擊企業筆面試的深度HTML/CSS https://edu.csdn.net/course/detail/9276?utm_source=blog11xk
【前端】JS++直擊企業筆面試的深度JavaScript https://edu.csdn.net/course/detail/9275?utm_source=blog11xk
WebGL視訊教程 https://edu.csdn.net/course/detail/9274?utm_source=blog11xk
Three.js視訊教程(WebGL) https://edu.csdn.net/course/detail/9273?utm_source=blog11xk
原生JS掃雷遊戲實戰開發 https://edu.csdn.net/course/detail/9249?utm_source=blog11xk

相關文章