自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(70)
  • 收藏
  • 关注

原创 Vue与VueComponent的关系

2022-04-15 21:11:47 437

原创 关于JSBridge的那些事儿

JSBridge 的起源近些年,移动端普及化越来越高,开发过程中选用 Native 还是 H5 一直是热门话题。Native 和 H5 都有着各自的优缺点,为了满足业务的需要,公司实际项目的开发过程中往往会融合两者进行 Hybrid 开发。Native 和 H5 分处两地,看起来无法联系,那么如何才能让双方协同实现功能呢?JSBridge 是一种 JS 实现的 Bridge,连接着桥两端的 Native 和 H5。它在 APP 内方便地让 Native 调用 JS,JS 调用 Native ,是双向通信的

2021-12-31 15:13:58 650

原创 React-Native与原生模块间的通信

rn与原生组件之间的通信连接

2021-11-10 18:05:24 1036

原创 手写Promise的静态方法

1.手写请求超时方法let request = ajax('./api');let timeout = new Promise((resolve,reject)=>{ setTimeout(()=>{ reject('timeout'); },5000)})Promise.race([ request, timeout]).then((res)=>{ console.log(res);}).catch((err)=&gt

2021-11-06 18:03:22 255

原创 子域和域之间共享cookie

2个域mydomain.com和subdomain.mydomain.com只能在Set-Cookie头中明确指定域的情况下共享Cookie。 否则,cookie的范围仅限于请求主机。 (这被称为“仅限主机cookie”。)例如,如果从subdomain.mydomain.com:Set-Cookie: name=value然后,就不会将cookie发送给mydomain.com但是,如果使用以下内容,则在这两个域上都可以使用它:Set-Cookie: name=value; domain=mydoma

2021-11-06 11:12:43 1530

原创 深刻理解Virtual DOM

ps:面试官问:如何理解Virtual DOM一、Virtual DOM是什么在前端技术蓬勃发展的上古时代,前端开发主要是一些静态页面,使用 ajax、jQuery 等命令式的完成一些对 DOM 的操作,而伴随着前端工程化的不断发展,涌现了诸如 angular、react 等一系列 MVVM 模式的前端框架,这些框架公有的特点就是不再关心具体 DOM 的操作,而是把重点放在了基于数据状态的操作,一旦数据更改,跟它绑定的那个地方的 DOM 也会跟着变化。这种声明式的开发方式极大的增加了开发体验,更好的帮助

2021-11-05 12:08:54 406 2

原创 react状态更新

React状态更新几个关键节点在开始学习前,我们先了解源码中几个关键节点(即几个关键函数的调用)。通过这章的学习,我们会将这些关键节点的调用路径串起来。先从我们所熟知的概念开始。render阶段的开始render阶段开始于performSyncWorkOnRoot或performConcurrentWorkOnRoot方法的调用。这取决于本次更新是同步更新还是异步更新。commit阶段的开始commit阶段开始于commitRoot方法的调用。其中rootFiber会作为传参。我们已经知道,

2021-09-02 14:18:58 570 1

原创 (JavaScript)设计模式(三)---- 装饰者模式

(JavaScript)设计模式(三)---- 装饰者模式定义给对象动态地增加职责的方式称为装饰者模式,装饰者模式能够在不改变对象自身的基础上,在程序运行期间给对象动态地添加职责。跟继承相比,装饰者是一种更轻便灵活的做法,这是一种“即用即付”的方式,好比天冷了就多穿一件外套。用类来实现装饰者模式在类中很少使用装饰者模式,因为使用继承也是可以改变类的。但是还是介绍一下,或许有作用。用一个例子来介绍。比如把一个枪当作一个原始类,给这只枪强化一下,即可以发出散弹也可以发出普通子弹。在不改变原始类和不用继

2021-09-01 18:07:42 117

原创 (JavaScript)设计模式(二)---- 职责链模式

(JavaScript)设计模式(二)---- 职责链模式定义职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。用一个生活的例子来理解在早高峰的时候,坐公交车往往是个麻烦事,很经常前门挤不上去,只能从后门挤上去。以前的公交车还是有售票员的,从后面上车的人往往会把1块钱往前面递,一直递到售货员手上。以上就是一个职责链模式,从上面的例子可以看出职责链模式的最大优点,请求发送者只需要知道链中

2021-09-01 17:39:21 193

原创 (JavaScript)设计模式(一)------ 发布订阅模式

(JavaScript)设计模式(一)---- 发布订阅模式定义发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在 JavaScript 开发中,我们一般用事件模型来替代传统的发布—订阅模式。理解用一个生活中的例子来生动介绍一下发布-订阅模式。小王最近看上一款手机,而这款手机只有在线下体验店才有卖,于是小王跑到线上体验店去购买时,销售员小敏告诉小王,这款手机昨天已经卖完了。但是店长已经去进货了,然后什么时候能进到货就不

2021-09-01 16:58:21 198

原创 一些比较有用的文章

从头使用webpack搭建脚手架

2021-08-30 15:20:20 121

原创 react计算组件渲染时间的HOC

注意事项:1)此组件是用于计算react组件的渲染时间,由于使用的继承的方式重写react组件生命周期函数,来计算渲染时间,所以目前只支持类组件,函数组件目前我个人还没有想到比较好的实现方法。2)由于本组件是我实习期间开发rn所写,除了我这个方式,其他计算组件渲染还有很多方式,但rn端不太适合,于是就废弃了,在此我列举几种我知道的方式,大家可以自己实现一下,然后对比一下,看看如何能得到更精确的时间,(1.window.performance对象,react-performance第三方库,这个库内部实现

2021-08-26 16:33:50 2790 1

原创 windows如何杀死端口进程

经常会因为控制台关闭,导致项目启动端口号被占用查询所有进程netstat -ano查询某个端口的pidnetstat -aon|findstr "8898"查找到进程号就可以杀死这个进程了taskkill -PID 8552 -F

2021-08-19 15:10:26 557 1

原创 2021-7-27

实习中遇到的问题1.关于rn的panresponder组件和animated组件的使用,需要指定一个move的回调函数,在ios端的时候会别系统事件打断,比如下拉通知栏,此时的这个滑动的组件就停止了,定在了手指最后离开的地方,但是当我再去滑动这个组件的时候,这个组件会从初始值来计算移动的位置,于是就会出现手指滑动的地方和组件真实的显示会有一段距离,这就是一个bug,于是我就在想怎么去解决这个问题,我就在想是不是rn会有专门的监听函数来监听ios的这种系统事件,但是好像没找到这种函数,于是我就变换了一种思路

2021-08-19 14:14:53 142

原创 windows 电脑 执行 react-native 项目,报错如下

windows 电脑 执行 react-native 项目,报错如下:error Invalid regular expression:/(.\fixtures\.|node_modules[\]react[\]dist[\].|website\node_modules\.|heapCapture\bundle.js|.\tests\.)$/:Unterminated character class. Run CLI with --verbose flag for more details.解决方

2021-08-13 15:22:02 551

原创 React事件

一、React合成事件特点React自己实现了一套高效的事件注册,存储,分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大化的解决了IE等浏览器的不兼容问题。与DOM事件体系相比,它有如下特点React组件上声明的事件最终绑定到了document这个DOM节点上,而不是React组件对应的DOM节点。故只有document这个节点上面才绑定了DOM原生事件,其他节点没有绑定事件。这样简化了DOM原生事件,减少了内存开销React以队列的方式,从触发事件的组件向父

2021-08-06 15:53:30 204

原创 计算机网络-HTTP

计算机网络-HTTP一、HTTP基本概念:HTTP 是超⽂本传输协议,也就是HyperText Transfer Protocol。HTTP 传输的内容是「超⽂本」。我们先来理解「⽂本」,在互联⽹早期的时候只是简单的字符⽂字,但现在「⽂本」的涵义已经可以扩展为图⽚、视频、压缩包等,在 HTTP 眼⾥这些都算作「⽂本」。再来理解「超⽂本」,它就是超越了普通⽂本的⽂本,它是⽂字、图⽚、视频等的混合体,最关键有超链接,能从⼀个超⽂本跳转到另外⼀个超⽂本。HTML 就是最常⻅的超⽂本了,它本身只是纯⽂

2021-08-05 22:11:22 201

原创 react native——绑定触摸系统PanResponder组件中的Touch...组件onPress无法触发

react native——绑定触摸系统PanResponder组件中的Touch…组件onPress无法触发首先分析无法触发的原因:当你在点击的时候PanResponder组件响应了触摸事件,导致链接的onPress事件无法触发,所以,我们需要通过判断来控制。PanResponder类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作,也可以用于识别简单的多点触摸手势。 this._panResponder = PanResponder.create({ //在

2021-08-02 10:39:43 960

原创 js中几种循环的比较

for 循环:1、可以被break打断forEach循环:1、不能被break打断,会报错2、没有返回值3、遍历的是value值 let arr=['a','b','c','d']; let res=arr.forEach(element => { //break; break会报错 console.log(element) //a,b,c,d return 1; }); console.log(res);// undefined

2021-07-29 16:52:23 758

原创 防抖和节流

function debounce(func,wait, immediate){ let timeout,result;// result 用于接受立即执行函数的返回值 let decounced = function(){ const args = arguments;// 获取事件函数传递evnet对象参数 const that = this;// 获取保存返回函数内部this clearTimeout(timeout);//清除上一个延时器, 防止内存泄漏

2021-07-28 17:35:07 100

原创 react在commit阶段做了什么

react在commit阶段做了什么首先提出一个问题useffect和uselayouteffect有什么不同?官网上的介绍effect 的执行时机 (opens new window):commitRoot方法是commit阶段工作的起点。fiberRootNode会作为传参。commitRoot(root);在rootFiber.firstEffect上保存了一条需要执行副作用的Fiber节点的单向链表effectList,这些Fiber节点的updateQueue中保存了变化的props

2021-07-18 19:22:14 558 1

原创 从源码的角度来看react的diff算法

Diff算法一、设计动机在某一时间节点调用 React 的 render() 方法,会创建一棵由 React 元素组成的树。在下一次 state 或 props 更新时,相同的 render() 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来判断如何高效的更新 UI,以保证当前 UI 与最新的树保持同步。此算法有一些通用的解决方案,即生成将一棵树转换成另一棵树的最小操作次数。然而,即使使用最优的算法,该算法的复杂程度仍为 O(n 3 ),其中 n 是树中元素的数量。如果在 Reac

2021-07-17 21:20:56 235 3

原创 react-native的Dimensions.get(‘screen‘)和Dimensions.get(‘window‘)有什么不同

React-native中的获取屏幕高度Dimensions.get(‘screen’)和Dimensions.get(‘window’)有什么不同react-native获取屏幕高度import { Dimensions,} from 'react-native';const windowHeight=Dimensions.get('window').height;const screenHeight=Dimensions.get('screen').height;通过控制台打印这两个

2021-07-15 15:27:30 2074

原创 react-native中的image标签的resizeMode属性展示效果

react-native中的image标签的resizeMode属性展示效果resizeModeresizeMode决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。默认值为cover。cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有 padding 内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。contain: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有 p

2021-07-08 09:48:24 1321

原创 js中的this指向详解

js中的this指向详解摘要:在非箭头函数下, this 指向调用其所在函数的对象,而且是离谁近就是指向谁(此对于常规对象,原型链, getter & setter等都适用);构造函数下,this与被创建的新对象绑定;DOM事件,this指向触发事件的元素;内联事件分两种情况bind绑定, call & apply 方法等全局环境下的情况在全局环境下,this始终指向全局对象(window)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MLr

2021-04-07 19:54:30 328

原创 根据源码实现简易版hooks(useState)

简易版hooks的实现(useState)90行代码==按照hooks源码逻辑实现的简易版的useState,去除了优先级,实现了多个state其他hooks的实现也跟这个差不多,只是执行的时间不同以及memoizeState保存的数据不同而已<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>&lt

2021-04-07 11:00:29 182

原创 CSS常考面试题资料

CSS常考面试题资料都是网上搜集的资料链接1《50道CSS基础面试题(附答案)》中的答案真的就只是答案吗?链接2 50道CSS基础面试题(附答案)

2020-12-30 21:19:57 150

原创 正则表达式数组去重

今天看到一个比较新奇的数组去重的思想,就是使用正则进行全局匹配选出来重复的,对于本人还是第一次发现这个方法,比较有意思就记下来了ary = ary.sort((a, b) => a - b);ary = ary.join('@') + '@';let reg = /(\d+@)\1*/g;let arr = [];ary.replace(reg, (val, group1) => { arr.push(parseInt(group1));});console.log(arr);

2020-12-01 21:08:05 965

原创 原型复习笔记

原型复习笔记1.实例对象的原型 __proto__ 和构造函数的原型prototype指向是相同的2.实例对象中的__proto__ 原型指向的是构造函数中的原型prototype 原型对象中的constructor指向构造函数 (Person(){})3.实例对象可访问原型对象中的属性和方法 实例中的__proto__ 是原型,浏览器使用的 构造函数中的prototype是原型,是程序员使用的 prototype的__proto__指向的是Object的prototype O

2020-11-06 11:49:24 126

原创 防抖和节流

防抖和节流和预解析一、防抖函数当持续触发事件,一定时间内没有再触发事件 事件函数才会执行一次,如果设定时间到来之前,有一次触发了事件,就重新开始延时。function input(value) { console.log(`输出的内容是${value}`)}function debounce(fun, delay) { let timer; return function (args) { const that = this; clearInterval(timer)

2020-11-05 21:30:23 165

原创 关于create-react-app不能使用less的两种解决方法(实现按需打包)

使用create-react-app这个脚手架默认搭建的项目工程中是不能使用less的我个人的解决方法有如下两种1.修改create-react-app的webpack配置1.运行npm run eject,会多出两个目录config和scripts,此时可以在config目录下看到配置文件webpack.config.js。2.下载less和less-loader// 使用npm npm install less less-loader --save-dev // 使用 yarn yarn

2020-10-15 16:45:29 1975

原创 JS数组拍平

JS数组拍平的几种方式1.递归方法var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; function fn(arr){    let arr1 = [] arr.forEach((val)=>{ if(val instanceof Array){ arr1 = arr1.concat(fn(val))

2020-10-12 10:43:50 955

转载 git规范

git规范请看他~

2020-09-19 16:58:21 147

原创 Component和PureComponent

1.Component存在的问题1.父组件重新render(),当前组件也会重新执行render(),即使没有任何变化2.当前组件setState(),重新执行render(),即使state没有任何变化2.解决Component存在的问题1.原因:组件的componentShouldUpdate()默认返回true,即使数据没有变化,render()都会重新执行2.办法1:重写componentShouldUpdate(),判断如果数据有变化返回true,否则返回false3.办法2:使用P

2020-09-10 17:57:56 293 1

原创 react中setState()更新状态是异步还是同步的?

setState()更新状态是异步还是同步的?setState()更新状态的2种写法 1.setState(updater,[callback]), update为返回stateChange对象的函数:(state,props)=>stateChange 接收的state和props被保证为最新的 2.setState(stateChange,[callback]) stateChange为对象, callback是可选的回调函数,在状态更新且界面更新后才执行 总结:

2020-09-10 16:54:54 799

原创 jsonp解决ajax跨域的原理

jsonp解决ajax跨域的原理1.jsonp只能解决GET类型的ajax请求跨域问题2.jsonp请求不是ajax请求,而是一般的get请求3.基本原理浏览器端 :动态生成

2020-08-24 11:06:55 100

原创 手写Promise

(function (window) { const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; /* Promise:构造函数 excutor:执行器函数(同步执行) * */ function Promise(excutor) { const self = this; self.status = PENDING; //给Promise

2020-08-13 19:03:55 175

原创 Promise的几个关键问题总结

Promise的几个关键问题0.Promise是什么?1.抽象表达: Promise是JS中进行异步编程的新的解决方案(旧的是谁?)2.具体表达: 从语法上来说: Promise是一个构造函数 从功能上来说: promise对象用来封装一个异步操作并可以获取其结果3. promise的状态改变(只有2种, 只能改变一次) pending变为resolved pending变为rejected4. promise的基本流程1.函数对象与实例对象函数对象

2020-08-13 19:01:24 646

原创 webpack详细配置

webpack详细配置entry/* entry: 入口起点 1. string --> './src/index.js' 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main 2. array --> ['./src/index.js', './src/add.js'] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。

2020-08-11 15:52:23 170

原创 webpack性能优化

webpack性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR优化代码调试source-map生产环境性能优化优化打包构建速度oneOfbabel缓存多进程打包externalsdll优化代码运行的性能缓存(hash-chunkhash-contenthash)tree shakingcode split懒加载/预加载pwaHMRHMR: hot module replacement 热模块替换 /

2020-08-11 14:40:23 132

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除