JavaScript
文章平均质量分 89
这LOGO好像 你所不知道的JS 那本书啊……
GoldenaArcher
Done is better than perfect
展开
-
JavaScript 笔记部分导航
重新学习了一下,可以算是用自己的语言重新组织了一下上面的笔记,并且增添了自己写的一个小案例,感觉现在才算是对 iterator 和 generator 稍微入门一些了。看了看也快 50 篇笔记了,稍微整理一下写了点什么,之后复习的时候也方便找内容。一个整合,第 5 章的内容是基本引用类型,其中一部分内容拆成不同的笔记了。array,map & set 部分内容因为内容量的关系,也单独拆了出来。其实这里的内容,语句里面都提过,然后忘了。暂时归类到这里,等红宝书过到这里再看看要不要修改……原创 2023-05-28 22:07:24 · 758 阅读 · 0 评论 -
JavaScript 的性能分析与提升
对于 JavaScript/前端来说,性能的提升主要有两大方面:页面初始化的优化这一方面主要涉及到非代码结构上,但是能够提升用户体验感的优化,如,提升用户看到页面的速度、减少用户等待与页面交互的事件。如 lazy loading 就是一个比较知名的初始化上的优化,购物网站也好,视频网站也好,这种 2C 的页面会载入大量的数据,如果让用户等到所有的数据都加载成功,再和页面交互,那肯定是会因为使用体验感太差而造成用户流失。原创 2023-06-20 07:07:56 · 470 阅读 · 1 评论 -
JavaScript 高级程序设计 - 第 8 章 理解对象 学习笔记
本章内容量挺大的,因此笔记的话我也会分成 3-4 个部分去写,想要理解的细一点,顺便之后回顾的时候不会看的套类。本章主要就是了解一下和理解一下什么是对象,包括 Object 上的 properties 和 mixin。${this${this二者在实现上没有什么区别,只是后者使用 object literal(对象字面量)更加的方便简洁。原创 2023-05-29 13:35:16 · 607 阅读 · 0 评论 -
重学迭代器和生成器
之前在其实包含过 iterator 和 generator 的学习笔记,不过依旧温故而知新,有了一些实际上手的经验后重新再回滚一边会有比较深刻的理解,而不是只是 cv 书上的内容。原创 2023-05-28 12:19:33 · 655 阅读 · 0 评论 -
重学 Symbol
之前在写基础类型的笔记时暂时性的先跳过了 symbol,现在也有了一些项目的使用经验后,觉得还是需要重新回滚并且学习一下,温故而知新。首先依旧回顾一下 symbol 的特点:是原始值唯一不可变可以提供私有属性,模仿其他语言中的 private不可以使用new关键词这是因为 JS 在实现的时候刻意避免了使用new关键词去调用原始值包装类型Symbol 作为对象的 key 时不可被枚举。原创 2023-05-26 20:54:09 · 737 阅读 · 0 评论 -
浏览器数据存储方式
3 种方法各有各的优点和使用范围。原创 2023-05-24 12:13:22 · 1343 阅读 · 0 评论 -
JS 实现拖拽元素的功能
这篇笔记比较短,主要过一遍draggable的事件。border;padding;margin;max-width;width;licursor;.card;border;padding;margin;box-shadow;.droppable;原创 2023-05-21 10:07:49 · 1170 阅读 · 0 评论 -
简述 JavaScript 中 prototype
这篇笔记主要捋一下这么几个概念:JS 是通过 prototype chaining 实现继承的语言,所有的基类都会绑定在 prototype chain 上如: 本身就暴露了当前对象的 ,它所指向的是另一个对象,也就是 prototype chain 上的继承 (粗暴的理解一下就是父类)。返回的对象又可以通过调用 继续获得父类的 ,一步步向上追溯一直到 为 为止,一般到这个时候,也是获取到 Object 了——JS 之中,除了 primitive type,万物皆对象。需要注意的是, 返回的对象是原创 2023-05-19 08:58:59 · 741 阅读 · 0 评论 -
JavaScrip 中的 this, bind, call & apply 简述
this是一个比较特殊的东西,基本上可以理解成this的指向是就近调用的指向,因此this在 JS 中也是一个比较令人困惑的知识点。之前绕过this的方法基本上采用 arrow function,因为 arrow function 不包含对thisarguments, 或者super的绑定,因此使用 arrow function 时,this的指向更容易判断一些,不过最近感觉也是时候细究一下thiscallapply和bind了。原创 2023-05-18 03:19:15 · 309 阅读 · 0 评论 -
javascript 创建 array
补一下笔记,constructor 这块之前还真没怎么太琢磨过……这是最主流的用法,也是目前最推荐的用法,原因有以下几点:这是最安全的做法事实上就是是可以被重写的(尽管这种事情很少发生,而且真的这么算的话,所有 global methods 都不可靠了……原创 2023-05-17 11:48:18 · 436 阅读 · 0 评论 -
简述 JavaScript 被执行的那些事情
JavaScript 是脚本语言JavaScript 是解释型语言。原创 2023-05-16 22:36:39 · 229 阅读 · 0 评论 -
JavaScript 循环方法
不涉及到具体绑定到 prototype 上的循环方式,即中包含的循环方式(如forEachmap。原创 2023-05-15 13:35:28 · 385 阅读 · 0 评论 -
JQuery 炫酷应用实例集锦 - CH2
JQuery 炫酷应用实例集锦 - CH2上篇地址:JQuery 炫酷应用实例集锦 - CH1有些在 chapter1 中讲过用法的这里就不继续了。函数及简述replaceWith这个函数和 ch1 中的这个案例:$(this).html($(this).html().replace(regExp, "")); 比起来,实现方法要更加的简单直接一些,replaceWith() 也会将所选 selector 中的内容全都替换。insertBefore & insertAfter将原创 2022-05-22 09:10:57 · 266 阅读 · 0 评论 -
JavaScript 一些 Array 函数实现
JavaScript 一些 Array 函数实现concatfindflatforEach & mapincludesjoinpoppushreducereverseshiftslicesomesortspliceunshift只是一些比较简单的实现,这里按照字母排序了。concat因为 concat 可以参数中可以接受多个数组,所以用了 rest operator 去接受多个数组。const concat = (arr, arr2) => { const newArr = [..原创 2022-05-22 04:36:03 · 441 阅读 · 0 评论 -
防抖和节流的实现
防抖和节流的实现有两种实现,第一个使用 lodash 完成,第二个自己写一个防抖/节流的操作。本质上来说防抖和节流都是为了提升表现性能的一种方式,在前端还是属于很常见的案例。如果没有实现防抖或节流,那么输入基本上是这样的:如果每一次输入都会引发一次 API 调用,对于服务器的压力就会非常大。案例中使用的是 React 进行页面渲染。防抖(debounce)防抖指的是让延迟事件的执行操作,如果该事件被重新触发,则延迟重置。应用案例包括不限于:搜索功能,自动保存等。debounce - Lod原创 2022-05-16 04:44:41 · 1683 阅读 · 0 评论 -
JQuery 炫酷应用实例集锦 - CH1
JQuery 酷炫应用实例集锦 - CH1 上JQuery 版本为最新的 3.6,原来的案例为 2.2,可能有些 API 已经更新了会导致报错。这里下面跑过的案例都已经进行修改过了。JQ 这东西……好用,就是有点难用……目前已经重写完的部分丢到这里了:jQuery炫酷应用实例集锦 JQ3.0 重写版,写一部分更一部分。显示/消失fadeIn/fadeOut调用方法一致:$(selector).fadeIn( [duration ] [, complete ] )$(selector).f原创 2022-05-08 13:55:27 · 470 阅读 · 0 评论 -
开发效率嗖嗖提升的 20 余个 console 方法
开发效率嗖嗖提升的 20 余个 console 方法5 个基础输出函数高阶用法与小技巧技巧 1,搭配解构使用字符格式化使用 CSSdirtabletimetimeStampgroupprofileassertclearcounttrace为什么要知道这么多 console 函数5 个基础输出函数注*:console.exception() 已经 deprecated,使用 console.error() 代替。分别是: console.log(),console.warn(),console.erro原创 2022-04-18 03:54:05 · 516 阅读 · 0 评论 -
Jest 基础使用
Jest 基础使用Jest 的安装与运行Jest 可以通过 npm 进行开发安装:# 指定安装 jest v23.6,不添加 @23.6.0 会安装最新版本$ npm install --save-dev jest@23.6.0注意这里使用了 --save-dev,指的是只有在开发环境下才会下载依赖包,package.json 中 devDependencies 也会想对更新:{ // 省略其他 "devDependencies": { "jest": "^23.6.0"原创 2021-10-28 12:39:02 · 744 阅读 · 1 评论 -
JavaScript 循环中调用异步函数的三种方法,及为什么 forEach 无法工作的分析
本文主要分析在循环体中怎么调用异步函数,并且满足循环调用异步函数,并在异步函数值返回之后,再处理后续业务的同步需求。这篇文章是受到和 六卿 在群里讨论问题时启发而写的,主要讨论的问题就只在循环体内进行异步调用。他也写了自己的总结: node 中循环异步的问题[‘解决方案‘]_源于 map 循环和 for 循环对异步事件配合 async、await 的支持。原创 2021-07-17 19:41:33 · 9961 阅读 · 29 评论 -
JavaScript 的 foreach 用不了 break/continue?同样写法下 for 循环也不行
今天在群里和群友一起探讨一个 JavaScript 异步问题的时候,就 foreach/map 函数进行了一番学习和讨论。当然,群友的侧重点还是在异步的实现方面。对于我而言,更感兴趣的反而是数组这边为什么不能够使用 break/continue/return。这边这里就结合一下自己的理解,以及 MDN 上实现的 polyfill 去分析一下其中详情。原创 2021-07-16 07:58:34 · 8838 阅读 · 13 评论 -
[1w6k 字详细讲解] 保姆级一步一步带你实现 Promise 的核心功能
这里就通过手写 Promise 更加深刻的了解一下 Promise 的使用。毕竟一来日常生活中对 Promise 使用的需求还是很大的,二来手写 Promise 也是一个常见的前端考题。最后实现的完整实现的源码在这里:03.handwritePromise.js,源码中包含实现了本文中实现的所有功能,以及 Promise.race() 和 Promise.reject() 的实现。最后也有注释掉的所有的测试案例。原创 2021-06-26 09:43:30 · 1309 阅读 · 21 评论 -
[万字详解]JavaScript 中的异步模式及 Promise 使用
JavaScript 原生的设计使用的就是单线程模式进行开发,这个与刚开始它被设计出来的目的有关——只参与浏览器中 DOM 节点的操作。如果同时出现多个线程对同一个 DOM 节点进行操作,那么浏览器就无法正确判断应该执行哪一个线程的操作,因此,JavaScript 在实现的时候决定只使用一个线程去执行任务。单线程就代表最大能够执行的任务只有一个,所有的任务都会按照队列的模式进行排队。它的缺点就在于,如果一个任务特别的耗时,就会造成页面的阻塞,而在 JavaScript 运行的时候,HTML 是不会进行渲原创 2021-06-24 06:29:33 · 1536 阅读 · 37 评论 -
都 2021 年了还不会连 ES6/ES2015 更新了什么都不知道吧
都 2021 年了还不会连 ES6/ES2015 更新了什么都不知道吧es6 / es2015let & const块级作用域解构数组解构对象解构模板字符串Math + Number + String + Object 扩展方法默认参数剩余 与 展开 操作符箭头函数对象字面量代理 Proxy反射 Reflect期约 Promises类类的继承内置对象可被继承类的静态方法Map + Set + WeakMap + WeakSet迭代器 & 生成器 & for of迭代器生成器for o原创 2021-06-07 22:36:55 · 2219 阅读 · 148 评论 -
3万6千字爆肝,前端进阶不得不了解的函数式编程开发,含大量实例,手写案例,所有案例均可运行
还不了解React所提倡的,Vue最近也慢慢兼容的函数式编程风格吗?那看看这里,深入理解一下函数式编程及其好处,写出更加优雅的代码吧。本章内容包含:理解函数式编程,如为什么要学习函数式编程,函数式编程所带来的好处,高阶函数的意义,以及手写实现一些常见的 Array 函数柯里化,包括概念讲解、案例以及手写实现柯里化组合函数,组合函数的讲解和理解,以及手写函数组合的处理方法Lodash 中 fp 的使用,以及 fp 和 lodash 的一些对比Point-free 的概念和相关案例原创 2021-06-01 19:05:28 · 2268 阅读 · 243 评论 -
PC 端网页特效 2-client & scroll 学习
PC 端网页特效 2-client & scroll 系列及学习案例上一篇笔记:PC 端网页特效-offset 系列顺便吐槽一下,标题长度都有限制了是什么情况……元素可视区 client 系列client,即 客户端。可以使用 client 系列相关属性来获取元素可视区的相关信息,通过 client 系列的相关属性可以动态的获得该元素的边框大小、元素大小。client 系列属性作用element.clientTop返回元素上边框的大小element.clien原创 2021-05-27 03:20:56 · 284 阅读 · 17 评论 -
PC 端网页特效-offset 系列及学习案例
PC 端网页特效-offset 系列及学习案例学习地址还是在这里:JavaScript 基础语法-dom-bom-js-es6 新语法-jQuery-数据可视化 echarts 黑马 pink 老师前端入门基础视频教程(500 多集)持续总归说学完一个是一个,不能继续下次一定了offset 即 元素偏移量,PC 端的网页特效是一个系列:offsetclientscroll动画函数封装不过因为每周学习的进度关系,所以会将 PC 端网页特效做一个系列的笔记。其学习案例有 3 个:基原创 2021-05-26 02:56:47 · 978 阅读 · 27 评论 -
JavaScript 高级程序设计第 7 章 迭代器和生成器 学习笔记
JavaScript 高级程序设计第 7 章 迭代器和生成器 学习笔记一个 生成器(generator) 一定是 迭代器(iterator)。大多数情况下来说,使用 生成器 就够了,因为 生成器 的底层已经变写好了对于子项的迭代,即 next() 中的 done,这样就能更专注的去处理 值(value)。少数情况,当要传的值相对而言比较复杂的时候——例如说需要使用闭包,更适合使用 迭代器,因为 生成器 是一个函数,局限性较大,而 迭代器 是一个对象,可以将一些属性作为自有变量。生成器 和 迭代器 诞原创 2021-05-17 01:31:56 · 290 阅读 · 1 评论 -
BOM 操作学习笔记
BOM 操作学习笔记还是 JavaScript 基础语法-dom-bom-js es6 新语法-jQuery-数据可视化 echarts 黑马程序员 pink 老师前端入门视频教程(500 多集课程) 的内容,不过视频已经从基础的 JavaScript,到 DOM,现在到 BOM 了。BOM 概述BOM(Browser Object Model) 是 浏览器对象模型,它提供了独立于内容而与 浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象组成,而且每个对象都提供了很多转载 2021-05-16 02:17:05 · 291 阅读 · 1 评论 -
BOM 操作学习案例
BOM 操作学习案例还是 JavaScript 基础语法-dom-bom-js es6 新语法-jQuery-数据可视化 echarts 黑马程序员 pink 老师前端入门视频教程(500 多集课程) 的学习案例。主要是定时器(setInterval, setTimeOut),以及重定向部分的学习案例。定时器案例setTimeOut 和 setInterval 两个方法的使用。setTimeOut因为 setTimeOut 有一个 延时性+一次性 的特性,所以用的比较多的案例应该是配合着关闭广告原创 2021-05-16 02:02:38 · 443 阅读 · 1 评论 -
JavaScript 高级程序设计第 6 章——集合引用类型学习笔记
JavaScript 高级程序设计第 6 章——集合引用类型学习笔记这章内容很长,一些子内容,例如数组,也单独拆分了一章笔记,希望每份笔记的复习时间能够控制在 5-10 分钟左右。本章的内容包含了:对象,数组,Map, WeakMap, Set 以及 WeakSet。因为平常业务定型数组使用的不多,需求——嵌入式或是 WebGL 这方面——也不多,所以暂时略过。对象显式地创建 Object 的实例有两种方式:使用 new 操作符和构造函数const person = new Objec原创 2021-05-10 02:49:16 · 190 阅读 · 1 评论 -
JavaScript 中的 Map, Set, WeakMap, WeakSet
JavaScript 中的 Map, Set, WeakMap, WeakSet之前还真不知道 WeakMap 和 WeakSet……依旧来自「JavaScript 高级程序设计」的读书笔记。Map对比先进行对比:对于多数 Web 开发来说,使用 Object 还是 Map 只是个人偏好问题,影响不大。不过对于在乎性能和内存的用户来说,二者还是有区别的ObjectMap内存占用浏览器实现不同浏览器实现不同 \newline 但是给定固定内存大小,Map 能比 Ob原创 2021-05-10 02:21:49 · 298 阅读 · 1 评论 -
JavaScript 高级事件学习
JavaScript 基础语法-dom-bom-js es6 新语法-jQuery-数据可视化 echarts 黑马程序员 pink 老师前端入门视频教程(500 多集课程) p247-262 的内容,包含了以下特性:三种注册事件的方法,包含一种对 IE9 的兼容三种解绑事件的方法,包含一种对 IE9 的兼容DOM 事件流事件对象阻止事件冒泡事件委托常用的鼠标事件常用的键盘事件搭配 学习案例 食用更佳原创 2021-05-07 02:40:45 · 170 阅读 · 2 评论 -
JavaScript 高级事件学习案例
JavaScript 基础语法-dom-bom-js es6 新语法-jQuery-数据可视化 echarts 黑马程序员 pink 老师前端入门视频教程(500 多集课程) p247-262 的内容,包含了以下案例:两种注册事件的方法两种解绑事件的方法DOM 事件流捕获事件冒泡事件阻止事件冒泡事件委托鼠标事件键盘事件原创 2021-05-07 02:15:39 · 380 阅读 · 1 评论 -
JavaScript 数组详解
JavaScript 数组详解创建数组的方式判断是否是 array 的方法,共 6 种数组遍历的方法,共 8 种,5 种迭代方法以及 3 种迭代器方法根据 MDN 上的 Polyfill 源码对 Array.fill 方法负值是怎么判断的进行解析归并方法(reduce)的使用案例常用的其他数组函数的使用和案例数组的使用创建数组构造器(constructor) 和 字面量的区别同对象一样,Array 的显示实例化也有通过构造方法和字面量的区别:构造方法new 操作符可以省去原创 2021-04-30 02:43:07 · 226 阅读 · 1 评论 -
JavaScript 中 reduce 及 6 个使用案例
JavaScript 中 reduce 及 6 个使用案例使用案例包括:求和去重求最大值 或 最小值计算值出现的次数展开多维数组二维数组多维数组pipelinereduce() 语法归并方法有 reduce() 和 reduceRight() 两个,二者最大的区别就是方向不同—— reduce() 从 index = 0 开始归并,而 reduceRight() 从 index = arr.len - 1 开始归并。其语法如下:// Arrow f原创 2021-04-30 02:24:50 · 449 阅读 · 3 评论 -
JavaScript 中 DOM 元素的基础操作 学习笔记
总结就是:使用 JavaScript 操作 DOM 元素的核心思想依旧是 CRUD:C,在页面中创建新元素R,在页面中获取特定元素U,在页面中更新特定元素D,在页面中删除特定元素原创 2021-04-27 02:27:35 · 344 阅读 · 1 评论 -
JavaScript 事件操作案例学习 3
这里的案例依旧是以增删为主,CRUD 中的 CD 的部分,包含了下列案例学习:1. 克隆元素2. 在页面中添加元素3. 在页面中删除元素4. 结合案例 2 和 3,完成增删元素5. 使用假数据完成动态渲染元素原创 2021-04-27 02:23:51 · 400 阅读 · 1 评论 -
JavaScript 事件操作案例学习 2
这里的案例依旧是以操作为主,CRUD 中的 R+U 的部分,包含了下列案例学习:鼠标点击修改背景图鼠标经过时修改背景色,同样也可以用 CSS :hover 进行操作修改表单的全选、取消全选、根据 checkbox 决定全选是否勾选点击 tab 栏切换内容模块鼠标悬浮显示下拉菜单上接 JavaScript 事件操作案例学习原创 2021-04-27 01:19:03 · 293 阅读 · 1 评论 -
JavaScript 事件操作案例学习
JavaScript 事件操作案例学习还是JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程(持续更新)部分的内容,目前是从基础的JavaScript跳到了稍微复杂一点的DOM操作方面。案例1,使用 JavaScript 隐藏或是显示密码效果图如下:点击图标前点击图标后:原理是在 onclick 事件修改 intpu 的 type,当 type="password" 时密码是隐藏的,当 ty原创 2021-04-21 17:05:00 · 283 阅读 · 2 评论 -
JavaScript 高级程序设计第五章学习笔记
JavaScript 高级程序设计第五章学习笔记JavaScript 引用类并不是 class,这一点是在书中开始就反复声明的。但是找了一下 prototype 和 class 之间的区别,就觉得挺分裂的,有些地方说 JavaScript 已经实现了 class,有些地方又说没有……反正现在先把 class 和 prototype 是不一样的 当做定义记在脑子里面算了。Date 和 RegExp书中介绍了两个常见的也是用的比较多的基本引用类型:Date 和 RegExp,笔记在这里:JavaScri原创 2021-04-21 02:35:54 · 220 阅读 · 1 评论