- 博客(32)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 解决[Intervention] Unable to preventDefault inside passive event listener due to target being treat...
移动端做拖拽的时候遇到的问题解决：加上如下样式* { touch-action: pan-y;}
2020-09-04 10:28:38
443
原创 微信小程序-页面返回更新页面
微信小程序实现页面B返回页面A并刷新页面A的数据：①需求：前端开发过程中常常有这样的需求，从A页面跳转到B页面，在B页面改了某些状态，返回A页面时期望A页面产生更新的操作：②思路：一开始我的想法是在A页面onShow的时候编写更新操作，但这样只要A页面展示就更新，耗性能。有没有一种方法可以在B页面更新时才执行A页面的方法更新，这样就达到了我们的要求。再网上果然找到了。方法如下：var page = getCurrentPages()； 1. 获取页面栈var beforePage = pages[
2020-08-07 15:22:35
536
原创 uni.uploadFile上传图片后台接收不到数据
uni.uploadFile({ url: this.serverUrl,//服务器地址 name: 'myfile',//key filePath: url,//需要上传的文件路径 header: { //设置请求头 // 'content-type':'multipart/form-data'' // 'Content-Type':'multipart/form-data' }, formData: {}, success: function(res) {
2020-07-24 10:13:50
9487
8
转载 Vue面试题整理
1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责
2020-07-02 10:06:30
507
原创 JS中的同步异步编程-微任务-宏任务
浏览器是多线程的1. GUI渲染线程2. HTTP网络请求线程(并发数6~7)3. 事件监听\定时器监听…JS代码的运行是单线程的：浏览器只分配一个GUI渲染线程去执行我们的JS代码1. 对于大部分JS代码来讲上面代码没有执行完，下面代码是不能执行的 “同步编程”2. 但是对于某些JS代码来讲（事件绑定、定时器、Promise/async/await、Ajax等），我们需要在上面代码没有处理的情况下，GUI渲染线程能够继续向下执行 “异步编程”console.time('AAA');//..
2020-06-07 12:49:16
190
原创 数据结构-队列和优先级队列
一、队列function Queue() { // 创建一个队列的容器 this.container = [];}Queue.prototype = { constructor: Queue, // 进入队列 element进入队列的元素 enter: function enter(element) { this.container.push(element); }, // 移除队列 leave: function leave() { if (this.container.l
2020-06-05 18:51:22
116
1
原创 前端性能优化-页面渲染层
1、先要了解浏览器的渲染原理。1）标签语义化和避免深层次嵌套CSS选择器渲染是从右到左尽早尽快地把CSS下载到客户端（充分利用HTTP多请求并发机制）stylelink@import放到顶部避免阻塞的JS加载放到底部...
2020-06-05 18:47:33
709
原创 前端性能优化-网络层
一、URL请求1、用户在浏览器地址栏中输入地址之后经历了哪些事情（一次完整页面请求所发生的事情）面试题常问1）URL解析2) DNS解析3）建立TCP连接（TCP三次握手）4、发送HTTP请求，6、服务器处理请求，返回响应结果7、关闭TCP连接通道（TCP四次挥手）8、浏览器渲染9、代码执行各步骤详解1、URL解析 1）地址解析和编码 2）HSTS（HTTP严格传输安全协议） 3）缓存检查2、DNS解析3、TCP三次握手4、发送HTTP请求
2020-06-01 14:46:15
752
原创 发布订阅模式封装
发布订阅设计模式(function () { /* * 真实项目中的封装（类库、插件、组件）基本上都是基于面向对象的思想 * 1. 创建类和类的实例，每一个实例之间是相互独立的，有自己的私有属性方法，还能拥有公共的属性方法 * 2. 只要保证方法中的THIS是实例，这样各个方法中就可以实现信息的通信 * ...... */ const hasOwn = Object.prototype.hasOwnProperty;//检验对象中是否存在某个属性obj.hasOw
2020-06-01 11:33:05
224
原创 reset.min.css
html中常用去除浏览器默认样式的cssbody,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td{margin:0;padding:0}body{font-size:12px;font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18p
2020-06-01 11:28:29
730
原创 JS浏览器事件
js浏览器常见事件，可在MDN中查阅相关使用方法https://developer.mozilla.org/zh-CN/docs/Web/Events1、什么是浏览器事件呢？事件是浏览器天生就具备的行为，不论我们是否基于JS代码绑定方法，只要相关的行为触发，则一定会触发相关的事件理解：比如说 box.onclick 并不是因为box绑定了click方法才具备的点击事件。click事件本身就是存在的，只要我们点击了box就会出发点击事件。2、浏览器有哪些事件行为？常见事件行为：【鼠标事件
2020-06-01 11:21:58
1090
原创 JS中的多种继承方式
JS本身是基于面向对象开发的编程语言=》类：封装、继承、多态1、封装：类也是一个函数，把实现一个功能的代码进行封装，以实现低耦合高内聚2、多态：重载、重写重写：子类重写父类上的方法（伴随着继承运行的）重载：相同的方法由于参数和返回值的不同，具备了不同的功能（JS不具备严格意义上的重载）JS中的重载，同一方法根据传参的不同实现不同的功能；3、继承：子类继承父类中的方法在JS语言中，它的继承和其他编程语言还是不太一样的JS中的多种继承方式1）JS中的第一种继承方案：原型继承（让子类的原型=
2020-05-23 14:41:35
171
原创 js面试题每日背诵计划
5-231、谈谈你对闭包的理解，以及在项目中的应用！回答技巧阐述闭包是什么？（引申：堆栈、EC、AO、VO、SCOPE…）闭包的作用及在真实项目中的应用场景，以及所带来的问题！由闭包引发的高阶编程技巧突出自己在分析研究框架的源码（逼格更高的是自己写类库、插件的时候）是怎么应用这些东西的!回答如下：// 建议：浏览器加载页面会把代码放到栈内存中执行（也就是ECStack），函数进栈执行会产生一个私有的上下文（也就是EC），此上下文能保护里面的私有变量（也就是AO）不受外界的干扰，并且如果当
2020-05-23 10:35:37
244
原创 一个题目带你理解函数的三种角色
函数的三种角色1、普通函数2、构造函数（类）3、对象首先我们来看看这三种角色分别做了哪些操作：普通函数函数的执行 Fn()形成私有的上下文 <EC(Fn)>、初始化作用域链、初始化this[window]、初始化arguments、形参赋值、变量提升、代码执行…构造函数构造函数的执行 new Fn()形成私有的上下文 <EC(Fn)>、初始化作用域链、和普通函数的区别：创建一个对象（这个对象是当前类的实列）this（指向创建的对象）
2020-05-21 19:31:37
170
原创 call的实现原理
Function.prototype：call/apply/bind 是Function原型上的方法，这三个方法都是用来改变函数中的THIS的call：[function].call([context],params1,params2,…)(1)[function]作为Function内置类的一个实例，可以基于__proto__找到Function.prototype的call方法，并且把找到的call方法执行；(2) 在call方法执行的时候，会把[function]执行，并且把函数中的THIS
2020-05-20 15:54:38
2687
原创 JS中this的理解
我们在编写代码的过程中经常会遇到this的指向问题，下面对this的指向做一个总结一、THIS：1）全局上下文中的this是window；2）块级上下文中（如:判断体“{}”，循环体“{}”）中没有自己的this,它的this是继承所在上下文中的this的；3）在函数的私有上下文中，this的情况会多种多样，也是接下来我们重点研究的；二、函数中的THIS:THIS不是执行上下文(EC才是执行上下文)，THIS是执行主体如何理解主体呢？如：张三拿着加了五个鸡蛋的煎饼果子去北京大饭店吃早
2020-05-20 12:04:28
274
原创 var-let-const三者的区别
ES3创建变量用的是 varES6创建变量用的是 let / const那么var/let/const三者的区别？// let VS const =>突出的是指针指向以及等号赋值的底层机制// =赋值其实就是指针指向的过程，先创建值，再创建变量（引申：堆栈内存上以及AO/VO上 [点到为止]），最后指针关联；LET创建的变量，是因为可以修改当前变量的指针指向，而CONST创建的变量，指针指向一但确定，则不能再更改（引申：平时也看一些好的文章，有的文章中介绍CONST创建的是常量，我.
2020-05-10 23:13:39
159
原创 数学函数常用方法
一、 Math数学函数：但是他不是一个函数，他是一个对象，对象中存储了很多操作数字的方法,因此被称为数学函数；console.log(typeof Math); //"object"console.dir(Math);/*Math={PI: 3.141592653589793,abs:function abs(){[native code]},ceil:function ceil(){[native code]}}*/Math 常用的属性和方法在 MDN 网站可以查到相应方法
2020-05-10 22:52:33
190
原创 数组常用的方法-必须背下来
数组常用的方法（背下来，越熟悉越好）如何学习数组的方法呢？从以下4点学习方法的含义和作用方法的实参（类型和含义）方法的返回值原来的数组是不是会发生改变一、数组增删改方法（增删改的方法一定会修改原有的数组）1、push：向数组末尾增加内容@params 多个任意类型@return 新增后数组的长度 const animals = ['pigs', 'goats', 'sheep']; const count = animals.push('cows');
2020-05-10 22:51:23
279
原创 闭包的理解和应用-面试必问题-提高逼格的回答
谈谈你对闭包的理解，以及在项目中的应用！阐述闭包是什么？（引申：堆栈、EC、AO、VO、SCOPE…）闭包的作用及在真实项目中的应用场景，以及所带来的问题！由闭包引发的高阶编程技巧突出自己在分析研究框架的源码（逼格更高的是自己写类库、插件的时候）是怎么应用这些东西的!回答如下：// 建议：浏览器加载页面会把代码放到栈内存中执行（也就是ECStack），函数进栈执行会产生一个私有的上下文（也就是EC），此上下文能保护里面的私有变量（也就是AO）不受外界的干扰，并且如果当前上下文中的某些内.
2020-05-10 22:47:29
296
原创 格式化时间-获取URL地址栏参数-万能方法
常用正则扩展方法其它方法：formatTime 、 queryURLParams 、 millimetereval()的作用：将字符串变成表达式~function(){ /* * formatTime:时间字符串的格式化处理 */ function formatTime(templete="{0}年{1}月{2}日 {3}时{4}分{5}秒"){ //默认模板 //1、首先获取事...
2020-05-06 19:03:01
853
原创 其他正则捕获的方法-test捕获-replace捕获
其他正则捕获的方法一、 test也能捕获（本意是匹配）RegExp.$1~RegExp.$9：获取当前本次正则匹配后，第一个到第九个分组的信息 let str = "{0}年{1}月{2}日"; let reg = /\{(\d+)\}/g; console.log(reg.test(str)); //=>true console.log(RegExp.$1)...
2020-05-06 17:30:09
185
原创 正则捕获-正则捕获的贪婪性
正则捕获的贪婪性正则捕获的贪婪性：默认情况下，正则捕获的时候，是按照当前正则所匹配的最长结果来获取的let str = "正则2019@2020捕获";let reg = /\d+/g;console.log(str.match(reg)); //=>["2019","2020"]在量词元字符后面设置？：取消捕获时候的贪婪性（按照正则匹配的最短结果来获取）let str = ...
2020-05-06 14:23:18
161
原创 正则捕获-正则捕获的懒惰型
正则的捕获实现正则捕获的办法正则RegExp.prototype上的方法exectest字符串String.prototype上支持正则表达式处理的方法replacematchsplite…基于exec实现正则的捕获捕获到的结果是null或者一个数组第一项：本次捕获到的内容其余项：对应小分组本次单独捕获的内容index：当前捕获内容在字符串中的起始索引inpu...
2020-05-06 11:55:58
128
原创 正则表达式
正则表达式regular expression：RegExp用来处理字符串的规则只能处理字符串它是一个规则：可以验证字符串是否符合某个规则（test），也可以把字符串中符合规则的内容捕获到（exec / match…）编写正则表达式创建方式有两种:字面量创建方式（两个斜杠之间包起来的，都是用来描述规则的元字符）let reg1 = /\d+/;构造函数模式创建 ...
2020-05-06 10:33:03
330
1
原创 闭包作用域面试题分析
let arr = [10.18, 0, 10, 25, 23];arr = arr.map(parseInt);console.log(arr);//[10,NaN,2,2,11]分析： parseInt首先把第一项转换为字符串，然后看做X(2~36)进制，最后转换为十进制parseInt(10.18,0)=>把’10’看做10进制转换为10进制 =>10par...
2020-04-30 10:13:55
213
原创 闭包和作用域
GO 全局对象window 堆内存 浏览器内置的APIVO(G) 全局变量对象 上下文中的空间 全局上下文中创建的变量基于VAR/FUNCTION在全局上下文中声明的全局变量也会给GO赋值一份（映射机制）但是就LET/CONST等ES6方式在全局上下文中创建的全局变量和GO没有关系var/function存在变量提升 但是let/const不会浏览器的垃圾回收机...
2020-04-28 20:16:51
253
原创 浏览器如何实现变量提升var和function
变量提升变量提升：在当前上下文中(全局/私有/块级)，JS代码自上而下执行之前，浏览器会提前处理一些事情（可以理解为词法解析的一个环节，词法解析一定发生在代码执行之前）,会把当前上下文中所有带VAR/FUNCTION关键字的进行提前的声明或者定义带var的只会提前的声明、带function会提前的声明定义使用变量提升的作用：没有给变量定义值就使用不会报错，不影响js执行。var a=1...
2020-04-27 14:22:18
577
原创 arr.map(){}-数组迭代-N进制运算
/*数组的迭代方法（遍历数组中的每一项做一些特殊的处理）forEach 遍历数组每一项（数组中有多少项，就会触发执行多少次回调函数，每一次把迭代的当前项和当前项的索引传递给回调函数）map 和forEach类似，只不过支持返回值，回调函数中的返回值会把当前迭代的这一项替换掉find 迭代数据每一项的时候，只要有一项在回调函数中返回TRUE则找到内容，后面不会在迭代了,返回的是找到的这一项...
2020-04-27 10:36:28
190
原创 JS运行的底层机制-web前端高级学习
js运行的底层机制创建对象步骤：1、创建一个堆内存2、把键值对存储到堆内存3、堆内存地址放到栈中，供变量调用
2020-04-22 18:47:54
292
原创 JS中的数据类型-web前端高级学习
JS中的数据类型 7+2 - 基本数据类型（也称值类型）： number、 string、boolean、null、undefined、 symbol、bigint===>ES6中新增了两种数据类型symbol和bigint引用数据类型：对象(object) 、函数(function)对象包含：普通对象、数组对象、正则对象、日期对象、Math数学函数对象…数据类型检测- t...
2020-04-22 17:40:39
122
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人