理解web前端中 一些名詞和概念

web 前端發展迅速，爲拓展本身的視野，先整理下常見的名詞和概念。
web前端歷程

1. JS---> jquery---bootstrap ---require.js/sea.js/common.js---gulp/grunt/browserify
2. js---->angular.js/react.js/vue.js----element ui/iview---webpack

從1到2 的一套，即從mvc---mvvm

js：es3--->es5---->es6

後端路由----前端路由
組件化--模塊化 ---前端工程化
html---html5
移動端

Browserify

browserify
是一個瀏覽器端代碼模塊化工具
服務器端NodeJS自帶模塊功能，可使用require和module.exports構建項目

隨着項目的增大，瀏覽器端任務愈來愈重，依賴關係愈來愈複雜，須要使用工具實現模塊化。

Browserify經過require和module.exports來導入和導出。Browserify的原理：部署時處理代碼依賴，將模塊打包爲一個文件。
Browserify的解決方案：entry point，入口點技術
每一個入口點打包一個文件，兩個入口點的相同依賴模塊單獨打包爲common.js，避免空間的浪費。
能夠解決單個文件的問題，代價是增長依賴維護成本

browserify()：功能是將當前項目的依賴，也就是require的東西打包到當前的一個文件當中

reactify

reactify()：功能是將jsx轉換爲js

bundle

bundle()：的功能是將多個文件打包成一個。
source()：因爲browserify生成的代碼沒法直接讓gulp使用，因此須要用到source()。它將browserify生成的代碼轉換爲gulp可識別的代碼。參數是生成的文件名。

stylelint

stylelint 是一個強大的 CSS linter 工具，它使用 PostCSS 的 AST 語法解析樹引擎，支持
PostCSS 支持的全部語法識別，並且還支持自定義語法解析器，具備很大的擴展性，對於 SCSS、LESS 和 SugarSS 均可以良好的支持。

stylefmt

stylefmt 是一個基於 stylelint 的代碼修正工具，它能夠基於 stylelint 的代碼規範約定配置，對可修正的地方做格式化輸出。

PostCSS-Sorting

PostCSS-Sorting 是一個 CSS 屬性順序約定格式化的插件，基於屬性順序約定，格式化調整其順序。這可使得團隊內的 CSS 書寫更爲規範且具備一致性。

PostCSS

PostCSS 自己是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由插件來進行處理

Stylelint

Stylelint是一個JavaScirpt實現的可擴展、靈活的CSS靜態檢查工具。它在CSS靜態檢查方面是最新、最好的。它支持最新的CSS語法，理解類CSS語法，而且支持插件擴展。還有，因爲它是用JavaScirpt而不是Ruby實現的，它比scss-lint要快得多得多。

vue-cli 爲咱們提供的6種模板.

★ browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
browserify-一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
★ browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
browserify-simple-一個簡單Browserify+vueify的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
simple-一個最簡單的單頁應用模板。
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
webpack-一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
.
webpack-simple-一個簡單webpack+vue-loader的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。

PWA

PWA（Progressive Web App）即漸進式WEB應用。
全新的網頁技術，讓網站的離線體驗變得更好，網絡鏈接斷斷續續時體驗也會更好，它會模擬一些原生功能，好比通知推送
一個 PWA 應用首先是一個網頁, 能夠經過 Web 技術編寫出一個網頁應用. 隨後添加上 App Manifest 和 Service Worker 來實現 PWA 的安裝和離線等功能

解決了哪些問題？

Manifest 實現添加至主屏幕 點擊主屏幕圖標能夠實現啓動動畫以及隱藏地址欄
service worker 實現離線緩存:即便用戶手機沒有網絡，依然可使用一些離線功能
Push Notification 實現了消息推送

它解決了上述提到的問題，這些特性將使得 Web 應用漸進式接近原生 App。

PWA 能夠將 Web 和 App 各自的優點融合在一塊兒：漸進式、可響應、可離線、實現相似 App 的交互、即時更新、安全、能夠被搜索引擎檢索、可推送、可安裝、可連接。

Service Worker

