![](https://img-blog.csdnimg.cn/20210309090132267.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web
文章平均质量分 94
Web前端
XianZhe_
简单的事情重复做上百次上千次,体会是不同的,在往前冲的同时也不要忘记了身后所走过的路,加油吧骚年!
展开
-
『精』Sass 核心程序设计指南(这一篇就够了!)
Sass(英文全称:Syntactically Awesome Stylesheets),在前端领域中,Sass 作为 CSS 的预处理器,即使没使用过,大概率也或多或少听说过 Sass。Sass 包括两套语法。最开始的语法叫做“缩进语法”,与 Haml 类似,使用缩进来区分代码块,并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”,使用和 CSS 一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法分别对应 .sass 和 .scss 两个文件扩展名。原创 2024-04-26 10:27:45 · 400 阅读 · 2 评论 -
NVM NodeJs版本管理 通关宝典
NVM 是对于不同版本 NodeJs 的管理工具,NVM 允许安装不同版本 NodeJs,并通过命令行在这些版本之间切换,最大程度上解决在一台机器上对于依赖不同版本 NodeJs 项目,需要来回重装对应 NodeJs 版本的问题。个人觉得,使用 NVM 比使用 Node 安装包的安装流程还要简便,相比较传统的 NodeJS 安装包,NVM 的安装可谓是非常简易,也就四流程,排除掉开始、确定流程,实际需要操作的也就两个地方。**在使用之前,请确保卸载任何预先存在的 Node 安装,**打开 NVM 的。原创 2024-01-05 16:24:31 · 1070 阅读 · 0 评论 -
『精』CSS 小技巧之BEM规范
BEM风格规范指的是 Block、Element、Modifier 这三者的简称,这个规范将 CSS 拆分成块、元素、修饰符,根本作用是帮助开发者快速理解HTML与 CSS 之间的关系。那么通过使用 BEM 能获得到什么好处呢?如果我们想制作一个组件的新样式,比如改个字体/背景色,可以很容易地看到有哪些样式项已经存在,只需要新增一个修饰符即可,甚至可能意识到一开始就不需要编写任何样式,有一个预先存在的修饰符可以满足我们的需求。原创 2023-12-27 18:16:36 · 919 阅读 · 0 评论 -
『精』Vue 组件如何模块化抽离Props
假如有这么一个用于签名的组件,能够控制画笔的大小、颜色、画布背景颜色宽高、按钮的文案提示等,那么它的属性必定是有十几个选项,假设 800 行代码里可能就得花费 100 行去声明这些属性,这明显是不合适的。从优化的角度上看,Vue 的Props声明方式都是一样的,同样的代码写多次显得有些冗余,那不妨将这些 Props 声明再次优化一下,编写一个公共的 Props 辅助工具进行声明。其实 ElementUI 的源码也是这么去做的,以 el-empty 组件为例,源码中对于属性的分离是这么写的。原创 2023-11-04 21:56:34 · 849 阅读 · 3 评论 -
Vue3 如何在<script setup>里设置组件name属性
一般情况,在 ``语法糖下,大多数人往往将其忽略,毕竟确实很少用得上 name 属性,但如果需要用到时,却为怎么声明使用犯起了难,**即使 Vue 在默认情况下会将文件名定义为 name 属性**,但文件名是可以重复的,如出现一大堆 `index.vue` ,阁下又将如何应对呢。我们先来看看在什么场景下需要使用到 name 属性,或则说 name 属性具体能够做什么,有什么用。原创 2023-11-03 22:18:52 · 8739 阅读 · 7 评论 -
『速查手册』HTML 语义化标签 | 语义化标签必要性?
页面更容易阅读的同时,爬虫也够更加容易去捕获页面内容,这对于一些敏感的数据不太友善,但好消息是通过 Ajax 动态加载、AES 非对称加密等手段能够一定手段遏制爬虫,存在一定防范手段,哪怕是使用 Seleunium 等方式直接获取页面加载后的源码,不使用语义化元素也阻止不了被爬虫抓取数据,转念一想语义化标签不显得是引狼入室。,也不能凭此得到领导赏识而升职加薪,对于习惯传统标签的人来说,还会增加学习成本,降低编写效率,属于是费力不讨好的类型。在大多数情况下,我们说的语义化元素指的是 HTML5 中新增元素,原创 2023-03-17 17:46:26 · 979 阅读 · 1 评论 -
TypeScript 使用 ES6 解构骚操作
简单来说,typescript 认为传入的对象的某个属性一定是有值的,在解构中一定是可以解析出来这个值,自行设置的默认值形同虚设,是没有意义的。按照传统的类型声明方式,你可能会这么做👇,但很遗憾这种语法一样还是会报错,这与 ES6 语法冲突了。解决方法也很简单,既然编译器认为这个属性一定有值,那么只需要告诉编译器存在可能存在没有值的情况就行了,改成类型可选参数。但上面的语法放到 typescript 中会出现报错,原因很简单,相信在编写过程中难免会遇到这个问题,在明明是有默认值的情况下,抛出。原创 2023-02-28 16:01:05 · 1573 阅读 · 3 评论 -
JavaScript 两种方案打开文件对话框
文件系统访问API是一个很新的概念,允许web应用程序直接读取或保存用户设备上的文件和文件夹的更改,此 API 目前纯粹是一个 JavaScript API,并且不与表单或输入元素集成,这和以往的。文件流处理之前的第一关是打开文件对话框让用户选取文件,本文主要讲解如何打开这个文件对话框,同时带来了一种对于文件系统操作的新概念 API。要明确一点的是文件对话框是浏览器的功能,开发者不能自定义文件对话框,或是直接操作用户目录文件,要做的只是指引用户打开文件对话框选中目录文件。属性能控制文件上传类型与多选。原创 2023-02-24 17:47:36 · 9953 阅读 · 2 评论 -
CSS 这个就叫优雅 | 多行文本溢出省略
在编写页面时,难免会用到文本溢出处理,但如果每遇到一次就要把上面的样式重新再写一次的话未免过于繁琐。如果你正在使用SCSS/LESS这种CSS预处理语言,那么我强烈建议你对其进行封装处理。原创 2023-01-09 16:46:01 · 2997 阅读 · 0 评论 -
CSS 奇技淫巧Box-shadow实现圆环进度条
其实使用Box-shadow进行实现的关键点在于控制阴影按照顺序延时移动,移动的越快速度则越快,反则越慢。为解决最后一阴影移动便宜的问题,需要新增一个优先级高的阴影提前进行覆盖,当然嫌麻烦的话可以不用。因为是移动四个不同的阴影来控制进度,在阴影的切换处很明显会有顿挫感,对于需要平滑进度条的场景来说不太适用,但对于需要顿挫感的场景来说又很适用,可谓是一把双刃剑,关键要看在哪里用。使用阴影控制圆环进度条,这个方法是比较难想到的,实现起来还需要一层父元素,编写起来需要一定的熟练度。原创 2022-12-29 18:22:06 · 3689 阅读 · 0 评论 -
JavaScript 隐秘者 | Console.xxx竟然如此好用
除了平时用起来比较频繁的.log()、.warn()、.error()、.dir()方法,不妨可以再试试.count()、.group()、等,都是很实用方便的控制台接口,浏览器为了能够让开发者开发起来更轻松想了很多办法,合理运用这些接口能够在开发调试过程中如虎添翼。火狐浏览器对消息等级是分的比较细,如果要对不同的消息类型进行明显区分,不妨试试火狐浏览器。原创 2022-12-29 17:49:10 · 1663 阅读 · 0 评论 -
《微信小程序开发》 页面导航最强详解 | 如何对小程序页面进行跳转?
小程序能够在不同的页面进行跳转切换,路由起到了至关重要的作用,所有页面的路由全部由小程序框架进行管理,要想开发好小程序,路由可谓是一门必修课。在使用方面上区分,小程序的路由和Vue类似,分为 命名式导航 和 编程式导航 两种,只不过路由的切换方式、传参方式等有所不同。同时微信小程序的导航跟 uni-app 十分相似,学会原生的微信小程序,相信对于使用 uni-app 是没有问题的。在本文演示代码中,tabbar 页面配置如下, 其余页面均为非 tabbar 页面。二、命名式导航与编程式导航对应表1、原创 2022-07-07 14:54:37 · 5187 阅读 · 1 评论 -
JavaScript ES6 奇妙的Symbol类型(╹ڡ╹ )
JavaScript ES6 妙用的Symbol类型文章目录JavaScript ES6 妙用的Symbol类型一、Symbol二、三、所拥有的属性方法四、五、参考资料💕相关博客🍗原创 2022-05-09 14:44:37 · 959 阅读 · 0 评论 -
Javascript ES6集合(SET)类型✪ ω ✪
Javascript ES6集合(SET)类型✪ ω ✪一、集合集合(Set),是ES6中新出的数据类型,这于数学中的集合概念是一样的。在讲解 JS 的集合之前,我觉得还是有必要先回顾一下数学集合中的主要分类:并集,交集,差集原创 2022-04-27 16:12:35 · 1413 阅读 · 0 评论 -
使用 PyCharm、WebStorm、IDEA 的 File Watcher 插件实时更新文件
使用 PyCharm、WebStorm、IDEA 的 File Watcher 插件实时更新文件文章目录使用 PyCharm、WebStorm、IDEA 的 File Watcher 插件实时更新文件一、File Watcher 实时更新文件二、获取并打开 File Watcher参考资料💕推荐博客🎀原创 2022-04-21 20:48:11 · 5231 阅读 · 0 评论 -
JavaScript 各声明var、let、const方式区别『详解』
JavaScript 变量声明三种方式的区别『var、let、const』文章目录JavaScript 变量声明三种方式的区别『var、let、const』一、变量声明二、提前声明三、var 变量声明四、let 变量声明五、const 常量声明六、var、let和const应用场景参考资料相关博客🍗原创 2022-03-27 02:59:04 · 2417 阅读 · 0 评论 -
CSS 长度单位的详解『你还是只会使用PX吗?(╬▔皿▔)╯』
CSS 长度单位的详解『你还是只会使用PX吗?』文章目录CSS 长度单位的详解『你还是只会使用PX吗?』一、CSS的长度单位🥣二、绝对长度单位三、相对长度单位四、相对长度的应用参考资料🥪相关博客一、CSS的长度单位🥣CSS中有相当一部分属性的值是需要使用到长度,而说到长度就一定会有长度单位的出现,长度单位在CSS中并不是统一的。CSS的长度单位主要分为绝对长度单位和相对长度单位。1、in(英寸)2、cm 厘米3、mm 毫米原创 2022-03-20 20:35:48 · 2477 阅读 · 0 评论 -
CSS 伪类和伪元素的区别以及详解o((>ω< ))o
一、伪类🛸**关于伪类的定义,先来看看在 CSS3 建议文档是怎么说的:**- 伪类存在的意义是为了通过选择器找到那些 ①不存在于DOM树中的信息 以及 ②不能被常规CSS选择器获取到的信息- 伪类由一个冒号 `:` 开头,冒号后面是伪类的名称和包含在圆括号的可选参数。- <font color=green>任何常规选择器都可以在任何位置使用伪类。- 一些伪类的作用会互斥,另外一原创 2022-03-13 23:29:11 · 1961 阅读 · 1 评论 -
JavaScript 编写Date 格式化方法『Python风格』
JavaScript 手动编写Date对象 日期格式化方法『Python风格ヾ(•ω•`)o』文章目录JavaScript 手动编写Date对象 日期格式化方法『Python风格ヾ(•ω•`)o』Python与JS 日期对象对比JS 日期格式化Python与JS 日期对象对比在学习编写JS脚本的时候,一直觉得JS中的Date对象对于日期格式化方法很不友善,完全没有Python那么方便,我就在想能不能自己编写一个类似 Python风格的日期格式化方法,于是这篇笔记就此诞生先来看看,在输出一样的时间格式原创 2021-06-10 08:49:04 · 1317 阅读 · 8 评论 -
JavaScript 生成随机验证码
JavaScript 生成随机验证码文章目录JavaScript 生成随机验证码原创 2021-03-20 13:45:37 · 1044 阅读 · 0 评论 -
CSS 关于 选择器的优先级(重点)
CSS 关于 选择器的优先级(重点)文章目录CSS 关于 选择器的优先级(重点)权重标签选择器类选择器ID选择器内联样式权重标签选择器类选择器ID选择器内联样式原创 2021-02-25 14:21:32 · 454 阅读 · 3 评论 -
CSS 这就是 定位(重点)
CSS 这就是 定位(重点)文章目录CSS 这就是 定位(重点)position属性相对定位绝对定位固定定位定位对行内元素的影响定位层级相关博客position属性position 属性指定了元素的定位类型原创 2021-02-16 20:51:49 · 176 阅读 · 0 评论 -
CSS 浮动与清除浮动(重点)
CSS 浮动与清除浮动文章目录CSS 浮动与清除浮动 标准文档流浮动清除浮动浮动的破坏性固定高度法内墙法伪元素清除法overflow属性标准文档流首先了解一下什么是标准文档流标准文档 流,重点突出这个流字,是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。可以想象成这是在铺地砖,而 标准流派 铺地砖顺序 就是从左往右,从上往下。标准流的微观现象:空白折叠现象在我们写Html的时候,多个空格会被合并成一个空格显示在浏览器中,如下面的img标签,如果想让img原创 2021-02-08 22:44:01 · 385 阅读 · 0 评论 -
CSS 文字属性和文本属性
CSS 字体属性和文本属性文章目录CSS 字体属性和文本属性字体属性font-familyfont-weight字体属性font-family设置字体,可以把多个字体名称作为一个“回退”系统来保存从左往右的优先级顺序,若浏览器不支持第一个字体,就会尝试下一个,以此类推直到浏览器支持所选择的字体。示例body {font-family: “Microsoft Yahei”, “微软雅黑”, “Arial”, sans-serif}font-weight设置字体粗细**取值范围原创 2021-02-04 18:02:23 · 698 阅读 · 1 评论 -
Html标签 全称、简写记忆大全
Html标签 全称、简写记忆大全文章目录Html标签 全称、简写记忆大全Html常用标签Html列表标签Html表格标签Html常用标签Html标签标签格式标签意义英文全称中文释义h1~h6<hx>内容</hx>标题Header 1 ~ Header 6标题1 ~ 标题6p<p>内容</p>段落Paragraph段落strong<strong>内容</strong>加重/原创 2021-01-30 20:14:27 · 608 阅读 · 0 评论 -
CSS 各种选择器总结
CSS 选择器总结文章目录CSS 选择器总结语法,选择器种类,基础选择器,标签选择器示例,id选择器示例,class类选择器示例,高级选择器,后代选择器示例,子代选择器示例,组合选择器示例,交集选择器(了解)示例,伪类选择器示例,语法,选择器{ 属性: 值}作用: 选择Html(网页)上的[元素、标签],并且设置对应的样式。选择器种类,基础选择器,标签选择器对Html页面中原创 2021-02-02 21:28:31 · 421 阅读 · 2 评论