![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 82
八了个戒
愿代码之火永不熄灭,技术之光照耀前行!
展开
-
CSS 实现 flex布局最后一行左对齐的方案「多场景、多方案」
在CSS flex布局中,使用来控制列表的水平对齐方式,使用或者对齐时,如果最后一行的列表的个数不满,就会出现最后一行没有完全垂直对齐的问题。👇 如下示例:原创 2024-01-25 11:32:45 · 3150 阅读 · 0 评论 -
关于js复制内容到浏览器原生剪贴板报错:Cannot read properties of undefined (reading ‘writeText‘)的解决方案【已全平台解决】
根据使用浏览器提供的原生功能 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文本到剪贴板。在本地开发,或者说是在使用http://127.0.0.1:8088 或者 http://localhost:8088 本地调试时,是没有问题的,但是如果使用绑定 host 或者使用不安全域(域名+http)时,使用此功能,就会发生下面的报错:Cannot read properties of undefined (reading 'writeText')原创 2024-01-24 16:37:59 · 1465 阅读 · 0 评论 -
「JavaScript基础」一文彻底搞懂JS的事件流以及事件模型
在JavaScript中,事件流和事件模型是处理用户交互的关键概念。深入理解这些概念将使你能够更好地处理和响应用户的动作。本文将详细介绍JavaScript的事件流和事件模型。原创 2024-01-23 18:59:37 · 1587 阅读 · 0 评论 -
一起来加深对 SASS 的理解「最强总结篇,含Demo」
Sass 是一种CSS预处理器,它引入了许多增强和扩展CSS的功能,使样式表的编写更加灵活和可维护。与纯粹的CSS相比,Sass提供了嵌套规则、变量 (nesting)、混合器(mixins)、继承等功能,大大提高了样式表的可读性和可维护性。原创 2024-01-23 10:54:02 · 1128 阅读 · 0 评论 -
JavaScript 常用数组方法之数组扁平化「赶紧收藏」
数组扁平化,就是将一个复杂的嵌套多层的数组,一层一层的转化为层级较少或者只有一层的数组。原创 2023-07-27 12:43:59 · 944 阅读 · 0 评论 -
【MAC OS 命令行】Redis的安装、启动和停止。就是如此简单
上面主要总结了 Redis 的安装、启动停止的使用方式,如果哪里写的有问题,还请大佬指正。希望上面的内容对你的工作学习有所帮助!欢迎各位一键三连哦~各位 加油!✨原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下👍⭐️✏️评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!评论,你的意见是我进步的财富!原创 2023-03-06 17:05:49 · 10496 阅读 · 2 评论 -
require 与 import 两种引入模块方式到底有什么区别?
requireexports和importexport本质上的区别,实际上也就是 CommonJS 规范与 ES Module 的区别。浏览器在不做任何处理时,默认是不支持import和require;babel会将 ES6 模块规范转化成 CommonJS 规范;webpackgulp以及其他构建工具会对 CommonJS 进行处理,使之支持浏览器环境它们有三个重大差异。CommonJS 模块输出的是一个值的拷贝,ES Module 输出的是值的引用。原创 2023-02-28 10:15:03 · 2634 阅读 · 0 评论 -
【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」
在JS最早出现的时候,是为了实现一些简单的功能,但随着浏览器的不断发展,对于JS的要求也越来越高,需要实现一些较为复杂的功能。这个时候开发者为了维护方便,会把不同功能的模块抽离出来写入单独的 js 文件里,但是当项目更为复杂的时候,html 可能会引入很多个js文件,而这个时候就会出现命名冲突,污染全局作用域,代码库混乱不堪等一系列问题,这个时候模块化的概念及实现方法应运而生。原创 2023-02-27 16:45:08 · 446 阅读 · 0 评论 -
关于React抛出异常,Can‘t perform a React state update on an unmounted component.错误的解决方案【已解决】
在进行页面切换时,如果页面中存在异步执行操作 `setState` 或其他操作时,在未执行完成即进行页面切换(此时 react 组件将被销毁),便会抛出此异常信息。Can't perform a React state update on an unmounted component原创 2022-12-22 10:08:52 · 2047 阅读 · 0 评论 -
关于Mac升级系统后,出现 xcrun: error: invalid active developer path 问题的解决方案【已解决】
前段时间更新升级 Mac 版本之后,使用 VS code 终端时出现 `xcrun: error: invalid active developer path` 的问题。xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun原创 2022-11-29 10:42:24 · 4452 阅读 · 1 评论 -
从零开始搭建一套完整的基于 React 框架的 H5 项目「下载即用、收藏不亏」
最近需要新开一个基于 React 移动端的项目。由于网上完整的 H5 初始化项目比较少,所以在此总结一下如何从 0—1 开发一套基于 React 框架的 H5 初始化项目,下载就可以直接进行开发,欢迎大家点赞收藏。............原创 2022-06-07 10:28:05 · 5033 阅读 · 10 评论 -
微信小程序之开发遇到 does not have a method “xxxx“ to handle event “tap“ 问题的解决方案【已解决】
在配置中找不到方法,所以在点击响应时,会有警告,但是程序运行不会报错。这也是小白在学习小程序时经常容易犯的错误,今天竟然把一个开发了多个小程序的我给呆住了,现在就来分析一下产生这个问题的原因有哪些。原创 2022-05-22 19:01:23 · 44047 阅读 · 22 评论 -
简简单单一行代码实现textarea内容原样输出,与微博展示效果类似
写在最前最近在做一个项目,碰到一个问题,其应用场景十分常见,类似于发微博的效果。问题比如我在编辑时:在内容编辑时,使用简单的 <textarea> 进行内容的获取,其中添加分段、空格等样式。需求我需要将编辑的内容原样展示,如果一行内容过多时,进行自动换行处理,且可以实现 \n 的手动换行比如这样展示:解决方案使用 <pre> 标签<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。原创 2022-05-06 15:28:41 · 3187 阅读 · 0 评论 -
【React 进阶】函数组件中 React Hooks 详解与实践
在 16.8 版本之后的 React 发布了新特性 Hooks。 本篇文章主要对该新特性进行了详细讲解,并对一些常用的 Hooks 进行代码演示,希望可以对需要的小伙伴提供一些帮助。原创 2022-05-04 18:07:59 · 1529 阅读 · 0 评论 -
【React 进阶】函数组件 和 类组件 详解区分
时隔一年半之久再次重新学习 React,好多都还是原来的样子,这次我要重新开启 React 的大门,希望各位小伙伴可以一起讨论学习呦~前言今天我们开启第三个专题:React 中函数组件和类组件的区别。一、函数组件 和 类组件1. 函数组件函数组件也称无状态组件,顾名思义就是以函数形态存在的 React 组件。在 hooks 出现之前,react 中的函数组件通常只考虑负责UI的渲染,没有自身的状态,没有业务逻辑代码,是一个纯函数。下面这个函数组件就是一个纯函数,它的输出只由参数props.原创 2022-04-15 10:04:03 · 7479 阅读 · 0 评论 -
【React 进阶】类组件之生命周期钩子详解「基于 React 16.4」
时隔一年半之久再次重新学习 React,好多都还是原来的样子,这次我要重新开启 React 的大门,希望各位小伙伴可以一起讨论学习呦~前言今天我们开启第二个专题:React 中生命周期钩子的使用。我们在学习每个框架的生命周期的时候,都不是去死记硬背他们的顺序和作用,而是应该去结合我们在实际应用开发过程中对这些生命周期的需求,来帮助我们完成一些事情。在新环境下,我们默认都是基于 React 16.4 之后的生命周期进行开发学习,下面的内容也是基于 16.4 版本的生命周期钩子,如果觉得有问题,可.原创 2022-04-12 17:21:58 · 1592 阅读 · 0 评论 -
【React 进阶】props 和 state 的区别详解
时隔一年半之久再次重新学习 React,好多都还是原来的样子,这次我要重新开启 React 的大门,希望各位小伙伴可以一起讨论学习呦~前言今天我们开始第一个专题:React 中 关于 props 和 state。当然我们不是对 props 和 state 基本用法的介绍,而是尝试由浅入深的来解释 props 和 state,并且归纳使用它们时的注意事项。我们在开发应用时,必然是要与数据进行频繁交互的。React 的核心思想是组件化的思想,所有的页面会被切分成一些独立的、可复用的组件。那么数据.原创 2022-02-24 08:30:00 · 7692 阅读 · 0 评论 -
JavaScript 常用字符串方法及使用技巧「超级实用,赶紧收藏,提升效率」
最近项目终于忙完了,在开发时就会暴露出一堆问题,正好趁着这个时间给自己充充电。下面总结了一些关于 JavaScript 常用字符串的操作方法,它可以让我们更高效的处理数据,而不必使用时每次都去查询每个方法怎么用,可以大大提高我们的开发效率哦。正餐开始,来看看 JavaScript 中有哪些常用的字符串方法!1. 获取字符串长度JavaScript 中的字符串有一个 length 属性,该属性可以用来获取字符串的长度const str = 'hello world';str.length .原创 2021-12-15 16:11:57 · 1483 阅读 · 2 评论 -
Mac OS电脑环境下设置hosts的方法【最简单实用方法】
什么是hosts?hosts 是一个没有扩展名的系统文件,其基本作用就是将一些常用的域名与其对应的 IP 地址建立一个关联“ 数据库 ”。当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从hosts文件中寻找对应的 IP 地址,一旦找到,系统就会立即打开对应网页,如果没有找到,则系统会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。Mac 电脑设置hosts的方法?一、打开终端,找到如下图标二、在打开的窗口中输入 sudo vim /ect/hosts 然后按下回车,并输入电脑的原创 2021-09-01 16:44:19 · 9991 阅读 · 0 评论 -
【面试总结系列】在开发 PC 端项目时,需要考虑哪些主流设备浏览器兼容性的问题?
一、问题描述在开发 PC 端项目时,需要考虑哪些兼容性的问题?二、答案详解首先,为什么会出现浏览器兼容问题?各大厂商出于自身利益考虑而设置的种种技术壁垒,都让CSS应用起来比想象得要麻烦;由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床。介绍一下目前最流行的五大浏览器以及五大内核浏览器:IE 浏览器Firefox(火狐)浏览器Chrome(谷歌)浏览器Safari 浏览器Opera 浏览器内核:Tr原创 2021-07-15 14:37:18 · 1373 阅读 · 1 评论 -
从Vue源码学习JavaScript 之 this instanceof Vue
在 lib/sdk.js 中if (!(this instanceof ChainSDK)) { return new ChainSDK(options);}先说结论:这里通过 this instanceof xxx 来判断有没有用 new 关键词调用。那么,为什么可以这么判断呢?我们分别了解一下 this 和 instanceof 的用法。this在 JavaScript 中,this 是动态绑定,或称为运行期绑定的,它可以是全局对象、当前对象或者任意对象,这取决于函数的调用方式。原创 2021-08-16 10:45:29 · 1119 阅读 · 1 评论 -
最新最全的前端面试题集锦之 Vue3.0 篇【干货满满】
该内容主要整理关于 Vue3.0 的相关面试题,关于 Vue 2 的相关面试题请移步至:Vue 全家桶篇,其他内容面试题请移步至 最新最全的前端面试题集锦 查看。1. Vue3.0 里为什么要用 Proxy API 替代 defineProperty API?—— 响应式优化(高频,重点!!!)这是在面试中问的最多的一个问题,无论是大厂还是中小型公司,都喜欢问,也是Vue更新的重点。defineProperty API 的局限性最大原因是它只能针对单例属性做监听。Vue2 中的响应式实现正是.原创 2021-07-08 15:09:07 · 2600 阅读 · 3 评论 -
最新最全的前端面试题集锦之 Vue 全家桶篇(从基础到高级,最新最全最详细解答)
该内容主要整理关于 Vue 的相关面试题,其他内容面试题请移步至 最新最全的前端面试题集锦 查看。一、Vue基础面试题(附答案)1. keep-alive 组件有什么作用?keep-alive 是 vue 的内置组件,而这个组件的作用就是能够缓存不活动的组件。一般情况下,组件进行切换的时候,默认是会进行销毁的,如果我们有需求,在某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用 keep-alive 来实现。在 keep-alive 上有两个属性,可以对字符串或正则表达式进行匹配,匹配.原创 2021-04-08 16:59:14 · 3226 阅读 · 1 评论 -
关于“TypeError: Assignment to constant variable”的问题解决方案
在项目开发过程中,在使用变量声明时,如果不注意,可能会造成类型错误比如:Uncaught (in promise) TypeError: Assignment to constant variable.未捕获的类型错误:赋值给常量变量。原因我们使用 const 定义了变量且存在初始值。 后面又给这个变量赋值,所以报错了。ES6 标准引入了新的关键字 const 来定义常量,const 与 let 都具有块级作用域:使用 const 定义的常量,不能修改它的值,且定义的常量必须赋初值;l原创 2021-03-08 09:58:57 · 48641 阅读 · 2 评论 -
【JavaScript高级】原型与原型链
原型与原型链一直是JavaScript的重难点,掌握这部分内容将会使我们的工作更加的高效,而且这也是面试官必问的内容。首先,我们要明确的是,在js中,我们创建一个实例并不是通过类,而是直接使用构造函数来实现的。构造函数通过 new 函数名 来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。构造函数首字母一般大写。我们使用构造函数来创建一个对象。...原创 2021-02-08 17:12:23 · 527 阅读 · 0 评论 -
前端工程化工具gulp之工具下载失败解决方案
大家在使用前端工程化工具gulp的时候总是会出现下载失败的问题,那么下面我来告诉你,如何自己轻松解决。换个热点重新下载;执行指令 npm cache clear --force , 重复1;如果2不生效,找到 npm 的缓存文件删除掉;(npm 的缓存文件默认在路径 C:\Users\Administrator 中)找到 npmrc | nrmrc 直接删除,再从1 开始重新尝试;如...原创 2020-04-09 19:51:14 · 422 阅读 · 0 评论 -
常用小工具在线网站分享
今天给大家分享几个我们在工作生活中经常用到的在线的小工具。一、流程图绘制软件 ProcessOn这是一个免费在线作图、实时协作的聚合平台。支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等,不需担心下载和更新的问题,不管Mac还是Windows,一个浏览器就可以随时随地的发挥创意,规划工作。也可以将作品分享给团队成员或好友,无论何时何地大家都可以对作品进行编辑、阅读和评论。传送门:ProcessOn使用教程:ProcessOn 使用手册二、文件格式转换器 Convertio该软.原创 2020-12-16 17:05:06 · 1031 阅读 · 0 评论 -
微信小程序之父子组件传值通信与事件触发(最全实用总结)
我们这里说的都是微信小程序的自定义组件的相关内容哦。组件创建组件在对应目录下创建 Components 文件夹,用来存放我们的自定义组件。在刚刚创建的 Components 文件夹中右键 “新建 Component”,创建一组组件。组件类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成,在里面编写对应的内容即可。使用组件使用已注册的自定义组件前,需要在对应的页面或者组件的 json 下引入该组件{ "usingComponents": { .原创 2020-12-23 16:30:42 · 9720 阅读 · 0 评论 -
最新最全的前端面试题集锦之 微信小程序 篇(从基础到高级)
最新最全的前端面试题集锦之 微信小程序 篇(从基础到高级)原创 2020-12-17 14:16:31 · 3522 阅读 · 1 评论 -
最新最全的前端面试题集锦之 JS 篇(从基础到高级)
最新最全的前端面试题集锦之 JS 篇(从基础到高级)原创 2020-12-17 14:15:06 · 1113 阅读 · 2 评论 -
最新最全的前端面试题集锦之 CSS 篇
最新最全的前端面试题集锦之 CSS 篇原创 2021-01-20 14:10:06 · 1218 阅读 · 0 评论 -
最新最全的前端面试题集锦之 HTML 篇
最新最全的前端面试题集锦之 HTML 篇原创 2021-01-15 11:33:56 · 1759 阅读 · 1 评论 -
2024最新最全的前端面试题集锦(2024 持续更新中...敬请关注)
工作以来,感觉自己接触到的东西还是挺多的,但是当我面试的时候,就会发现各种问题,很多知识点都是模棱两可,答得不全面。究其原因,还是没有吃透这些内容。所以我决定,用几个月的时间,将我们大前端的大部分精选面试题进行整理,将大部分知识点进行归纳总结,为自己也为其他小伙伴们提供一份面试学习参考。原创 2020-12-17 14:10:34 · 6087 阅读 · 6 评论 -
常见登录验证方式分析以及流程图示例
常见的登录验证方式账号/邮箱/手机号 + 验证码 + 密码邮箱 + 动态邮箱验证码手机号 + 动态短信/语音验证码第三方授权登录,微信扫码登录等OCR人脸识别校验登录(移动端可用方案,暂未分析)各类验证方式的流程图以及各自特点分析1. 账号/邮箱/手机号 + 验证码(滑块拼图验证、文字点选验证、图标点选验证等) + 密码流程图:验证码框示例:滑块拼图验证:文字点选验证:图标点选验证:此登录验证方式比较常见。优点:(1)此登录验证方式比较常见,用户操作起来已经比较熟悉原创 2020-12-11 14:55:16 · 13642 阅读 · 0 评论 -
微信小程序开发常见warnings警告解决方案
在小程序开发过程中,只要稍不注意代码细节,就会出现很多 warnings 警告,虽然在对小程序的运行并没有什么影响,但是作为一名严谨的程序猿,是不允许它们存在的。下面我将从我的实际项目开发过程中碰到的warnings 问题进行分析处理。Warning 1: Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors。首.原创 2020-12-03 15:33:57 · 8773 阅读 · 4 评论 -
微信小程序之WeUI组件库的使用
本文主要介绍微信小程序中的 WeUI组件库的具体使用方法,通过具体的示例代码进行介绍,相信能够对大家的学习和工作都有一定的参考学习意义,欢迎大家一起学习进步。WeUI组件库 官方文档一、前言WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。二、下载1. git 全部下载:https.原创 2020-11-23 10:42:43 · 8190 阅读 · 4 评论 -
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
前言:现在很多程序上都有左滑删除的效果,其实实现很简单,今天我们主要来记录一下小程序的左滑删除的实现过程。效果图:实现效果:当我们在该条记录上进行左滑操作时,整条记录跟着向左移动,同时右侧的删除按钮会显示出来。当我们点击删除按钮时,就会把该条记录删除掉。如果不想删除该记录,可以右滑取消,或者随意点击一个位置都可以使右侧的删除按钮隐藏回到原样。设计思路:首先在页面上每条 item 记录分为上下两层,上面的 view 包裹正常展示的内容,下面的 view 存放左滑的显示的内容;元素移原创 2020-11-19 16:36:28 · 3967 阅读 · 1 评论 -
微信小程序之去除点击元素出现高亮背景的解决方案
在小程序或者是移动端开发过程中,总是会碰到当你点击一个可以点击的元素的时候,在这个元素下会出现一个高亮的正方形浅蓝色背景。效果如下:解决方案:通过属性 -webkit-tap-highlight-color 进行解决。属性概述:当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。具体内容见:-webkit-tap-highlight-color要解决这个问题,就可以通过禁用这个高亮就可以,只需要设置颜色的alpha值为0即可。page .原创 2020-11-12 15:20:22 · 1996 阅读 · 0 评论 -
微信小程序安全浅析
引言近期微信小程序重磅发布,在互联网界掀起不小的波澜,已有许多公司发布了自己的小程序,涉及不同的行业领域。大家在体验小程序用完即走便利的同时,是否对小程序的安全性还存有疑虑。白泽日前对微信小程序进行初步的安全技术分析,在此整理出来抛砖引玉,如有描述不当的地方,欢迎纠正,轻拍。本文中,大白将从小程序的框架、功能模块安全、账户使用安全方面进行剖析,希望能为各位泽友带来不一样的认知。一、小程序框架概述在第一部分小程序框架概述中,将介绍小程序抽象框架、小程序调用框架和小程序初始化流程。下面让大白来逐转载 2020-11-10 14:01:09 · 3230 阅读 · 0 评论 -
微信小程序开发之分享转发功能多种实现方案(论函数复用的几大姿势)
本文主要用来实现微信小程序的分享转发功能,是将一个小程序转发给其他朋友或者是群聊中,并且目前在微信小程序中如果想要设置全局转发,那又该如何操作呢,关于这个问题,我将分享一篇文章【论函数复用的几大姿势】,下面我也会详细进行介绍。官方文档:微信小程序 · 转发情景一:不带参数直接转发onShareAppMessage: function() { return { title: '转发标题', path: '/pages/index/index', success: function(re.原创 2020-11-04 14:26:56 · 2175 阅读 · 0 评论