Service Worker 是 Chrome 團隊提出和力推的一個 WEB API，用於給 web 應用提供高級的可持續的後臺處理能力。

如上圖，Service Worker 是一個特殊的 Web Worker，獨立於頁面主線程運行，它可以攔截和處理網絡請求，而且配合 Cache Storage API，開發者能夠自由的對頁面發送的 HTTP 請求進行管理，這就是爲何 Service Worker 能讓 Web 站點離線的緣由。

Service Worker 的生命週期

最主要的特色

在頁面中註冊並安裝成功後，運行於瀏覽器後臺，不受頁面刷新的影響，能夠監聽和截攔做用域範圍內全部頁面的 HTTP 請求。
網站必須使用 HTTPS。除了使用本地開發環境調試時(如域名使用 localhost)
運行於瀏覽器後臺，能夠控制打開的做用域範圍下全部的頁面請求
單獨的做用域範圍，單獨的運行環境和執行線程
不能操做頁面 DOM。但能夠經過事件機制來處理
事件驅動型服務線程

 **HTTP緩存與service worker緩存**

HTTP緩存
Web 服務器可使用 Expires 首部來通知 Web 客戶端，它可使用資源的當前副本，直到指定的「過時時間」。反過來，瀏覽器能夠緩存此資源，而且只有在有效期滿後纔會再次檢查新版本。
使用 HTTP 緩存意味着你要依賴服務器來告訴你什麼時候緩存資源和什麼時候過時。

service worker緩存
Service Workers 的強大在於它們攔截 HTTP 請求的能力
進入任何傳入的 HTTP 請求，並決定想要如何響應。在你的 Service Worker 中，能夠編寫邏輯來決定想要緩存的資源，以及須要知足什麼條件和資源須要緩存多久。一切盡歸你掌控！

Web App Manifest

Web App Manifest 是爲了解決用戶留存問題而誕生的，它是一個外鏈的 JSON 文件，在這個文件中，像瀏覽器暴露了站點的名稱，地址，圖標等等元數據，能夠看下面這個例子。
`{
"name": "百度天氣",
"short_name": "天氣",
"icons": [

{
  "src": "/dist/static/img/icons/android-chrome-192x192.png",
  "sizes": "192x192",
  "type": "image/png"
}

],
"start_url": "/?from=homescreen",
"background_color": "#3E4EB8",
"display": "standalone",
"theme_color": "#2F3BA2"
}
`Web App Manifest 有不少配置項，MDN 的文檔。
在瀏覽器中經過 <link rel="manifest" href="/manifest.json">
引入這個 JSON 文件，瀏覽器識別到這個文件的存在，會根據本身的機制決定是否彈出添加到桌面對話框，並在桌面上生成一個應用的圖標，經過點擊桌面圖標進入應用具備沉浸式的體驗，全屏顯示，沒有瀏覽器地址欄，而且還會自動添加應用啓動畫面。
Web App Manifest 當前也存在一些問題，好比 Web App Manifest 添加到桌面依賴於手機操做系統是否給瀏覽器開通在桌面建立快捷方式的權限，目前在國內，大部分狀況下，瀏覽器的這個權限被默認禁止，須要用戶手動開啓，

Push Notification

Push Notification 實際上是兩個 API 的結合， Notification API和Push API
Notification API 提供了開發者能夠給用戶發送通知的能力，包括申請顯示通知權限，發起通知，以及定製通知的類型等等。
Push API，則是讓服務器可以向用戶發送離線消息，即便用戶當前並無打開你的頁面，甚至沒有打開瀏覽器。瀏覽器在接到消息推送時，會喚醒對應的 Service Worker，並拋出 push 事件，開發者接收到事件以後調用 Notification API 彈出通知，這就完成了整個接受和展現的流程。

SSR

SSR， Server Side Rendering（服務端渲染），目的是爲了解決單頁面應用的 SEO 的問題，對於通常網站影響不大，可是對於論壇類，內容類網站來講是致命的，搜索引擎沒法抓取頁面相關內容，也就是用戶搜不到此網站的相關信息。

詳情：見vue官網