- 博客(32)
- 资源 (1)
- 收藏
- 关注
原创 解决[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关注的人