- 博客(480)
- 收藏
- 关注
原创 【微信小程序】原生组件的分层渲染 和 同层渲染
分层渲染就是,小程序原生组件是独立于 webview 的。所以无论如何原生组件的层级都高于 webview。两个层级是完全独立的,因此无法简单地通过使用。微信小程序的原生组件指的是,微信小程序语法中自带的 video 等标签。【这里的原生指的是微信小程序而不是 js】微信小程序的页面是基于 webview 的,其他的原生组件是独立于 webview 的。同层渲染,就是原生组件挂在到 webview 上。控制原生组件和非原生组件之间的相对层级。
2024-03-15 15:09:22
1142
原创 js中的两个定时器setTimeout 、setInterval都可能不准的原因和解决办法
的执行时间会受到前一个回调函数执行时间的影响,导致累积误差,下一个回调,会在当前的回调结束之后再执行,如果当前的回调执行时间过程,那么下一次的执行是延迟的。定时器不是立刻放入事件队列中的,而是同步任务执行完了之后,timer模块计算时间到了,再放入队列中,总的来说,为了确保定时器的准确性,尽量保持回调函数的执行时间短暂,并且在需要更高精度的情况下考虑使用其他 API,例如。:JavaScript 是单线程的,如果事件循环中有其他任务阻塞了执行,:在页面不可见时,浏览器可能会降低或停止。的执行,以节省资源。
2024-03-12 23:48:27
3093
原创 面试题目,手写代码,必会的题目总结
原生方法 Object.create call apply bind promsie.all promise.race 数组的方法 flat reduce map filter push repeat 原生操作符 instanceof new 功能函数 节流 防抖 深拷贝 柯里化 使用 setTimeout 实现 setInterval jsonp 格式化日期函数 应用相关 订阅发布
2024-03-12 20:52:58
900
原创 vue diff 算法的核心逻辑
面试官问你,你知道diff算法的逻辑是什么么,新旧dom是如何进行对比的?(1)首先 diff 算法在源码中的 runtime-dom 里面的patch方法中实现的,参考(2)diff 规则的深度优先,同层比较 比较的过程中,循环从两边向中间收拢面试官:你了解vue的diff算法吗?说说看 | web前端面试 - 面试官系列
2024-03-10 02:48:54
566
原创 微信授权登录流程
在授权回调页面,你的应用需要获取到微信返回的授权临时票据(code)。:当用户点击登录按钮时,你的应用需要构建一个授权链接,这个链接包含了你的应用的 AppID、授权类型、授权回调页面地址等信息。:用户在微信授权页面会看到你的应用的授权请求,用户可以选择同意或拒绝。如果用户同意授权,微信会将用户跳转回你配置的授权回调页面,并附上授权临时票据(code)。这个地址需要是你自己的网站或者应用的地址。:获取到用户的唯一标识和访问令牌后,你的应用可以使用这些信息来获取用户的基本信息,比如用户的昵称、头像等。
2024-02-28 23:21:18
718
原创 h5和app原生通信的方法,什么是jsBridge,jsBridge 原理和步骤
JSBridge 是一种机制,用于在 WebView 中的 JavaScript 和原生应用之间进行通信。它允许 JavaScript 代码调用原生应用的方法,并且允许原生应用调用 JavaScript 中的方法,实现了两者之间的双向通信。
2024-02-28 22:15:59
3159
原创 【vue】vue 是怎么把 template 模版编译成 render 函数的,什么是AST抽象语法树
是一个对象/或者json是一个数据结构AST通常是由多个节点组成的树状结构,每个节点代表一个语法单位或表达式。节点之间的关系通过父子关系或兄弟关系来表示程序的结构。在不同的编程语言和工具中,AST可能有不同的表示方式和节点类型。
2024-02-28 21:31:33
1334
原创 【vue】什么是虚拟Dom,怎么实现虚拟DOM,虚拟DOM一定更快吗
虚拟 DOM 基于虚拟节点 VNode,VNode 本质上是一个对象,VDOM 就是VNode 组成的废话,js 中所有的东西都是对象操作真实的Dom 很慢,所以使用 VDOM,VDOM 抽象了原本的渲染过程,实现了跨平台的能力而不仅仅局限于浏览器的 DOM,可以是安卓和 IOS 的原生组件,可以是近期很火热的小程序,也可以是各种GUIvue3 源码 runtime-core/src/vnode.ts 有关于 VNode 的定义使用 createVNode 创建虚拟节点。
2024-02-27 23:10:12
674
原创 【vue】面试问你看过 vue3 源码么,总结几个vue源码中的关键函数、vue 页面渲染流程
看过源码也记不住,但是至少要答对几个重要的方法,先把名字背下来。
2024-02-27 17:46:28
1352
原创 【vue】vue中数据双向绑定原理/响应式原理,mvvm,mvc、mvp分别是什么
关于 vue 的原理主要有两个重要内容,分别是 mvvm 数据双向绑定原理,和 响应式原理ler(控制器):负责处理用户的输入和操作,当用户与页面产生交互的时候开始工作,然后调用model 层修改model观察者模式1) 实现 view 和 model 同步更新,(2) 实现 view 和 model 的解藕更新自动化了。
2024-02-27 16:13:47
1308
原创 【设计模式】发布订阅模式和观察者模式实现和区别
我总感觉这两个是一个东西,老是傻傻分不清楚,在写 vue 项目中的时候我们常用的还是发布订阅模式,比如使用事件总线 eventBus 就是发布订阅模式。发布者和订阅者之间没有直接的联系。个主题可以有多个观察者。
2024-02-27 15:24:00
693
1
原创 【CSS】什么是文档流、什么是BFC,怎么触发BFC,BFC 有什么应用场景
块格式化上下文(BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。描述页面上的块级盒子是如何摆放和布局的。
2024-02-26 17:21:54
726
原创 前端有哪些实现埋点、性能监控、告警的方式
使用浏览器的 Performance API来监控页面性能,包括网络请求、页面渲染等方面的性能指标。可以使用日志收集服务如Loggly、Papertrail等进行日志的存储和监控。例如,使用Google Analytics,百度统计,等工具来跟踪用户的页面访问、点击行为等。监控页面加载时间、资源加载时间、渲染时间等性能指标,以及页面的可交互性能。监控前端应用的网络请求情况,包括请求的成功率、响应时间等指标。根据应用的特点和需求,自定义监控指标,如用户活跃度、支付成功率等,以更好地监控应用的运行情况。
2024-02-26 16:52:43
667
原创 【vue】vue2 和 vue3 的区别,响应式/性能提升/渲染函数/插槽
响应式原理 vue2 使用 defineProperty vue3 使用 proxy api vue2 是选项式 options API 基于对象的方式,将组件的选项 data,methods 等作为组件实例属性 data 必须是函数 使用 mixin 复用相同逻辑 命名冲突 数据来源不清楚 vue3 引入了组合式 composition api 更灵活,强大的组件状态和逻辑管理方式 代码组织和重用更加方法 基于函数的方式
2024-02-26 16:27:30
1126
原创 webpack 如何实现模块懒加载
首先在打包的时候使用 splitwebpackplugin 进行分割在实际引用中,webpack 实现模块的懒加载是通过动态导入(dynamic import )来实现的。动态导入是 es6 的一项功能,允许在运行时异步加载模块,从而实现按需加载。router 中文件很常用webpack 打包:在webpack 打包时,它会识别动态 import() 并将处理为单独的chunk, 这个 chunk 会被单独生成,不会被包含在初始的打包文件中。
2024-02-26 15:28:25
1182
原创 【es6 】中的装饰器 decorator 到底是什么,有什么用,和ts 中的装饰器decorator有啥区别
es6 中的decorator 还只是草案,不能直接使用,但是可以使用 js 工具链(babel, TypeScript 等)实现装饰器。TypeScript 中的装饰器和 JavaScript 中的装饰器本质上是相同的,都是用来修改或者增强类、方法、属性或函数等的功能。装饰器实际上是 es7 提出来的,它允许你在类、类方法、类属性等声明前面添加特殊的修饰符,以此来修改他们的行为。再 es6 中新增了 3个器,分别是 迭代器、生成器、还有就是装饰器,关于迭代器和生成器。也是指针对类和类属性和类方法的。
2024-02-23 17:26:27
778
原创 es6 中的生成器 generator / 迭代器 / async /await 到底是个啥,使用场景
async/await 约等于 generator + promise。生成器对象是一种特殊的可迭代对象,因为它们符合迭代器协议。async/await 将异步变成串行执行。async 返回一个promise 函数。语法糖是一种语法上的美化,
2024-02-23 00:36:24
1330
原创 【es6】解决箭头函数所有的问题,箭头函数的 this 指针,使用 new 操作符
箭头函数是 es6 提出的 this 指针指向 定义箭头函数的全局上下文或函数上下文 没有 arguments 对象,但是可以访问外部作用域中的 arguments 对象 没有prototype 属性 如果只有一个参数或返回语句时,语法可以简化去掉花括号 不能用 new 操作符会报错,也就是说不能用作构造函数 错误信息 fun is not a constructor new 操作符的原理 定义一个js 的对象 obj,【使用过 Object.create】 将 obj 的 _
2024-02-22 22:43:00
708
原创 把一个对象变成可迭代对象的两种方法,使用Symbol.iterator 和生成器Generator
方法,改方法返回一个迭代器对象,就可以称之为可迭代对象,注意迭代器是一个有 next 方法的对象。
2024-02-22 17:39:07
604
原创 使用 eval,传入字符串, 获取同名的变量值
函数具有执行任意 JavaScript 代码的能力,这也是它被普遍认为是危险的原因之一。可以获取变量的值,但在实际应用中应该尽量避免使用它,以防止出现安全问题和难以调试的代码。如果不存在,则会抛出一个。,结果取决于当前环境中是否已经存在一个叫做。在浏览器环境中,如果你执行。
2024-02-22 16:51:44
421
原创 【es6】的新特性
声明语法 let const class 字符串/函数/对象/数组的新语法/扩展功能 模版字符串 反引号 标签函数 Proxy /Reflect Promise clsss & static 静态方法 & extends 继承 Set Map Symbol for of 可迭代对象 迭代器模式 通过 Symbol.interator 对外提供统一个接口 外部可以通过 for...of 去迭代内部的数据 Generator 生成器 函
2024-02-22 15:51:16
584
原创 es6 中字符串、函数、对象、数组分别新增了哪些扩展
es6 中函数的扩展箭头函数 this 对象指向定义时所在的对象 不可以当作构造函数,不可以使用 new 命令 不可以使用 arguments 对象,可以使用 rest 参数 不可以适用 yield 命令,因此箭头函数不能用作 generator 函数 默认参数:允许在函数参数中指定默认值 length 属性:返回没有指定默认值的参数个事,rest 参数不会计入 length,如果设置了默认值的参数不是尾参数,那么 length 属性也不再计入后面的参数了 剩余参数:使用 ...
2024-02-21 18:47:33
852
原创 【es6】es5中的类和 es6 中的类 class 有什么区别
es5 中类的本质实际上是通过构造函数和原型链来模拟类的概念 es5 没有 class 关键字 定义一个 function 再 function 的 prototype 上增加各种方法 使用 new 关键字创建实例,被 new 关键字调用的函数,就是构造函数 由时候被称为 伪类 这个函数也可以直接调用es6 中的类使用 class 关键字 由constructor 构造函数,变量在构造函数中使用 this 指定变量 用 static 定义静态方法,静态方法的 this 指向类,
2024-02-21 17:02:30
964
原创 彻底解决关于路由的问题,前端路由和服务端路由,history api 和 hash路由
首先路由分成两大块,分别是前端路由和服务端路由,而前端路由又分为两种模式,分别是 histroy api 模式和 hash 模式。关于单页应用和多页应用的关系和区别,请参考。
2024-02-20 17:25:53
467
原创 Git,GitHub与GitLab分别是什么?有什么关系和区别?
Git定义:Git 是一个分布式版本控制系统,用于跟踪文件的变化,并协助多人协作开发软件项目。 作用:Git 可以在本地存储完整的项目历史记录,并允许开发者在不同的分支上进行独立的开发,最后将它们合并到主干分支上。 特点:分布式架构、高效快速、支持分支和合并、强大的版本控制能力。GitHub定义:GitHub 是一个基于 Git 的代码托管平台,提供了代码存储、版本控制、合作开发、项目管理等功能。 作用:GitHub 允许开发者将他们的代码存储在云端,与团队成员共享和协作开发,并提供了一系列
2024-02-20 16:53:00
6482
原创 git push 使用 --mirror 参数复制仓库
所以可以把这个默认的名字改成别的,比如 new-origin,使用 git remote rename origin new_origin 就可以。是默认的远程仓库的名称,它通常指向你最初克隆或者从中拉取代码的远程仓库。当你克隆一个仓库时,Git 会自动为这个远程仓库添加。但是,没事别瞎改名字了,因为不如默认的用起来方便,而且,网上搜的很多命令都是用的origin 这个名字。不过向迁移仓库这个操作就得用一个新名字,否则不就重复了么。这个名称,作为默认的远程仓库引用。
2024-02-20 15:52:21
1864
1
原创 【git 使用】git 中head、工作树、和索引分别是什么,有什么关系和区别
【代码】【git 使用】git 中head、工作树、和索引分别是什么,有什么关系和区别。
2024-02-20 15:32:25
1199
原创 【git 使用】git pull 和 git fetch 的区别
恕我直言,我一直都用 git pull 从来没有用过 git fetchgit fetch用于获取远程仓库的内容,但它们有不同的作用和用法。
2024-02-20 15:22:51
686
原创 【git 使用】git rebase 和 git merge 的区别和使用场景
git rebase和git merge都是用于合并分支的 Git 命令,但它们之间有一些重要的区别,每个命令在不同的情况下都有适合的使用场景。
2024-02-20 15:10:32
709
原创 【git】提交信息写错了,使用 amend 或者 reset 修改最近一次的提交信息 ,修改上上次/以前的提交信息
如果你的提交信息写错了,比如下面,你想修改【初始化项目】这5个字。
2024-02-20 00:41:04
1551
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