- 博客(83)
- 收藏
- 关注
RSS订阅原创 React functional component pros前后值对比
import { useEffect, useRef } from 'react';export function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current;}// Usageexport function MyComponent(props) { const { name }
2021-10-13 15:29:34
212
原创 ant design下载
相关代码基本原理 根据返回的blob数据，利用 window.URL.createObjectURL生成url,通过 a 标签下载 const downloadFileByURL = async (url, filename) => { const { data } = await axios({ method: 'get', url: BASE_URL + url, responseType: 'blob', withCredential
2021-10-12 19:34:50
346
原创 开启vite之旅-初始篇
自古开天辟地之作，必会影响万物。vite作为挑战webpack地位的新进工具，是否有挑战老大哥webpack的资格呢？让我们来一探究竟。首先映入眼帘的是熟悉的命令行，代表着vite的诞生npm init @vitejs/app再次输入以下命令，见证奇迹的时刻到了cd my-projectnpm installnpm run dev奇迹之点在于启动无感的启动时间，此处应有掌声！！！483毫秒，我的个天呢，这是神一般的速度了！！！探究其原因在于，vite采用了esbuild,请看下图
2021-06-29 16:26:17
201
原创 前端脚手架
脚手架什么是脚手架？前端项目，无论是PC或者是手机端页面存在大量可以复用的代码，脚手架就是为了快速生成可复用代码的工具问题1.为什么需要脚手架抽出可复用部分，快速开发2.怎么实现脚手架node3.如何抽离可复用代码根据具体项目而定...
2021-06-21 10:43:18
220
原创 前端组件化之组件是什么
组件组件是什么新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入组件是什么先来看一段代码//lodash 的 template产生相应的html节点的字符串const compiler = lodash.templa
2021-03-02 18:11:01
314
原创 Javasctipt对象层级嵌套太深获取时报错
对象层级嵌套太深获取时报错例如const o = {}o.b.a.c// Uncaught TypeError: Cannot read property 'a' of undefinedconst d = {b: null }d.b.a.c// Uncaught TypeError: Cannot read property 'a' of null实际业务中在vue的template中，获取后端返回的数据报错 <div class="report-main-text">
2020-12-15 18:11:55
890
1
原创 element-ui中点击iframe下拉框不收起
项目场景：在页面中存在多个下拉框选项和iframe,当点击有下拉框存在时，点击iframe区域不收起，点击iframe意外区域会收取问题案例：案例链接点击页面中的下拉框组件，再点击红色iframe区域，下拉框不收起，点击红色以外的区域，下拉框收起。@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DAT
2020-12-15 12:15:31
1384
原创 详解Vue中的Vue.extend
相关代码地址Vue.extendVue.extend作用创建一个构造函数，用于创建子类初始化走的路数和 new Vue()走的路数一样,一系列的init实际用例在element-ui中的v-loading
2020-11-06 17:08:45
882
原创 vue2源码解读：new Vue()细节及应用点
源码地址地址1操作方式： F12打开控制台， F5刷新即可跳入断点, 如下图所示：知识点：1. instanceof 检测是不是运用了 new 操作符, 保证了通过原型链（prototype chain）继承了默认的属性，例如$delete,$destroy等2.通过 Object.defineProperty(Vue.prototype, '$data', dataDef)定义的是被继承但不被共享的属性 。Vue.prototype.$set = set;直接定...
2020-11-02 18:40:45
345
原创 CSS函数之var()
CSS变量作用：var()函数用于插入CSS变量的值。CSS变量可以访问DOM，这意味着可以创建具有局部或全局范围的变量，使用JavaScript更改变量，以及基于媒体查询来更改变量。使用CSS变量的一种好方法是涉及设计的颜色。可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。var（）函数的语法var( )函数语法如下：var(name, value)Value Description name 必须. 必须以双破折号开头（--） va.
2020-10-26 18:21:16
2494
翻译 递归流程 与 迭代流程
递归流程：当流程建立一个延迟操作链时，就会发生扩展。收缩发生在实际执行操作时。这种以延迟操作链为特征的流程称为递归流程。 （The expansion occurs as the process builds up a chain ofdeferred operations. The contraction occurs as the operations are actually perf...
2020-03-09 17:24:21
367
原创 leetcode 加一
原题：给定一个由整数组成的非空数组所表示的非负整数，在该数的基础上加一。最高位数字存放在数组的首位， 数组中每个元素只存储一个数字。你可以假设除了整数 0 之外，这个整数不会以零开头。解答：var plusOne = function(digits) { for(let i = digits.length - 1; i >= 0; i--) { i...
2019-06-19 11:01:14
155
原创 电话号码格式化
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...
2019-05-09 10:37:29
1251
原创 分析ES6Promise
简版ES6语法function _Promise(...args) { this.status = "pending"; this.msg = ""; const process = args[0]; process( (...args) => { this.status = "resolve"; this.msg = args[0];...
2019-05-08 11:04:33
228
原创 增加JavaScript的可读性
1.向数组添加最后一项原生方法const list = []const newList = [...list].push('last') // 为了不改变原数组更加可读性的方法const list = []const newList = [...arr, 'last']2.向数组添加第一项原生方法const list = []const newList ...
2019-04-26 11:50:56
362
原创 vue的生命周期之beforeCreate
在执行之前利用浏览器环境下的 window.performance.mark() 进行了性能统计源码中执行 beforeCreate 在 \src\core\instance 下的 init.jsinitLifecycle 初始化initEventsinitRender 挂载$createElement 方法...
2019-04-04 12:24:52
1708
翻译 理解JavaScript中的作用域和作用域链
作用域和作用域连是JavaScript和其他编程语言的基本概念。然而，这些概念使许多新的JavaScript开发人员感到困惑。掌握JavaScript时，了解这些概念至关重要。什么是作用域？JavaScript中的作用域是指变量的可访问性。也就是说，程序的哪些部分可以访问变量。为什么作用域如此重要呢？作用域的主要好处是安全性。也就是说，可以仅从程序的某个区域访问变量。使用作用域，我们可以...
2019-01-02 11:24:36
229
翻译 JS中的值类型和引用类型
如果将原始类型的值赋给变量，我们可以将该变量视为包含原始值。例如const x = 10;const y = 'abc';const z = null;x包含10. y包含'abc'。为了巩固这个想法，我们设想保留这些变量及其各自值在内存中的样子，如下：当我们使用=将这些变量分配给其他变量时，我们将值复制到新变量。它们按值复制。const x = 10;const y = 'ab...
2018-12-27 12:15:54
687
原创 JS中的原始数据类型
首先声明JS中的数据类型分为 原始数据类型 Undefined, Null, Boolean, Number, Symbol, String 对象数据类型 Object 其中可被执行的对象叫做函数或方法undefined value 未赋值变量时使用的原始值，例如 var 变量的声明null value 原始值，表示故...
2018-12-26 17:55:29
1569
翻译 理解JS执行上下文以及执行堆栈
什么是执行上下文？执行上下文是评估和执行Javascript代码的环境的抽象概念。每当在JavaScript中运行任何代码时，它都在执行上下文中运行。执行上下文的类型有哪些？JavaScript中有三种类型的执行上下文全局执行上下文 - 这是默认或基本执行上下文。不在任何函数内的代码位于全局执行上下文中。它执行两件事：它创建一个全局对象，它是一个窗口对象（在浏览器的情况下window，n...
2018-12-26 16:58:59
332
原创 统一前端代码风格
首先设置vscode的setting.json{ "window.zoomLevel": 0, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": ...
2018-12-18 17:32:06
908
原创 探索ESLint
最近在看github上的一个算法库copy到了本地后，发现用了ESLint,在vscode中打开，发现了一种小红线提示错误[eslint] Expected linebreaks to be 'CRLF' but found 'LF'.或[eslint] Expected linebreaks to be 'LF' but found 'CRLF'.直接在.eslintrc 的...
2018-11-02 11:04:41
137
原创 回文趣题
回文数举例： 1234321问题： 求用十进制、二进制、八进制表示都是回文数的所有数字中，大于十进制数10的最小值分析：突破口最简单的二进制开始，首先二进制首位不能为0，根据回文数字的特点可得末位肯定为1，那么这个数字肯定是基数方法： Number.toString(radix) 返回相应得进制数字 Number.toString(radix).split(...
2018-10-12 09:47:26
273
原创 Vue与React的区别
阅读前提：对Vue,React.js有一定的了解1.改变数据改变视图的方式vue 通过 this.obj.a = 'aa' 直接赋值或者 this.$set(this.obj, 'a', 'aa')react 通过 this.setState({a: 'aa'}) 更加的统一化明显，易于查找2.React.js把页面的改变当作一帧一帧的动画对待3.R...
2018-10-09 16:17:33
340
1
原创 CSS之BFC的应用之一清除浮动
阅读前提: 对CSS的BFC有一定的了解当元素设置了浮动后，会脱离正常的文档流，影响到父级元素以外的元素 通过设置父级元素为overflow:auto，虽然创造了BFC但是不够明确而且会出现副作用，可以直接设置父级元素的display:flow-root,明确的说明创造了BFC 举例1，详细的说明可以查看Codepen上的例子 参考链接...
2018-09-12 11:24:54
236
原创 var,let,const
首先需要理解作用域：全局作用域、函数作用域、块级作用域（block scope）变量提升的概念前提：在chrome浏览器环境下全局作用域： 函数作用域： 块级作用域： 通过let,const 在 { }中声明变量，可形成块级作用域 但是令人怪异的是 在for循环的 { ...
2018-08-20 16:23:07
155
原创 初学webpack
看了好多文章不太满意，其实webpack的文档已经很优秀了，初学者可以从文档学起 1.熟悉核心概念：entry output loader plugins 英文链接好些，中文翻译难免疏忽 2.熟悉基本操作 基本操作中看的是中文版的,里面有一处明显的错误, 如下图: ...
2018-08-14 14:53:56
163
原创 CSS之BFC
1. 什么是BFC? 块级元素格式化上下文(Block Formatting Context)是一个至少满足以下任意一个条件的HTML元素： 1.float的值不是none 2.position的值既不是static也不是relative 3.display的值是table-cell，table-c...
2018-08-07 13:10:00
181
原创 排序算法之冒泡排序(BubbleSort)
冒泡排序：数组前后两个元素进行比较，如果前面的元素大于后面的元素就发生交换，第一次遍历数组，最大的就跑到了最前面优化：检测到没有发生交换时，说明已经排好了顺序，直接返回数组即可function BubbleSort (originalArray) { let temp, swapped //进行浅层复制 const array = [...originalAr...
2018-08-01 16:29:38
607
原创 函数式编程之函数组合pipe
function pipe(...fns) { const fns_length = fns.length return (...vals) => { let i = 1 let result = fns[0].apply(null, vals) while(i < fns_length) result = fns[i++](result); ...
2018-06-26 14:38:08
553
原创 函数式编程之memories
纯函数：是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。这样的纯函数好处便是可以进行缓存,称之为memorize,只是下面的函数不够健壮function memorize(fn) { let cache = {} return function () { let arg_str = JSON.stringfy(arguments) ...
2018-06-14 08:51:33
260
原创 JS中的类数组
类数组举例 let arrayLike = {'０': 'JACK', '2': 'LINDA'， length: 2 }类数组判断 有键值对length 且 length 大于 0 小于 JS限制的最大值 (Math.pow(2, 53) - 1） const MAX_ARRAY_INDEX = Math.pow(2, 53) - 1; let isArrayLike = (...
2018-06-13 10:37:42
1170
原创 在不同的手机端dpi会影响1px的宽度，需要进行处理
在不同的手机端dpi会影响1px的宽度，需要进行处理css部分stylus书写主要运用了css3 的 transform 中 的 scaleY 在不同dpi的屏幕上进行 缩放具体例子
2018-06-05 11:04:13
548
原创 MongoDB与Robomongo之启动
1.安装MongoDB与Robomongo MongoDB下载地址 MongoDB选择Commuity Server 并且选择默认方式安装后 在C盘下创建data/db文件夹存储数据 Robomongo下载地址 下载完成后点击connect后新建一个connection并且命名保存 切到安装的mongoDB文件夹内的bin文件夹下面打开cmd,输入mongod...
2018-06-04 14:23:33
288
原创 解析url并获取其参数
/** * 解析url参数 * @example ?id=123&a=b 在Vue路由中会出现id=123&a=b#/CoIndex * @return Object {id:123, a:b} */let url = window.location.searchexport function urlParse () { if (!url) { return } l...
2018-05-21 15:53:22
713
原创 正则小探究
const singleAttrIdentifier = /([^\s"'<>/=]+)/const singleAttrAssign = /(?:=)/const singleAttrValues = [ // attr value double quotes /"([^"]*)"+/.source, // attr value, single quotes /'...
2018-04-17 11:35:32
179
原创 图片的延迟加载
问题：后台返回字符串，需要渲染到一本线上书上正则：let reg_has_img = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;解决：通过JS正则中的replace应用首先替换相应的 img标签的src为空，当翻到书的有图的页面后加载图片实现：首先捕获item中HtmlContent中img src中的内容并且把捕获内容pu...
2018-04-13 15:53:45
246
原创 删除数组中所有指定的item
/** * 移除数组array中所有的元素item * @method removeItem * @param { Array } array 要移除元素的目标数组 * @param { * } item 将要被移除的元素 * @remind 该方法的匹配过程使用的是恒等“===” * @example * ```javascript ...
2018-03-08 10:05:31
1080
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人