- 博客(186)
- 收藏
- 关注
RSS订阅
原创 详解从输入url到页面渲染
浏览器从输入 URL 到渲染出页面的过程涉及多个阶段，每个阶段都有其特定的任务和细节。DNS 解析的过程和缓存机制。HTTP 缓存的机制和头部字段。TCP 三次握手和 TLS 握手的过程。HTTP 请求和响应的结构和常见方法。DOM 树和 CSSOM 树的构建过程。JavaScript 的执行过程和阻塞渲染。渲染树的构建、布局和绘制过程。通过理解这些细节，可以更好地回答面试中的相关问题，并展示对浏览器工作原理的深入理解。DNS 解析是将域名转换为 IP 地址的过程。
2024-12-26 10:30:43
1163
原创 搞懂函数式编程
高阶函数是函数式编程中最为常用的技巧,高阶函数还演化出其他概念,例如React中的高阶组件,即接收一个组件作为参数或返回一个组件作为返回值的组件。例如要遍历一个数组,命令式编程的操作是通过for或while循环对数组遍历,在函数式编程中对数组的遍历可以抽象成一个forEach函数,数组可以通过该函数对数组的每个元素进行遍历,除此之外,forEach还可以抽象成map、set结构的遍历操作,相比较命令式编程,函数式编程更加简洁。通过组合一些小的高阶函数可以创建有意义的表达式,能简化很多繁琐的程序。
2024-12-23 17:06:46
907
原创 主要看看 Session 与 Token
通俗地讲就是验证当前用户的身份，证明“你是你自己”（比如：你每天上下班打卡，都需要通过指纹打卡，当你的指纹和系统里录入的指纹相匹配时，就打卡成功）互联网中的认证：用户名密码登录邮箱发送登录链接手机号接收验证码只要你能收到邮箱/验证码，就默认你是账号的主人用户授予第三方应用访问该用户某些资源的权限你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像、地区、性别等个人信息）cookie。
2024-11-14 10:27:19
905
转载 前端微服务qiankun的使用
本文从开始搭建到部署非常完整地分享了整个架构搭建的一些思路和实践，希望能对大家有所帮助。要提醒一下的是，本示例可能不一定最佳的实践，仅作为一个思路参考，架构是会随着业务需求不断调整变化的，只有合适的才是最好的。示例代码：。
2024-04-11 17:58:32
1162
原创 single-spa 到底是个什么
以上就是 singles-spa 文档里的所有内容了（除了 SSR 和 Dev Tools，前者用的不多，后者自己看一下就会了，不多废话）。single-spa 文档就这些了嘛？没错，就这些了。文档好像给了很多“最佳实践”，但真正将所有“最佳实践”结合起来并落地的又没多少。比如文档说用 Shadow CSS 来做子应用之间的样式隔离，但是 single-spa-leaked-globals 又不让别人在一个 url 上挂载多个子应用。感觉很不靠谱：这里行了，那里又不行了。
2023-10-16 14:07:59
1206
原创 Markdown常用语法介绍
由于Markdown的语法基本都是用的符号表示，所以当需要直接输出某些特定的符号的时候，就必须使用反斜杠的转义作用了，使用方法很简单，跟大部分的编程语言的用法一样，只需要在特定的符号前面加上一个反斜杠就可以了，例如输出\本身，就需要使用\\来表示了。第二个部分是表示列的对齐方式，有左对齐、居中对齐和居右对齐三种类型，直接看例子吧， --- 表示了默认的左对齐， :--- 表示 左对齐 ， ---: 表示 右对齐 ， :---: 表示居中对齐。
2023-08-15 17:05:21
2274
原创 React hooks的使用详解
这很合理，由于副效应不依赖任何变量，所以那些变量无论怎么变，副效应函数的执行结果都不会改变，所以运行一次就够了。实际使用中，由于副效应函数默认是每次渲染都会执行，所以清理函数不仅会在组件卸载时执行一次，每次副效应函数重新执行之前，也会执行一次，用来清理上一次渲染的副效应。上面的例子是错误的写法，副效应函数里面有两个定时器，它们之间并没有关系，其实是两个不相关的副效应，不应该写在一起。每次渲染都执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。
2023-07-26 10:55:17
823
原创 react路由
＜React-Router＞超全react路由知识点(跳转、传参、子路由、重定向等）_react router 跳转_moanmu的博客-优快云博客
2023-07-12 17:27:37
147
转载 什么是前台、中台、和后台？
在传统的前台-后台架构中，各个项目相互独立，许多项目都在重复发明同样的功能，让项目本身变繁琐，也让开发效率变低。面向内部运营人员的管理系统、配置系统，如：电商配置后台的商品管理、订单管理、会员管理、财务管理等。也包括服务端各种实时响应用户请求的业务逻辑，如：商品查询、订单系统等。整合某种通用能力提供给前台，包括业务中台、技术中台、数据中台、算法中台。算法平台：为各个项目提供算法，如推荐算法、搜索算法等。如：支付、商品管理、营销、用户、搜索、交易中心等。如：用户画像、数据可视化、日志分析等。
2023-02-27 09:40:09
5376
原创 angular 随笔而记
如果没有 ngForm 这个属性值，itemForm 引用的值将是 HTMLFormElement 也就是 元素。而 Component 和 Directive 之间的差异在于 Angular 在没有指定属性值的情况下，Angular 会引用 Component，而 Directive 不会改变这种隐式引用（即它的宿主元素）。而使用了 NgForm 之后，itemForm 就是对 NgForm 指令的引用，可以用它来跟踪表单中每一个控件的值和有效性。
2023-02-25 10:17:26
448
转载 angular 中 rxjs map, flatMap/mergeMap, switchMap区别
rxjs map, flatMap/mergeMap, switchMap区别
2023-01-10 08:54:14
584
原创 当我真正开始爱自己
当我真正开始爱自己， 我才认识到，所有的痛苦和情感的折磨， 都只是提醒我：活着，不要违背自己的本心。 今天我明白了，这叫做“真实”。 当我真正开始爱自己， 我才懂得，把自己的愿望强加于人， 是多么的无礼，就算我知道，时机并不成熟， 那人也还没有做好准备， 就算那个人就是我自己。 今天我明白了，这叫做“尊重”。 当我开始爱自己， 我不再渴求不同的人生， 我知道任何发生在我身边的事情， 都是对我成长的邀请。 如今...
2022-05-26 16:52:51
169
转载 理解CSS3 transform中的Matrix(矩阵)
转载自：理解CSS3 transform中的Matrix(矩阵) « 张鑫旭-鑫空间-鑫生活
2022-03-15 14:58:35
119
原创 CSS动画 animation与transition
一、区分容易混淆的几个属性和值 先区分一下css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。 CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix； transform(变形)是CSS3中的元素的属性，而translate只是transfo
2022-02-11 17:04:15
5374
原创 js blob base64 file 的相互转换
file和base64file文件转换为base64，得到base64格式图片var reader = new FileReader();reader.readAsDataURL(this.files[0]);reader.onload = function(){ console.log(reader.result); //获取到base64格式图片};12345base64转换为filefunction dataURLtoFile(dataurl, filename)...
2022-01-19 16:24:07
605
原创 JS共享传参
目录导航一、概念 按值传递 VS. 按引用传递 按共享传递 call by sharing 二、实例解析 探究JS值的传递方式 按共享传递 call by sharing 基本类型的不可变(immutable)性质 一、概念 我们需了解什么是按值传递(call by value)，什么是按引用传递(call by reference)。在计算机科学里，这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传..
2021-12-06 17:07:00
401
原创 看懂复杂的 TypeScript 泛型运算
对于从 JavaScript 转来的 TypeScript 的初学者来说，一开始无脑用一个新的 interface规定一切的方式确实很过瘾。但是，当不得不尝试提高函数或组件的通用性时，使用泛型成了必须的选择。当尝试阅读一些用 TypeScript 开发的库的源码时，可能会被各种尖括号包裹的复杂泛型运算搞的晕头转向。本文的目的在于对泛型中的常见关键词和用法进行介绍，并且尝试用一定数量的例子来方便理解泛型。在 TypeScript中， type和 interface关键字中在多数情况下功能是相同的，..
2021-11-17 15:43:12
610
转载 typescript各类符号
!非空断言操作符在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。具体而言，x! 将从 x 值域中排除 null 和 undefined 。typescriptfunction myFunc(maybeString: string | undefined | null) { const onlyString: string = maybeString; // Error const ignoreUn.
2021-11-01 11:35:40
596
转载 await不能用在forEach中？
不知道你是否写过类似的代码: functiontest(){ letarr=[3,2,1] arr.forEach(asyncitem=>{ constres=awaitfetch(item) console.log(res) }) console.log('end') } ...
2021-10-27 15:44:10
2850
2
原创 mac mysql navcat
mac上搭建mysql环境配置和Navicat连接mysqlmac上搭建mysql环境配置1、下载mysql for mac:MySQL :: Download MySQL Community Server (Archived Versions)注意：mysql版本要和你的MAC版本保持一致2、一路傻瓜式点击下一步此处选择“Use Legacy Password Encryption”，否则使用navicat连接mysql的时候，会报无法加载身份验证的错误。3、环境配置.
2021-10-26 09:57:05
187
原创 chrome调试
1.Elements 1.选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件 2.在 Element 选项卡中可以修改html 2.断点在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断点, 在循环中需要断点时比较有用 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信.
2021-10-20 14:52:35
429
转载 ThreeJS中的点击与交互——Raycaster的用法
基础概念坐标系我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面对屏幕，你的右边是x正轴，上面是y正轴，屏幕指向你的为z正轴。长度单位这样来定：窗口范围按此单位恰好是(-1,-1,-1)到(1,1,1)。 屏幕坐标系：web...
2021-09-02 14:15:08
1783
原创 前端设计模式
最近对各种设计模式挺感兴趣，无论是架构设计还是代码优化都有可能用到，所以，每天掌握一个锻炼一下编码思维。废话不多说，直入正题。对前端编程来说，尤其是vue的使用者们，观察者模式是最常用而且最挂在耳边的，所以，不妨从这个开始搞起。下面的话这段带色的话，可以忽略，不影响后续阅读，仅做了解用：设计模式总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。行
2021-07-16 16:13:32
304
原创 JS基础-一个完美的递归函数
一、什么是递归函数 二、完美的递归方法三、总结一、什么是递归函数 递归函数是在一个函数内通过名字调用自身的情况。二、完美的递归方法 写法一：/**方法说明：递归阶乘函数*/function test(num){ if(num <=1){ //递归停止的条件，必须得需要 return 1; } else{ //调用递归 retu...
2021-07-16 14:57:01
171
转载 JavaScript 内存泄漏
一、什么是内存泄漏？程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。有些语言（比如 C 语言）必须手动释放内存，程序员负责内存管理。char * buffer;buffer = (char*) malloc(42);// Do s..
2021-07-16 14:53:31
109
转载 浅析 Tree Shaking
当 Javascript 项目达到一定体积时，将代码分成模块会更易于管理。但是，当这样做时，我们最终可能会导入实际上未使用的代码。Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。我们来举个例子，下面是一个简单的 Javascript 文件，命名为mathUtils.js，主要实现了基础的数学运算。export function add(a, b) { console.log("add"); return a + b;}export fun...
2021-07-13 11:08:19
141
转载 webpack的out.libraryTarget属性
https://blog.youkuaiyun.com/frank_yll/article/details/78992778
2021-07-08 14:26:17
123
原创 canvas rotate中心点问题
ctx = document.getElementByIdx_x_x_x('canvas').getContext('2d');ctx.fillStyle = "rgb(250,0,0)";ctx.save();ctx.translate(50,50);//这个translate(50，50)发生在rotate()之前,其目的是将旋转点从默认点(0，0),移动到(50，50),下面紧跟着的rotate就是按照这个点来转//rotate方法的旋转点完全是按照...
2021-06-24 17:54:30
1347
转载 前端之Vue项目如何做单元测试
关于单元测试，最常见的问题应该就是“前端单元测试有必要吗？”，通过这篇文章，你将会了解单元测试的必要性，以及在Vue项目中如何能够全面可靠的测试我们写的组件。单元测试的必要性一般在我们的印象里，单元测试都是测试工程师的工作，前端负责代码就行了；百度搜索Vue单元测试，联想词出来的都是“单元测试有必要吗？”“单元测试是做什么的？”虽然我们平时项目中一般都会有测试工程师来对我们的页面进行测试“兜底”，但是根据我的观察，一般测试工程师并不会覆盖所有的业务逻辑，而且有一些深层次的代码逻辑测试工程师在不了解.
2021-06-23 17:02:02
2605
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人