C澒-CSDN博客

原创 Vue和React的运行时，校验引入包的上下文差异

Vue和React的运行时，校验引入包的上下文差异

2023-12-22 11:31:30 813

原创 Vue中props的默认值defalut使用this时的问题

Vue 中 props 的默认值 default 使用 this 时的问题

2022-11-09 11:46:15 3663 1

转载想做好卡片设计，原来要注意这么多细节

入口：想做好卡片设计，原来要注意这么多细节参考文章：（写者推荐参考以及上文内容提及的）比较舒服、好看的颜色代码https://contrast-grid.eightshapes.com/（卡片的颜色搭配可以使用纯色和渐变色。这些颜色与文字之间的对比要符合界面对比度标准，这个网站可以直接查到可用性数值，只要不是DNP就是可以用的配色）优秀的配色方案...

2022-01-13 17:09:18 1032

例1： var a = 1; (function() { console.log(a); let a = 2; })()理解：① JS 引擎在进入预编译阶段时，每进入到一个不同的运行环境都会创建一个相应的执行上下文（execution context），若该环境内有对应的变量，则不会往外找，本例的立即执行函数中检测到 let a = 2，故不会往外找 a 变量；② 进入执行阶段，执行立即函数过程中，变量 a 未声明就直接调用，所以报ReferenceError（在作用域中找不

2022-01-06 09:44:48 567

转载如何从零开始创建React项目（三种方式）

在开发 React 项目前最关键的当然是项目的创建，现在的前端工程化使得前端项目的创建也变得越来越复杂，在这里介绍三种从零开始创建 React 项目的方式，分别是 “在浏览器中直接引入”、“使用官方脚手架 create-react-app” 以及 “使用 Webpack 创建”。浏览器中通过标签直接引入React 框架有两个核心的包，分别是 react 以及 react-dom；若想直接在浏览器中使用 React，那么把这两个包直接引入就可以了。<

2021-12-02 10:47:17 19084 1

原创正则表达式 “中括号[]” 内需要转义的字符（四种情况【含两种特殊情况】）

正则表达式 “中括号[]” 内需要进行转义的四种字符分别为： ^ - [ ] \一、具体情况分析1. 正则表达式中括号内含有 ^ 的情况 ^ 放在最前面时，有特定的含义（见上表第四行），此时需要转义；否则不需要。2. 含有 - 的情况 - 放在中间时，有特定的含义（见上表第四行），此时需要转义；否则不需要。3. 含有 [] 的情况 [] 有特定的含义（见上表第二行），故一定需要转义。4. 含有 \ 的情况 \ 本身就是转义字符，故也是一定需要转义。二、总结综上可知，1、2 点

2021-11-25 16:38:56 14402 10

原创 return 后面的内容加括号和不加括号有什么区别？

完全没有区别。return 是关键字，不是函数，因此其后面的括号不是必须的；加括号易于阅读程序代码，有误括号不影响运行结果。

2021-11-23 17:25:17 4812

转载 try 的 catch 和 promise 的 catch 有什么区别

一、相同点，都是获取代码错误信息的方法，而且都不能获取异步错误1. try… catch… try { console.log(a) } catch (error) { console.log(error) // ReferenceError: a is not defined } try { setTimeout(() => { console.log(a) }, 100) } catch (error) { console.log(er

2021-11-12 15:54:09 3135

转载 vue 中如何解析模板

模板是什么？对于vue来说，模板本质就是一个字符串vue中的模板是有逻辑的，是动态的，如v-if,v-for等与html格式很想，但有很大区别；html是静态的，而vue模板是动态的最终还是要转化为html来显示，怎么才能转换为html来显示呢？看下边 // 这就是vue中的模板 <div id="app"> <input type="text" v-model="value"> <button @click="handleSubmit"&

2021-11-07 17:04:14 4561

转载 jQuery extend 方法使用及实现

一、jQuery extend方法介绍jQuery 的 API 手册中，extend 方法挂载在 jQuery 和 jQuery.fn 两个不同对象上方法，但在 jQuery 内部代码实现的是相同的，只是功能却不太一样；且看官方给出解释：jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中)；jQuery.fn.extend():Me

