第四章: 前端工程化【必备篇】
2020/3/29 11:32:12
本文主要是介绍第四章: 前端工程化【必备篇】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
整理中高级前端系列,可以当作面试复习,也可以当作实战来看,分享一下 方便自己,方便他人。有不足的地方欢迎评论~
事件
事件捕获和冒泡
自顶向下称为「事件捕获」自下向上称为「事件冒泡」
DOM2事件规范规定,一个标准的事件流分为三个阶段。
- 首先是 自上而下的【事件捕获】状态
- 然后是 到达真正触发事件的元素
- 最后 再从这个元素回到顶部 【事件冒泡】
document.getElementsByTagName('p')[0].onclick = function(event) { console.log(event); alert('hello event'); }; document.getElementsByTagName('p')[0].addEventListener('click', function(event) { console.log(event); alert('hello event'); }); 复制代码
event 对象下的属性
bubbles:表明事件是否冒泡 cancelable:表示是否可以取消事件的默认⾏为 currentTarget:事件当前正在处理的元素 defaultPrevented:为 true 则代表已经调⽤了 preventDefault 函数 detail:事件细节 eventPhase:事件所处阶段,1 代表捕获 2 代表在事件⽬标 3 代表冒泡 type:事件类型(click 等)
event 对象下的⽅法 preventDefault:取消事件的默认⾏为 stopImmediatePropagation:取消事件的进⼀步捕获或冒泡,同时阻⽌事件处理程序调⽤ stopPropagation:取消事件的进⼀步捕获
事件委托
<ul id="ul"> <p>1234</p> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> document.getElementById('ul').onclick = function(event) { var target = event.target; if (target.nodeName.toLowerCase() === 'li') { alert(target.innerHTML); } } 复制代码
本地存储
cookie 的操作与封装
localStorage 和 sessionStorage
- 相同浏览器下,并且是同源窗口(协议、域名、端口一致),不同页面可以共享localStorage值
- 关于sessionStorage,通常说sessionStorage关闭页面即消失,但是通过跳转的页面可以共享sessionStorage值
HTTP
HTTP 协议(请求与响应、头信息、状态码)
- 3XX重定向
- 4xx 客户端错误:401 发送的请求需要通过HTTP认证、403 请求的资源被服务器拒绝
- 5xx 服务器错误:
HTTPS如何带来安全
使用数字签名就是用CA自带的HASH算法对证书的内容进行HASH得到一个摘要,再用CA的私钥加密,最终组成数字签名。
ajax的封装
post 请求发送 form 数据和 json 数据的示例:
// 设置 request 的 content-type 为 application/x-www-form-urlencoded // 设置 request 的 content-type 为 application/json 复制代码
跨域:jsonp、cors跨域设置、后端代理
这里有一篇很好的文章讲解链接
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 我们前端通常所说的跨域是狭义的,由同源策略限制引起的
什么是同源策略
是一种约定,是浏览器最核心也是最基本的安全功能,如果缺了同源策略,浏览器很容易受到XSS、CSFR等攻击。 同源是指:「协议 + 域名 + 端口」满足三者相同。
限制以下几种行为:
1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 复制代码
解决跨域方案
- 通过jsonp跨域,缺点:只能实现get一种请求。
- document.domain + iframe跨域
- postMessage跨域
- 跨域资源共享(CORS) 普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置, 若要带cookie请求:前后端都需要设置。
- nginx代理跨域
- nodejs中间件代理跨域
- WebSocket协议跨域
**vue框架的跨域:**利用node + webpack + webpack-dev-server(proxy)代理接口跨域。
fetch请求、axios源码解析
目前阶段会使用、可以自己封装 就OK了
H5核心
文件操作、音频、视频操作
推荐这篇大神写的 链接 TODO: 自己实现一遍最爽
canvas
这里有详细讲解 链接
Echarts、HeighCharts、D3
第三方数据可视化插件
后模块化时代
显然使用ESModule的模块明显符合JS开发的历史进程,因为任何一个支持JS的环境随着对应解释器得分升级,最终一定会支持 ESModule的标准。但是 并不一定对市面上的浏览器使用新特性,由此 诞生了 大家所熟知的 babel ,能把静态高版本规范代码编译为低版本规范代码,让更多浏览器支持。
但是并不理想,对于 模块化相关的 import和export关键字,babel 最终编译为 require和exports的CommonJS规范。导致浏览器中无法运行,为此 我们又做了一步 叫做 打包(bundle)
browserify和webpack都是非常优秀的打包工具,browserify能够处理CommonJS模块化规范的包为web直接使用, webpack则能处理任何模块化规范的内容
webpack
模块打包机:分析项目结构找到js模块以及其他一些浏览器不能直接运行的扩展语言(Scss、TypeScript等),并将其打包为合适的格式以供浏览器使用。
Loader 加载器
让webpack拥有加载和解析 「非js文件」的能力
- css-loader: 加载 CSS,支持模块化、压缩、文件导入等特性
- style-loader: 使用
<style>
把css-loader生成的内容挂在到html页面中 - babel-loader: 转换ES6、7等js新特性语法为ES5
- file-loader: 把文件输出到一个文件夹中,在代码中通过相对URL去引用输出的文件
- url-loader: 和file-loader类似,但是文件很小的情况下以base64的方式把文件内容注入到代码中
- source-map-loader:加载额外的 Source Map 文件,以方便断点调试
- image-loader:加载并且压缩图片文件
- eslint-loader:通过 ESLint 检查 JavaScript 代码
Plugin 插件
扩展webpack的功能,让其具有更多的灵活性。
- HtmlWebpackPlugin:打包结束后自动生成一个html文件,并把打包生成的js模块引入到该html中。
- clean-webpack-plugin:打包的时候 清理输出目录文件
- define-plugin:定义环境变量
- uglifyjs-webpack-plugin:通过
UglifyES
压缩ES6
代码 - webpack-parallel-uglify-plugin: 多核压缩,提高压缩速度
- webpack-bundle-analyzer: 可视化webpack输出文件的体积
- mini-css-extract-plugin: CSS提取到单独的文件中,支持按需加载
用法:
-
Loader在
module.rules
中配置,也就是说他作为模块的解析规则而存在。 类型为数组,每一项都是一个Object
,里面描述了对于什么类型的文件(test
),使用什么加载(loader
)和使用的参数(options
) -
Plugin在
plugins
中单独配置。 类型为数组,每一项是一个plugin
的实例,参数都通过构造函数传入。
sourceMap 和 webpackDevServer
源代码与打包后的代码的映射关系、提升开发效率的利器,保存自动刷新页面。
Hot Module Repacement 热更新
Babel ES6+转ES5
Git
常用命令
git-flow工作流 链接
就像代码需要代码规范一样,代码管理同样需要一个清晰的流程和规范
git-cz 提交规范 链接
**目的:**统一团队Git commit 文本标准,便于后续代码review和团队协作;
服务
Jenkins搭建和使用
在jenkins(一个网站界面)中通过获取代码仓库中最新代码,进行自动化部署,而省去手动打包、上传服务器、部署这一系列步骤,非常方便。
多分支选择配置实战 链接
mock.js 的使用
postman:调试接口
调试
1.whistle:基于Node实现的 跨平台web调试代理工具,可以作为普通http代理或者用来 抓包、修改、操作
2.Fiddler:抓包工具
移动端调试神器: vconsole
同学觉得有帮助的可以点个赞哈,以示鼓励 😊
这篇关于第四章: 前端工程化【必备篇】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程