JavaScript
coderMozart
这个作者很懒,什么都没留下…
展开
-
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 · 383 阅读 · 0 评论 -
开启vite之旅-初始篇
自古开天辟地之作,必会影响万物。vite作为挑战webpack地位的新进工具,是否有挑战老大哥webpack的资格呢?让我们来一探究竟。首先映入眼帘的是熟悉的命令行,代表着vite的诞生npm init @vitejs/app再次输入以下命令,见证奇迹的时刻到了cd my-projectnpm installnpm run dev奇迹之点在于启动无感的启动时间,此处应有掌声!!!483毫秒,我的个天呢,这是神一般的速度了!!!探究其原因在于,vite采用了esbuild,请看下图原创 2021-06-29 16:26:17 · 229 阅读 · 0 评论 -
前端脚手架
脚手架什么是脚手架?前端项目,无论是PC或者是手机端页面存在大量可以复用的代码,脚手架就是为了快速生成可复用代码的工具问题1.为什么需要脚手架抽出可复用部分,快速开发2.怎么实现脚手架node3.如何抽离可复用代码根据具体项目而定...原创 2021-06-21 10:43:18 · 240 阅读 · 0 评论 -
前端组件化之组件是什么
组件组件是什么新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入组件是什么先来看一段代码//lodash 的 template产生相应的html节点的字符串const compiler = lodash.templa原创 2021-03-02 18:11:01 · 332 阅读 · 0 评论 -
递归流程 与 迭代流程
递归流程:当流程建立一个延迟操作链时,就会发生扩展。收缩发生在实际执行操作时。这种以延迟操作链为特征的流程称为递归流程。 (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 · 397 阅读 · 0 评论 -
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 · 374 阅读 · 1 评论 -
JS中的类数组
类数组举例 let arrayLike = {'0': '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 · 1184 阅读 · 0 评论 -
函数式编程之memories
纯函数:是这样一种函数,即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用。这样的纯函数好处便是可以进行缓存,称之为memorize,只是下面的函数不够健壮function memorize(fn) { let cache = {} return function () { let arg_str = JSON.stringfy(arguments) ...原创 2018-06-14 08:51:33 · 289 阅读 · 0 评论 -
函数式编程之函数组合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 · 577 阅读 · 0 评论 -
排序算法之冒泡排序(BubbleSort)
冒泡排序:数组前后两个元素进行比较,如果前面的元素大于后面的元素就发生交换,第一次遍历数组,最大的就跑到了最前面优化:检测到没有发生交换时,说明已经排好了顺序,直接返回数组即可function BubbleSort (originalArray) { let temp, swapped //进行浅层复制 const array = [...originalAr...原创 2018-08-01 16:29:38 · 624 阅读 · 0 评论 -
解析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 · 733 阅读 · 0 评论 -
图片的延迟加载
问题:后台返回字符串,需要渲染到一本线上书上正则:let reg_has_img = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;解决:通过JS正则中的replace应用首先替换相应的 img标签的src为空,当翻到书的有图的页面后加载图片实现:首先捕获item中HtmlContent中img src中的内容并且把捕获内容pu...原创 2018-04-13 15:53:45 · 293 阅读 · 0 评论 -
正则小探究
const singleAttrIdentifier = /([^\s"'<>/=]+)/const singleAttrAssign = /(?:=)/const singleAttrValues = [ // attr value double quotes /"([^"]*)"+/.source, // attr value, single quotes /'...原创 2018-04-17 11:35:32 · 199 阅读 · 0 评论 -
删除数组中所有指定的item
/** * 移除数组array中所有的元素item * @method removeItem * @param { Array } array 要移除元素的目标数组 * @param { * } item 将要被移除的元素 * @remind 该方法的匹配过程使用的是恒等“===” * @example * ```javascript ...原创 2018-03-08 10:05:31 · 1105 阅读 · 0 评论 -
延迟执行的函数defer
/** * 创建延迟指定时间后执行的函数fn, 如果在延迟时间内再次执行该方法, 将会根据指定的exclusion的值, * 决定是否取消前一次函数的执行, 如果exclusion的值为true, 则取消执行,反之,将继续执行前一个方法。 * @method defer * @param { Function } fn 需要延迟执行的函数对象 * @par...原创 2018-03-08 09:39:06 · 438 阅读 · 0 评论 -
JavaScript分类
let _toString = Object.prototype.toString;function toRawType (value) { return _toString.call(value).slice(8, -1);}//Special ValuetoRawType(null) // "Null"toRawType(undefined) //"Un原创 2018-01-29 10:28:38 · 330 阅读 · 0 评论 -
Vue中的cached
源码:/** * Create a cached version of a pure function. */function cached (fn) { var cache = Object.create(null); return (function cachedFn (str) { var hit = cache[str]; return hit || ...原创 2018-01-31 12:23:55 · 1953 阅读 · 0 评论 -
Vue中的makeMap
源码如下 /** * Make a map and return a function for checking if a key * is in that map. */ function makeMap ( str, expectsLowerCase ) { var map = Object.create(null);原创 2018-01-31 11:36:23 · 1869 阅读 · 0 评论 -
初学webpack
看了好多文章不太满意,其实webpack的文档已经很优秀了,初学者可以从文档学起 1.熟悉核心概念:entry output loader plugins 英文链接好些,中文翻译难免疏忽 2.熟悉基本操作 基本操作中看的是中文版的,里面有一处明显的错误, 如下图: ...原创 2018-08-14 14:53:56 · 175 阅读 · 0 评论 -
var,let,const
首先需要理解作用域:全局作用域、函数作用域、块级作用域(block scope)变量提升的概念前提:在chrome浏览器环境下全局作用域: 函数作用域: 块级作用域: 通过let,const 在 { }中声明变量,可形成块级作用域 但是令人怪异的是 在for循环的 { ...原创 2018-08-20 16:23:07 · 169 阅读 · 0 评论 -
多维数组求最大值
1.利用Array.toString和Math.max.apply({},arr)原创 2018-09-18 17:11:41 · 2582 阅读 · 0 评论 -
leetcode 加一
原题:给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一。最高位数字存放在数组的首位, 数组中每个元素只存储一个数字。你可以假设除了整数 0 之外,这个整数不会以零开头。解答:var plusOne = function(digits) { for(let i = digits.length - 1; i >= 0; i--) { i...原创 2019-06-19 11:01:14 · 168 阅读 · 0 评论 -
电话号码格式化
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 · 1279 阅读 · 0 评论 -
分析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 · 240 阅读 · 0 评论 -
增加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 · 376 阅读 · 0 评论 -
vue的生命周期之beforeCreate
在执行之前利用浏览器环境下的 window.performance.mark() 进行了性能统计源码中执行 beforeCreate 在 \src\core\instance 下的 init.jsinitLifecycle 初始化initEventsinitRender 挂载$createElement 方法...原创 2019-04-04 12:24:52 · 1732 阅读 · 0 评论 -
统一前端代码风格
首先设置vscode的setting.json{ "window.zoomLevel": 0, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": ...原创 2018-12-18 17:32:06 · 940 阅读 · 0 评论 -
理解JavaScript中的作用域和作用域链
作用域和作用域连是JavaScript和其他编程语言的基本概念。然而,这些概念使许多新的JavaScript开发人员感到困惑。掌握JavaScript时,了解这些概念至关重要。什么是作用域?JavaScript中的作用域是指变量的可访问性。也就是说,程序的哪些部分可以访问变量。为什么作用域如此重要呢?作用域的主要好处是安全性。也就是说,可以仅从程序的某个区域访问变量。使用作用域,我们可以...翻译 2019-01-02 11:24:36 · 248 阅读 · 0 评论 -
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 · 706 阅读 · 0 评论 -
JS中的原始数据类型
首先声明JS中的数据类型分为 原始数据类型 Undefined, Null, Boolean, Number, Symbol, String 对象数据类型 Object 其中可被执行的对象叫做函数或方法undefined value 未赋值变量时使用的原始值,例如 var 变量的声明null value 原始值,表示故...原创 2018-12-26 17:55:29 · 1591 阅读 · 0 评论 -
理解JS执行上下文以及执行堆栈
什么是执行上下文?执行上下文是评估和执行Javascript代码的环境的抽象概念。每当在JavaScript中运行任何代码时,它都在执行上下文中运行。执行上下文的类型有哪些?JavaScript中有三种类型的执行上下文全局执行上下文 - 这是默认或基本执行上下文。不在任何函数内的代码位于全局执行上下文中。它执行两件事:它创建一个全局对象,它是一个窗口对象(在浏览器的情况下window,n...翻译 2018-12-26 16:58:59 · 356 阅读 · 0 评论 -
探索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 · 155 阅读 · 0 评论 -
回文趣题
回文数举例: 1234321问题: 求用十进制、二进制、八进制表示都是回文数的所有数字中,大于十进制数10的最小值分析:突破口最简单的二进制开始,首先二进制首位不能为0,根据回文数字的特点可得末位肯定为1,那么这个数字肯定是基数方法: Number.toString(radix) 返回相应得进制数字 Number.toString(radix).split(...原创 2018-10-12 09:47:26 · 305 阅读 · 0 评论 -
JS闭包的应用
1.使函数只执行一次function once(fn) { let once = false; return function () { if(!once) { once = true; fn.apply(this, arguments) } }}原创 2017-12-11 15:17:22 · 225 阅读 · 0 评论 -
JS中的安全模式
例如: var Person = function (name) { this.name = name } var jack = Person('Jack') console.log(jack) // undefined console.log(window.jack) // Jack以上例子属于不安全模式安全模式: var Person = f原创 2017-11-21 10:32:25 · 923 阅读 · 1 评论 -
编程之美
1.将帅问题 for(var i = 1; i < 9; i++ ) { for(var b = 1; b < 9; b++) { if(i % 3 == b % 3) { continue; } else {原创 2017-09-12 14:09:56 · 255 阅读 · 0 评论 -
Window Object:alert() confirm() prompt() methods
para: string; return value: No return value; alert(para); alert()方法在函数中会优先执行, 例如<table> <tr> <td>one</td> </tr> <tr> <td id="c2">two</td> </tr></table><script>原创 2017-02-19 15:24:33 · 326 阅读 · 0 评论 -
原型链中的顺序问题
原型链原创 2017-01-22 14:59:49 · 400 阅读 · 0 评论 -
Object.key()与for...in...
The Object.keys() method returns an array of a given object’s own enumerable properties, in the same order as that provided by a for…in loop (the difference being that a for-in loop enumerates properti翻译 2017-02-12 01:00:24 · 779 阅读 · 0 评论 -
原型模式
原型模式原创 2017-01-22 01:29:51 · 252 阅读 · 0 评论