JavaScript
文章平均质量分 87
JavaScript相关
橘猫吃不胖~
这个作者很懒,什么都没留下…
展开
-
JavaScript原生拖放
JavaScript原生拖放1 拖放事件2 dataTransfer对象3 可拖动能力4 一个拖动demo原创 2024-01-08 10:00:00 · 990 阅读 · 0 评论 -
JavaScript装饰者模式
JavaScript装饰者模式1 什么是装饰者模式2 模拟装饰者模式3 JavaScript的装饰者4 装饰函数5 AOP装饰函数6 示例:数据统计上报原创 2023-12-17 22:08:42 · 1009 阅读 · 0 评论 -
Javascript中介者模式
Javascript中介者模式1 什么是中介者模式2 示例:泡泡堂游戏2.1 增加游戏人数2.2 问题2.3 用中介者模式改造泡泡堂游戏3 示例:购买商品3.1 问题3.2 引入中介者原创 2023-12-04 10:00:00 · 971 阅读 · 0 评论 -
JavaScript职责链模式
JavaScript职责链模式1 什么是职责链模式2 举个例子3 用职责链模式重构代码4 灵活可拆分的职责链节点5 异步的职责链原创 2023-11-19 16:21:12 · 214 阅读 · 0 评论 -
Javascript享元模式
Javascript享元模式1 什么是享元模式2 内部状态与外部状态3 享元模式的通用结构4 文件上传4.1 对象爆炸4.2 享元模式重构5 没有内部状态的享元模式6 对象池7 通用对象池实现原创 2023-11-13 10:30:00 · 230 阅读 · 0 评论 -
JavaScript模板方法模式
JavaScript模板方法模式1 什么是模板方法模式2 Coffee or Tea3 钩子方法4 好莱坞原则原创 2023-11-05 10:30:00 · 198 阅读 · 0 评论 -
JavaScript组合模式
JavaScript组合模式1 什么是组合模式2 宏命令3 示例:扫描文件夹4 引用父对象原创 2023-10-30 10:00:00 · 184 阅读 · 0 评论 -
Javascript命令模式
Javascript命令模式1 什么是命令模式2 命令模式的例子—菜单程序3 JavaScript 中的命令模式4 撤销命令5 宏命令原创 2023-10-22 20:11:10 · 593 阅读 · 0 评论 -
JavaScript发布—订阅模式
JavaScript发布—订阅模式1 什么是发布—订阅模式2 DOM 事件3 实现一个发布—订阅模式4 发布—订阅模式的通用实现5 取消订阅的事件6 全局的发布—订阅对象7 模块间通信原创 2023-10-14 17:49:48 · 2278 阅读 · 1 评论 -
JavaScript迭代器模式
JavaScript迭代器模式1 什么是迭代器模式2 实现一个迭代器3 内部迭代器和外部迭代器3.1 内部迭代器3.2 外部迭代器4 迭代类数组对象和字面量对象原创 2023-10-06 10:00:00 · 246 阅读 · 0 评论 -
JavaScript代理模式
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象,替身对象对请求做出一些处理之后,再把请求转交给本体对象。原创 2023-09-25 10:15:00 · 199 阅读 · 0 评论 -
JavaScript策略模式
JavaScript策略模式1 什么是策略模式2 实现一个基础的策略模式3 Javascript中策略模式4 使用策略模式实现缓动动画5 使用策略模式实现表单校验原创 2023-09-18 10:15:00 · 851 阅读 · 0 评论 -
JavaScript单例模式
JavaScript单例模式1 什么是单例模式2 实现一个基础的单例模式3 透明的单例模式4 用代理实现单例模式5 JavaScript 中的单例模式6 惰性单例原创 2023-09-04 10:00:00 · 797 阅读 · 0 评论 -
CSRF攻击及防范
CSRF攻击及防范1 什么是CSRF2 CSRF攻击过程3 CSRF类型3.1 按照请求类型分类3.1.1 GET型3.1.2 POST型3.2 按照攻击方式分类3.2.1 HTML CSRF攻击3.2.2 JSON Hijacking攻击3.2.3 Flash CSRF攻击4 CSRF危害5 如何防御CSRF5.1 阻止不明外域的访问5.2 token原创 2023-02-12 23:50:22 · 633 阅读 · 1 评论 -
XSS攻击及防范
XSS攻击及防范1 什么是XSS2 XSS类型2.1 反射型XSS2.2 存储型XSS2.3 DOM型XSS3 怎么预防XSS3.1 纯前端渲染3.2 转义HTML3.3 关注高危API3.4 其他措施原创 2023-02-06 00:03:19 · 1248 阅读 · 0 评论 -
JSONP原理及实现
JSONP原理及实现1 概述2 优点3 缺点4 实现原创 2022-11-27 21:21:15 · 919 阅读 · 0 评论 -
Javascript方法call、apply、bind的解析与实现
Javascript方法call、apply、bind的解析与实现1 this的指向2 如何改变this的指向3 call3.1 使用方式3.2 call的实现4 apply4.1 使用方式4.2 apply的实现5 bind5.1 使用方式5.2 bind的实现6 call、apply、bind的区别原创 2022-11-21 00:25:18 · 442 阅读 · 0 评论 -
Promise原理及实现
Promise原理及实现1 Promise核心逻辑实现2 加入异步逻辑3 then方法添加多次调用逻辑4 链式调用then方法5 Promise错误捕获6 then方法参数设置为可选7 实现Promise.all8 实现Promise.resolve9 实现Promise.race10 实现finally方法11 实现catch方法12 全部代码展示...原创 2022-08-09 20:53:23 · 2600 阅读 · 1 评论 -
JavaScript中错误处理
JavaScript中错误处理1 如何进行错误处理2 错误对象的传递3 抛出错误对象throw4 错误类型原创 2022-08-09 20:53:48 · 314 阅读 · 0 评论 -
回调地狱及Promise、async和await
回调地狱及Promise、async和await1 什么是回调函数2 同步任务与异步任务3 什么是回调地狱4 Promise对象4.1 概述4.2 all的用法4.3 race的用法5 async和await函数5.1 概述5.2 使用async/await基本规则5.3 示例5.4 promise和async/await区别1 什么是回调函数回调函数:当一个函数作为参数传入到另外一个函数,并且该函数不会立即执行;当满足某个条件时才执行该函数。下面代码中的fn就是回调函数:function fn()原创 2022-03-01 21:48:38 · 505 阅读 · 0 评论 -
JavaScript中继承的实现方式
JavaScript中继承的实现方式1 构造函数式继承2 类式继承(原型式继承)3 组合式继承4 寄生式继承5 寄生组合式继承1 构造函数式继承构造函数式继承就是在子类中执行父类的构造函数,并为其传递参数,这个过程可以使用call()函数来实现。示例代码:定义Person类(父类),它有自己的属性name和age,还有自己的方法getName()和getAge()function Person(name, age) { this.name = name; // 初始化姓名和年龄 th原创 2022-05-15 17:00:08 · 279 阅读 · 0 评论 -
JavaScript防抖与节流
JavaScript防抖与节流1 为什么需要防抖和节流2 防抖与节流原理3 实现一个防抖函数3.1 初步实现3.2 this问题3.3 event问题3.4 立即执行3.5 返回值问题3.6 取消防抖3.7 总结4 实现节流函数4.1 通过时间戳实现节流4.2 使用定时器实现节流4.3 时间戳和定时器组合实现4.4 节流优化5 应用场景1 为什么需要防抖和节流在前端开发当中,有些交互事件,会被频繁触发,这样会导致我们的页面渲染性能下降,如果频繁触发接口调用的话,会直接导致服务器性能的浪费。举个例子,在原创 2022-05-07 21:34:38 · 786 阅读 · 0 评论 -
JavaScript垃圾回收机制
JavaScript垃圾回收机制1 垃圾为何要产生并回收2 垃圾回收机制2.1 标记清除法2.2 引用计数法3 V8对垃圾回收机制的优化——分代式垃圾回收机制3.1 新生代与老生代3.2 新生代的垃圾回收3.3 老生代的垃圾回收1 垃圾为何要产生并回收当我们写代码时创建一个基本类型、对象、函数等,都是需要占用内存的,JavaScript基本数据类型存储在栈内存中,引用数据类型存储在堆内存中,但是引用数据类型会在栈内存中存储一个实际对象的引用。比如说我们创建了一个person对象,然后将person对象原创 2022-05-05 17:11:53 · 6963 阅读 · 3 评论 -
JavaScript快速排序
JavaScript快速排序1 思想2 代码1 思想快速排序是最慢的冒泡排序,它可以在一次循环中找出某个元素的正确的位置,并且该元素之后不需要任何移动,最重要的思想是分而治之。例如,对数组 [13,81,92,43,65,31,57,26,75,0] 进行排序第一步:我们在这个数组中选出了65(随便选的)第二步:将所有小于65的放在65的左边,将所有大于65的放在65的右边第三步:递归处理左边的数据,递归处理右边的数据第四步:排序完成在上面的步骤中,对于随机选出的65就叫做枢纽(也有人叫原创 2022-04-21 10:29:28 · 162 阅读 · 0 评论 -
JavaScript希尔排序
JavaScript希尔排序1 思路2 代码实现1 思路希尔排序是一种基于插入排序的快速排序算法,也成为缩小增量排序。简单插入排序对于大规模乱序数组很慢,因为元素只能一点一点地从数组的一端移动到另一端。希尔排序为了加快速度简单地改进了插入排序,同时该算法是冲破O(n2)的第一批算法之一。希尔排序是把数组按照一定的增量分组,对每组使用直接插入排序算法排序;然后缩小增量继续分组排序;随着增量逐渐减少,每组包含的关键词越来越多,当增量减至1时,整个数组被分成一组,再次排序,就可以完成整个数组的排序。增量的原创 2022-04-21 09:47:34 · 773 阅读 · 0 评论 -
JavaScript选择排序
JavaScript选择排序1 思想2 代码1 思想选择排序思想如下:找到数组中最大(最小)的元素;将该元素与数组中第一个元素交换位置(如果第一个元素就是最大或者最小的元素那么就和自己交换位置)在剩下的元素中找到最大(小)的元素,将它与数组的第二个元素交换位置。如此往复,直到将整个数组排序。从上面的过程可以看出,选择排序在不断地选择剩余元素中的最大(小)者。例如,当前有数组 [4, 7, 2, 8, 0, 3] 从小到大排序,它的选择排序过程如下:步骤数组说明1[原创 2022-04-02 13:42:49 · 2949 阅读 · 2 评论 -
JavaScript深拷贝与浅拷贝
JavaScript深拷贝与浅拷贝1 什么是深/浅拷贝2 浅拷贝与赋值的区别3 浅拷贝的实现3.1 Object.assign()3.2 Array.prototype.concat()3.3 Array.prototype.slice()3.4 ...扩展运算符4 深拷贝的实现4.1 JSON.parse(JSON.stringify())4.2 函数库lodash5 实现一个深拷贝原创 2022-02-09 00:25:31 · 736 阅读 · 0 评论 -
JavaScript返回某集合中的所有子集(力扣面试题 08.04. 幂集)
记录力扣上面的一道题,在力扣上看见这个解法,抄下来学习一下。幂集。编写一种方法,返回某集合的所有子集。集合中不包含重复的元素。说明:解集不能包含重复的子集。示例:输入: nums = [1,2,3]输出:[ [3], [1], [2], [1,2,3], [1,3], [2,3], [1,2], []]代码如下:var subsets = function (nums) { let arr = [[]];// 添加空数组 for (let原创 2022-01-26 16:36:48 · 1716 阅读 · 0 评论 -
JavaScript字符串概述
JavaScript字符串概述1 创建字符串2 单、双引号3 转义字符串4 默认属性5 访问字符串中的字符6 字符串拼接7 根据字符返回位置8 根据位置返回字符9 字符串操作方法10 判断字符串中是否含有某个字符includes()11 填充字符串padStart()12 判断当前字符串是否以另外一个给定的子字符串开头startsWith()1 创建字符串直接创建:var 变量名 = "字符串";通过String对象创建var 变量名 = new String("字符串");2 单、双引号原创 2022-01-26 14:29:38 · 1207 阅读 · 0 评论 -
JavaScript正则表达式概述
JavaScript正则表达式概述1 正则表达式概述1.1 什么是正则表达式1.2 特点1.3 正则表达式的使用1.4 模式修饰符2 特殊字符2.1 边界符2.2 预定义类2.3 字符类2.4 取反符3 量词符与括号字符3.1 量词符3.2 括号字符3.2 捕获与非捕获3.2 贪婪与懒惰匹配3.2 反向引用、零宽断言3.3 正则表达式优先级4 String类中的方法4.1 match()方法4.2 search()方法4.3 split()方法4.4 replace()方法5 【案例】查找并替换敏感词原创 2022-01-11 20:12:57 · 559 阅读 · 0 评论 -
冒泡排序思想及代码实现
冒泡排序基本思想1、每次将相邻两个数比较,如果第一个大于第二个数,则交换这两个数,否则不变。2、如果有n个数,则要进行n-1趟比较。3、在第一趟比较中要进行n-1次两两比较,则第一趟下来最后一个数是最大的,不用参与接下来的比较,于是在第二趟比较中要进行n-2次比较,…,在第j趟比较中要进行n-j次两两比较。该排序算法的时间复杂度为O(n2)。从小到大排序示例:将数组中元素从小到大输出var a = [10, 7, 5, 27, 98, 31]; // 定义一个数组console.log原创 2021-11-19 22:00:00 · 270 阅读 · 0 评论 -
JavaScript插入排序
JavaScript插入排序1 思想2 代码1 思想插入法排序通过构建有序数组元素的存储,对未排序的数组元素,在已排序的数组中从最后一个元素向第一个元素遍历,找到相应位置并插入。插入法排序基本思想:假设第一个数是有序的,剩余的数是无序的选择第二个数与第一个数进行比较,如果第二个数比第一个数小,则交换两个数的位置,如果第二个数比第一个数大,则位置不发生变动选择第三个数与第二个数进行比较,如果第三个数小于第二个数,则交换两个数的位置,然后用第二个数与第一个数进行比较,如果第二个数小于第一个数,交换原创 2021-11-19 19:45:00 · 1001 阅读 · 1 评论 -
ES6新特性总结(4)函数、类、模块化
ES6新特性总结(4)函数、类、模块化1 函数1.1 函数形参的默认值1.2 函数形参不定参数1.3 箭头函数2 类(class)2.1 类的概述2.2 静态成员2.3 类的继承3 模块化1 函数1.1 函数形参的默认值在很多情况下,需要在使用函数的时候给定默认参数,在ES5标准中一般会这样写:function fun(name, age) { //设置一个函数,有2个参数 //如果name的类型不为undefined,那name还是name,否则为张三 name = typeof原创 2021-12-17 21:08:34 · 605 阅读 · 1 评论 -
ES6新特性总结(3)Set集合、Map集合
ES6新特性(3)Set集合、Map集合1 Set集合1.1 操作方法1.2 遍历方法1.3 WeakSet2 Map集合2.1 Map概述2.2 基本方法和属性2.3 遍历方法2.4 转为数组2.5 Map的遍历和过滤2.6 forEach()2.7 WeakMap1 Set集合Set集合:是一种数据结构,结构类似于数组,且没有重复的值。主要用于数组去重,字符串去重。1.1 操作方法方法含义add()添加值,返回Set结构本身delete()删除值,返回一个boole原创 2021-12-17 16:33:33 · 778 阅读 · 0 评论 -
ES6新特性总结(2)解构赋值、模板字符串、Symbol
ES6新特性总结(2)解构赋值、模板字符串、Symbol1 解构赋值1.1 Spread / Rest 操作符1.2 数组的解构1.3 对象的解构1.4 解构的默认值和参数的解构2 模板字符串3 Symbol1 解构赋值1.1 Spread / Rest 操作符Spread / Rest 操作符指的是"…",具体是 Spread 还是 Rest 需要看上下文语境。当被用于迭代器中时,它是一个Spread操作符。迭代器 (Iterator)是按照一定的顺序对一个或多个容器中的元素行进遍历的一种机制。原创 2021-12-15 20:15:12 · 1187 阅读 · 0 评论 -
ES6新特性总结(1)let及const
ES6新特性总结(1)let及const1 let和const出现的原因2 作用域3 const命令4 临时死区5 循环中let和const的使用1 let和const出现的原因let和const是ES6新增的两种新的声明格式,用于补全ES5标准中var声明变量的不足。var声明变量的不足:在JavaScript中用"var"来声明变量会出现变量提升的情况,即通过"var"声明的变量,系统都会把声明隐式的升至顶部,这样的特性往往会让刚接触JavaScript及习惯其他语言的开发人员不适应,导致程序出现原创 2021-12-15 15:19:51 · 1323 阅读 · 0 评论 -
js+css+html实现放大镜效果
js+css+html实现放大镜效果1 案例描述2 编写HTML代码3 编写CSS代码4 编写JavaScript代码5 总代码1 案例描述在很多网页中,我们都能看到一个类似于放大镜的效果,一般显示为有一个小的图,旁边有一个大图,当鼠标在小图上来回移动时,大图也会在相应的位置上来回移动,这样的效果一般在购物网站、制图网站上很常见,方便用户查看各种细节。案例设计分析图:效果图如下:该效果主要是由2个div构成,一个放置小的图片,另一个放置大的,当鼠标在小效果图上来回移动时,会按照比例显示相应部分原创 2021-12-14 10:02:19 · 4691 阅读 · 1 评论 -
js+css+html点击登录后弹出可拖拽的模态框
js+css+html点击登录后弹出可拖拽的模态框1 案例概述2 编写HTML代码3 编写CSS代码4 编写JavaScript代码5 总代码1 案例概述我们经常能在网页上见到,当点击登录之后,就会弹出一个对话框,对话框中输入用户名和密码就可以登录,而且在弹出对话框之后,除了对话框之外的背景都变为灰色,此对话框还可以在页面上进行拖拽。案例分析设计图:效果图如下,页面初始样子为:当点击“登录会员”时,效果图如下:当鼠标在页面上拖拽时,模态框会移动位置:点击右上角关闭按钮后,页面回到初始的原创 2021-12-13 10:34:03 · 2228 阅读 · 1 评论 -
js+css+html实现固定侧边栏效果
js+css+html实现固定侧边栏效果1 案例描述2 编写HTML代码3 编写CSS代码4 编写JavaScript代码部分5 全部代码6 position:fixed;说明1 案例描述我们在很多网站都看到过,当页面向下滚动时,侧边的导航栏并没有发生位置的改变,而是一直在侧边显示,具体可以参考CSDN个人主页效果,向下翻博客时,左边的导航栏没有发生变动,而且当下拉到一定的程度时,侧面会出现“返回顶部”的标识,点击即可立即回到顶部。本篇博客主要讲述如何实现这个功能。案例分析:当页面在最顶上时,侧边原创 2021-12-11 13:32:13 · 6958 阅读 · 0 评论 -
JavaScript网页特效
JavaScript网页特效1 元素偏移量offset系列1.1 offset概述1.2 offset与style的区别2 元素可视区client系列3 元素滚动scroll系列1 元素偏移量offset系列1.1 offset概述offset含义:offset的含义是偏移量,使用offset的相关属性可以动态地获取该元素的位置、大小等。属性说明offsetLeft返回元素与带有定位的父元素左边框的偏移offsetTop返回元素与带有定位的父元素上边框的偏移off原创 2021-12-09 22:21:05 · 2978 阅读 · 2 评论