2018年你應該瞭解的前端新技術

1、HTML5.2新標籤dialog

HTMl5.2新的版本出現了一個有意思的標籤，那就是對話窗或窗口，也就是dialog,其基本用法以下：

<dialog open>
    //soming...
</dialog>

open屬性代表該窗口是默認顯示的，用戶可與之交互。 相關js方法有： 1.close():關閉對話框，可選傳入類型爲{domxref("DOMString")}}的參數，用來更新對話框的returnValue。 2.open():非模式化的顯示這個對話框, 即：打開這個對話框以後依然能夠和其餘內容進行交互。 可選傳入類型爲Element或者MouseEvent的參數，用來定義對話框的顯示位置。 3.showModal():模式化的顯示這個對話框， 而且將會至於全部其餘對話框的頂層（屏蔽其餘對話框的交互）。 可選傳入類型爲Element或者MouseEvent的參數， 用來定義對話框的顯示位置。 show()和showModal()是有區別的，show只是顯示dialog,而showMadal()是會屏蔽其餘的彈出層。 按ESC能夠關閉dialog，dialog須要從新定義css樣式，畢竟自己css是默認的樣式。 下面是一個demo代碼：

<!-- 建立一個dialog -->
<dialog>
    <h1>這是dialog的標題</h1>
    <div>這是dialog的內容</div>
    <button id="close_dialog">關閉</button> </dialog> <button id="open_dialog">打開</button> <!-- js代碼 --> <script> var dialog = document.getElementsByTagName("dialog")[0], openDialog = document.getElementById("open_dialog"), closeDialog = document.getElementById("close_dialog"); openDialog.onclick = function(){ dialog.showModal(); }; closeDialog.onclick = function(){ dialog.close(); }; </script> 

2、Grid佈局全新的css網站佈局

CSS Grid 佈局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。下面是一個 wrapper 元素，內部包含6個 items ：

<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> 

要把 wrapper 元素變成一個grid(網格)，只要簡單地把其 display 屬性設置爲grid便可：

.wrapper{
    display:grid;
}

爲了使其成爲二維的網格容器，咱們須要定義列和行。讓咱們建立3列和2行。咱們將使用grid-template-row和grid-template-column屬性。

.wrapper{
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:50px 50px;
}

正如你所看到的，咱們爲grid-template-columns寫入了 3 個值，這樣咱們就會獲得 3 列。 咱們想要獲得 2 行，所以咱們爲 grid-template-rows指定了2個值。 這些值決定了咱們但願咱們的列有多寬（ 100px ），以及咱們但願行數是多高（ 50px ）,結果以下：

接下來是如何在 grid(網格) 上放置 items(子元素) 。特別注意，這裏纔是體現 Grid 佈局超能力的地方，由於它使得建立佈局變得很是簡單。 咱們使用與以前相同的 HTML 標記，爲了幫助咱們更好的理解，咱們在每一個 items(子元素) 加上了單獨的 class ：

 

<div class="wrapper"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> </div> 

如今，咱們來建立一個 3×3 的 grid(網格)：

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

將獲得如下佈局：

不知道你發現沒有，咱們只在頁面上看到 3×2 的 grid(網格)，而咱們定義的是 3×3 的 grid(網格)。這是由於咱們只有 6 個 items(子元素) 來填滿這個網格。若是咱們再加3個 items(子元素)，那麼最後一行也會被填滿。

 

要定位和調整 items(子元素) 大小，咱們將使用grid-column和 grid-row屬性來設置：

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

咱們在這裏要作的是，咱們但願 item1 佔據從第一條網格線開始，到第四條網格線結束。換句話說，它將獨立佔據整行。 如下是在屏幕上顯示的內容：

若是你不明白咱們設置的只有 3 列，爲何有4條網格線呢？看看下面這個圖像，我畫了黑色的列網格線： 請注意，咱們如今正在使用網格中的全部行。當咱們把第一個 items(子元素) 佔據整個第一行時，它把剩下的 items(子元素) 都推到了下一行。 最後，給你一個更簡單的縮寫方法來編寫上面的語法：

 

.item1 {
    grid-column: 1 / 4;
}

爲了確保你已經正確理解了這個概念，咱們從新排列其餘的 items(子元素) 。

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

如下是頁面上的佈局效果：

 

3、Parcel：超快的Web應用打包器

雖然 webpack 帶來了許多可配置性，同事也造就了它的複雜性。 而 Parcel 帶來簡單性。 官方號稱 Parcel 爲 「零配置」 ，開箱即用。

正如上面所說的 – Parcel 內置了一個開箱即用的開發服務器。 開發服務器將在你更改文件時自動從新構建你的應用程序，並支持模塊熱替換以實現快速開發。 Parcel 有什麼好處？ 1.快速打包 – Parcel 比 Webpack，Rollup 和 Browserify 更快。 2.Parcel 支持 JS、CSS、HTML、資源文件等等 – 無需插件 – 更加便於用戶使用。 3.零配置。開箱即用的代碼拆分，模塊熱替換，CSS 預處理器，開發服務器，緩存等等； 4.更加友好的錯誤日誌。 咱們應該何時使用 Parcel ， Webpack 或 Rollup 呢？ 這徹底取決於你，但我我的會在如下狀況下使用每一個打包器： Parcel：中小型項目（代碼行小於 15k） Webpack：大型以及企業級項目。 Rollup：用於 NPM 包。 讓咱們給 Parcel 一個機會 。 Parcel官網地址：*parceljs.org/

4、PWA是否能帶來新一輪大前端技術洗牌？

漸進式網絡應用 ( Progressive Web Apps )，即咱們所熟知的 PWA。 自 2015 年以來，PWA 相關的技術不斷升級優化，在用戶體驗和用戶留存兩方面都提供了很是好的解決方案。PWA 能夠將 Web 和 App 各自的優點融合在一塊兒：漸進式、可響應、可離線、實現相似 App 的交互、即時更新、安全、能夠被搜索引擎檢索、可推送、可安裝、可連接。 PWA 不是特指某一項技術，而是應用了多項技術的 Web App。其核心技術包括 App Manifest、Service Worker、Web Push、Credential Management API ，等等。其核心目標就是提高 Web App 的性能，改善 Web App 的用戶體驗。 下面咱們詳細地看一下這些核心技術，是否可以真正彌補 Web 劣勢。

1. Web App Manifest

Web App Manifest 是爲了解決用戶留存問題而誕生的，它是一個外鏈的 JSON 文件，在這個文件中，像瀏覽器暴露了站點的名稱，地址，圖標等等元數據。在瀏覽器中經過 引入這個 JSON 文件，瀏覽器識別到這個文件的存在，會根據本身的機制決定是否彈出添加到桌面對話框，並在桌面上生成一個應用的圖標，經過點擊桌面圖標進入應用具備沉浸式的體驗，全屏顯示，沒有瀏覽器地址欄，而且還會自動添加應用啓動畫面。

2. Service Worker

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

3. Push Notification

Push Notification 實際上是兩個 API 的結合， Notification API 和 Push API 。 Notification API 提供了開發者能夠給用戶發送通知的能力，包括申請顯示通知權限，發起通知，以及定製通知的類型等等。 Push API，則是讓服務器可以向用戶發送離線消息，即便用戶當前並無打開你的頁面，甚至沒有打開瀏覽器。

各家瀏覽器廠商在 2017 年開始大力支持 PWA,連蘋果都已經在幾個月前悄悄的進行了 Service Worker 的開發了，iOS 也將支持 PWA。各大站點紛紛實踐，用 PWA 已成趨勢。