前端学习笔记
_揽
所得皆所期 所失皆无畏
展开
-
使用 node --inspect 命令调试js文件执行
Node.js 是一个流行的 JavaScript 运行环境,它允许开发者在服务器端运行 JavaScript 代码。随着应用的复杂性增加,调试成为了开发过程中不可或缺的一部分。Node.js 提供了强大的调试工具,其中 `--inspect` 选项是探索和调试应用的关键。原创 2024-07-21 23:15:28 · 776 阅读 · 0 评论 -
JavaScript 如何判断 URL 是否合法
这个基本的正则表达式涵盖了协议、域名和路径。这种方法的优点是可以根据具体情况调整正则表达式,但劣势是难以适应所有的URL,特别是对于一些不标准的URL形式,可能需要编写更复杂的正则表达式。这种方法的优点是不需要正则表达式,语法简单,而且能够准确地反映浏览器对URL的解析结果。该方法的本质是让浏览器尝试解析给定的URL,如果元素的href属性最终和输入的URL一致,那么这个URL被认为是合法的。综合方法能兼顾正则表达式的灵活性和URL对象的准确性,建立起一道较为全面的URL合法性验证机制。原创 2024-07-21 23:04:09 · 808 阅读 · 0 评论 -
js条件引用
在JavaScript中,条件引用模块通常涉及到在运行时根据条件判断来决定是否加载某个模块。这在某些情况下非常有用,比如在不同环境下使用不同的模块,或者在某些特定条件下才需要某个模块的功能。原创 2024-07-01 16:02:40 · 437 阅读 · 0 评论 -
Bad attr `class` with message: unexpected ```
小程序不支持模版字符串。原创 2024-06-26 11:14:17 · 315 阅读 · 0 评论 -
(简单)html转图片-html2canvas
自己创建一个html然后试一下。原创 2024-06-16 15:00:01 · 480 阅读 · 0 评论 -
(详细)dataTransfer:拖拽修改鼠标样式及属性详解
在拖拽过程中,可以通过对象的dropEffect属性来改变鼠标的样式,从而给用户更直观的反馈。dropEffectnone:显示一个禁止的图标,表示不允许放置。copy:显示一个加号图标,表示将复制数据。move:显示一个四向箭头,表示将移动数据。link:显示一个链条图标,表示将创建链接。原创 2024-06-12 23:23:23 · 1491 阅读 · 0 评论 -
前端的强缓存和协商缓存
前端的强缓存和协商缓存原创 2024-06-12 00:04:00 · 718 阅读 · 0 评论 -
app-ios 内嵌h5的缓存问题
在iOS应用中内嵌H5页面时,可能会遇到缓存问题,导致页面更新不及时。通过Nginx服务器配置来控制缓存行为。例如,可以在Nginx配置文件中添加以下指令以禁止缓存。每次H5项目更新时,更改版本号,这样iOS应用在请求资源时会因为版本号变化而加载新资源。原创 2024-06-11 23:51:14 · 772 阅读 · 0 评论 -
vscode写html不会自动补全
解决VSCode中HTML自动补全功能不工作的问题,可以通过以下几种方法之一进行解决:12打开VSCode的Settings(通过点击左下角的设置图标或使用快捷键Ctrl+Shift+P或Cmd+Shift+P打开命令面板,然后输入settings并选择)。在Settings中,找到Text Editor下的Suggestions部分,确保Suggest的复选框被选中。此外,可以在Files部分,点击Edit in settings.json选项,然后在associations里面加入.ht原创 2024-05-27 19:34:21 · 1658 阅读 · 0 评论 -
vue拖拽@drop不生效解决方式
想要一个原生可以进行拖拽 可以使用HTML5的一个属性。但是你会发现元素拖拽上去了也没有生效。然后在需要放置的元素上注册一个。@drop='函数'原创 2024-05-27 00:02:30 · 689 阅读 · 0 评论 -
开发依赖与运行依赖
因为 npm 的依赖是嵌套的,所以可能看上去 package.json 中只有几个依赖,但实际上它又扩散到 N 个,而 N 个又扩散到 N 平方个,一层层扩散出去,可谓子子孙孙无穷尽也。如果能够尽量减少不使用的依赖,那么就能够节省线上机器的硬盘资源,也可以节省部署上线的时间。,并且添加到 package.json 的 dependencies 里面(这里 i 是 install 的简写,两者均可)。如果要指定版本的,可以把版本号写在包名后面,例如 npm i webpack@3.0.0 --save。原创 2024-05-26 23:36:39 · 588 阅读 · 0 评论 -
html设置draggable拖动展示却是小浏览器标志
这个小浏览器标志是浏览器的默认拖动图标,用来表示该元素是可拖动的。如果您不希望显示小浏览器标志,可以通过CSS来自定义拖动图标。例如,您可以设置一个自定义的鼠标样式来替换小浏览器标志。在这个示例中,custom-cursor.png是一个自定义的图片文件,您可以使用您自己的图片来替换。将这个样式应用到希望作为拖动元素的元素上,可以实现自定义的拖动图标,而不显示浏览器的默认小浏览器标志。如果没有明确将元素设置为可拖动(即draggable="true"),默认会显示小浏览器标志,这是浏览器的默认行为。原创 2024-05-26 23:33:49 · 460 阅读 · 0 评论 -
ios中https网站不允许iframe内嵌http网页链接
从iOS 10版本开始,iOS Safari对于iframe内嵌http网页链接的访问进行了限制,阻止了http网页在https网站中进行iframe内嵌。这是出于安全考虑,以防止不安全的http网页可能导致安全漏洞或信息泄露。因此,如果想在iOS中实现iframe内嵌,建议保证被嵌入的页面都是https的。原创 2024-05-20 00:08:16 · 389 阅读 · 0 评论 -
filter对fixed的影响及解决方法
问题现象我们使用css position: fixed 的时候发现,fixed他竟然不跟随屏幕的进行定位,而是受到含有filter盒子的影响问题原因当在元素中使用了filter滤镜属性的时候,会导致内部fixed元素定位发生错误,即不再相对 viewport 进行定位,而是相对整个filter属性的容器元素进行定位。解决方案产生这个问题的原因就是:当filter不为none的时候,如果该元素或者其子元素具有absolute或fixed属性原创 2024-05-17 01:31:31 · 357 阅读 · 0 评论 -
UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token ‘??=‘ 报错处理
)是ES2021的语法,node v15.0.0以上才支持逻辑空赋值(?之前为了兼容旧代码使用的node版本是14。使用Vue3+Vite创建项目时忽然报这个错。使用nvm切换16的node,成功解决。原创 2024-05-13 00:00:08 · 2003 阅读 · 0 评论 -
前端内嵌iframe网页单点登录的三种方式
方法一:共享sessionStorage或localStorage方法二:设置内嵌iframe的url参数方法三:通过父子页面通信postMessage扩展:同源网页原创 2024-05-12 00:22:50 · 2572 阅读 · 0 评论 -
微信小程序使用蓝牙连接硬件
1deviceid蓝牙设备的id这个参数是蓝牙设备的唯一id2uuid服务的id这个是通过deviceid获取到的这个设备服务的uuid3特性值这个是通过deviceid、uuid获取到的特性值重点:辅助理解这几个值的意思首先deviceid是比较清楚的,它是蓝牙设备的唯一标识它只有一个,它的用途在于找到蓝牙之后进行匹配蓝牙。其次是uuid它是通过deviced获得得到的,通过deviced就可以获取到它蓝牙的所有服务,服务就是蓝牙设置支持的某个能力例如开关led灯。还有服务嘛就是有很多,所以。原创 2024-05-03 22:34:09 · 1822 阅读 · 0 评论 -
iframe父子页面通信
目录 一、 创建父页面和子页面父页面(parent.html):子页面(child.html):二、 实现父子页面之间的通信在父页面的 标签中:在子页面的 标签中:三、扩展:postMessage() 方法的语法:首先,我们需要创建一个包含 iframe 的父页面和一个子页面,在父页面中嵌套子页面并实现它们之间的通信。子页面(child.html):二、 实现父子页面之间的通信在父页面和子页面中,我们可以通过 postMessage 方法来实现跨域通信。以下是一个简单的例子:在原创 2024-04-28 19:21:12 · 1002 阅读 · 0 评论 -
nodemon安装及使用
编写调试Node的时候,项目代码做了修改,需要频繁手动停止,在重新启动,非常繁琐。原创 2024-04-28 00:07:41 · 282 阅读 · 0 评论 -
History 对象的pushState()和replaceState()
window.history属性指向 History 对象,它表示当前窗口的浏览历史。History 对象保存了当前窗口访问过的所有页面网址。下面代码表示当前窗口一共访问过3个网址。由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航。// 后退到前一个网址// 等同于浏览器工具栏的“前进”和“后退”按钮,其实就是对 History 对象进行操作。pushState()方法是在历史记录中增加一条新的记录;原创 2024-04-25 00:32:22 · 4150 阅读 · 0 评论 -
微信开发者工具webview的页面上使用console.log,日志在哪儿看?
webview的页面上使用console.log,日志在哪儿看? | 微信开放社区原创 2024-03-31 14:03:45 · 496 阅读 · 0 评论 -
一个例子弄懂CSS中的 “&“
bordered.float 是串联选择器,作用在同一标签上。.bordered .top 是后代选择器,作用在不同标签上。&是sass的语法,代表上一级选择器。原创 2024-03-19 23:33:57 · 342 阅读 · 0 评论 -
mac电脑启动项目报错 wasm code commit Allocation failed - process out of memory
当您使用 `arch -x86_64 zsh` 命令切换到 x86_64 架构下执行 zsh 终端时,可能导致您的 nvm(Node Version Manager)无法找到,这是因为您进入 zsh 终端后可能会使用不同的环境变量设置。您可以尝试从新加载 nvm 来解决这个问题。如果以上步骤不能解决问题,您还可以尝试通过在 zsh 配置文件(例如 `.zshrc`)中添加 nvm 初始化代码来确保 nvm 在每次启动终端时都会加载。如果 nvm 已经正常加载,您应该可以看到 nvm 的版本信息。原创 2024-03-11 17:10:54 · 640 阅读 · 3 评论 -
git stash 正确用法
一般先使用 git stash list 查看有没有已经 stash 的记录,避免和自己的混淆,到时候使用时不知道是哪条记录。在一个分支开发新功能,还没开发完毕,做到一半时有反馈紧急bug需要处理,但是新功能开发了一半又不想提交。它会保存当前工作进度,会把暂存区和工作区的改动保存到一个未完结变更的堆栈中;查看有无用的 list,可以先使用 git stash drop。命令,就会发现当前是一个干净的工作区,没有任何改动。可以看到 stash@{0} 是刚才保存的。恢复指定的缓存进度到工作区。原创 2024-02-14 16:35:55 · 1775 阅读 · 2 评论 -
react函数组件中使用context
先将父组件引入,然后通过usecontext方法进行接收。中创建一个createcontext并将他导出。原创 2024-02-11 11:42:28 · 1209 阅读 · 0 评论 -
React - 分页插件默认是英文怎么办
目录下的模板页面,全局套一层即可,这样所有的组件都会根据你的多语言设置来做出对应变化。大家可以看到,最后的这个页面跳转提示文字为。如果你想全局生效,如果是。原创 2024-02-11 11:39:58 · 1283 阅读 · 0 评论 -
js文件忽略ESLint语法检查
js文件忽略ESLint语法检查原创 2024-02-11 11:24:16 · 1304 阅读 · 0 评论 -
React报错修复:“Uncaught TypeError: destroy is not a function”
要知道,useEffect 钩子函数的一个特性是清理功能,即return函数。如果你从 useEffect 钩子函数返回任何东西,它必须是一个清理函数,此函数将在组件卸载时运行。相当于类组件中的 componentWillUnmount 生命周期方法。在 JavaScript 中, async...await 会让程序在等待异步任务完成后才会继续执行。异步函数也总是返回一个 Promise;如果函数还没有返回,则返回值会自动包装在 Promise 中。函数中使用了async,运行后会出现该报错。原创 2024-02-11 11:16:38 · 2167 阅读 · 0 评论 -
(简单有案例)前端实现主题切换、动态换肤的两种简单方式
属性名必须使用 --开头在:root中定义(root后面的参数用来区分是哪个主题样式:root[theme='主题名称']可以是数字、字母、下划线、中划线css普通属性可以用的,比如:数字、文本、带单位的长度、角度等等都可以作为属性值注意点大小写敏感:大写 和 小写 不同 的2个属性名,将会是2个属性计算时有效性:自定义属性值可以是任何内容,甚至可能不是css的有效数值,但这并不影响定义,只要保证在使用css自定义属性的地方,最终的计算结果是有效的就可以了。案例/* 默认主题 */原创 2024-02-08 15:59:35 · 1355 阅读 · 0 评论 -
table用position: sticky固定多层表头,滑动滚动条border边框透明解决方法
主要是在元素边框的外围设置轮廓,outline不占据空间,绘制于元素内容周围。同时可以设置轮廓的颜色outline-color,宽度outline-width,以及样式outline-style。:我们发现,只要设置了border边框,这个位置滑动有内容经过就会出现如图的情况。:用outline(轮廓)替代border,以达到我们想要的样式。原创 2024-01-26 23:57:33 · 1399 阅读 · 2 评论 -
overflow产生的滚动条样式设置
设置水平滚动条的高度,垂直滚动的宽度。:设置滚动条里面的滑块样式。:设置滚动条的轨道背景样式。原创 2024-01-26 23:51:53 · 1117 阅读 · 0 评论 -
如何重置某个css属性值(unset)
你用了别人的UI框架,然后你发现,你给css动态赋的值,被UI框架的优先级更高的css覆盖了。你可以写js来改变它,但是如果有很多层循环+操作,你需要写一大段的js,此时js并不是最优的选择,你真正需要的是 'unset'属性。原创 2024-01-26 23:46:16 · 690 阅读 · 0 评论 -
淘宝镜像请求失败解决方法:request to https://registry.npm.taobao.org/vue-loader failed
持久使用npm config set registry。npm install报错:request to。查看镜像源:npm get registry。临时使用npm --registry。配置完成后可通过下面方式来验证是否成功。国内npm镜像源设置。原创 2024-01-23 23:29:07 · 3040 阅读 · 0 评论 -
vue使用el-input监听不了回车事件解决方法
通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的(我觉的这个说法一点也不通俗)。你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native。主要是给自定义的组件添加原生事件。原创 2024-01-16 22:05:35 · 1373 阅读 · 0 评论 -
js的浏览器的监听addEventListener和删除removeEventListener
this.init这里只能放调用的方法名,不要写方法体,否则无法删除。注:resize,方法名定义的要一致。原创 2024-01-16 21:20:40 · 517 阅读 · 0 评论 -
react hooks 中使用 addEventListener 监听事件无法访问到最新的 state 的问题
如上述代码所示,props.asyncData 变化之后 hasAsyncData 设置为 true,然后滚动页面,handleMove 中的 hasAsyncData 仍然为初始值 false。,重新绑定 addEventListener 事件。原创 2024-01-16 21:20:04 · 1220 阅读 · 0 评论 -
React为什么不要直接修改state
在 React 中,状态(state)是组件的一个重要概念,用于管理组件的数据和状态变化。React 强烈建议不要直接修改 state,而是通过使用setState方法来进行状态的更新。下面我将解释为什么不要直接修改 state,并介绍如何正确地修改 state。原创 2024-01-16 21:17:18 · 586 阅读 · 0 评论 -
vue中data的数组怎么操作会重新渲染页面,怎么操作不会渲染页面
这个时候会触发页面重新渲染,因为{a:1}是通过对象的方式进行的数据劫持,也就是说{a:1}有observer。,对于数组调用这些方法都会使用dep.notify()通知视图更新。并且如果方法是push、unshift和。则会对插入的数据再次进行观测。原创 2024-01-16 21:08:48 · 607 阅读 · 0 评论 -
(详细)用js的生成a标签下载文件、并携带请求头
在 JavaScript 中使用标签下载文件时,直接通过标签的点击事件触发下载,是无法设置请求头的,因为这是一个简单的 GET 请求。如果你需要设置请求头,通常会使用 XMLHttpRequest 或 Fetch API 进行更复杂的请求。原创 2024-01-10 10:20:02 · 4473 阅读 · 0 评论 -
React 中 react-i18next 切换语言( 项目国际化 )
平时中会遇到需求,就是切换语言,语种等。其实总的来说都是用i18n来实现的。原创 2023-11-20 21:13:51 · 1451 阅读 · 4 评论