- 博客(139)
- 收藏
- 关注
RSS订阅原创 宏命令 简介
宏命令是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。1、逐步创建一个宏命令 var closeDoorCommand = { execute: function () { console.log('关门') } } var oepnPcCommand = { execute: function () { console.log('开电脑') } } var op
2020-12-15 11:55:57
2490
1
原创 代理模式 用高阶函数动态创建代理
通过传入高阶函数这种更加灵活的方式，可以为各种计算方法创建缓存代理。现在这些计算方法被当作参数传入一个专门用于创建缓存代理的工厂中，这样一来，我们就可以为乘法、加法、减法等创建缓存代理。计算乘积： var mult = function () { var a = 1 for (var i = 0, l = arguments.length; i < l; i++) { a = a + arguments[i] } re
2020-12-02 15:24:39
240
原创 代理模式 虚拟代理实现图片预加载
代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。在Web开发中，图片预加载是一种常用的技术，如果直接给某个img标签节点设置src属性，由于图片过大或者网络不佳，图片的位置往往有段时间会是一片空白。常见做法是先用一张loading图片占位，然后用异步的方式加载图片，等图片加载好了再把它填充到img节点里，这种场景就适合使用虚拟代理。创建一个普通本体对象，负责往页面中创建一个img标签并对外提供一个setSrc接口： var myImage = (function() {
2020-11-12 10:29:46
945
1
原创 用 策略模式 重构表单校验
策略模式定义：定义一系列算法，把它们一个个封装起来，并且使它们可以相互替换。 一个策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context，Context接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明Context中要维持对某个策略对象的引用。 从第一上看，策略模式就是用来封装算法的。但实际开发中，我们通常会把算法含义扩散开来，使用策略模式封装一些列业务规则。回到主题，编写一...
2020-11-11 15:52:22
178
原创 单例模式 介绍和举例
定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现单例模式： var Singleton = function( name ) { this.name = name } Singleton.instance = null Singleton.prototype.getName = function() { console.log(this.name) } Singleton.getInstance.
2020-11-10 17:05:43
276
1
原创 装饰者模式（AOP方式来添加函数职责）
通常，在JavaScript中实现AOP（Aspect Oriented Programming，面向切面编程，通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术。），都是指把一个函数“动态织入”到另一个函数中，具体实现方式有很多，以下是通过扩展Function.prototype来做到者点。 Function.prototype.before = function( beforefn ) { var _self = this // 保存原函数引用 ret
2020-11-09 17:44:47
200
1
原创 window.performance.timing 字段说明和主要性能指标
window.performance是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。字段说明：connectStart 和 connectEnd: 分别代表TCP建立连接和连接成功的时间节点。domComplete：html文档完全解析完毕的时间节点。domContentLoadedEventStart 和domContentLoadedEventEnd：代表DOMContentLoaded事件触发和完成的时间节点。页面文档完全加载并解析完毕之后,会触发DOMConte.
2020-10-28 14:42:39
4609
原创 如何打乱一个数组
方法一：新建个空数组，从原数组中随机截取一个元素插入空数组中，直到数组长度变为0function random (arr) { let dp = [...arr] const result = [] while (dp.length > 0) { let randomIndex = Math.floor(Math.random() * (dp.length)) result.push(dp.splice(randomIndex, 1)[0]) } return
2020-10-10 15:42:33
668
原创 处理VUE移动端输入法遮挡input输入框的问题
1、tmplate部分<input v-model="id" @blur="blurIn">2、methods方法blurIn() { window.scrollTo(0, Math.max(this.scrollHieght - 1, 0))}3、computed部分computed: { scrollHeight() { return ( document.documentElement.scrollTop.
2020-10-09 16:45:42
2351
1
原创 函数节流
浏览器中某些计算和处理要比其他的昂贵很多，例如DOM操作、AJAX请求等。函数节流的基本思想是，某些代码不可以没有间断的情况下连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后...
2020-08-10 15:34:56
2830
1
原创 防纂改对象（不可扩展、密封、冻结）简介
JavaScript共享的本质一直是开发人员心头的痛。任何对象都可以被在同一个环境中运行的代码修改。ES5致力于解决这个问题，可以让开发人员定义防纂改对象。对象属性可以通过修改Configurable、Writable、Enumerable、Value、Get、Set等特性，以改变属性的行为。类似ES5增加了几个方法，通过它们可以指定对象的行为。一、不可扩展对象默认情况下，所有对象都可扩展，任何时候都可以向对象添加属性和方法。例如：现在可以使用Object.prevent...
2020-08-06 11:40:56
280
原创 搭建vue + typeScript 脚手架
1、准备基础环境，包括安装node.js，可通过命令 vue --version 检查是否安装好vue/cli。2、创建项目，通过命令 vue create <project name>。3、打开项目，通过终端安装ts。 vue add @vue/typescript。4、安装vuex。 npm i vuex...
2020-06-07 23:39:57
306
原创 random()的使用技巧
Math.random() 方法返回大于等于0小于1的一个随机数。套用下面的公式，就可以利用 Math.random() 从某个整数范围内随机选择一个值。值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)公式中使用 Math.floor() 方法，是因为 Math.random() 总返回一个小数值。而利用这个小数值乘以一个整数，然后再加上一个整数，最终结果仍然是一个小输。例如：随机选择 1 ~ 10 之间数值：var num = Mat.
2020-05-20 11:38:29
449
原创 三个基于子字符串创建新字符串的方法：slice()、substr()、substring()的区别
这三个方法都会返回被操作字符串的一个子字符串，而且也都接受一个或两个参数。第一个参数指定子字符串的开始位置，第二个参数（在指定的情况下）表示子字符串到哪里结束。slice()和 substring()的第二个参数指定的是子字符串最后一个字符后面的位置（留头不留尾）。 substr()的第二个参数指定则是返回的字符个数。 如果没有给这些方法传递第二个参数，则将字符串长度作为结束位置。与 concat() 方法一样，这三个方法也不会修改字符串本身的值——它们只返回一个基本...
2020-05-19 11:42:18
243
原创 VSCode编辑器中TypeScript自动编译配置
1、运行 tsc --init ，创建 tsconfig.json 文件。2、将红色这项的注释去掉。3、VSCode 中选择终端--运行任务4、选择 tsc:监视此时ts文件会自动编译成js文件并保存在js目录中
2020-05-18 23:02:57
988
原创 如何准确的直接打印出数据类型
function checkedType(target) { return Object.prototype.toString.call(target).slice(8, -1)}以下分别是校验 函数、数组、对象、字符串、数值、Date、null 类型的结果
2020-05-14 15:05:20
1154
原创 使用 JavaScript Proxy 实现简单的数据绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>proxy</title></head><body> <h1>使用Proxy 和 Reflect 实现双向数据绑定</h1>...
2020-03-03 14:48:48
704
原创 position 有哪些值？absolute/relative 是相对于谁定位的？
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 relative: 生成相对定位的元素，相对于其正常位置进行定位。 fixed: 生成绝对定位的元素，相对于视窗口进行定位. static：默认值。没有定位 inherit：规定应该从父元素继承 position 属性的值。...
2020-02-18 15:12:27
968
原创 手写数组的 reduce 函数
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。 Array.prototype.myReduce = function (fun, value = 0) { for (const item of this) { value = fun(item, value) ...
2020-02-18 14:48:58
226
原创 说一说JavaScript 中的事件循环（event-loop）？event-loop 为什么这么设计？和 node 中事件循环有没有区别？
事件循环分为两种，macro和micro。JS执行过程中会先执行同步任务，然后清空microtask队列，最后执行macrotask，如此反复。eventloop其实是为了解决一些异步回调，I/O操作。假设不区分marco/micro，统一都在macro处理，那callback可能就会很晚才执行，造成逻辑错误或者渲染很慢。micro在每一个macro前统一执行则很好的解决了这个问题，让回调...
2020-02-18 13:50:39
382
原创 let、const、var 区别是什么？暂时性死区是什么？
let和const都是块级作用域，不存在变量前提 const是声明常量，不允许改变。但是const定义的是一个对象，keep的仅仅是对象的地址，对象内的属性依旧可以被改变。 var作用域为函数作用域暂时性死区指的是在被let或const定义的变量，在该变量被声明之前无法被访问，会报错...
2020-02-18 13:39:19
831
原创 如何实现DFS和BFS？
DFS（深度优先搜索）：遍历当前节点的全部子节点。再遍历同一级的节点 BFS（广度优先搜索）：遍历兄弟节点，再遍历节点下的子节点测试dom： <div id='root'> <span>123 <a href="#"> sdsd </a>...
2020-02-18 11:46:18
367
原创 ES6 的 class 继承为什么一定要写 super()？super代表什么？
ES6在继承中强制要求，必须在子类调用super，因为子类的this是由父类得来的。 super等价于parent.prototype.constructor.call(sub)。super即可以做为函数调用，又可以做为对象使用。做为函数时，只能在constructor内部调用。做为对象则可以在别的方法内调用。 class B extends A {} super如果再静态方法内调用，sup...
2020-02-18 10:16:27
4042
原创 JavaScript 中，new 实现原理是什么？自己写一个 new 的实现？
创建一个新的空对象 设置这个对象的原型链为被new的prototype 把参数传入被new的对象并且绑定this 如果返回的是一个对象则直接返回对象，如果返回的是基本数据类型则忽略。function create(Con, ...args) { const obj = {} Object.setPrototypeOf(obj, Con.prototype); // obj.__p...
2020-01-21 16:55:42
309
原创 原型链的个人理解
构造函数：var M = function (name) { this.name = name}获取该M构造函数的原型对象：console.log(M.prototype)再获取M.prototype的构造函数，并证明是否结果是M：console.log(M.prototype.constructor) console.log(M.prot...
2020-01-21 16:19:05
144
原创 ES6基础知识点
ES5 及 ES6 中类的区别是什么？Object.keys 没法枚举出ES6里的属性和方法，ES5可以 class 没有变量提升 class 不可重复定义，ES5的function可以覆盖前面的ES6 中的箭头函数有什么特性？和普通函数有什么区别？自动绑定作用域的this，指向上层作用域。 箭头函数不能new。 箭头函数没有arguments 箭头函数直接return的时候可...
2020-01-20 15:50:46
151
原创 Array.prototype.slice.call()方法理解
相信很多同学翻看代码的时候都有看到类似下面这个方法Array.prototype.slice.call()逐个解析这个方法：slice:用来截取截取字符串方法 Array: javascript的一个引用类型，其原型prototype上有一个方法叫slice call和apply ： 用来改变对象中函数内部的this引用综上可以得知这个方法的主要目的是为了将类数组转化为数组...
2020-01-20 11:10:38
358
原创 简易实现手写 bind 函数
Function.prototype.myBind = function(thisArg) { if (typeof this !== 'function') { return } var _self = this var args = Array.prototype.slice.call(arguments, 1) var fnNop =...
2020-01-19 17:16:36
251
原创 call、apply 的区别？谁性能更好？
call：第一个参数是为函数内部指定this指向，后续的参数则是函数执行时所需要的参数，一个一个传递。 apply：第一个参数与call相同，为函数内部this指向，而函数的参数，则以数组的形式传递，作为apply第二参数。 call 的性能更好，不过 lodash 里的源码当参数小于等于 3 时用 call，之后用 applycall:Function.prototype.myCal...
2020-01-19 15:20:54
667
原创 JavaScript 中，执行上下文及执行上下文栈是什么？
执行上下文就是指代码执行的作用域，js中常见的有全局上下文，函数上下文。 JS引擎使用执行上下文栈来管理执行上下文。上下文栈确保了JS的执行过程，我们知道JS是单线程的，所以每次需要创建新的上下文就会对应一个上下文栈，遵循先进后出的原则。var a = 1;function b() { console.log(a) function c() { console....
2020-01-19 14:49:00
474
原创 XHR 的各种data类型对应的content-type header是什么？手写 XHR
XHR 的各种data类型对应的content-type header是什么？1、application/x-www-form-urlencoded：最早的post请求中，参数通过浏览器url传递，不支持文件上传POST /test HTTP/1.1Host: foo.exampleContent-Type: application/x-www-form-urlencodedCon...
2020-01-17 16:44:11
2336
原创 HTTP和HTTPS相关知识点和疑问解答
HTTPS建立连接的过程是什么？客户端发送请求到服务器端 服务器端返回证书和公开密钥，公开密钥作为证书的一部分而存在 客户端验证证书和公开密钥的有效性，如果有效，则生成共享密钥并使用公开密钥加密发送到服务器端 服务器端使用私有密钥解密数据，并使用收到的共享密钥加密数据，发送到客户端 客户端使用共享密钥解密数据 SSL加密建立...
2020-01-17 16:26:00
161
原创 TCP相关疑问解答
TCP连接为什么是3次握手，不是2次或4次？为了实现可靠传输，发送方接收方始终需要同步（SYNchronize）序号，序号并不是从0开始，而是由发送方随机选择的初始序列号（Initial Sequence Number，ISN）开始。由于TCP是一个双向通信协议，通信双方都有能力发送信息，并接收响应。因此，通信双方都需要随机产生一个初始序列号，并且把这个起始值告诉对方。 TCP是可靠的连接，...
2020-01-16 15:58:12
182
原创 XSS攻击是什么？原理？如何避免？
跨站脚本攻击（Cross site Scripting），攻击者利用我们前后端没有做好代码转义从而执行了攻击者所写的代码。原理？反射型XSS攻击：攻击者把恶意代码拼接在URL上诱导用户打开并执行。常见的是超链接跳转、搜索等，预防这类攻击主要在于取url字段，或者渲染超链接时，内联JS事件都需要做特定的针对性的转义处理。 存储型XSS攻击：攻击者利用可提交的输入框或表单把攻击代码提交至数据...
2020-01-10 14:10:46
554
原创 从输入url到浏览器显示页面，中间经历过什么过程？浏览器的渲染过程是怎样的？重排/重绘是什么？浏览器的HTML/CSS/JS解析过程是怎样的？
从输入url到浏览器显示页面，中间经历过什么过程？DNS（域名）解析：优先查找缓存，如果 DNS 已经缓存了直接过，否则不断溯源向上查找，直到找到为止（顺序：浏览器-操作系统-路由） tcp链接（三次握手） 发送HTTP请求，如果是HTTPS还需建立SSL，如果是H2则会判断是否支持H2，否则降级HTTP1.x 返回HTML并解析 从上至下解析HTML、CSS，生成对应的DOM树、CS...
2020-01-10 10:33:49
261
原创 递归方式实现深拷贝
通常JSON.parse(JSON.stringify())的方式进行深拷贝是不可以拷贝undefined、function、RegExp等类型。递归拷贝可以解决此类问题： // 定义一个深拷贝函数 接收目标target参数 function deepClone(target) { // 定义一个变量 let result; // 如果...
2019-11-27 15:02:07
1040
原创 前端错误监控了解
前端错误的分类即时运行错误：代码错误 资源加载错误错误的捕获方式即时错误的捕获方式try..catch window.onerror资源加载错误1、object.onerror2、performance.getEntries()// 在浏览器Console输入如下代码，可查看加载的资源performance.getEntries().forEach(ite...
2019-07-09 21:49:47
153
原创 提升页面性能的方法有哪些？
1、资源压缩合并，减少HTTP请求2、非核心代码异步加载（1）异步加载的方式动态脚本加载（document创建一个script标签加在body或者head上） defer async（2）异步加载的区别defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行 async是加载完之后立即执行，如果是多个，执行顺序和加载顺序无关3、利用浏览器缓存-->...
2019-07-08 22:32:50
894
原创 浏览器的渲染机制简介
什么时候DOCTYPE及作用DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。HTML5&...
2019-07-08 21:27:52
207
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人