- 博客(117)
- 收藏
- 关注
RSS订阅原创 vue源码调试 - init
vue源码调试可参考下面链接源码调试初始化首先进入到 src/core/instance/index.js里面import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecycle'im
2023-05-24 15:04:01
65
原创 React - Hooks
Hooks介绍React Hooks 是用来做什么的？对函数型组件进行增强，让函数型组件可以存储状态，可以拥有处理副作用的能力，让开发者在不使用类组件的情况下，实现相同功能。什么是副作用？副作用指在一个组件中只要不是把数据转换为视图的代码就属于副作用，例如获取dom元素、对dom元素添加数据、获取ajax请求这些都属于副作用，在类组件当中我们通常使用生命周期函数来处理这些副作用，在函数型组件中我们使用hooks来处理这些副作用。类组件的不足(Hooks要解决的问题)缺少逻辑复用机
2022-05-30 10:34:24
126
原创 React源码四 - render阶段
概述要将react代码渲染到页面中需要经过两个阶段，render阶段和commit阶段。render阶段是协调总负责的阶段，在这个阶段要为每一个react元素构建所对应的fiber对象，构建fiber对象的过程中还要为此fiber对象创建对应的dom对象，并且还要为fiber对象添加effectTag属性，标注当前fiber对象对应的dom对象要进行什么样的操作，是插入还是删除还是更新。这个新构建的fiber对象我们称之为workInProgress fiber树 也就是待提交的fiber树，当re
2022-05-22 23:21:43
488
原创 React源码二 - React16版本架构
React 16版本架构可以分为三层：调度层、协调层、渲染层Scheduler(调度层)：调度任务的优先级，高优任务优先进入协调器Reconciler(协调层)：构建fiber数据结构，对比fiber对象找出差异，记录fiber对象要进行的DOM操作Renderer(渲染层)：负责将发生变化的部分渲染到页面上scheduler 调度层在React 15的版本中，采用了循环加递归的方式进行了virtualDom的比对，由于递归使用js自身执行栈，一旦使用就无法停止，直到任务执行完成。如果vi.
2022-05-22 10:24:30
524
原创 React源码三 - jsx转换为ReactElement的过程
创建react元素jsx被Babel编译为React createElement方法在调用后返回的就是ReactElement，就是vitualDom。createElement文件位置：packages/react/src/ReactElement.js/** 创建 React Element type 元素类型 config 配置属性 包含props属性和特殊属性 children 子元素 1. 分离props属性和特殊属性 2. 将子元素挂载到props.children中
2022-05-22 09:42:31
470
原创 http缓存小记
缓存的重要性缓存一般针对不经常进行更新的静态资源缓存的原理是在首次请求之后保存一份请求资源的响应副本，当用户再次发起相同的请求后，如果判断缓存命中则拦截请求，将之前存储的响应副本返回给用户，从而避免重新向服务器发起资源请求缓存的技术种类有很多，例如代理缓存、浏览器缓存、网关缓存、负载均衡及内容分发网络等，它们大致可分为两类：共享缓存和私有缓存，共享缓存指缓存的内容可以被多个用户使用，如公司架设的web代理，私有缓存是指只能单独被用户使用的缓存，如浏览器缓存http缓存是前端开发中最常接触的缓存机制
2022-04-21 00:08:13
2466
原创 vue组件库初探
背景因为业务是基于element组件的基础上重复封装，所以想要封装个基于elementui的基础上的业务组件库来解放劳动力StoryBook 为一种较为成熟的解决方案，所以下文就是通过storyBook来进行编写的安装storybook的安装分为自动和手动安装，以下是根据自动安装来进行自动安装npx -p @storybook/cli sb init --type vueyarn add vueyarn add vue-loader vue-template-compiler --
2022-03-13 16:30:34
1769
2
原创 vue源码 - 虚拟dom
什么是虚拟dom虚拟dom是(Virtual DOM)使用javaScript对象描述真实domvue.js中的虚拟dom 借鉴了snabbdom，并添加了vue.js的特性。例如: 指令和组件机制为什么要使用虚拟dom避免直接操作dom，提高开发效率作为一个中间层可以跨平台虚拟dom不一定可以提高性能首次渲染的时候会增加开销复杂视图情况下提升渲染性能Vnode代码打印...
2022-02-14 21:49:36
187
原创 vue源码 - set、$delete
使用vm.$set之前说过，如果动态的给vue data 中某个对象或者数组添加一个属性，那么是不会响应式的更新到视图上的例如 data中有list: [1,2], obj: {cc: 1}这两个key, 如果想要渲染完成后动态增加属性还要实时更新视图，那么就要使用this.$set(this.list, 0, 100) 这样就可以list中第一个元素增加100的值而且可实时渲染到视图层，对象也是类似的操作，那么它的原理是怎么样的呢？set源码set定义有两个地方Vue.set() 在
2022-02-13 20:34:40
268
原创 vue源码 - 数据响应式原理 - 入口、observer、defineReactive、收集依赖
通过查看源码解决下面问题vm.msg = { count: 0 } 重新给属性赋值，是否是响应式的？vm.arr[0] = 4, 给数组元素赋值，视图是否会更新vm.arr.length = 0, 修改数组的length视图是否会更新vm.arr.push(4)， 视图是否会更新响应式处理的入口src/core/instance/init.jsinitState(vm) vm状态的初始化初始化了_data、_props、methods等src/core/instance/state
2022-02-09 23:20:20
520
原创 vue源码 - 首次渲染过程
首次渲染src/core/instance/index.js 中的 this._init方法init方法内部$mount内部
2022-02-08 22:46:45
856
原创 vue源码 - 入口文件
package.json执行npm run dev 的时候在 rollup 后面传入了 scripts/config.js配置文件TARGET 后面的值是打包的版本，web是代表web平台下，full是完整版，dev开发版不对代码进行压缩scripts/config.jsconfig.js是一个基于node的模块，所以看这块的代码需要对node有所了解。某块的话一般会在末尾导出成员，看下代码看在末尾导出了哪些成员if (process.env.TARGET) { module.export
2022-01-24 21:19:46
731
原创 vue中不确定高度情况下设置展开收起动画
前言基本上之前没有怎么使用过vue，所以当写一个展开收起动画的时候看了文档感觉还是挺简单的，然后手撸之后并没有达到预期的动画效果，查了下才知道是div没有定高的原因，但是我div内的内容是不确定高度的，随后又尝试了使用js动态获取高度，感觉有点麻烦，但是本来想将就着用，后来看到了某个大佬写的一个解决此类问题的一个通用的js文件，解决了问题，在此分享下。首先把下面的代码单独放在一个js文件中再啰嗦一句：拷贝前人写的代码的时候，自己也要看下别人是怎么实现的const transitionStyle =
2021-10-29 10:59:19
1970
原创 ts 概略
仅本人笔记所用 想系统学习请移步官网学习TS的时候可以创建一个新的文件夹 下载ts的npm全局包 来通过编写完ts后 通过 tsc编译一下 编译成为js看里面的原理TS定义多种类型定义字符串类型 let str: string = ‘Yee’定义数字类型 let age: number = 30定义数组类型有两种方式 以下是定义数组中只能是数字的方式//1. let list : ...
2020-03-26 22:59:59
600
1
原创 React概略
react中为何用bind因为react事件中this默认是undefined最好在 constructor中写 修改方法的this指向 不要在 render中的dom上写 因为bind是返回一个新的函数 如果在dom上写 点击一次执行一次bind返回一次新的函数 而如果在constructor中写的话 只有组件初始化的时候返回一次就行了 例如 render dom 中 onClick = ...
2020-03-22 19:23:59
214
1
原创 vue概略
vuevue自定义事件vue自定义事件可以通过创建一个文件 event 里面new一个vue的实例 然后 通过两个随便是什么组件(兄弟 或者隔的比较远)的mounted中调用 一个调用on 然后传递一个函数 但是要在 beforeDestroy生命周期中销毁这个绑定 要不然容易造成内存泄漏 在另一个组件中的mothod的方法中使用emit调用父子组件生命周期顺序cerated vue...
2020-03-21 20:30:18
277
1
原创 前端js知识梳理
从哪些方面梳理w3c标准ECMA 262 标准开发环境运行环境知识体系js 基础语法变量定义变量基础类型判断逻辑语言运算函数定义闭包 之类的。。。js-web-APIBOM DOM AJAX 。。。开发环境代码版本调试工具工程化。。。运行环境浏览器怎么加载网页怎么优化。。。未完待续 请看之后篇幅...
2020-02-20 22:30:30
158
原创 nginx配置
本文是自己本地使用koa2启动一个端口为3000的服务首先先下载一个nginx 这个自己查打开下载的nginx文件里面的conf -> nginx.conf 文件 这个就是配置文件把打包好的前端页面放置在html文件下图中1表示nginx默认端口 127.0.0.1:80 把前端页面放在nginx的html里面 页面中 请求默认会拼接nginx的默认端口图中二表示前端页面的路径...
2020-01-03 18:09:03
433
原创 Node笔记七(深入浅出nodejs第一遍阅读读后笔记一)
Node的特点作为后端js运行平台,Node保留了前端浏览器js中那些熟悉的接口,同时底层也封装了大量的异步I/O的APINode保持了js在浏览器中单线程的特点。而且在Node中，js与其余线程无法共享任何状态单线程的弱点具体有以下三个方面无法利用多核CPU（child_process 子进程 已解决）错误会引起整个应用的退出，应用的健壮性值得考验大量计算占用CPU导致无法继续调...
2019-08-01 16:37:57
242
1
原创 Node笔记七(深入浅出nodejs第一遍阅读读后笔记三)
Buffer在Node中,应用需要处理网络协议、操作数据库、处理图片、接收上传文件等,在网络流和操作文件过程中还需要处理大量二进制数据,js自有的字符串远远无法满足这些需求,所以Buffer对象应运而生Buffer是一个像Array的对象,但他主要用来操作字节,它是js与C++结合的模块,性能部分用C++实现,非性能相关部分用js实现Buffer所使用的内存不是V8分配的,属于堆外内存,由...
2019-08-01 16:37:14
168
1
原创 Node笔记七(深入浅出nodejs第一遍阅读读后笔记二)
异步编程当大量查询本地数据库请求发来时,软件方面可以通过锁,硬件方面可以通过增加服务器来解决EventProxy 是异步协作的一个方法,控制并发 在所有监听事件都完成的前提下执行回调函数bagpipe也是控制异步流程的,用来控制异步并发量Generator与协程协程是一种程序运行的方式，可以理解成“协作的线程”或“协作的函数”。协程既可以用单线程实现，也可以用多线程实现。前者是一种特...
2019-07-30 17:35:21
140
1
原创 Node笔记六(爬虫初涉)
爬虫爬虫是按照一定规则自动抓取网络信息的程序反爬虫User-Agent,Referer,验证码单位时间访问次数,访问量关键信息图片混淆异步加载初始用爬虫截取百度图片(puppeteer)附上puppeteer的API链接 puppeteerAPI使用puppeteer的时候要注意 因为被墙 所以 要使用cnpm下载puppeteer.jsconst puppet...
2019-07-23 13:18:52
216
1
原创 Node笔记五(本地构建工具)
为什么需要本地构建前端工程日新月异 并不是写完代码就没事了的 因为代码总要有人打包 sass less 以及 es6 es7的兼容浏览器 压缩代码等等总要有人去做gulp请根据gulp的中文文档下载安装如果直接在命令窗口执行gulp的话会报错，只有全局安装gulp才可以直接在命令窗口执行gulp但是如果全局安装的话 别人如果git clone你的代码别人就执行不了了 所以只有在 pack...
2019-07-18 21:02:13
234
1
原创 Node笔记四(静态资源服务器)
http可以根据这个地址看看实例https://nodejs.org/en/docs/guides/getting-started-guide/const http = require('http');const path = require('path');const fs = require('fs');const hostname = '10.200.10.219';//主机名...
2019-07-17 20:30:21
323
1
原创 Node笔记三(项目初始化)注意事件
.gitignore匹配模式前 加 / 代表项目根目录匹配模式最后加 / 代表是目录匹配模式前加 ! 代表取反 (忽略一个文件夹但是有个文件不忽略)*代表任意个字符?代表匹配任意一个字符**代表匹配多级目录.npmignore模块想让别人使用得发送到npm里面去 但是有些东西不需要上传规则与.gitignore一样 有需求可以自查EditorConfig可以再不同编...
2019-07-17 14:34:45
107
1
原创 Node笔记二(基础API)
以下仅仅是自己笔记 想看详细的请移步官方中文文档normalize对文件路径的处理const {normalize} = require('path')console.log(normalize('/Users/zyunl//Desktop/node/../argv.js'))输出 \Users\zyunl\Desktop\argv.js//可以看到输入的路径有 // 也帮我们处理...
2019-07-17 11:39:17
129
1
原创 react 路由配置
react router 4.0 要安装 react-router-dom 是基于pc端的路由插件详细教程请看官网 reacttraining.cn打不开的话直接百度进入链接 以下谨记载自己所学4.0版本中已经不需要路由配置文件 一切皆为组件 可以放在任意组件中配置 当然如果配置在文件中本人感觉还是比较清晰的 仅代表个人观点react-router 和 react-router-dom的理...
2019-06-23 22:46:17
612
1
原创 redux集成开发
redux使用场景及基本介绍首先主页 redux 并不是只为react框架服务单向数据流：从父组件流向子组件，兄弟组件无法共享数据state：react中的状态，是只读对象，不可直接修改reducer: 基本函数，用于对state的业务处理action：普通对象，用于描述事件行为 改变state由上图可以看出 redux的工作流程是首先 例如 点击事件触发action 然后redu...
2019-06-11 23:30:38
169
1
转载 解决移动端fixed布局ios样式问题
https://blog.csdn.net/wangpf1992/article/details/53078901
2019-05-30 13:21:33
871
原创 看图解HTTP后的记录（前三章）
买了一本图解HTTP 同时给自己定任务 在规定时间内看完 并把学到的东西记录下来 当然 好书看一遍是不够的 看完之后是要重温的 给自己定计划 生活要有仪式感 前几天看字节跳动前端大神的直播 他给前端工程师 划分了四个级别 初级 中级 高级 大神 可能看众们看到这里可能会吐槽 这不废话吗 之前我一直以为自己马马虎虎到了初级 看完大神对初级前端工程师的需要掌握知识的说明 感觉自己还远远没有达到 但是会...
2019-05-05 22:54:54
158
原创 js websocket断开重连机制
废话不多说 直接上代码 建议直接放在编辑器里面看 比较具体 var socket; //websocket的实例 var lockReconnect = false; //避免重复连接 function getwebsocket() { //新建websocket的函数 页面初始化 断开连接时重新调用 var wsUrl = '...
2019-04-28 16:34:01
14676
原创 如何阅读一本书 读后感
本书作者 艾德勒 艾德勒此人出过第一版的《如何阅读一本书》之外 还主编《西方世界的经典》 以及《大英百科全书》作者与读者就像是 棒球中投手和接球手之间 球就像是传递的思想 知识 只有高超的投手以及接球手之间的配合 特别是接球手 提示自己的接球能力 能接到任意球 就如同读者提升自己的阅读能力 是一样的概念真正的阅读是一个凭借着头脑运作 除了玩味读物中的一些字句之外，不假任何外物，以一己之力提升自...
2019-04-23 22:37:47
1422
原创 vue项目开发环境下实现与多个后台进行联调
在配置开发环境设置反向代理的地方设置反向代理 proxyTable: { '/jk': { target: 'http://10.200.101.121:8090/', //target: 'http://118.24.184.180:8080/', changeOrigin:...
2019-04-16 09:14:18
9496
2
原创 vue写微信公众号安卓手机子路由页面无法渲染问题
这个问题困扰我了很长时间 上网找答案 都没有对症的 关于这个问题 如果想要知道自己是什么原因 建议使用chrome浏览器下的手机模式 进入G5的那个手机模式进行调试 我的这个是webpack配置问题...
2019-04-15 21:49:59
378
原创 杭州一周面试经历
本人是从今年3月25号晚上从郑州来的杭州 到4月3日找到满意的工作 区区不才把这近一周的面试经历分享给大家 大佬请自动略过 如有错误 欢迎指正 另外感谢掘金的木易杨 以及 宋小菜 等大佬分享的干货26日阿里外包电面阿里外包记得是个叫做博彦集团的 上网一查发现是阿里最大的外包人才的公司，心里有点小激动，因为有这样一句话叫做中国最好的前端要么是在阿里要么是在去阿里的路上，可能有失偏驳，但也侧...
2019-04-15 21:31:32
784
2
原创 vue中vant滑动单元格组件踩坑记录
移动端项目中用vant组件感觉还是不错的 但是今天在调用vant的滑动单元格组件实现类似于微信聊天列表的左滑删除功能时因为业务需求 还有自己的技术水平的缘故 常在河边走 哪有不湿鞋主要实现的功能就是 渲染出一个类似微信聊天列表的页面 这个页面可以上拉加载下拉刷新 然后这个页面的每个列表都可以左滑删除 同时每个列表还可以点击进入详情页 我就是实现了左滑出现删除按钮 但是随意再次点击列表应该是删除按...
2019-04-11 18:43:00
9924
7
原创 react小书没读完的记录
react的生命周期constructor() 一般来说 所有关于组建自身的状态的初始化工作都会放在 constructor里面去做componentWillMount:组件挂在开始之前,也就是在组件调用render方法之前调用 进行组件的启动工作例如Ajax数据拉取 定时器的启动 组件从页面上销毁的时候componentDidMount:组件挂载完成以后，也就是DOM元素已经插入页面...
2019-04-07 21:48:11
310
转载 网络知识之三次握手与四次握手以及DNS域名解析
建立一个连接需要三次握手，而终止一个连接要经过四次握手，这是由 TCP 的半关闭（half-close）造成的。
2019-03-07 15:21:54
444
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人