javaScript
文章平均质量分 82
茉莉蜜茶~~~
web前端工程师一枚(当阅读成为了习惯,知识也就变成了常识)
展开
-
前端闭包,有你就够了
闭包的概念我的理解为,就是函数嵌套函数,内部的函数可以访问到外部函数申明的变量和参数(闭包是函数里面的函数,并且它能记住周围的东西。)特点:1、让外部访问函数内部变量成为可能;2、 局部变量会常驻在内存中;3、 可以避免使用全局变量,防止全局变量污染;4、会造成内存泄漏(有一块内存空间被长期占用,而不被释放)闭包的创建闭包可以创建一个独立的环境,每个闭包里面的环境都是独立的,互不干扰。闭包会发生内存泄漏,每次外部函数执行的时候,外部函数的引用地址不同,都会重新创建一个新的地址。但凡是当前原创 2021-08-20 15:15:27 · 353 阅读 · 0 评论 -
call,apply,bind的用法、区别及原理的实现
call、apply 和 bind 是挂在 Function 对象上的三个方法,调用这三个方法的必须是一个函数。主要用来改变函数运行时this的指向基本用法1、call方法基本语法:func.call(thisArg, param1, param2, …)call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表。当第一个参数为null、undefined的时候,默认指向window。示例:var obj = { message: 'My name is: '}f.原创 2021-01-31 12:02:55 · 334 阅读 · 2 评论 -
javaScript中常用数组api总结
数组在开发过程中占据了重要的角色,今天我主要通过4个部分来总结一下,开发过程中常用的到的一些api一、数组的构造器二、改变自身的方法三、不改变自身的方法四、遍历的数组一、数组构造器1、Array 构造器Array 构造器用于创建一个新的数组。通常,我们可以使用对象字面量的方式创建一个数组,例如 var a = [] 就是一个比较好的写法。但是,总有对象字面量表述乏力的时候,比如,我想创建一个长度为 6 的空数组,用对象字面量的方式是无法创建的,因此只能写成下述代码这样。// 使用 Ar.原创 2021-01-27 23:05:55 · 304 阅读 · 2 评论 -
javaScript设计模式——享元模式(十二)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...原创 2021-01-23 18:22:34 · 166 阅读 · 0 评论 -
javaScript设计模式——组合模式(十)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...原创 2021-01-22 16:15:36 · 255 阅读 · 0 评论 -
javaScript设计模式——状态模式(八)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...原创 2021-01-22 14:33:09 · 139 阅读 · 0 评论 -
javaScript设计模式——策略模式(七)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式原型模式桥接模式组合模式命令模式享元模式...原创 2021-01-21 15:15:48 · 161 阅读 · 0 评论 -
javaScript设计模式——命令模式(十一)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...原创 2021-01-14 22:04:47 · 112 阅读 · 0 评论 -
javaScript设计模式——桥接模式(九)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式状态模式桥接模式组合模式命令模式享元模式...原创 2021-01-12 22:11:45 · 117 阅读 · 1 评论 -
图解 Promise 实现原理—— 基础实现
摘要 很多同学在学习 Promise 时,知其然却不知其所以然,对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise,并结合流程图、实例以及动画进行演示,达到深刻理解 Promise 用法的目的。 ...转载 2021-01-12 21:20:06 · 263 阅读 · 0 评论 -
javaScript设计模式——观察者与发布订阅者模式(六)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者与发布订阅者模式策略模式原型模式桥接模式组合模式命令模式享元模式...原创 2021-01-09 16:48:03 · 173 阅读 · 0 评论 -
javaScript设计模式——代理模式(五)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者模式策略模式原型模式桥接模式组合模式命令模式享元模式代理模式为一个对象提供一个代用品或占位符,以便控制它的访问。当我们不方便直接访问某个对象时,或不满足需求时,可考虑使用一个替身对象来控制该对象的访问。替身对象可对请求预先进行处理,再决定是否转交给本体对象用生活中的例子简单的描述一下1、你自己不太方便买一件商品,可以通过找代购帮你买,然后代购买好东西后交给原创 2020-12-30 17:10:30 · 137 阅读 · 0 评论 -
javaScript原型与原型链
一、prototype在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象。function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(person2.name)原创 2020-12-27 18:57:52 · 138 阅读 · 0 评论 -
javaScript设计模式——装饰器模式(四)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者模式策略模式原型模式桥接模式组合模式命令模式享元模式装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装。意图动态地给一个对象添加一些额外的职责。就增加功能来说,装饰器模式相比生成子类更为灵活。主要解决一般的,我们为了扩展一个类经常使用继承方式实原创 2020-12-26 23:48:38 · 160 阅读 · 0 评论 -
javaScript常用的设计模式——适配器模式(三)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者模式策略模式原型模式桥接模式组合模式命令模式享元模式适配器模式(Adapter Pattern)是作为两个不兼容接口之间的桥梁。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。这种模式涉及到一个单一的类,该类负责加入独立的或不兼容的接口功能。举个真实的例子,读卡器是作为内存卡和笔记本之间的适配器。您将内存卡插入读卡器,再将读卡器插入笔记本,这样就可以原创 2020-12-23 21:51:52 · 155 阅读 · 1 评论 -
javaScript常用的设计模式——单例模式(二)
设计模式:有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者模式策略模式原型模式桥接模式组合模式命令模式享元模式单例模式要求一个类只有一个实例化对象存在这个实例化对象必须提供一个全局对外访问方式这个实例化对象应当是私有的,不能被外界直接访问或者更改使用场景引用第三方库(多次引用只会使用一个库引用,如 jQuery)弹窗(登录框,信息提升框)购物车 (一个用户只有一个购物车)全局态管理 store (Vu原创 2020-12-21 14:59:47 · 178 阅读 · 3 评论 -
javaScript常用的设计模式——工厂模式(一)(简单工厂、工厂方法、抽象工厂)
一、简单工厂概念: 简单工厂模式属于类的创建型模式,又叫静态工厂方法模式。通过专门定义一个工厂类来负责创建其他类的实例,被创建的实例通常都具有共同的父类举例说明:现在有个工厂,可以生产美式咖啡,卡布奇诺咖啡,拿铁咖啡,通过外界的订单来生产产品。代码实现:class Coffee{ constructor(name){ console.log(name) }}class AmericanoCoffee extends Coffee{}class Cappucci原创 2020-12-15 22:39:30 · 496 阅读 · 0 评论 -
javascript 罗马数字转字符串(leetCode 13题)
题目罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。字符数值I1V5X10L50C100D500M1000例如, 罗马数字 2 写做 II ,即为两个并列的 1。12 写做 XII ,即为 X + II 。 27 写做 XXVII, 即为 XX + V + II 。通常情况下,罗马数字中小的数字在大的数字的右边。但也存在特例,例如 4 不写做 IIII,而是 IV。数字 1 在数字 5 的左边,所表示的数等原创 2020-12-14 15:16:53 · 131 阅读 · 0 评论 -
javascript 实现给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度(leetcode 24题)
给定一个排序数组,你需要在 原地 删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度。不要使用额外的数组空间,你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。示例 1:给定数组 nums = [1,1,2], 函数应该返回新的长度 2, 并且原数组 nums 的前两个元素被修改为 1, 2。 你不需要考虑数组中超出新长度后面的元素。示例 2:给定 nums = [0,0,1,1,1,2,2,3,3,4],函数应该返回新的长度 5, 并且原.原创 2020-12-14 16:18:52 · 576 阅读 · 0 评论 -
模拟加载10万条长列表数据
###实现步骤1、获取容器元素的高度 clientHeight2、获取列表项元素的高度 offsetHeight3、计算可视区域应该渲染的列表项的个数 count = clientHeight / offsetHeight4、计算可视区域数据渲染的起始位置 start5、计算可视区域数据渲染的结束位置 end6、对完整长列表数据进行截断 sliceList = dataList.slice(start, end)7、渲染截断后的列表数据,进而实现无限加载//index.html<!D原创 2020-11-25 16:44:33 · 254 阅读 · 0 评论 -
浅拷贝、深拷贝及循环引用
浅拷贝:是把原来的数组(对象)直接赋值给另个数组(对象),新的数组(对象)只是原来数组(对象)的一个引用,拷贝后指向通一个对象的实例,只拷贝一层,并且不能对对象中的子属性拷贝,彼此操作会产生影响深拷贝:将原对象中的属性逐一复制,而且将原对象中的对象属性也逐一的递归复制到另一个对象中,拷贝的是值,而并非引用,彼此操作不会产生影响总结:假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明是浅拷贝,如果B没变,那就是深拷贝。深入点来说,就是B复制了A,如果B复制的是A的引用,那就是浅拷贝,原创 2020-11-25 16:43:44 · 580 阅读 · 0 评论 -
event loop 事件循环及案例
前言大家都知道,js是单线程脚本语言,在同一时间只能做同一件事,为了协调事件,用户交互,脚本,ui渲染和网络处理等行为,防止主线程阻塞,event loop方案应用而生###js为什么是单线程?javascript的单线程,和它的用途有关,作为浏览器脚本语言,javascript的作用主要是处理用户的交互和操作dom。这决定了他只能是单线程,否则会带来很复杂的同步问题比如,一个javascript有两个线程,一个线程在某个dom节点上添加内容,另一个线程删除这个节点,这样浏览器到底已那个为准呢.原创 2020-11-25 16:43:05 · 210 阅读 · 0 评论 -
JavaScript面试知识点
#####JavaScript规定了几种语言类型基本类型(null,undefined,string,number,Boolean,symbol(符号,标记))引用类型(object,Array,Function)#####javaScript中的变量在内存中的具体存储形式(理解值类型和引用类型)变量主要分为两种类型,基本类型和引用类型基本类型在内存中占据的空间大小是一定的,所以保存在栈内存中从一个变量向另一个变量复制基本来下的值 会创建这个值得一个副本。引用类型保存在堆内存中包含引用类型值原创 2020-11-24 17:20:17 · 202 阅读 · 0 评论 -
js算法题
字符串、数组 简单算法原创 2020-11-24 17:14:36 · 1082 阅读 · 0 评论 -
exports与module.exports,export与export default 使用及其区别
module.exports于exports ,是CommonJS的规范,被使用于Node.js中。export与export default ,是ES6规范,被使用于React或Vue中。#####CommonJS的规范CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。#####exports 与 module.expor.原创 2020-11-24 17:14:06 · 217 阅读 · 0 评论 -
javaScript调试命令
在运用JS进行脚本开发的时候,我们经常会用到console类中的log方法输出一些信息。其实,在JS中还有很多的调试命令。下面就详细的介绍几种#####分类输出console.log('文字信息')console.info('提示信息')console.warn('警号信息')console.error('错误信息')#####计次输出console.count()//输出内容和被调用的次数eg:(function () { for(var i = 0; i < 3; .原创 2020-11-24 17:01:20 · 230 阅读 · 0 评论 -
函数节流和防抖
函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段有时在给DOM绑定事件时,有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动条事件onscroll,窗口大小改变事件onresize,瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂,就会导致响应跟不上触发,出现页面卡顿,假死现象。 在实时检查输入时,如果我们绑定onkeyup事件发请求去服务端检查,用户输入过程中,事件的触发频率也会很高,会导致大量的请求发出,响应速度会大大跟不上触发。针对此.原创 2020-11-24 16:50:13 · 142 阅读 · 1 评论