php工程獅感知的前端工做流程

時間 2019-11-07

標籤 php 工程感知前端流程欄目 PHP 简体版

原文原文鏈接

這個時代不懂點前端知識，真的沒有辦法生存。就算不會寫，也得了解它的原理吧！php

最近作了一些總結，以前都是迷迷糊糊，搞不清楚前端以前的相關定位。好好梳理了一下。錯誤之處請各位指正。css

本文主要說的是 JavaScript 工做流程html

目前前端真的該叫大前端，其愈來愈細化，愈來愈複雜。在這種背景下，誕生了不少工具不少前端工做流程。好比熱門的：前端

reactvue
vuejava
webpacknode
babelpython
gulpreact
node.jsjquery
npm
nvm
angular
bower
... ...

若是繼續寫，估計光這個，字數久可以達到1000+
這裏邊有的是前端js框架，有的是一些開發工具，但他們種類這麼多，各自可以解決什麼問題？互相之間有什麼聯繫？是否是一個項目就必須用上這麼多東西？使用時候，如何相互配合？

帶着這些疑問，做爲一個後端程序員，進行了系列調查，要把個人成果分享出來（可能錯誤百出）。
首先前端開發的三大基礎：

html 這個是最基礎的，被稱爲：超文本標記語言。什麼意思？簡單來講就是描述一個頁面的結構，好比：頁面的頭部，頁面的內容，頁面的尾部。也就說，它控制一個頁面的結構。瀏覽器會按照它定義的結構來進行解析，顯示不一樣內容。
css 咱們對美的追求是無止境的，光有結構，看起來沒有色彩，有些地方不突出。就像衣服：原始人用樹葉、獸皮，隨着進步，咱們穿絲綢、破洞牛仔，搭配絲巾、手錶等等，因此就是用來控制html的樣式，讓它變的更好看。
JavaScript 這是本文主要闡述的地方，有了html+css，顯然還不能知足咱們的追求，會html、css的人不能叫作前端工程師、更不能叫程序媛。可是若是你會了 JavaScript，江湖就有你的依稀之地，這也是本文主要介紹的部分。

目前咱們不少時候常說的前端工程師，其實主要指的就是其 js工程師。在Web世界裏，只有JavaScript能跨平臺、跨瀏覽器驅動網頁，與用戶交互。

功能越強大，責任也越多。如今 js（後面所有使用簡稱，字太多，不想寫）使用的愈來愈多，早期 js 僅僅用來作一些簡單的交互，隨着如今移動互聯網的發展，各項硬件設備的性能提高。項目愈來愈複雜，效果愈來愈酷炫。js 作的事情也更多。

固然今天不講這麼多發展歷史（關鍵是我也沒理清呀），總的來講就是 js 開發工做原來比較簡單，你們隨便寫寫久搞定工做了，可是如今工做的複雜度愈來愈高，像之前那麼任性的工做，開發麻煩、維護麻煩。還好具有程序員三大美德人，開始構建一些工具。

Perl語言的發明人Larry Wall說，好的程序員有3種美德：懶惰、急躁和傲慢（Laziness, Impatience and hubris）。

懶惰：

是這樣一種品質，它使得你花大力氣去避免消耗過多的精力。它敦促你寫出節省體力的程序，同時別人也能利用它們。爲此你會寫出完善的文檔，以避免別人問你太多問題。
急躁：
是這樣一種憤怒----當你發現計算機懶洋洋地不給出結果。因而你寫出更優秀的代碼，能儘快真正的解決問題。至少看上去是這樣
傲慢：
極度的自信，使你有信心寫出（或維護）別人挑不出毛病的程序

先是你們感受js代碼複用是個問題，咱們想用別人寫的某個功能，只能網上去翻別人寫的源碼，拷貝下來。後段語言都有本身的包管理工具，好比：java的maven，python的pip，php的composer等。因而在歷史的使命召喚中，npm誕生了，js的包管理工具。
好比之前要使用 jquery，你的到官網去下載，如今 npm install jquery 就能夠了。

npm是運行在node的環境上，它們的關係又是另一個話題，這裏按下暫且不表。
像 react、vue均可以經過npm來安裝。

包管理的問題解決了，接下來又有另一個問題，因爲 js 是 Brendan Eich 這大哥花了 10 天時間設計的（牛人就是這麼屌）。雖然現在普遍應用，也因爲時間緊緻使留下了不少設計缺陷。

伴隨了 ES6 的發佈，js愈來愈規範了，咱們程序員確定都想用好用的簡潔的語法來完成任務，好早點下班回家打lol呀。惋惜呀，世界上成百上千萬的網站，不可能一會兒所有升級，瀏覽器也不可能立馬就支持最新語法，怎麼辦？babel 誕生了，它牛逼在那裏？讓你能夠用es6的語法寫代碼，而後在如今的環境下能夠運行（在這裏請自行忽略ie9如下瀏覽器）。

在你用es6寫完代碼後，用它轉碼一下，能夠獲得es5的代碼。不信？來個例子：

// 轉碼前
input.map(item => item + 1);

// 轉碼後
input.map(function (item) {
  return item + 1;
});

上面的原始代碼用了箭頭函數，Babel 將其轉爲普通函數，就能在不支持箭頭函數的 JavaScript 環境執行了。

另外 babel 其實也是用js寫的一個工具，因此它仍是能夠經過 npm install babel-cli 來安裝。

關於它怎麼用，本身看官方文檔。

好。到目前爲止，解決了兩個大問題。接着看前端還有什麼問題？那麼在開發中還有什麼問題須要解決？合併文件、壓縮代碼、檢查語法錯誤、將Sass代碼轉成CSS代碼等等這些都是開發中的重複性任務，之前這些任務都須要單獨人工解決，而後爲了提升效率，早點下班，就有了:Gulp Grunt這些task runner。推薦使用gulp來自動化的執行這些任務。

那麼到了這裏，是否是就截止了？尚未，如今的基本都講究什麼先後端分離，也就是變成了web app的方式，那麼就要求頁面從新加載要變少，用戶交互要變多，也就致使一個頁面上js愈來愈多。這麼多的js怎麼管理？如何提升瀏覽器的加在速度？可否將css img html 字體這些資源也當成模塊來處理？在這些問題下，產生了不少模塊打包工具，毫無疑問：webpack是最耀眼的，也是用起來最爽的。

因此模塊打包的問題也解決了，另外說一句，gulp的部分功能可能經過webpack的插件也能解決，但並不意味着再也不須要它，通常來講gulp運行在webpack以後。

再次聲明，上面全部介紹的東西，均可以經過npm來安裝得到。因此說到底它們都是用js寫的一個工具。

ok，那麼工具基本介紹完了，到底頁面怎麼呈現給用戶？後臺傳過來的數據怎麼綁定到dom裏邊去？若是向後臺發起請求得到數據？等等，這些須要一個js業務框架來完成。因此react、vue就是來解決這些問題的