- 博客(80)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 react 源码中 的 diff 以及 对 key 的使用
无论是在 vue 还是 react 中，使用 key 都是一个 必须面对的问题，最近就对 react 的key 做了一点学习，这里就当做个人的学习笔记了我们就来看这里的 （已删除 多余的代码，只留下了 数组类型的 子节点 ）// This API will tag the children with the side-effect of the reconciliation // itself. They will be added to the side-effect list as w
2020-05-10 14:03:39
650
原创 实现乞丐版的 vue data + method + computed
最近有了点空，就想着 把 vue 给搞定了，看了一遍之后，决定自己写一个乞丐版的 vue，上班的时候划水一个早上也算是 结束了index.html <div id="app"> {{age}} <p>{{name}}</p> <p>{{name}}</p> <div> ...
2020-03-18 14:46:26
255
原创 webRtc 的简单学习
1. 检查当前设备//判断浏览器是否支持这些 APIif (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) { console.log("enumerateDevices() not supported."); return;}// 枚举 cameras and microphones.navigator.mediaDevices.enumerateDevices().then(function(
2020-10-19 22:53:48
458
原创 Vue3.0 源码学习之静态提升
在 vue3.0 中，让人津津乐道的功能之一，就是静态提升功能了，这里就来简单学习一下这方面的源码1、表现测试地址首先来一个表面结论：那就是 带有for、if 本身节点不会被静态提升 静态提升的不仅仅是节点，还有prop属性2、源码分析一切的入口 function hoistStatic(root, context) { walk(root.children, context, new Map(), // Root node is unfortu.
2020-09-16 18:50:54
1148
原创 正则表达式学习——基础篇
主要是和极客时间的涂伟忠老师《正则表达式入门课》开始学习正则表达式正则表达式测试网站，当然，浏览器的话直接f12也可以顺利上手vscode 选中对应的按钮，也可以开启正则表达式匹配、替换的功能1、基本元字符（.）点表示换行以外的任意单个字符 \d表示任意单个数字 \w表示任意单个数字或字母或下划线 \s表示任意单个空白符 \D和 \d 取反 \W和 \w 取反 \S 和 \s 取反 \r 回车符 \n 换行符在前端领域，更多出现的，还是 \n...
2020-09-02 14:22:56
735
原创 vue3.0 中的 diff 过程
简单的学习一下 vue3.0 中的 diff 过程1、patchChildren，diff 函数的入口const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => { const c1 = n1 && n1.children; const prevShapeFlag =.
2020-07-18 16:20:12
1787
原创 Vue2.0 响应式的执行过程 以及首次渲染的过程
vue2.0 的响应式原理网络上有很多的资源，这里就学习一下 源码中响应式的执行过程(这里还包括了 vue 首次渲染的过程)如果实在没基础的话，可以先看这一篇：实现乞丐版的 vue data + method + computed需要注意的是，defineProperty 的 get set 是这一棵大树的基石，如果在 某个步骤不理解的话，想一想这个也许你就能想明白1、vue 的 入口import { initMixin } from './init'import { st..
2020-07-12 20:41:23
981
原创 Vue2.0 中模板编译的过程学习
要说vue 和 react 最大的不同之一，我肯定会说 vue 是开箱即用的，也就是有的情况下，不需要 babel 转义就能直接运行，就好像是一个高级的 jquery 包一样1、入口 $mount光光看目录的名称就可以知道，这里是和平台有关的代码，也就是运行在 浏览器的代码，这里主要是 改造 $mount 函数/* @flow */import config from 'core/config'import { warn, cached } from 'core/util/i.
2020-07-12 16:33:02
457
1
原创 vue keep-alive 内置组件与 LRU缓存机制
export default { name: 'keep-alive', abstract: true, props: { include: patternTypes, exclude: patternTypes, max: [String, Number] }, created () { this.cache = Object.create(null) this.keys = [] }, destroyed () { fo.
2020-06-30 22:41:49
1076
3
原创 vue3.0 api 的简单学习
vue3.0 出来了一段时间了，但是直到这一段时间，才想着要认真学一学，真是惭愧Vue 组合式 API1、上手下载 官方的 vue3.0 的一个包git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3cd vue3yarnyarn dev2、API 学习1、setup函数这个函数完全就是 vue3.0 的核心了，也是所有函数的入口export default {...
2020-06-28 21:02:41
1774
原创 vue 中 patch、patchVnode 函数（更新节点）createElm 函数 的学习
在前面的博客中，我浅薄的学习了Vue 源码中 的 diff 以及 对 key 的使用，现在 再来学习一下更加难以理解的 patch 的过程vue 在 虚拟 dom 这一块，是参照了snabbdom.js 然后在上面进行了部分的修改的，所以如果有不理解的，推荐先去学习这一个东西1、patch 函数在这一系列的函数里面，有很多的钩子函数，类似于 destory 和 create 、insert 的 钩子函数，事实上 这些 钩子函数 用户使用的时候是无知觉的，因为 这个是虚拟 dom ..
2020-06-27 21:52:49
4255
原创 vue-router 的学习以及实现
这里记录一下关于 vue-router 的学习，以及自己实现一个类似的东西vue-router 分为 hash 模式和 history 模式，众所周知的是，hash 模式 是利用 监听hashchange 事件来实现的，而 history 则是通过监听 popstate 事件 实现的，那么 到底是在什么时候实现监听的呢？1、创建一个 VueRouter 类，并实现内部的 事件注册let _Vueexport default class VueRouter { // 使用静态..
2020-06-27 20:50:03
308
原创 Promise学习笔记 以及手写附带的 各种静态函数
Promise 源码 + Promise.all Promise.allSettled Promise.race Promise.resolve
2020-06-20 13:27:35
240
1
原创 es6模块化开发的基础知识
1、在现代浏览器使用模块化开发创建一个 script 标签，加上 type="module" 属性 创建一个 index.js 文件，使用 import 引入 另外一个文件 export 的内容 启动 一个本地的服务器，可以使 http-server 或者browser-syncsudo yarn add http-server --globalhttp-server // 这样就执行了一个简单地本地服务了注意事项归纳 在es modules中自动使用 严格模式，也就是说...
2020-06-14 21:22:18
208
原创 大前端 — gulp 的简单学习
yarn add gulp --dev在根目录创建一个 gulpfile.jsexports.foo = done => { console.log('hello gulp') done() // 任务完成 目前的 gulp 只支持 异步的任务，也就是说，一定要执行 这个 done}yarn gulp fooconst { series, parallel } = require('gulp')const task1 = done =...
2020-06-07 22:41:49
152
原创 大前端 — Yeoman 的 简单学习
经常会有人问我，前端的脚手架到底是什么东西？我一般也只能泛泛而谈，把对方拉到比我低的水平，然后一本正经的编点东西....1、脚手架是一种约定和规范相同的文件组织结构 相同的开发范式 相同的模块依赖 相同的工具配置 相同的基础代码 然后脚手架 将这些 重复性的东西全部都集成起来，减少这样无意义的操作就像在 flutter new project 中，自动生成的 文件目录，文件结构，就是脚手架的一种，而 vue-cli ，react-create-app 也是脚手架的一种.
2020-06-07 01:33:43
2643
原创 学习《CSS世界》记录
学习了 张鑫旭 的 《CSS世界》之后，记录下部分内容1、文字少时居中显示，多时居左p21 <style> .box { text-align: center; width: 100px; border: 1px solid; } .content { display: inline-block; text-align: left; } </style>&l.
2020-06-05 19:12:38
207
原创 基于 npm 的 自动化构建 的简单学习
brower-sync"serve":"brower-sync .""scripts": {"build": "sass scss/main.scss css/style.css","preserve": "yarn build","serve": "brower-sync"},"scripts": {"build": "sass scss/main.scss css/style.css --watch","serve": "brower-sync","s...
2020-06-02 16:56:20
273
原创 Vue2.x 源码中 的 diff 以及 对 key 的使用，以及和 react 之间的区别
一直不想写 vue diff 的过程，因为 这一块网络上讲的人实在是太多了，这里写了也只不过是拾人牙慧罢了，但是不写吧，又觉得心痒痒的，毕竟前面写了一篇 react 的export function isDef (v: any): boolean %checks { return v !== undefined && v !== null}function sameVnode (a, b) { return ( a.key === b.ke...
2020-05-29 15:32:21
587
原创 网络安全 学习之 https
通过对 罗剑锋的《 透视HTTP协议》 进行了学习之后，记录相关知识点一个安全的协议是基于机密性（Secrecy/Confidentiality）是指对数据的“保密”，只能由可信的人访问，对其他人是不可见的“秘密”，简单来说就是不能让不相关的人看到不该看的东西。 完整性（Integrity，也叫一致性）是指数据在传输过程中没有被篡改，不多也不少，“完完整整”地保持着原状。 身份认证（Authentication）是指确认对方的真实身份，也就是“证明你真的是你”，保证消息只能发送给可信的人。 不
2020-05-28 21:49:28
455
原创 webpack 打包之后的代码学习
export default function count (a, b) { return a + b}import number from './number'export default function add (a, b) { return number(a, b);}// add('100', '900')(function webpackUniversalModuleDefinition(root, factory)...
2020-05-28 14:07:47
674
原创 http 网络知识摘要
DNS 的解析过程访问根服务器，他会告诉你 .com 的 顶级服务器 访问 .com 顶级 服务器，他会告诉你 baidu.com的地址 最后访问 baidi.com 域名 服务器，得到 www.baidu.com 的 地址 域名解析可以配置内部的策略，返回离客户端最近的主机，或者返回当前服务质量最好的主机，这样在 DNS 端把请求分发到不同的服务器，实现负载均衡。另外，操作系统里还有一个特殊的“主机映射”文件，通常是一个可编辑的文本，在 Linux 里是“/etc/hosts”，在 Windo
2020-05-27 21:23:13
184
原创 js 里面 try catch finally 中的 return 问题
1、try catch我们先来看 下面 的一段代码function useTry() { try { return i-- } catch (error) { return 'hh' + error }}
2020-05-24 20:38:49
6317
原创 大前端— 可视化方式的内存管理
Performance内存问题的外在表现：页面出现延迟加载，或经常性暂停，不断地内存溢出，然后回收，频繁垃圾回收页面持续性出现糟糕的性能， 不断地申请新的内存，内存膨胀页面的性能随时间延长越来越差，内存泄漏1、任务管理器 内存，dom节点所占用的内存实际大小就是 可达内存的大小 js内存，js堆内存2、timeline时序图记录3、堆快照查找分离dom 找到当前的 js 堆，然后进行一个照片留存 分离 ...
2020-05-24 19:38:11
516
原创 大前端— js 内存
从全局执行上下文出发，能找到的，就被认为是可达的js 自动的 设计 class ，进行一一对应，然后不要随便修改结构，delete，要不然会重新设计一个V8内存 64位 1.5G 32位 800M 新生代 32M, 16M，复制，标记整理 老生代 1.4G 700M，标记清除，标记整理，增量标记经过一轮 GC 还活着To 使用率超过 25%GC 算法引用计数 引用 计数器，判断当前的引用数是否为0 可以立即回收，只要为0，立刻回收，最大限度减少程序的暂停...
2020-05-24 19:08:18
459
原创 大前端 — js es6 中的小技巧
关于解构const arr = [1, 2, 3, 5, 6, 7, 8]/** 如果我只想要 第三个，怎么办？很简单，我甚至还能够给这个设置默认值：*/const [,,third = 'third'] = arr// 如果我想要一个对象除了 某一个 字段之外的新对象？const obj = { want1: true, want2: true, want3: true, dont: false}const { dont, ... obj2} =...
2020-05-23 11:16:05
198
原创 typescript 的简单学习
真的只是简单学习，简单地记录我认为有意思的部分1、安装 以及开始使用yarn add typescript --dev然后暴露 对应的配置yarn tsc --init可以看到 生成了 一个对应的 文件 tsconfig.json查看里面的配置之后，修改里面的几项内容"target": "es2015", // 将文件 转为 es2015 ，要不然默认的 es5 不认识 symbol 、promise 等 es6 中的新类型、对象。这里的转换结果其实就是 es...
2020-05-17 19:55:35
184
原创 flow 的简单学习
真的只是简单学习，简单地记录1、安装 以及开始使用在当前的目录执行yarn add flow --dev接着 在 要检查的文件上 添加关键字// @flow// @flowfunction sum(a: number, b: number) { return a + b}sum(100, 100)sum('100', '100')然后执行初始化yarn flow init执行校验yarn flow要注意的是，这一块需要取消.
2020-05-17 15:38:26
488
原创 js 异步迭代器
同步的迭代器模式众所周知，迭代器模式就是在已有的 对象里 增加一个 迭代函数，然后 通过迭代函数 来执行 对应的函数const obj = { arr1: [1,2,3,4,5], arr2: [1,2,3,4,5], next(fn) { const arr = [...this.arr1, ...this.arr2] for (val of arr) { fn(val) } }}obj.next(console.log)异步的迭代器
2020-05-17 00:12:25
1502
原创 webpack 打包过程 学习
通过 程柳峰 老师的 视屏学习 webpack，这里记录一下 关于 webpack 的学习笔记1、npm run build 发生了什么会 从 node_module/.bin 中查找 webpack.cmd 查找 webpack-cli 或者 webpack-commond 是否安装 没有的话，就会 提示进行安装，如果安装了 一个，则正常运行，如果 装了两个，提示删掉一个 分...
2020-04-24 22:16:55
285
原创 记录一次 webpack 打包速度优化之路
最近发现了 自己在 webpack 方面知识的薄弱，正好 手里 有个 打包 两分多 的项目，就用这个项目练练手由于 该项目的 webpack 版本 是基于 3.6.0 的1、多进程 打包 压缩const HappyPack = require('happypack');module: { rules: [ ... ...
2020-04-20 13:22:06
444
原创 浏览器页面是怎么渲染的
正如前面写的浏览器中输入URL后会发生什么事情--超级详细版中介绍的一样，一个 页面的渲染过程 也涉及到了 很多的东西，以及进程之间的通信1、网络网络进程接收到了 一个 html 文件 之后，除了会判断 content-type 之外，还会发生什么呢？ 首先，要知道的是 TCP 的通讯 并不是一次性的，而是一个包一个包发过来的 网络进程也是如此，和 渲染进程建立了 通道之后，也是一...
2020-04-18 12:22:45
612
原创 重新了解 javascript
最近学了很多东西，发现 js 的很多内容只是凭借着我的 主观意识，或者说 感觉。所以这需要系统地学习 以及整理一下1、变量提升首先要明确的一点是，在 es6 出现以前，js 只有五种作用域 ，全局作用域 函数作用域 try/catch 作用域 eval 作用域 with 作用域(在 vue 模板语法的编译之中，就广泛地使用到了 这个)后面三种 不谈，就谈谈 前面两个co...
2020-04-17 09:41:51
144
原创 浏览器中输入URL后会发生什么事情--超级详细版
这个问题实在是 老生常谈，甚至是面试必考题之一，我这里记录一下我学习的结果，仅供自己学习1、浏览器的进程首先要了解的是，一个浏览器 是有好多进程的，比如 浏览器进程、渲染进程、GPU进程、网络进程、插件进程 浏览器进程 是 管理浏览器本身的，而渲染进程 基本上是一个标签页一个，那么为什么要说基本上呢？ GPU进程是 在 渲染进程的基础上，对 展现的图像进行进一步处理的 网路进程 ...
2020-04-16 10:13:04
712
原创 v-model 处理 中文 输入法时 和 @input :value 的区别
你或许会说 没什么区别，就是@input :value 的 语法糖，最多就是 处理的逻辑多了一点但是 看一下截图中 箭头 所指的地方 // 看一下指令插入的地方 inserted (el, binding, vnode, oldVnode) { if (vnode.tag === 'select') { // #6903 if (oldVnod...
2020-04-07 09:48:36
1199
原创 vue $nextTick 与 MutationObserver
网络上 其实讲 nextTick 的文章五花八门，我看了也获益匪浅，但是我这段时间 看了源码之后，发现 vue 的nextTick 又有了 较大的改动/* @flow *//* globals MutationObserver */import { noop } from 'shared/util'import { handleError } from './error'impor...
2020-04-07 09:29:32
1061
原创 Vue 使用 函数调用组件 的方法
之前写过一篇react 方法组件构造 Loading 的使用，现在这篇就是 Vue 版本的 方法调用组件了组件还是 vue 组件，这个和之前是一样的Toast/Toast.vue<template> <div class="toast" v-if="show"> <div class="mask" v-if="showMask">...
2020-03-11 15:47:30
5048
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人