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 已成趋势。