coderMozart的博客

React functional component pros前后值对比

coderMozart — Wed, 13 Oct 2021 15:29:34 +0800

import { useEffect, useRef } from 'react'; export function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current; } // Usage export function MyComponent(props) { const { name }

ant design下载

coderMozart — Tue, 12 Oct 2021 19:34:50 +0800

相关代码基本原理根据返回的blob数据，利用 window.URL.createObjectURL生成url,通过 a 标签下载 const downloadFileByURL = async (url, filename) => { const { data } = await axios({ method: 'get', url: BASE_URL + url, responseType: 'blob', withCredential

开启vite之旅-初始篇

coderMozart — Tue, 29 Jun 2021 16:26:17 +0800

自古开天辟地之作，必会影响万物。 vite作为挑战webpack地位的新进工具，是否有挑战老大哥webpack的资格呢？让我们来一探究竟。首先映入眼帘的是熟悉的命令行，代表着vite的诞生 npm init @vitejs/app 再次输入以下命令，见证奇迹的时刻到了 cd my-project npm install npm run dev 奇迹之点在于启动无感的启动时间，此处应有掌声！！！ 483毫秒，我的个天呢，这是神一般的速度了！！！探究其原因在于，vite采用了esbuild,请看下图

前端脚手架

coderMozart — Mon, 21 Jun 2021 10:43:18 +0800

脚手架什么是脚手架？前端项目，无论是PC或者是手机端页面存在大量可以复用的代码，脚手架就是为了快速生成可复用代码的工具问题 1.为什么需要脚手架抽出可复用部分，快速开发 2.怎么实现脚手架 node 3.如何抽离可复用代码根据具体项目而定 ...

前端组件化之组件是什么

coderMozart — Tue, 02 Mar 2021 18:11:01 +0800

组件组件是什么新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入组件是什么先来看一段代码 //lodash 的 template产生相应的html节点的字符串 const compiler = lodash.templa

Javasctipt对象层级嵌套太深获取时报错

coderMozart — Tue, 15 Dec 2020 18:11:55 +0800

对象层级嵌套太深获取时报错例如 const o = {} o.b.a.c // Uncaught TypeError: Cannot read property 'a' of undefined const d = {b: null } d.b.a.c // Uncaught TypeError: Cannot read property 'a' of null 实际业务中在vue的template中，获取后端返回的数据报错

element-ui中点击iframe下拉框不收起

coderMozart — Tue, 15 Dec 2020 12:15:31 +0800

项目场景：在页面中存在多个下拉框选项和iframe,当点击有下拉框存在时，点击iframe区域不收起，点击iframe意外区域会收取问题案例：案例链接点击页面中的下拉框组件，再点击红色iframe区域，下拉框不收起，点击红色以外的区域，下拉框收起。 @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DAT

详解Vue中的Vue.extend

coderMozart — Fri, 06 Nov 2020 17:08:45 +0800

相关代码地址 Vue.extend Vue.extend作用创建一个构造函数，用于创建子类初始化走的路数和 new Vue()走的路数一样,一系列的init 实际用例在element-ui中的v-loading

vue2源码解读：new Vue()细节及应用点

coderMozart — Mon, 02 Nov 2020 18:40:45 +0800

源码地址地址1 操作方式： F12打开控制台， F5刷新即可跳入断点, 如下图所示：知识点： 1. instanceof 检测是不是运用了 new 操作符, 保证了通过原型链（prototype chain）继承了默认的属性，例如$delete,$destroy等 2.通过 Object.defineProperty(Vue.prototype, '$data', dataDef)定义的是被继承但不被共享的属性。Vue.prototype.$set = set;直接定...

CSS函数之var()

coderMozart — Mon, 26 Oct 2020 18:21:16 +0800

CSS变量作用：var()函数用于插入CSS变量的值。 CSS变量可以访问DOM，这意味着可以创建具有局部或全局范围的变量，使用JavaScript更改变量，以及基于媒体查询来更改变量。使用CSS变量的一种好方法是涉及设计的颜色。可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。 var（）函数的语法 var( )函数语法如下： var(name, value) Value Description name 必须. 必须以双破折号开头（--） va.

递归流程与迭代流程

coderMozart — Mon, 09 Mar 2020 17:24:21 +0800

递归流程：当流程建立一个延迟操作链时，就会发生扩展。收缩发生在实际执行操作时。这种以延迟操作链为特征的流程称为递归流程。（The expansion occurs as the process builds up a chain ofdeferred operations. The contraction occurs as the operations are actually perf...

leetcode 加一

coderMozart — Wed, 19 Jun 2019 11:01:14 +0800

原题：给定一个由整数组成的非空数组所表示的非负整数，在该数的基础上加一。最高位数字存放在数组的首位，数组中每个元素只存储一个数字。你可以假设除了整数 0 之外，这个整数不会以零开头。解答： var plusOne = function(digits) { for(let i = digits.length - 1; i >= 0; i--) { i...

电话号码格式化

coderMozart — Thu, 09 May 2019 10:37:29 +0800

const validateMobile = (val) => { val = val.replace(/[^\d]/g, '').substr(0,11) if (val.length <= 3) { return val } else if (val.length <= 7) { val = val.replace(/(\d{3})(\d{0,4...

分析ES6Promise

coderMozart — Wed, 08 May 2019 11:04:33 +0800

简版ES6语法 function _Promise(...args) { this.status = "pending"; this.msg = ""; const process = args[0]; process( (...args) => { this.status = "resolve"; this.msg = args[0]; ...

增加JavaScript的可读性

coderMozart — Fri, 26 Apr 2019 11:50:56 +0800

1.向数组添加最后一项原生方法 const list = [] const newList = [...list].push('last') // 为了不改变原数组更加可读性的方法 const list = [] const newList = [...arr, 'last'] 2.向数组添加第一项原生方法 const list = [] const newList ...

vue的生命周期之beforeCreate

coderMozart — Thu, 04 Apr 2019 12:24:52 +0800

在执行之前利用浏览器环境下的 window.performance.mark() 进行了性能统计源码中执行 beforeCreate 在 \src\core\instance 下的 init.js initLifecycle 初始化 initEvents initRender 挂载$createElement 方法 ...

理解JavaScript中的作用域和作用域链

coderMozart — Wed, 02 Jan 2019 11:24:36 +0800

作用域和作用域连是JavaScript和其他编程语言的基本概念。然而，这些概念使许多新的JavaScript开发人员感到困惑。掌握JavaScript时，了解这些概念至关重要。什么是作用域？ JavaScript中的作用域是指变量的可访问性。也就是说，程序的哪些部分可以访问变量。为什么作用域如此重要呢？作用域的主要好处是安全性。也就是说，可以仅从程序的某个区域访问变量。使用作用域，我们可以...

JS中的值类型和引用类型

coderMozart — Thu, 27 Dec 2018 12:15:54 +0800

如果将原始类型的值赋给变量，我们可以将该变量视为包含原始值。例如 const x = 10; const y = 'abc'; const z = null; x包含10. y包含'abc'。为了巩固这个想法，我们设想保留这些变量及其各自值在内存中的样子，如下：当我们使用=将这些变量分配给其他变量时，我们将值复制到新变量。它们按值复制。 const x = 10; const y = 'ab...

JS中的原始数据类型

coderMozart — Wed, 26 Dec 2018 17:55:29 +0800

首先声明JS中的数据类型分为原始数据类型 Undefined, Null, Boolean, Number, Symbol, String 对象数据类型 Object 其中可被执行的对象叫做函数或方法 undefined value 未赋值变量时使用的原始值，例如 var 变量的声明 null value 原始值，表示故...

理解JS执行上下文以及执行堆栈

coderMozart — Wed, 26 Dec 2018 16:58:59 +0800

什么是执行上下文？执行上下文是评估和执行Javascript代码的环境的抽象概念。每当在JavaScript中运行任何代码时，它都在执行上下文中运行。执行上下文的类型有哪些？ JavaScript中有三种类型的执行上下文全局执行上下文 - 这是默认或基本执行上下文。不在任何函数内的代码位于全局执行上下文中。它执行两件事：它创建一个全局对象，它是一个窗口对象（在浏览器的情况下window，n...