脚本宝典收集整理的这篇文章主要介绍了

理解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
是一个hga008.com|首页器端代码模块化工具
服务器端NodeJS自带模块功能,可以使用require和module.exports构建项目

随着项目的增大,hga008.com|首页器端任务越来越重,依赖关系越来越复杂,需要使用工具实现模块化。

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 应用提供高级的可持续的后台处理能力。

clipboard.png

如上图,Service Worker 是一个特殊的 Web Worker,独立于页面主线程运行,它能够拦截和处理网络请求,并且配合 Cache Storage API,开发者可以自由的对页面发送的 HTTP 请求进行管理,这就是为什么 Service Worker 能让 Web 站点离线的原因。

Service Worker 的生命周期

clipboard.png

最主要的特点

在页面中注册并安装成功后,运行于hga008.com|首页器后台,不受页面刷新的影响,可以监听和截拦作用域范围内所有页面的 HTTP 请求。
网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
运行于hga008.com|首页器后台,可以控制打开的作用域范围下所有的页面请求
单独的作用域范围,单独的运行环境和执行线程
不能操作页面 DOM。但可以通过事件机制来处理
事件驱动型服务线程

 **HTTP缓存与service worker缓存**

HTTP缓存
Web 服务器可以使用 Expires 首部来通知 Web 客户端,它可以使用资源的当前副本,直到指定的“过期时间”。反过来,hga008.com|首页器可以缓存此资源,并且只有在有效期满后才会再次检查新版本。
使用 HTTP 缓存意味着你要依赖服务器来告诉你何时缓存资源和何时过期。

service worker缓存
Service Workers 的强大在于它们拦截 HTTP 请求的能力
进入任何传入的 HTTP 请求,并决定想要如何响应。在你的 Service Worker 中,可以编写逻辑来决定想要缓存的资源,以及需要满足什么条件和资源需要缓存多久。一切尽归你掌控!

Web App Manifest

Web App Manifest 是为了解决用户留存问题而诞生的,它是一个外链的 JSON 文件,在这个文件中,像hga008.com|首页器暴露了站点的名称,地址,图标等等元数据,可以看下面这个例子。
`{
"name": "百度天气",
"short_name": "天气",
"icons": [

{
  "src": "/dist/static/img/icons/android-chrome-192x192.png" alt="理解web前端中  一些名词和概念" title="理解web前端中  一些名词和概念",
  "sizes": "192x192",
  "type": "image.png" alt="理解web前端中  一些名词和概念" title="理解web前端中  一些名词和概念"
}

],
"start_url": "/?from=homescreen",
"background_color": "#3E4EB8",
"display": "standalone",
"theme_color": "#2F3BA2"
}
`Web App Manifest 有很多配置项,MDN 的文档。
在hga008.com|首页器中通过 <link rel="manifest" href="/manifest.json">
引入这个 JSON 文件,hga008.com|首页器识别到这个文件的存在,会根据自己的机制决定是否弹出添加到桌面对话框,并在桌面上生成一个应用的图标,通过点击桌面图标进入应用具有沉浸式的体验,全屏显示,没有hga008.com|首页器地址栏,并且还会自动添加应用启动画面。
Web App Manifest 当前也存在一些问题,比如 Web App Manifest 添加到桌面依赖于手机操作系统是否给hga008.com|首页器开通在桌面创建快捷方式的权限,目前在国内,大部分情况下,hga008.com|首页器的这个权限被默认禁止,需要用户手动开启,

Push Notification

Push Notification 其实是两个 API 的结合, Notification API和Push API
Notification API 提供了开发者可以给用户发送通知的能力,包括申请显示通知权限,发起通知,以及定制通知的类型等等。
Push API,则是让服务器能够向用户发送离线消息,即使用户当前并没有打开你的页面,甚至没有打开hga008.com|首页器。hga008.com|首页器在接到消息推送时,会唤醒对应的 Service Worker,并抛出 push 事件,开发者接收到事件之后调用 Notification API 弹出通知,这就完成了整个接受和展示的流程。

SSR

SSR, Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息。

详情:见vue官网

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过