<input id="0qass"><u id="0qass"></u></input>
  • <input id="0qass"><u id="0qass"></u></input>
  • <menu id="0qass"><u id="0qass"></u></menu>

    網站前端技術之通俗理解

    如今的前端技術是一個復雜的生態。

    隨便閱讀一篇關于前端的技術文章,一定會發現大量的技術術語。什么 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原創發布,轉載請注明出處。創作不易,歡迎討論,感謝支持!

    已標記關鍵詞 清除標記
    多乐彩