xxxlgloverd
获得徽章 0
#每天一个知识点# 10 我仍然看到很多人在 Navigation Guards 中使用“next()”
在当前版本的 Vue Router（Vue 3 的 v4）中，这是可选的，请使用 `return` 语句代替，它更短且不易出错
在当前版本的 Vue Router（Vue 3 的 v4）中，这是可选的，请使用 `return` 语句代替，它更短且不易出错
评论
1
#每天一个知识点# 8 vuex 和 localStorage 有什么区别
vuex是vue.js 框架中的状态管理库，而
localStorage 是HTML5 中提供的本地存储 APl。
vuex 是用于管理 vue 应用程序中的状态(state),它允许你在应用程序的不同组件之间共享状态。它通过将
状态存储在浏览器的localStorage 中来实现这一点，这使得你可以在任何时间任何地点访问和修改状态。
而 localStorage 是HTML5 中提供的本地存储API，它允许你将数据存储在浏览器的本地存储中。你可以使用localStorage 来存储宇符串、对象、数组等数据。它的数据是持久化的，即使在浏览器关闭后也不会消失。
虽然vuex 和 localStorage 都可以用于存储数据，但它们的使用场景和功能略有不同。vuex 通常用于管理 vue 应用程序中的状态，而localStorage 通常用于在本地存储临时或缓存数据。此外，vuex 还提供了
一些额外的功能，如发布/订阅模式和全局变量，以帮助你更好地管理应用程序的状态。
vuex是vue.js 框架中的状态管理库，而
localStorage 是HTML5 中提供的本地存储 APl。
vuex 是用于管理 vue 应用程序中的状态(state),它允许你在应用程序的不同组件之间共享状态。它通过将
状态存储在浏览器的localStorage 中来实现这一点，这使得你可以在任何时间任何地点访问和修改状态。
而 localStorage 是HTML5 中提供的本地存储API，它允许你将数据存储在浏览器的本地存储中。你可以使用localStorage 来存储宇符串、对象、数组等数据。它的数据是持久化的，即使在浏览器关闭后也不会消失。
虽然vuex 和 localStorage 都可以用于存储数据，但它们的使用场景和功能略有不同。vuex 通常用于管理 vue 应用程序中的状态，而localStorage 通常用于在本地存储临时或缓存数据。此外，vuex 还提供了
一些额外的功能，如发布/订阅模式和全局变量，以帮助你更好地管理应用程序的状态。
展开
评论
点赞
#每天一个知识点# 7 当运行npm install时发生了什么
1 读取package.json 文件：npm会在当前目录中查
找packagejson 文件，该文件包含了项目的依赖关系和其他配置信息。
2. 解析 package.json：npm 会解析 packagejson 文件，识别出项目的依赖项和版本要求。
3.检查依赖项是否已安装：npm会检查项目的依赖
项是否已经在本地的node_modules 目录中安装过。
如果己经安装，则跳过后续步骤。
4. 解析依赖树：npm 会根据 package.json 中指定的依赖项和版本要求，解析整个依赖树。这包括主要依赖项以及它们的依赖项，以确保满足项目的所有依赖关系。
5. 下载依赖项：npm会从配置的注册表 (registry)
或其他源下载需要的依赖项。它会根据解析的依赖树
逐个下载依赖项。
6.安装依赖项：下载完成后，npm 会将依赖项安装到项目的node_modules 目录中。每个依赖项通常都会有自己的文件夹。
7.处理依赖项的依赖项：npm会递归地处理每个依赖
项的依赖项，确保项目的完整依赖链被满足。这将涉及下载和安装进一步的依赖项。
8.执行预安装和后安装脚本：在依赖项安装完成后，如果在 package.json 中定义了预安装 (preinstall)
和后安装 (postinstall)脚本，npm将按照定义的顺序执行这些脚本。
9. 生成 package-lock.json 文件：如果项目中没有
package-lockjson 文件，或者使用 npm install命令
时带有--package-lock 参数，npm将生成或更新
package-lock.json 文件。该文件记录了确切的依赖项
版本，以便在将来重新安装时保持一致。
10.完成安装：一旦所有依赖项都成功安装，npm安装过程就完成了。
1 读取package.json 文件：npm会在当前目录中查
找packagejson 文件，该文件包含了项目的依赖关系和其他配置信息。
2. 解析 package.json：npm 会解析 packagejson 文件，识别出项目的依赖项和版本要求。
3.检查依赖项是否已安装：npm会检查项目的依赖
项是否已经在本地的node_modules 目录中安装过。
如果己经安装，则跳过后续步骤。
4. 解析依赖树：npm 会根据 package.json 中指定的依赖项和版本要求，解析整个依赖树。这包括主要依赖项以及它们的依赖项，以确保满足项目的所有依赖关系。
5. 下载依赖项：npm会从配置的注册表 (registry)
或其他源下载需要的依赖项。它会根据解析的依赖树
逐个下载依赖项。
6.安装依赖项：下载完成后，npm 会将依赖项安装到项目的node_modules 目录中。每个依赖项通常都会有自己的文件夹。
7.处理依赖项的依赖项：npm会递归地处理每个依赖
项的依赖项，确保项目的完整依赖链被满足。这将涉及下载和安装进一步的依赖项。
8.执行预安装和后安装脚本：在依赖项安装完成后，如果在 package.json 中定义了预安装 (preinstall)
和后安装 (postinstall)脚本，npm将按照定义的顺序执行这些脚本。
9. 生成 package-lock.json 文件：如果项目中没有
package-lockjson 文件，或者使用 npm install命令
时带有--package-lock 参数，npm将生成或更新
package-lock.json 文件。该文件记录了确切的依赖项
版本，以便在将来重新安装时保持一致。
10.完成安装：一旦所有依赖项都成功安装，npm安装过程就完成了。
展开
评论
1
#每天一个知识点# 6 箭头函数与普通函数有什么区别？
1. this 指向不同
箭头函数没有自己的this，它会捕获其所在上下文的this 作为自己的执行上下文中的this。而普通函数则
根据调用时的情况来确定this指向。
2.语法简化
箭头函数可以省略function 关键字、return 关键字以及大括号（当只有一行代码时），使得代码更加简洁
昜读。
3. arguments 对象
箭头函数没有arguments对象，但是可以使用剩余参数(…)来获取所有传入参数。
4. 构造器
普通函数可以作为构造器，在new操作符后创建一个
新对象并返回该对象。而箭头函数不能被用作构造
器，因此不能通过new 来实例化一个类或者创建某个类型的新实例。
1. this 指向不同
箭头函数没有自己的this，它会捕获其所在上下文的this 作为自己的执行上下文中的this。而普通函数则
根据调用时的情况来确定this指向。
2.语法简化
箭头函数可以省略function 关键字、return 关键字以及大括号（当只有一行代码时），使得代码更加简洁
昜读。
3. arguments 对象
箭头函数没有arguments对象，但是可以使用剩余参数(…)来获取所有传入参数。
4. 构造器
普通函数可以作为构造器，在new操作符后创建一个
新对象并返回该对象。而箭头函数不能被用作构造
器，因此不能通过new 来实例化一个类或者创建某个类型的新实例。
展开
评论
点赞
#每天一个知识点# 5 uniApp 开发微信小程序 直接调用第三方sdk(阿里云活体人脸验证sdk)时是不生效且报错，目前的解决方案就是先写个h5端页面 放在服务器上 然后在小程序使用webview进行渲染，uniApp中引用标签<web-view src=" 服务器地址"></web-view>，值得注意的是微信小程序端不支持本地html的地址。
展开
评论
点赞
#每天一个知识点# 4 前端的常用的设计模式和使用场景？
设计原则：开放封闭原则，对扩展开发，对修改封闭；
工厂模式：用一个工厂函数创建实例，隐藏new；jQuery &函数
单例模式：全局唯一的实例（无法生成第二个）；如vuex redux的store,全局唯一的dialog modal
JS是单线程，创建单例很简单；Java是支持多线程的，创建单例要考虑锁死线程，否则多个线程同时创建，单例就重复了（多线程共享进程内存）
代理模式:使用者不能直接访问对象，而是访问一个代理层，在代理层可以监听get set 做很多事情，如ES6 Proxy 实现Vue3的响应式；
观察者模式：window.addEventListener('click',()=>{...})
发布订阅：event.on('event-key',()=>{...}) 绑定事件要记得解绑，防止内存泄漏
装饰器模式：nest.js
设计原则：开放封闭原则，对扩展开发，对修改封闭；
工厂模式：用一个工厂函数创建实例，隐藏new；jQuery &函数
单例模式：全局唯一的实例（无法生成第二个）；如vuex redux的store,全局唯一的dialog modal
JS是单线程，创建单例很简单；Java是支持多线程的，创建单例要考虑锁死线程，否则多个线程同时创建，单例就重复了（多线程共享进程内存）
代理模式:使用者不能直接访问对象，而是访问一个代理层，在代理层可以监听get set 做很多事情，如ES6 Proxy 实现Vue3的响应式；
观察者模式：window.addEventListener('click',()=>{...})
发布订阅：event.on('event-key',()=>{...}) 绑定事件要记得解绑，防止内存泄漏
装饰器模式：nest.js
展开
评论
点赞
#每天一个知识点# 3 实现网页多标签通讯？
1.WebSocket
无跨域限制，需要服务端支持，成本高；
2.localStorage通讯
同域的A和B两个页面，A页面设置localstorage,B页面可监听到localstorage值的修（addEventListener监听storage事件）
3.SharedWorker通讯
SharedWorker是WebWorker的一种，WebWorker可开启子进程执行JS,但不能操作DOM,SharedWOrker可单独开启一个进程，用于同域页面通讯(chrome隐私模式开启调试，不支持IE11)
1.WebSocket
无跨域限制，需要服务端支持，成本高；
2.localStorage通讯
同域的A和B两个页面，A页面设置localstorage,B页面可监听到localstorage值的修（addEventListener监听storage事件）
3.SharedWorker通讯
SharedWorker是WebWorker的一种，WebWorker可开启子进程执行JS,但不能操作DOM,SharedWOrker可单独开启一个进程，用于同域页面通讯(chrome隐私模式开启调试，不支持IE11)
展开
评论
1
#每天一个知识点# 2 节流防抖区别？
debounce和throttling 各有特点，在不同 的场景要根据需求合理的选择策略。
1.如果事件触发是高频但是有停顿时，可以选择debounce；避免登录按钮多次点击的重复提交;调整浏览器窗口大小时，resize 次数太多，造成计算太多，此时需要——防抖
2.在事件连续不断高频触发时，只能选择throttling，因为debounce可能会导致动作只被执行一次，界面出现跳跃。scoll事件，每隔一秒计算一下位置信息等；浏览器播放事件，每个一秒计算下进度信息等;
debounce和throttling 各有特点，在不同 的场景要根据需求合理的选择策略。
1.如果事件触发是高频但是有停顿时，可以选择debounce；避免登录按钮多次点击的重复提交;调整浏览器窗口大小时，resize 次数太多，造成计算太多，此时需要——防抖
2.在事件连续不断高频触发时，只能选择throttling，因为debounce可能会导致动作只被执行一次，界面出现跳跃。scoll事件，每隔一秒计算一下位置信息等；浏览器播放事件，每个一秒计算下进度信息等;
展开
1
3
#每天一个知识点# 1 最近有个需求 其中某个点刚好涉及经典面试题 0.1 + 0.2 != 0.3 ,我是把数字乘10 相加 在除 10，还有什么好的处理方式呢？
4
点赞