- 博客(434)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 个人博客站点---完全开源---随用随取
最近接触到了next.js前后端同构框架，借此机会搭建了个人的博客站点，并进行了vercel部署，现已上线，欢迎fork学习交流～ 网站地址 : http://sunzhaoxiang.com/ 代码地址 : https://github.com/SUNNERCMS/sunnercms-nextJsBlog由于博客站点正在开发中，所有工程配置、功能添加、bug处理等，均会记录在github中，欢迎fork，在此基础上快速搭建属于自己的博客。有问题或疑问，可评论或私信～待办：vercel部署流
2020-10-28 12:33:04
464
原创 抽时间来说说自己工作中遇到的那些人和和那些事
自从开始工作之后，关注的帖子和写的文章越来越少，一直忙于需求开发之中，回过头来想想，感觉自己的职业方向有点跑偏了，缺少停下来思考的时间和自己为之要奋斗的目标，好吧，群里又在呼唤我了，有问题要解决，有空在接着说。。。...
2020-03-26 23:28:22
714
2
原创 获取网络连接状态
2、online和offline事件：浏览器会触发这两个事件，来通知应用网络状态的变化。当网络断开时，会触发offline事件。需要注意的是，以上方法仅能检测当前客户端是否连接上网络，无法检测客户端与服务器之间的网络状态。如果需要检测客户端与服务器之间的网络状态，可以使用WebSocket等技术。需要注意的是，这两个事件仅在浏览器支持HTML5时才有效，因此在使用这种方式判断网络状态时需要进行兼容性测试。3、发送ping请求：在客户端发送ping请求，如果服务器成功响应，则说明当前客户端已经连接上了网络。
2023-04-14 13:31:58
548
原创 webpack的loader和plugin区别，及实现demo
要实现一个自定义的 Loader，需要遵循以下步骤：创建一个 Node.js 模块，这个模块会被 Webpack 加载和执行。你可以使用任何你熟悉的 JavaScript 工具和框架来编写这个模块。在 Node.js 模块中实现一个函数，这个函数就是我们的 Loader 函数。这个函数应该接收一个参数，这个参数就是需要被转换的资源文件的内容。函数的返回值应该是一个字符串或者一个 JavaScript 对象。在 Loader 函数中处理资源文件，并将其转换为 JavaScript 模块。
2023-03-16 21:33:24
621
原创 CDN相关知识点
CDN（Content Delivery Network，内容分发网络）是一种通过在多个节点上分布内容以提高网络性能、可靠性和可扩展性的网络解决方案。CDN通过在不同的地理位置部署服务器，使用户能够更快地访问内容，同时减轻了网络负载，提高了网站的稳定性和安全性。
2023-03-11 19:59:32
771
原创 判断浏览器是否支持webp，如何实现优雅降级
总的来说，这段HTML代码的作用是：先尝试加载WebP格式的图片，如果浏览器支持WebP格式就显示这张图片，否则就显示兜底的PNG格式图片，以确保无论浏览器是否支持WebP格式，都能够正确地展示图片。Google 的 WebP 编码器：这是一个开源的工具，可以将 PNG、JPEG 等格式的图片转换为 WebP 格式。元素，这是HTML5新增的元素，它的作用是提供一种优雅降级的解决方案，以确保图片在各种浏览器中都能够正确地展示。这个字符串表示了一张1像素的WebP格式的图片，它的Base64编码字符串为。
2023-03-09 23:25:45
1092
原创 getDerivedStateFromProps和getSnapshotBeforeUpdate
和都是 React 中的生命周期方法，用于在组件渲染过程中进行状态管理和数据处理。方法是 React 16.3 新增的生命周期方法，用于在 props 发生变化时更新组件的 state。该方法接收两个参数：props 和 state，返回一个对象用于更新组件的 state。这个方法的主要作用是在组件挂载时和更新时都会被调用，允许组件在不同的状态下更新自己的 state。需要注意的是，使用如果上述两种情况都不满足，就没有必要使用方法来更新组件的 state。
2023-03-05 14:21:23
1308
原创 useCallback、useMemo、React.memo
是自定义的对比函数，它接受前一个 props 对象和后一个 props 对象作为参数，并返回一个布尔值。如果不传入第二个参数，则会使用默认的浅比较函数进行对比。方法对比 props 是否相同，该方法会进行浅比较，只对比 props 的第一层属性是否相等，如果属性值是对象或数组等引用类型，则只比较它们的。的实现原理是对比组件的前后两次渲染传入的 props 是否相等，如果相等则不会触发重新渲染，否则会触发。是 React 中用于函数组件优化的高阶组件，可以在一定程度上减少组件的重渲染，提升应用性能。
2023-03-05 14:10:39
385
原创 错误异常捕获
是一种 React 组件，它可以在其子组件树的渲染期间捕获 JavaScript 异常，并且可以渲染出备用 UI。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于 JavaScript 中。5、React 不需要错误边界来捕获事件处理器中的错误。参数包含有关组件引发错误的组件堆栈的信息。，不同的地方在于错误边界只针对 React 组件。1、错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。生命周期方法在错误边界内的任何子组件抛出错误时被调用。
2023-03-05 11:26:23
2369
原创 微前端知识点汇总
当我们研究了所有的替代方案后，出于以下原因，选择Webpack模块联邦更有意义。没有维护成本（如果你自己建立一个架构，会有维护成本）没有团队特定的学习成本（如果你自己建立一个架构，会有学习成本）向模块联邦过渡的成本很小不需要对每个项目进行重新架构所有的需求都在构建时得到满足在运行时不需要额外的工作分享依赖的成本低库/框架独立你不需要处理所有的压缩和缓存问题你不需要处理路由问题Shell和Micro Apps不是紧耦合的，而是松耦合的模块联邦的两个伟大的功能了 :)expose。
2023-02-18 23:34:20
544
原创 http和https
接着客户端生成一个pre master secret(随机数)，通过服务器公钥加密，发送给服务器，接着客户端和服务端利用之前的随机数以及pre master secret生成对称加密的秘钥开始进行对称加密通信。实际得到的证书是证书机构例如CA通过自己的私钥，将服务器提交的信息（服务器公钥，域名等）进行了签名，最终证书就包含（签名+服务器信息）接着服务器发起一次证书传递通信，将证书+证书机构信息（证书机构公钥，签发机构名称，位置等信息）交给操作系统根证书进行私钥签名并发送。使用两把密钥的公开密钥加密。
2023-02-06 20:10:39
447
原创 JS基础-原型原型链和宏任务/微任务/事件机制
1、结果： 2、第一：首先区分浏览器端和服务器端的js模块化规范。1）浏览器端的js模块化规范：AMD 和 CMD2）服务器端的js模块化规范：CommonJS（注：由NodeJS实现）第二：浏览器端的js模块化规范分别由什么实现。1）AMD是由require.js实现的（记忆法，认为A是Async异步， 依赖前置，就是所有的依赖必须放在最前面）2）CMD是由sea.js实现的（依赖就近，所有依赖需要了再引入3、 熟悉使用new创建对象的原理：（1）新对象的隐式原型执向构造函数的显示原型B._prot
2022-05-31 23:42:16
308
原创 LeetCode
2. 两数相加给你两个非空 的链表，表示两个非负的整数。它们每位数字都是按照逆序的方式存储的，并且每个节点只能存储一位数字。请你将两个数相加，并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外，这两个数都不会以 0开头。var addTwoNumbers = function(l1, l2) { // 1、创建虚拟头结点，用于返回结果处理 let l3 = new ListNode(); // 2、定义进位值，默...
2022-05-21 15:42:31
395
原创 http及https相关内容补充
HTTP2.0不足：1、建立连接时间长(本质上是TCP的问题)2、队头阻塞问题（二进制分帧层，形成很多互相无依赖的数据包，由于单个数据包的丢失而造成的阻塞）TCP协议在收到数据包之后，这部分数据可能是乱序到达的，但是TCP必须将所有数据收集排序整合后给上层使用，如果其中某个包丢失了，就必须等待重传，从而出现某个丢包数据阻塞整个连接的数据使用。3、移动互联网领域表现不佳(弱网环境）HTTP3.0Http3.0是建立一个新的传输层协议QUIC上的HTTP新规范，QUIC协议底层是基于
2022-05-20 21:00:43
298
原创 全排列总结
46. 全排列解答过程：力扣https://leetcode.cn/problems/permutations/solution/chou-xiang-cheng-jue-ce-shu-yi-ge-pai-lie-jiu-xian//** * @param {number[]} nums * @return {number[][]} 递归+回溯思路1、每一位都有3种选择：1、2、3。2、每一次都做选择，展开出一棵空间树，如下图。3、利用约束条件「不能重复选」...
2022-05-20 18:22:20
349
原创 滑动窗口总结
滑动窗口是leetcode上的一大类题目，也是各大公司常见的面试题目，整理如下：参考文档：力扣【3】无重复字符的最长子串给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。尝试解题：不行，这种处理，实际上窗口长度没有变，适用窗口长度固定的题型，如643. 子数组最大平均数 Ivar lengthOfLongestSubstring = function(s) { let left=0, right = 0, maxlen = 0; let obj.
2022-05-20 10:46:59
179
原创 函数类和class类
// class类01创建形式class Person { name = 'Jack'; sayHello() { console.log('hello'); }}// class类02创建形式class Person { constructor() { this.name = "Jack; } sayHello() { console.log('hello'); }}// 函数类01.
2022-05-17 21:47:47
95
原创 持久化缓存
Improve build performance with Persistent Caching （通过使用持久性缓存来提高构建性能）Cache基本配置在 Webpack 4 中，cache 只是单个属性的配置，所对应的赋值为 true 或 false，用来代表是否启用缓存，或者赋值为对象来表示在构建中使用的缓存对象。而在 Webpack 5 中，cache 配置除了原本的 true 和 false 外，还增加了许多子配置项，例如：cache.type：缓存类型。值为 'memory'或‘.
2022-05-16 16:31:43
3926
原创 前端面试手撕题
FED1 事件委托请补全JavaScript代码，要求如下：1. 给"ul"标签添加点击事件2. 当点击某"li"标签时，该标签内容拼接"."符号。如：某"li"标签被点击时，该标签内容为".."注意：1. 必须使用DOM0级标准事件（onclick）<html> <head> <meta charset=utf-8> </head> <body> <ul>
2022-05-15 10:55:53
111
原创 JS能力测评
JS1直角三角形<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div class='triangle'></div> <script> var triangle = document.q.
2022-05-14 15:06:31
1194
1
原创 待总结的前端知识点
1、多页应用和单页应用的区别多页面：每次页面刷新都会返回新HTML 优点：首屏时间快（只发送一个http请求，响应接受了，页面就能展示出来）SEO（搜索引擎排名）效果好，搜索引擎是识别html内容，根据内容排名的 缺点：页面切换慢：每次切换都需要发起一个http请求**单页面**只有一个首页，js感知到url变化后使用js把当前页面内容替换成新的，而不会每次跳转都请求新的html文件第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并
2022-05-10 23:38:20
198
原创 optimization的runtimeChunk配置
先看官方文档说明runtimeChunk：运行时生成的chunk，而非静态编译，一般来讲是用来管理各个chunk之间的运行关系。场景：业务代码中修改的代码重新打包生成了main的chunk，一些依赖包没有改变，但是verdors的包hash也变了，可能是因为没有配置runtimeChunk(runtime的内容都被打包嵌入了各自的打包文件）存在运行时一些依赖关系发生了变化。...
2022-04-14 09:04:02
1514
原创 【背包问题】
1、0-1背包问题有一个容量为 C 的背包，和一些物品。这些物品分别有两个属性，体积 w 和价值 v，每种物品的数量只有一个。要求用这个背包装下价值尽可能多的物品，求该最大价值，背包可以不被装满。假设物品的体积w[i]=[5,6,2,3,4]，物品的价值v[i]=[6,12,5,6,6]，背包容量C=10，求背包能装的最大价值。解题参考js解题代码funciton bag_0_1(w,v,C) { // 先对F[i][j]初始化第一行，然后根据遍历物品，根据状态转移函数计算。 // 把
2022-04-09 16:57:31
315
原创 【221. 最大正方形】
求解汇总：1、我们用 dp(i, j)表示以 (i, j) 为右下角，且只包含 1 的正方形的边长最大值。如果我们能计算出所有dp(i,j) 的值，那么其中的最大值即为矩阵中只包含 1 的正方形的边长最大值，其平方即为最大正方形的面积。var maximalSquare = function (matrix) { let max_len = 0; let dp = Array.from(Array(matrix.length), () => Array(matrix[.
2022-04-05 15:23:21
456
原创 微信云开发+vant weapp实现图片上传
index.wxml文件 <van-uploader file-list="{{ imageFileList }}" bind:after-read="afterRead" multiple="{{true}}" max-count="3" bind:delete="imageDelete"/>index.js文件 data: { value: '', imageFileList: [ { url: 'https://i
2021-11-13 16:30:48
732
原创 npm包发布及npm link调试
一、npm包开发及发布1、新建文件夹helloDemo，在该文件路径下npm init，一路回车即可，具体的包名等信息，可以在生成的package.json中进行修改。2、目录结构如下：index.js：入口package.json，package-lock.json：包信息readme.md文档test-formatter.js：测试文件（1）index.js文件： let formatter = { helloName (name) { return `h
2021-10-26 20:28:44
1681
原创 vue常用基础知识点
1、组件作用域内的css2、所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)3、箭头函数应不是完全能用（1）Vue的属性方法或者实例方法的回调函数，都不可。（2）箭头函数没有this上下文4、生命周期:四个节段，“生老病死”初始化挂载更新卸载beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestroyed5、Vue.js 使用
2021-10-13 23:36:35
198
原创 git patch和git am的演示操作
一、 场景：尚未开发完成或者处于debug的代码，想要同步给其他开发人员，怎么办？二、方法：（1）git patch ：生成补丁（产出物料），以提供给其他开发人员（2）git am：打补丁，将补丁打到自己的代码中（消化物料）三、使用：（1）将需要打补丁的文件暂存，git commit 进行注释（2）将需要的改动生成patch: git format-patch HEAD^注意⚠️：备注尽量写英文，汉字注释不通用生存的patch物料，可以单独拷贝出去，也可以放到一个文件中，比如放到
2021-08-09 23:07:01
3170
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人