随笔分类 - JavaScript
1
摘要：SOLID原则并非单纯的1个原则，而是由5个设计原则组成的，它们分别是单一职责原则，开闭原则，里氏替换原则，接口隔离原则和依赖反转原则。 单一职责原则（SRP） 定义：一个类或者模块只负责完成一个职责（或者功能）。 从定义来看，一个类只负责完成一个职责或者功能。也就是说，不要设计大而全的类，要设计粒
阅读全文
摘要：我们在使用ajax向后端发送请求时，responseType可以设置返回数据的格式，它支持的格式有"text"、"arraybuffer"、"blob"、"document"，返回的对应数据为DOMString、ArrayBuffer、Blob、Document 前端在请求二进制数据的时候需要将re
阅读全文
摘要：在做后台管理的时候，遇到这样一个需求，实现多张图片上传并按选中的顺序显示。PS：图片上传的时候是即时上传到服务器，后台返回图片在服务器上的地址，在最后点击提交按钮的时候，把地址传给后端写入数据库即可。 1、input标签，accept='image/*'上传图片格式只要是image就行，multip
阅读全文
摘要：1、事件委托 比如ul下有5个li，又动态添加了5了，给新增的元素绑定事件 ul.addEventListener('click', e=>{ e = e || window.event; console.log(e.target.innerHTML) }) 2、使用$(document)，不一定要
阅读全文
摘要：当前端在开发过程中遇到上传文件需求，如果是上传头像、图片小文件之类的，可以正常按上传流程处理。但是当遇到上传大文件需求时，几个G或者十几个G，那么需要将这么大的文件分割成许多小片段分别上传，这种实现思路称为分片上传。 实现分片上传，精髓就是将文件分割成小片段，此时我们需要用到FormData对象和B
阅读全文
摘要：js节流和防抖的应用非常普遍，通常我们在完成功能代码进行性能优化的时候是最经常考虑到的点。 1、防抖 概念：在第一次触发时间的时候，不是立即执行函数，而是等待一段时间后（这个时间自己规定）后才去执行。如果在这个时间之内没有再次触发，那么就执行函数。如果在等待这段时间内又触发了这个函数，那么等待时间重
阅读全文
摘要：new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作： 创建一个空的简单JavaScript对象（即{}）； 链接该对象（即设置该对象的构造函数）到另一个对象 ； 将步骤1新创建的对象作为this的上下文 ； 如果该函数没有返回对象，则返回th
阅读全文
摘要：1、call ~function(){ function call_1(context, ...args){ context = context == undefined ? window : context; let type = typeof context; if(!/^('object|fu
阅读全文
摘要：浅拷贝： 1、对象：Object.assign()、{...obj1} 2、数组：Array.prototype.slice(arr1) 深拷贝： 1、简单封装函数 function deepClone(obj){ if(obj null) return null; if(typeof obj !=
阅读全文
摘要：function reduce(arr, callBack ,initVal){ if(!Array.isArray(arr) || !arr.length || typeof callBack != 'function') return []; let hasInitVal = initVal !
阅读全文
摘要：const eventUtils = { // 绑定事件 addEvent(ele, type, handler){ if(ele.addEventListener{ ele.addEventListener(type, handler, false) }else if(ele.attachEven
阅读全文
摘要：在实际开发中，除去字符串中的空格非常常用，总结三种方法 1、使用replace方法配合正则表达式 let str = " aa bb cc"; str = str.replace(/\s*/g,"") //除去所有空格 str = str.replace(/^\s*|\s*$/g,"") //去除首
阅读全文
摘要：let time = new Date(); //Thu Mar 06 2014 21:16:55 GMT+0800 (中国标准时间) let time1 = new Date(time); //1578991213870 //直接输出毫秒 let time = +new Date() //1578
阅读全文
摘要：reduce()是这样定义的：reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。需要注意的是reduce()的回调函数在数组为空数组的时候是不会执行的。 reduce()可以接收两个参数，第一个参数是回调函数（必须的），这个回调函数有四个参数：tot
阅读全文
摘要：//第四种 for (let i = 0; i < 10; i++) { ((v)=>setTimeout(()=>{ console.log(v) }, 100))(i) }
阅读全文
摘要：1、原生js给button绑定多个点击事件 var btn = document.getElementById("btn"); btn.addEventListener("click",function(){ console.log('第一个事件') }) btn.addEventListener(
阅读全文
摘要：ECMAScript5为数组定了5个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响this的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响访问的返
阅读全文
摘要：1、ES6的Set方法 function unique(arr){ return Array.from(new Set(arr)) } console.log(unique([1,1,2,2,3,3,4,4])) //[1,2,3,4] 2、最常用使用for循环 function unique(ar
阅读全文
摘要：最开始见到event loop这个字眼是在一次笔试上，请简要描述你对event loop的理解。作为前端最底层的小白，当时看到event loop都不知道是什么意思。回来之后赶紧科普一下，event loop翻译成中文是事件循环。题目大概考察的是对js中事件机制的理解。翻阅众多博客，有长话短说的也有
阅读全文
摘要：js并不是真正从上到下依次执行的，js在执行这些代码之前首先要进行一个预解析，它先去找所以的定义，变量的定义函数的声明，并且把变量的定义函数的声明进行提升，提升到这个作用域的最顶层。当执行到函数内部的时候，在执行函数内部的预解析，执行完预解析后再去执行代码，代码是一行一行的执行的。 变量和函数同名的
阅读全文
1
