前端語言的發展

時間 2019-11-10

標籤前端語言發展简体版

原文原文鏈接

本文轉自自阮一峯的我的博客

什麼是前端？

維基百科是這樣說的：前端（front-end）和後端（back-end）是描述進程開始和結束的通用詞彙。前端做用於採集輸入信息，後端進行處理。計算機程序的界面樣式，視覺呈現屬於前端。php

這種說法給人一種很模糊的感受，可是他說得又很對，它負責視覺展現。在MVC結構或者MVP中，負責視覺顯示的部分只有view層，而今天大多數所謂的View層已經超越了View層。前端是一個很神奇的概念，可是而今的前端已經發生了很大的變化。html

你引入了Backbone、Angluar，你的架構變成了MVP、MVVM。儘管發生了一些架構上的變化，可是項目的開發並無所以而發生變化。這其中涉及到了一些職責的問題，若是某一個層級中有太多的職責，那麼它是否是加劇了一些人的負擔？前端

說到Web前端開發，咱們必須先從其的過去了解：上個世紀 90 年代初，第一個網站便誕生，當時的網頁完徹底全是由文本所構成，除了一些小圖片就是毫無佈局可言的標題與段落。可是，隨着時代的不斷進步，接下來就出現了表格佈局，隨後是 Flash，最後是基於 CSS 的網頁設計。簡單來講，前端頁面重構技術經歷着這樣的一個過程：table佈局頁面 → DIV+CSS→ HTML5+CSS3，而且面對衆多的瀏覽器與平臺，Web前端已再也不是之前那樣簡單的重複性工做。vue

前端：針對瀏覽器的開發，代碼在瀏覽器運行
後端：針對服務器的開發，代碼在服務器運行

先後端不分的時代

互聯網發展的早期，先後端開發是一體的，前端代碼是後端代碼的一部分。node

後端收到瀏覽器的請求
生成靜態頁面
發送到瀏覽器

後端 MVC 的開發模式

那時的網站開發，採用的是後端 MVC 模式。laravel

Model（模型層）：提供/保存數據
Controller（控制層）：數據處理，實現業務邏輯
View（視圖層）：展現數據，提供用戶界面

前端只是後端 MVC 的 V。git

以 PHP 框架 Laravel 爲例。程序員

前端工程師的角色

那時的前端工程師，其實是模板工程師，負責編寫頁面模板。github

後端代碼讀取模板，替換變量，渲染出頁面。web

典型的 PHP 模板

<html>  <head><title>Car {{ $car->id }}</title></head>  <body>  <h1>Car {{ $car->id }}</h1>  <ul>  <li>Make: {{ $car->make }}</li>  <li>Model: {{ $car->model }}</li>  <li>Produced on: {{ $car->produced_on }}</li>  </ul>  </body> </html>

Ajax

Ajax 技術誕生，改變了一切。

2004年：Gmail
2005年：Google 地圖

前端再也不是後端的模板，能夠獨立獲得各類數據。

Web 2.0

Ajax 技術促成了 Web 2.0 的誕生。

Web 1.0：靜態網頁，純內容展現
Web 2.0：動態網頁，富交互，前端數據處理

從那時起，前端變得複雜了，對前端工程師的要求愈來愈高。

前端 MVC 框架

前端經過 Ajax 獲得數據，所以也有了處理數據的需求。

前端代碼變得也須要保存數據、處理數據、生成視圖，這致使了前端 MVC 框架的誕生。

2010年，Backbone.js

Backbone.js

Backbone 將前端代碼分紅兩個基本部分。

Model：管理數據
View：數據的展示

前端 Controller

Backbone 只有 M 和 V，沒有 C。由於，前端 Controller 與後端不一樣。

不須要，也不該該處理業務邏輯
只須要處理 UI 邏輯，響應用戶的一舉一動