2021-10-02 16:05:05 4185

原创 js 中的不同的数据类型之间作比较时的“隐式转换规则”

一、js 隐式转换规则1. javascript 隐式转换规则隐式类型转换是在一定场景下，js 运行环境自动调用这几个方法，尝试转换成期望的数据类型ToStringToNumberToBooleanToPrimitive注：有关 javascript 隐式转换规则详情，可参考 Javascript基础：隐式类型转换2.两个数据比较的情况两个数据比较时，如果两边数据不是同种类型的话，按以下规则进行相应的隐式类型类型转换对象 --> 字符串 --> 数值布尔值 --&g

2021-10-02 11:40:38 4031

原创 “加号 +” 的运算原理（详细！！！）

“加号 +” 的运算原理（ “+” 既是一元运算符，也是二元运算符）1. 一元运算符说明：’+’ 号运算符作为一元运算符时，表达式将进行 ToNumber() 操作（隐式类型转换）。① ToNumber(argument) 转换方式：argument类型返回值Undefinedreturn NaNNullreturn 0Booleantrue return 1; false return 0;Numberreturn valueString若字符

2021-10-01 12:03:26 4778

转载 webpack 中，module，chunk 和 bundle 的区别是什么？

Webpack 有非常多的概念，很多名词长得都差不多。我把这些分散在文档和教程里的内容总结起来，写了一份 webpack 中的易混淆知识点，目前看是全网独一份，大家可以加个收藏，方便以后检索和学习。全集链接 ➡️ webpack 易混淆知识点前两天为了优化公司的代码打包项目，恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的，之前看过 webpack 的旧文档，比我们内部项目的文档还要简陋。但是最近看了一下 webpack4 的文档，发现 webpack 官网

2021-09-28 15:13:38 3260

原创具体分析数组去重的多种写法（详细！！！）

1、对数组进行两次遍历

2021-09-27 17:35:50 3054 1

转载有关 Array.prototype.entries() 方法的详解

