前端学习
2021-07-19 11:26:59 84 举报AI智能生成
前端学习知识总结
作者其他创作
大纲/内容
https://www.processon.com/view/5c51418fe4b0fa03ceab8ca0?fromnew=1#map
https://www.processon.com/view/5ece2c93f346fb69071e1a5e?fromnew=1#map
https://www.processon.com/view/56fa2d73e4b064fdbce85a39?fromnew=1#map
参考文章
默认情况下，动态添加<script>元素是以异步方式加载的，相当于添加了async属性。不过这样做可能会有问题，因为所有浏览器都支持createElement()方法，但不是所有浏览器都支持async属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载
let script = document.createElement('script'); script.src = 'gibberish.js'; script.async = false; document.head.appendChild(script);
动态加载脚本
过rel=\"preload\"进行内容预加载
例子：<link rel=\"preload\" href=\"gibberish.js\">
预加载资源
把所有JavaScript文件都放在<head>里，也就意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。
现代Web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面
<script>元素
由ECMA-262定义并提供核心功能。
核心（ECMAScript）
提供与网页内容交互的方法和接口。
文档对象模型（DOM）
提供与浏览器交互的方法和接口。
浏览器对象模型（BOM）
完整的JavaScript
\\0\t空字符\\'\t单引号\\\"\t双引号\\\\\t反斜杠\\t换行\\t回车\\v\t垂直制表符\\t\t水平制表符\\b\t退格\\f\t换页\\uXXXX\tunicode 码\\u{X} ... \\u{XXXXXX}\tunicode codepoint \\xXX\tLatin-1 字符(x小写)
字符字面量
使用默认的String.raw标签函数
console.log(String.raw`\\u00A9`); // \\u00A9
原始字符串
String
Symbol
省略文档开头的doctype声明
在不同浏览器中的差异非常大，不使用黑科技基本上就没有浏览器一致性可言。
混杂模式（quirks mode）
有文档开头的doctype声明
标准模式（standards mode）
文档模式
\"use strict\"
是一种不同的JavaScript解析和执行模型，ECMAScript 3的一些不规范写法在这种模式下会被处理，对于不安全的活动将抛出错误
严格模式
预处理指令
https://www.cnblogs.com/Vincent-yuan/p/12514137.html
事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的
box1.addEventListener(\"click\
window --> document --> html--> body --> 父元素、子元素、目标元素。
事件捕获阶段
当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件目标
事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。
box1.onclick = function (event) { alert(\"冒泡 child\"); event = event || window.event; console.log(event.bubbles); //打印结果：true。说明 onclick 事件是可以冒泡的}
以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave
box3.onclick = function (event) { alert(\"child\"); //阻止冒泡 event = event || window.event; if (event && event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } }
阻止冒泡
事件冒泡阶段
https://www.cnblogs.com/leftJS/p/10948138.html
事件代理
应用
事件冒泡与捕获
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别
阻止默认行为
阻止链接
阻止表单提交
场景
preventDefault
事件冒泡与捕获、默认事件
https://segmentfault.com/a/1190000012806637#2
https://www.cnblogs.com/amiezhang/p/11349450.html
https://www.cnblogs.com/wangziye/p/9566454.html
https://www.cnblogs.com/shcrk/p/9325779.html
文章
代码块 > setImmediate > MessageChannel > setTimeout / setInterval
宏任务macrotask
process.nextTick > Promise = MutationObserver
微任务microtask
分类
JS引擎的执行机制
原型和原型链
所有的引用类型（数组、对象、函数）都可以自定义添加属性，除了“null”）
所有的引用类型都有自己的隐式原型（proto）属性，该属性值也是一个普通的对象
函数都有自己的显式原型（prototype）属性
所有的引用类型的隐式原型都指向对应构造函数的显示原型
使用引用类型的某个自定义属性时，如果没有这个属性，会去该引用类型的__proto__（也就是对应构造函数的prototype）中去找
原型规则
图解
说明
Object和Function的原型链关系图
面试题
参考文档
在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。
function this指向
都是用来改变函数的this对象的指向的
第一个参数都是this要指向的对象
都可以利用后续参数传参
相同点
bind是返回对应函数，便于稍后调用，apply、call是立即调用；
call和bind把第二个以后传递进来的实参传递给函数，apply把一个数组（或者类数组）传递给函数
不同点
手写
apply、call、bind
判断变量类型方式
https://www.cnblogs.com/ainyi/p/8537027.html
https://www.cnblogs.com/kreo/p/11069640.html
https://es6.ruanyifeng.com/
1.都不能重复声明2.都存在块级作用域问题 3.只在声明所在的块级作用域内有效。
所声明的变量，只在let命令所在的代码块内有效
变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量
JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。
for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}
for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。
for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i);}// abc// abc// abc
基础用法
var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined
let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
不存在变量提升
tmp = 'abc'; // ReferenceError let tmp;
暂时性死区
function func(arg) { let arg;}func() // 报错function func(arg) { { let arg; }}func() // 不报错
不允许重复声明
let 和 const
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
复制数组
var car={ brand:\"BMW\
复制对象
解构赋值
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
[...new Set(array)]
数组去重
[...new Set('ababbc')].join('')
字符串去重
Set 结构的实例有以下属性。 Set.prototype.constructor：构造函数，默认就是Set函数。 Set.prototype.size：返回Set实例的成员总数。Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。 Set.prototype.add(value)：添加某个值，返回 Set 结构本身。 Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。 Set.prototype.clear()：清除所有成员，没有返回值。
forEach
Set
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适
Map
成员只能是对象，而不能是其他类型的值。
WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用
无forEach
WeakSet、WeakMap
Set、Map、WeakSet、WeakMap
参数默认值
不定参数
https://www.runoob.com/w3cnote/es6-function.html
箭头函数不绑定arguments，取而代之用rest参数…解决
箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
普通函数的this指向调用它的那个对象
函数的this指向问题
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
箭头函数
特点
函数拓展
class B {}let b = new B();b.constructor === B.prototype.constructor
Point.prototype.constructor === Point
class
extends
import 导入模块、export 导出模块
模块化
源码实现
Promise.all
Promise.race
Promise、async\\await
生成器（ generator）是能返回一个迭代器的函数
Generator、yield
知识点
es6
原生
算法
// 从测试实用工具集中导入 `mount()` 方法// 同时导入你要测试的组件import { mount } from '@vue/test-utils'import Counter from './counter'// 现在挂载组件，你便得到了这个包裹器const wrapper = mount(Counter)// 你可以通过 `wrapper.vm` 访问实际的 Vue 实例const vm = wrapper.vm
初始化
wrapper.html()
wrapper.contains('button')
wrapper.find('button')
wrapper.props()
import ParentComponent from '@/components/ParentComponent'import ChildComponent from '@/components/ChildComponent'const wrapper = mount(ParentComponent)wrapper.find(ChildComponent)wrapper.find(ChildComponent).vm.$emit('custom')
dom获取
emit
const wrapper = mount(Component) await wrapper.trigger('click') wrapper.text().toContain('some different text')
tigger
事件触发
wrapper.setData({ count: 10 })wrapper.setProps({ foo: 'bar' })
赋值
await wrapper.vm.$nextTick()
await flushPromises()
await 语句来等待 flushPromises 刷新 Promise 的状态
任何导致操作 DOM 的改变都应该在断言之前 await nextTick 函数
注意
jest.fn
jest.spyOn
https://www.jianshu.com/p/c1b5676c1edd
使用 Object.is 来测试是否完全相等
toBe
用来测试相反的用例
not
检查某个对象的值
toEqual
判断一个有长度的对象的长度
toHaveLength
判断数组是否包含特定子项
toContain
判断数组中是否包含一个特定对象
toContainEqual
判断在指定的 path 下是否有这个属性，嵌套的 path 可以用 '.'分割
用来判断一个函数是否被调用过
toHaveBeenCalled
判断函数被调用过几次
toHaveBeenCalledTimes
断言
jest单测
https://zhuanlan.zhihu.com/p/55262808
路由权限控制
router
mock
特别用法
代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法
true
就跟我们以前的效果一样，不会在绑定的时候就执行。
false
immediate
深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler
就跟我们以前的效果一样
deep
注销
watch
全局写法
组件中挂载
<h3 :title=\"test|changemsg(1234)\">{{test|changemsg(4567)}}</h3>
只能使用在{{}}和：v-bind
使用场景
filterA 被定义为接收三个参数的过滤器函数。参数依次为message、arg1、arg2
filter
插件是一个对象，必须提供 install 方法
插件是一个函数，它会被作为 install 方法
install 方法调用时，会将 Vue 作为参数传入。
用法
index.js
import Loading from './components/loading/index'Vue.use(Loading)
main.js
<template> <div id=\"app\"> <h1>vue-loading</h1> <Loading></Loading> </div></template>
App.vue
实例
用 axios时，之所以不需要用 Vue.use(axios)，就能直接使用，是因为开发者在封装 axios 时，没有写 install 这一步。至于为啥没写，那就不得而知了
use
https://blog.csdn.net/qq_31837621/article/details/80819126
https://www.jianshu.com/p/8d3980334b80
https://www.jianshu.com/p/6a4811eb0efe
https://blog.csdn.net/yin4302008/article/details/86727811
https://www.cnblogs.com/chenwenhao/p/11924161.html
例子
全局注册
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}
组件内注册
在 bind 和 update 时触发相同行为，而不关心其它的钩子
函数简写
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
bind
被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
inserted
所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
update
指令所在组件的 VNode 及其子 VNode 全部更新后调用。
componentUpdated
只调用一次，指令与元素解绑时调用。
unbind
钩子函数
指令所绑定的元素，可以用来直接操作 DOM
el
一个对象，包含以下 property
指令名，不包括 v- 前缀
name
指令的绑定值，例如：v-my-directive=\"1 + 1\" 中，绑定值为 2
value
指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
oldValue
字符串形式的指令表达式。例如 v-my-directive=\"1 + 1\" 中，表达式为 \"1 + 1\"
expression
传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 \"foo\"
arg
modifiers
property
binding
Vue 编译生成的虚拟节点
vnode
上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
oldVnode
钩子函数参数
directives
加载更多
https://zhuanlan.zhihu.com/p/59939294
经典文章
局部混入
// 为自定义的选项 'myOption' 注入一个处理器。Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } }})
全局混入
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
规则
data选项在混入时，数据对象在内部会进行递归合并，当发生冲突时，以组件数据优先
同名钩子函数混合为一个数组，两个钩子函数内部的逻辑都会被执行，且混入的比组件的先调用
自定义的混入策略
执行规则
mixins
vuex
$emit/$on
props/$emit
provide/inject
$attrs/$listeners
$parent/$child/$ref
6种方式
组件间通信
axios、handler、immediate、deep、plugins、format、mixins
英文
主张最少
Vue渐进式-先使用Vue的核心库，再根据你的需要的功能再去逐渐增加加相应的插件。
渐进式框架
在vue中，数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新，而vue只需要改变数据。
数据驱动
组件化开发，优点很多，可以很好的降低数据之间的耦合度。将常用的代码封装成组件之后（vue组件封装方法），就能高度的复用，提高代码的可重用性。一个页面/模块可以由多个组件所组成。
组件系统
两个核心
创建前/后，载入前/后，更新前/后，销毁前/后
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
加载渲染过程
父beforeUpdate->子beforeUpdate->子updated->父updated
子组件更新过程
父beforeUpdate->父updated
父组件更新过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
销毁过程
https://www.cnblogs.com/yuliangbin/p/9348156.html
vue生命周期钩子函数
https://www.cnblogs.com/sweeeper/p/10829887.html
https://www.jianshu.com/p/e7ebb1500613
用来劫持并监听所有属性，如果有变动的，就通知订阅者
Object.defineProperty( )
如果要对所有属性都进行监听的话，那么可以通过递归方法遍历所有属性值
具体实现
监听器Observer
可以收到属性的变化通知并执行相应的函数，从而更新视图
订阅者Watcher
可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
解析器Compile
流程图
双向绑定的原理
基础
Vue
vue面试题
大厂面试题
https://www.processon.com/view/5ee6689ef346fb1ae561f92d?fromnew=1#map
https://www.processon.com/view/5e6a3d4ce4b09b0f79e63647?fromnew=1#map
面试
vue系类
debounce
高级组件
其它方法
https://www.cnblogs.com/yuncong/p/10247583.html
change directory
cd
list
ls
print working directory
pwd
make directory
mkdir
remove directory
rmdir
remove
rm
move
mv
copy
cp
catenate
cat
命令行
https://www.cnblogs.com/nbf-156cwl/p/8641165.html
上传文件
nginx
linux
webpack系统配置
文档
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
概念
entry 对象是用于 webpack 查找启动并构建 bundle
最完整的entry配置，其他形式只是它的简化形式而已，可拓展性高
对象
数组
entry: './app.js'=entry: { main: './app.js'}
字符串
参数
入口(entry)
可以控制 webpack 如何向硬盘写入编译文件
单入口起点
多入口起点
output: { path: \"/home/proj/cdn/assets/[hash]\
高级进阶
模块标识符(module identifier)的 hash
[hash]
chunk 内容的 hash
[chunkhash]
模块名称
[name]
模块标识符(module identifier)
[id]
模块的 query，例如，文件名 ? 后面的字符串
[query]
模板
输出(output)
用于对模块的源代码进行转换。loader 可以使你在 import 或\"加载\"模块时预处理文件。
loader 用于对模块的源代码进行转换
loader
是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务
webpack.config.js
官网插件链接
打包拷贝静态文件
copyWebpackPlugin
简化了HTML文件的创建，以便为你的webpack包提供服务
HtmlWebpackPlugin
会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件
ExtractTextWebpackPlugin
用于优化或者压缩CSS资源
OptimizeCssAssetsPlugin
对js文件进行压缩
UglifyJsPlugin
当多个 bundle 共享一些相同的依赖，CommonsChunkPlugin 有助于提取这些依赖到共享的 bundle 中，来避免重复打包
CommonsChunkPlugin
常用
插件(plugins)
webpack
ref、reactive、toRef、toRefs
Vue3
前端学习
收藏
职业：本科
0 条评论
回复 删除
下一页
