网站前端技术之通俗理解

网站 Aug 28, 2020

如今的前端技术是一个复杂的生态。

随便阅读一篇关于前端的技术文章,一定会发现大量的技术术语。什么 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 使用场景包括:调试和构建

总结

以上的解释看起来简单明了,但实际工作中仍然需要我们自身不断地实践和总结,才能抓住根本。

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.