Array.prototype.entries()entries() 方法返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键/值对。语法 arr.entries()返回值一个新的 Array 迭代器对象。Array Iterator 是对象，它的原型（__proto__:Array Iterator）上有一个 next 方法，可用用于遍历迭代器取得原数组的 [key,value]。示例1、 Array Iterator var arr = ["a", "b",

2021-09-27 12:27:49 3311

转载有关 Array.prototype.includes() 方法的详解

Array.prototype.includes()includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。语法arr.includes(valueToFind[, fromIndex])参数valueToFind 需要查找的元素值。Note: 使用 includes() 比较字符串和字符时是区分大小写。fromIndex 可选从 fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 arr

2021-09-26 21:13:57 3345

转载有关 Object.entries() 方法的详解

Object.entries()Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。语法 Object.entries(obj)参数obj 可以返回其可枚举属性的键值对的对象。返回值给定对象自身可枚举属性的键值对数组。描述Object.entries() 返回一个数组，其元素是与直接在 object 上找到的可枚举属性键值对相对应的数组；

2021-09-26 15:48:34 4684

转载传统 Ajax 已死，Fetch 永生

原谅我做一次标题党，Ajax 不会死，传统 Ajax 指的是 XMLHttpRequest（XHR），未来现在已被 Fetch 替代。最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 $.ajax 迁移到 Fetch，上线一个多月以来运行非常稳定。结果证明，对于 IE8+ 以上浏览器，在生产环境使用 Fetch 是可行的。由于 Fetch API 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读 MDN Promise 教程。旧浏览器不支持 P

2021-09-22 12:15:04 3392

转载在 vue 中使用 SVG 建立图标系统并且使用

首先我们先来学一下 svg 标签的基础知识，参考了阮一峰大神的网络日志，链接：http://www.ruanyifeng.com/blog/2018/08/svg.htmlSVG 全称是可缩放矢量图，其他图像格式是基于像素处理，svg 是属于对图像的形状描述，所以 svg 本质上是文本文件，体积较小，且不管放大多少倍都不会失真。svg 和其他标签一样，可以直接插入到 html 中使用，然后通过 css、js 对其进行其他操作。 <!DOCTYPE html> <html lang=

2021-09-21 12:20:01 3487

原创如何使用 mddir 命令生成目录结构树

2021-09-15 11:40:37 4181

转载有关 Array.prototype.reduce() 方法的详解

Array.prototype.reduce()reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。reducer 函数接收 4 个参数:Accumulator (acc) (累计器)Current Value (cur) (当前值)Current Index (idx) (当前索引)Source Array (src) (源数组)您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为

2021-09-13 16:44:36 3833

转载 JavaScript 中 in 运算符的用法详解

in 如果指定的属性在指定的对象或其原型链中，则 in 运算符返回 true。语法 prop in object参数prop 一个字符串类型或者 symbol 类型的属性名或者数组索引（非 symbol 类型将会强制转为字符串）。objectName 检查它（或其原型链）是否包含具有指定名称的属性的对象。描述下面的例子演示了一些 in 运算符的用法。 // 数组 var trees = new Array("redwood", "bay", "cedar", "oak", "

2021-09-11 16:21:45 18022 1

转载 JavaScript 中有关 concat() 方法的详解

定义和用法concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。语法 arrayObject.concat(arrayX,arrayX,......,arrayX)参数描述arrayX必需；该参数可以是具体的值，也可以是数组对象；可以是任意多个返回值返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元

2021-09-11 15:44:05 4130

原创手写数组快速排序（多种写法）

1. 简介快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序 n 个项目要 Ο(nlogn) 次比较。在最坏状况下则需要 Ο(n2) 次比较，但这种状况并不常见。事实上，快速排序通常明显比其他 Ο(nlogn) 算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地被实现出来。2. 算法步骤① 从数列中挑出一个元素，称为 “基准”（pivot）;② 重新排序数列，所有元素比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面（相同的数可以到任一边）。在

2021-09-10 22:42:10 4873 1

转载 javascript 中 caller 与 callee 的作用以及用法

这两个关键字在平时编码中几乎难以用到，但它们既然存在于javascript语言体系中，那么还是有必要了解下。caller 是 javascript 函数类型的一个属性，它引用调用当前函数的函数 function func() { alert(func.caller); } function func1() { func(); } func1();比如上面的代码，因为 func 函数是被 func1 函数调用的，所以 func 函数中对 cal

2021-09-09 12:06:24 3663

原创什么是伪数组？如何将伪数组转化为标准数组？

什么是伪数组？1. 伪数组的基本特征 ① 无法直接调用数组方法 ② 可以用对真正数组遍历方法来遍历它们 ③ 具有 length 属性2. 常见的伪数组函数内部的 arguments 参数DOM 对象列表（调用 getElementsByTagName，document.childNodes 之类的，它们都返回的 NodeList 对象）jQuery 对象（$(“div”)）注意：伪数组是一个对象如何将伪数组转化为标准数组？声明一个空数组，遍历伪数组把它们添加到所声明的空数组

2021-09-09 11:05:57 3996 1

原创有关 Array.prototype.slice.call() 和 Array.prototype.slice.apply() 方法的详解

对 Array.prototype.slice.call() 和 Array.prototype.slice.apply() 的简要理解1. 逐步拆分解析slice：可从已有的数组中返回选定的元素，不改变原数组。注：有关 splice 方法的详解可参考有关 Array.prototype.slice() 方法的详解Array：Array 是 javascript 的一个引用类型，Array.prototype 属性表示 Array 构造函数的原型，其上有一个方法叫 slice()。注：因此，

2021-09-08 21:32:21 4065 1

转载有关 Array.prototype.slice() 方法的详解

Array.prototype.slice()slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括 end），原始数组不会被改变。语法 arr.slice([begin[, end]])参数begin 可选提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元

2021-09-08 21:26:11 3930

原创行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

行内元素有哪些？常用的行内元素：a - 锚点em - 强调br - 换行img - 图片font - 字体设定(不推荐)span - 常用内联容器，定义文本内区块input - 输入框label - 表格标签select - 项目选择strong - 粗体强调不常用的行内元素：i - 斜体b - 粗体(不推荐)q - 短引用；u - 下划线；s - 中划线(不推荐)；tt - 电传文本；sup - 上标；sub - 下标；big - 大字体；dfn - 定义

2021-09-07 16:09:57 6513 3

转载 webpack是什么？有什么用？

webpack 是什么？webpack 又有什么用？本篇文章将来给大家介绍一下 webpack 的含义以及 webpack 的使用方法，有需要的朋友可以看一看，希望对你有所帮助。话不多说，我们直接进入正题~webpack 是什么？我们从官网上可以知道：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，

2021-09-05 15:58:45 4346

转载有关 Array.prototype.filter() 方法的详解

Array.prototype.filter()filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。语法 var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])参数callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数： element 数组中当前正在处理的元素。 index

