理解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官网