因此，前端 Controller 相對比較簡單。Backbone 沒有 C，只用事件來處理 UI 邏輯。

  var AppView = Backbone.View.extend({ // ... events: { "keypress #new-todo": "createOnEnter", "click #clear-completed": "clearCompleted", "click #toggle-all": "toggleAllComplete" }, });

Router

前端還有一種自然的方法，能夠切換視圖，那就是 URL。

經過 URL 切換視圖，這就是 Router（路由）的做用。以 Backbone 爲例。

App.Router = Backbone.Router.extend({ routes: { '': 'index', 'show': 'show' }, index: function () { $(document.body).append("調用了 Index 路由"); }, show: function () { $(document.body).append("調用了 Show 路由"); }, });

示例：Backbone Router

打開demos/backbone-demo/index.html，按照《操做說明》，查看示例。

MVVM 模式

另外一些框架提出 MVVM 模式，用 View Model 代替 Controller。

Model
View
View-Model：簡化的 Controller，惟一做用就是爲 View 提供處理好的數據，不含其餘邏輯。

本質：view 綁定 view-model，視圖與數據模型強耦合。數據的變化實時反映在 view 上，不須要手動處理。

SPA

前端能夠作到：

讀寫數據

切換視圖

用戶交互

這意味着，網頁實際上是一個應用程序。

SPA = Single-page application

2010年後，前端工程師從開發頁面，變成了開發」前端應用「（跑在瀏覽器裏面的應用程序）。

傳統的架構

單頁應用的架構

多了一個前端 MVC 層

Angular

Google 公司推出的 Angular 是最流行的 MVVM 前端框架。

它的風格屬於 HTML 語言的加強，核心概念是雙向綁定。

示例：Angular 的雙向綁定

瀏覽器打開demos/angular-demo/index.html，能夠看到一個輸入框。

<div ng-app=""> <p> 姓名 : <input type="text" ng-model="name" placeholder="在這裏輸入您的大名" > </p> <h1>你好，{{name}}</h1> </div>

Vue

Vue.js 是如今很熱門的一種前端 MVVM 框架。

它的基本思想與 Angular 相似，可是用法更簡單，並且引入了響應式編程的概念。

示例：Vue 的雙向綁定

Vue 的模板與數據，是雙向綁定的。

打開demos/vue-demo/index1.html，按照《操做說明》，查看示例。

HTML 代碼

<div id="journal"> <input type="text" v-model="message"> <div>{{message}}</div> </div>

JS 代碼

var journal = new Vue({ el: '#journal', data: { message: 'Your first entry' } });

先後端分離

Ajax -> 前端應用興起
智能手機 -> 多終端支持

這兩個緣由，致使前端開發方式發生根本的變化。

前端再也不是後端 MVC 中的 V，而是單獨的一層。

REST 接口

先後端分離之後，它們之間經過接口通訊。

後端暴露出接口，前端消費後端提供的數據。

後端接口通常是 REST 形式，先後端的通訊協議通常是 HTTP。

Node

2009年，Node 項目誕生，它是服務器上的 JavaScript 運行環境。

Node = JavaScript + 操做系統 API

Node 的意義

JavaScript 成爲服務器腳本語言，與 Python 和 Ruby 同樣
JavaScript 成爲惟一的瀏覽器和服務器都支持的語言
前端工程師能夠編寫後端程序了

前端開發模式的根本改變

Node 環境下開發
大量使用服務器端工具
引入持續集成等軟件工程的標準流程
開發完成後，編譯成瀏覽器能夠運行的腳本，放上 CDN

全棧工程師

前端工程師正在轉變爲全棧工程師

一我的負責開發前端和後端
從數據庫到 UI 的全部開發

全棧技能

怎樣才能稱爲全棧工程師？

傳統前端技能：HTML、JavaScript、CSS
一門後端語言
移動端開發：iOS / Android / HTML5
其餘技能：數據庫、HTTP 等等

軟件行業的發展動力

歷史演變：先後端不分 -> 先後端分離 -> 全棧工程師

動力：更加產業化、大規模地生產軟件

效率更高
成本更低

通用性好、可以快速產出的技術最終會贏，單個程序員的生產力要求愈來愈高。

H5 就是一個最好的例子

爲何 H5 技術會贏得移動端？

開發速度快：Native 須要從新編譯才能看到結果，H5 是即時輸出
開發成本低：Native 須要兩個開發團隊，H5 只要一個
快速發佈：安卓 Native 新版本須要24小時，iOS 須要 3 ～ 4 天，H5 能夠隨時更新

將來軟件的特色

聯網
高併發
分佈式
跨終端

如今基於 Web 的前端技術，將演變爲將來全部軟件的通用的 GUI 解決方案。

將來只有兩種軟件工程師

端工程師
- 手機端
- PC 端
- TV 端
- VR 端
- ……
雲工程師

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。