2021-09-05 11:27:28 4143

转载浅谈SPA、SEO、SSR

前后端分离算是最近Web开发的大趋势了，目前已经有大量的公司使用了前后端分离的开发方式。那我们就来大概谈谈前后端分离开发中必须要了解和接触的几个概念：SPA、SEO和SSR。在谈这几个概念之前，先来聊聊我理解的前后端分离。我理解的前后端分离背景最开始接触Web前后端大概是一年多前，那个时候打算参加一个比赛，因为没人写后端和Web前端，所以就开始自己学，然后边学边做。另外当时我们的项目还有移动端，所以后端除了提供数据渲染Web前端的页面以外还得给移动端提供接口，实际上两端的数据大多都是相同的。传统的W

2021-09-02 17:21:18 4312

转载 vue组件间通信六种方式（完整版）

前言组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 组件间通信的几种方式，如 props、$emit/$on、vuex、$parent / $child

2021-08-31 22:59:46 9921 2

转载有关 Array.prototype.splice() 方法的详解

转载自 MDN Web Docs Array.prototype.splice()

2021-08-29 20:30:26 3885

转载你不能错过的超赞色彩组合

知道如何准确地组合颜色是设计师需要掌握的一项关键技能。那么有哪些比较好的色彩组合呢？本文将会给你带来一些灵感和启发。1. 了解色彩组合的基础就科学而言，为了建立和谐的色彩搭配，您应该了解一些颜色的相互作用。创建良好的色彩搭配取决于是否掌握色彩轮盘并了解色彩。三原色：红色，黄色和蓝色二次色：绿色，橙色和紫色（当将三原色中的任何两个融合时出现）三次色：蓝绿色，红紫色（混合主色和二次色时会出现）颜色也有温度的，如果您在色彩轮盘的正中心画一条线，则会把色度分成冷暖两类。暖色：红色，

2021-08-28 15:47:53 6645

转载谈谈 VUE 中 methods、watch 和 compute 三者之间区别和联系

本篇文章主要介绍了谈谈 VUE 中 methods、watch 和 compute 的区别和联系，具有一定的参考价值，有兴趣的可以了解一下《他三个是啥子关系呢？》一、从作用机制和性质上看待 methods、watch 和 computed 的关系1. 作用机制上 ① watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用

2021-08-26 23:30:55 4481

转载彻底理解JavaScript原型链（一）—proto的默认指向

JavaScript 的原型链系统着实让人头痛，在查阅了各种资料之后，终于总结出了基于几条通用规则和少数例外情况的 js 原型链逻辑，下面就让我们来一起看看是怎样的一个原理。虽然 JavaScript 里一切皆对象，但为了理解原型链系统，我们需要将 JavaScript 的对象分为对象和函数两大类。在此基础上，JavaScript 的原型链逻辑遵从以下通用规则：通用规则① 对象有 __proto__ 属性，函数有 prototype 属性；② 对象由函数生成;③ 生成对象时，对象的 __proto

2021-08-24 23:53:51 4503

空空如也

有关克隆函数里的强制类型转换问题