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