網站前端技術之通俗理解

現在的前端技術是一個複雜的生態。

隨便閱讀一篇關於前端的技術文章，必定會發現大量的技術術語。什麼 vue, webpack, react, Antdesign 等，各類新名詞讓初學者感到很是困惑，在較短的時間根本快速的理解整個前端體系，從而陷入一種低效、焦慮的學習狀態。

什麼是前端？

在網站技術中，前端就是用戶界面，主要經過頁面向用戶展現內容或數據，同時用戶能夠自主選擇須要的內容並向網站填寫數據後給出反饋。

前端是相對後端而言的。前+後這種分工模式，在生活中或人類的組織分工中很是常見，舉例：

• 電視機+機頂盒
• 士兵+做戰指揮部
• 無人便利店+運做系統

簡而言之，網站的前端主要經過從後臺獲取數據，向用戶展現數據或採集數據傳送到後臺

前端技術體系

以網站爲例，前端的載體就是瀏覽器 Chrome, FireFox 等，因此前端技術自始至終都是圍繞瀏覽器的幾個基礎技術進行發展：

• HTML
• CSS
• JavaScript/ECMAScript

如今流行的前端技術都是對以上基礎技術進行「高級編程」，圍繞界面設計、界面互動和界面體驗，提供不一樣的軟件包。

好比：Vue, React, Bootstrap 等框架都是這方面的傑出表明。

無論哪種框架最終都是依賴以上技術。

UI 框架

UI 框架偏重於 UI 顯示的效果，其包含設計理念，因此基於同一種 UI 框架的網站其視覺效果看起來很是相似。

主流的 UI 框架爲：

• Material Design
• Ant Design
• Bootsrap
• iView
• Element

JS 框架（交互編程）

不一樣於 UI 框架，交互編程偏重於用戶互動後的數據展現（採集）。也就是說，當你的前端頁面須要根據用戶的選擇展現不一樣類型的數據的時候，就須要進行交互式編程。

早期，開發者主要採用原生的 JavaScript 來實現這種交互，隨着技術的演進，就誕生了專門用於交互編程的 JS 軟件包框架，解決一些通用的問題，開發者可以基於這種 JS 軟件包更方便的開發前端交互。

主流的 JS 框架爲：

• jQuery
• Vue.js
• React
• Angula.js
• Ember.js
• Meteor
• Mithril
• Backbone.js
• Handlebars.js

混合框架

實際開發網站中，單單使用某一種框架並不能知足業務。

好比 Vue.js 雖然可以很好的處理數據交互，但它自身卻沒法構造優美的界面。因爲開源世界總有一些默默無聞的頂尖級程序員創造偉大的做品，因此基於主流的 UI 和 JS 框架，產生了繁榮的生態，框架相互組合，並引入了更多的工具，又組合成新的框架。

以 Vue.js 爲例，產生了更多混合框架：

• bootstrap-vue 即 Vue.js + Boostrap
• Ant Design of Vue 即 Vue.js + Ant Design
• Vuetify.js 即 Vue.js + Material Design
• Nuxt.js 即 Vue.js 的 SSR 模式加強
• NativeScript-Vue 即 Vue.js 移動端開發增長
• Quasar 即 Vue.js + 編寫一次代碼，並同時將其部署爲網站，移動應用程序和/或電子應用程序

輔助技術

還有一些很重要的技術，它們沒有上升到框架的層面，也不是技術的核心，可是它們是前端應用不可或缺的重要組成部分，包括：

• Node 前端引擎
• NPM 前端軟件包的安裝管理器
• Webpack 前端打包工具
• Babel 主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法

談談 Node

Node 即 Node.js。

前面咱們提到過，瀏覽器是包含 JavaScript 程序的解釋器的，因此它可以處理 JS 代碼。

Node 區別於以上任何框架，它應該稱之爲 JavaScript 程序的解釋器（相似虛擬機），因此它主要用於不方便調用瀏覽器的場景下處理 JS 代碼。

Node 使用場景包括：調試和構建

總結

以上的解釋看起來簡單明瞭，但實際工做中仍然須要咱們自身不斷地實踐和總結，才能抓住根本。

本文由Websoft9原創發佈，轉載請註明出處。創做不易，歡迎討論，感謝支持！