- 博客(42)
- 收藏
- 关注
RSS订阅原创 react使用css3的animation实现hover时候的呼吸灯效果
先上需求和代码实现效果：一个logo在hover的时候有呼吸灯的效果实现方式：采用animation动画，具体代码如下：// 使用styled-components写animation部分。const PhoneRing = styled.div` svg{ height: 28px; width: 28px; position: absolute; bottom: 16px; right: 16px; } .showCall2{ opac
2021-10-17 21:00:47
727
原创 js数组方法的对比记忆
整理以下数组相关的方法，有对比就比较好记忆。项目是否改变原数组项目返回值参数map否新数组函数forEach否undefined函数find否找到就返回找到的值，否则返回undefined函数findIndex否找到就返回找到的值的index，否则返回-1函数indexOf否找到就返回找到的值的index，否则返回-1要查找的元素includes否找到返回true，否则返回false需要查找的元素pop是从
2021-10-05 20:02:28
105
原创 cropper.js在react中实现固定尺寸图片
诉求：从媒体库选择的图片经过裁剪之后的输出宽高是固定的。实现：利用getCroppedCanvas这个方法，往里面传你想要的宽高。用别的没有用的，使用效果如下:控制台打印效果：实际图片效果：...
2021-07-23 17:14:00
728
原创 React脚手架creat-react-app的新坑！不能全局安装!
react16在安装脚手架的时候出了bug，显示如下：看react的官网解释：我的解决办法：
2021-04-25 10:33:18
751
原创 一道面向对象的面试题的好几种解法
var a = ?;if (a == 1 && a == 2 && a == 3) { console.log('OK');}第一种思路 利用转换数字第二种思路 利用数据劫持–object.defineProperty(or proxy)
2021-03-07 20:33:10
76
原创 每日一题0307
let obj = { 2: 3, 3: 4, length: 2, push: Array.prototype.push}obj.push(1);obj.push(2);console.log(obj);答案解析
2021-03-07 18:48:47
60
原创 vue中异步组件实现按需加载
先看下这个static目录下的css文件夹和js文件夹，打包的时候把所有的css/js文件都打包进去了。可以看到app.js的大小是297b，app.js放的是所有组件的业务逻辑。如果app.js超过1MB，就要用异步组件实现按需加载，需要哪个组件，就发送请求去加载哪一个组件的js代码。修改import的书写方式，即可实现按需加载。...
2021-02-21 11:32:37
312
原创 vue项目前后端联调（贰）
但是这种情况就不行，因为webpack-dev-serve默认选项不支持通过ip的形式访问。解决办法：我的项目一直没法用ip访问，后来我发现port这里要改得和服务器端口一致才行，我之前都是写的90。
2021-02-20 15:25:02
157
原创 vue项目的前后端联调 ( 一）
一开始，我是用静态数据进行模拟服务器发送数据，使用的vue的proxytable来转发请求，见下图。后来，想在进行前后端联调，所以把本地静态数据删除，然后修改proxyTable
2021-02-20 14:29:53
1094
原创 Vue中BetterScroll的使用
BetterScroll是iscroll的封装，但是使用起来更友好。steps1.安装包 npm i better-scroll@version2.你的代码必须符合这样一个结构 <div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> </div>
2021-02-20 12:20:47
169
原创 vue怎么实现header的渐隐渐现效果
要实现这种效果也就是如果往下滑到一定的距离的过程中，header栏有渐隐渐现的效果，超过这个距离就只显示header，这个要怎么实现呢？第一步然后第二步
2021-02-20 11:42:14
375
原创 vue中使用keep-alive来优化网页性能
作用：每次切换到某个组件的时候，该组件的mounted钩子函数都会执行，结果就是每次都会发ajax请求，浪费性能。为了解决这个问题，使用keep-alive可以在第二次切换组件的时候使用缓存数据，不会再重新发送ajax请求。使用步骤：step1step2如果按照第一步来，会出现问题，如果该组件的内容要改变，要重新发ajax请求，那怎么办？解决办法：使用activated(）这个keep-alive自带的钩子函数，当组件内容改变的时候，就可以重新发送ajax请求。...
2021-02-20 10:58:18
167
原创 每日一题12/18之数据类型转换
let arr = [27.2,0,'0013','14px',123];arr = arr.map(parseInt);console.log(arr);知识点把其它的数据类型转换为number类型隐式转换：例如：==比较、数学运算（+不仅仅是数学运算，还有字符串拼接）显式转换方案：Number([val]) -> 隐式转换一般调取的都是这个方法 「浏览器有自己的特殊处理，针对于每一种情况都有详细的规则」parsetInt/parseFloat([val]) parse
2020-12-18 10:23:38
195
原创 重写Array.prototype.foreach
Array.prototype.foreach和Array.prototype.map的区别是foreach返回值是undefinedArray.prototype.forEach = function forEach(callback) { var self = this, arr = [], i = 0; if (typeof callback !== "function") throw new TypeError('callback must be a
2020-12-18 09:37:19
282
原创 每日一题12/17之compose函数（闭包应用）
实现函数fn，让其具有如下功能（百度二面）/* 在函数式编程当中有一个很重要的概念就是函数组合， 实际上就是把处理数据的函数像管道一样连接起来， 然后让数据穿过管道得到最终的结果。 例如： const add1 = (x) => x + 1; const mul3 = (x) => x * 3; const div2 = (x) => x / 2; div2(mul3(add1(add1(0)))); //=>3 而这样的写法可
2020-12-17 15:22:11
128
原创 每日一题12/16柯里化函数（闭包应用）
let res = fn(1,2)(3); console.log(res); //=>6 1+2+3
2020-12-17 09:40:44
199
1
原创 每日一题12/15之闭包作用域匿名函数具名化问题
题目：下面代码输出的结果是多少，为什么？如何改造一下，就能让其输出 20 10？var b = 10;(function b() { b = 20; console.log(b);})();console.log(b);
2020-12-15 16:55:46
139
原创 闭包作用域的变态机制之es6形参赋值默认值导致的问题
//题目1var x = 1;function func(x, y = function anonymous1(){x = 2}){ x = 3; //私有x=3 y(); console.log(x); //=>2}func(5);console.log(x); //=>1//题目2var x = 1;function func(x, y = function anonymous1(){x = 2}){ var x = 3; y();
2020-12-14 16:24:01
99
原创 每日一题12/13之非严格模式下arguments映射问题
先来个题目看看，事先说明，这种映射只存在于非严格模式下。//题目1var a = 4;function b(x, y, a) { console.log(a); arguments[2] = 10; console.log(a);}a = b(1, 2, 3);console.log(a);//题目2function fn(x,y){ let arg=arguments x=100 console.log(arg[0]); arg[1]
2020-12-14 15:17:36
202
原创 js中数组求和的几种方法与重写reduce
在js面试中数组求和是很常见的面试题，接下来的文章分为两个部分，第一部分写常见的数组求和方法，第二部分写reduce的用法以及重写reduce。常见的数组求和方法
2020-12-14 10:54:59
1424
原创 每日一题12/14之数据类型转换题
a等于什么会让下面条件成立？var a = ?;if (a == 1 && a == 2 && a == 3) { console.log('OK');}首先&&是与逻辑运算符，意思是如果每一项都为真，则整个运算结果为真，题目就变成了a等于什么的时候，a == 1 和 a == 2和 a == 3同时为真。思路1：利用 == 的隐式转换每次 == 都是一次隐式转换，== 在比较的时候，如果两边类型不一致，则转换为相同的数据类型。假设a是
2020-12-14 10:18:32
216
原创 因为浏览器版本问题导致的闭包作用域的变态机制
{ function foo() {} foo = 1;}console.log(foo);----{ function foo() {} foo = 1; function foo() {}}console.log(foo);----{ function foo() {} foo = 1; function foo() {} foo = 2;}console.log(foo);
2020-12-03 19:26:39
96
原创 重写call与bind（具体细节可以看this情况那一篇）
重写内置的call的关键是把要执行的函数和和需要改变的THIS关联在一起也就是给Function.prototype.call重新写一个函数。Function.prototype.call = function call(context, ...params) { // this->fn context->obj params->[10,20] context == null ? context = window : null; // 需要保证context
2020-12-01 16:26:12
75
原创 js中的几种继承方式（有意思的）
js的继承与其他语言不大一样，继承的目的是让子类的实例同时具备父类实例私有的属性和公有的方法。1.原型继承what：子类的原型等于父类的一个实例特点：父类中私有和公有的属性和方法最后都变成子类实例公有的。和其他语言不同的是：原型继承不会把父类的属性方法“”拷贝”给子类，而是指向型的，即让子类的__proto__基于原型链查找到自己定义的属性和方法。如果这样修改 children.proto=xxx,能实现子类改写原有父类一个实例的内容，对子类的其他实例有影响，但是对父类没有影响，ie678不允许使用
2020-11-30 22:29:52
166
原创 this有意思的应用（数组求和and任意数求和）
获取数组中的最大值 let arr = [10, 13, 24, 15, 26, 34, 11];//方法1arr.sort((a, b) => b - a);console.log(`数组中的最大值是：${arr[0]}`) //方法2console.log(Math.max(arr)); //NaN Math是对象的方法，数组没法直接用console.log(Math.max(10, 13, 24, 15, 26, 34, 11)); //34console.log(Math.ma
2020-11-27 15:47:33
107
原创 this的情况（函数和对象中的this指向谁）
this是什么首先 this：函数的执行主体，也就是谁去执行这个函数。和作用域是两个不同的概念。作用域scope是函数执行的上下文。举个例子：我去米其林三星吃饭。我去吃饭，吃饭的人是我（函数的执行主体），去哪里吃饭？米其林三星（函数作用域），这就是函数作用域和函数执行主体的区别，这两个概念一定不能混淆。函数执行主体this，有以下几种情况：1.事件绑定2.普通函数执行3.构造函数执行4.箭头函数执行5.基于call/apply/bind强行改变this现在逐一讨论这几种情况。1.事件绑定
2020-11-27 09:34:12
1180
原创 js中必须掌握的八种设计模式
1.什么是设计模式设计模式就是一种思想，用来规范编程的代码的，让代码 更整洁 清晰 维护 扩展等等。*2.单例设计模式和命令模式是早期的模块化编程，历史：AMD(require.js)CMD(sea.js)/common.js(node)ES6 module用于业务逻辑处理思想：基于单独的实例，来管理一个模块的内容，实现模块之间的独立划分，以及模块之间方法的相互调用。单例模式就是暴露方法，命令模式是控制这些方法谁先执行，谁后执行...
2020-11-26 10:25:57
302
原创 面向对象（OOP）之 函数的多种角色
函数有两大角色：函数和对象。其中函数既可以作为普通函数（有作用域链）的执行和又可以作为构造函数（原型和原型链）的执行。作为对象，有键值对。三种角色之间没有必然联系，可能存在间接关系。...
2020-11-19 16:30:09
118
原创 面向对象（OOP）之原型对象和原型链（js面向对象的底层处理机制）
首先记住三句话1.每一个类（函数）都具备prototype，并且属性值是一个对象2.prototype上有内置的属性constructor，值是类（函数）本身3.每一个对象都具备__proto__，属性值是当前所属类的prototype类和构造函数是一个概念接下来，详细讲解一下这三句话js面向对象的底层处理机制1 每一个函数数据类型都自带一个属性prototype（原型对象），属性值是一个对象，并且prototype中自带一个属性constructor，属性值是当前函数本身。此处有例外：箭头
2020-11-19 15:29:26
206
原创 面向对象之重写内置new——阿里面试题以及ES6展开运算符的小知识
怎么不用new得到一个新的实例？下面看一下两个代码的对比这两块代码可以实现同样的功能，但是一个是重写了内置的new。下面来详细说说怎么重写的，首先要了解new的运算机制，就是new到底做了什么。1.创建一个实例对象2.把执行函数的this指向实例对象（改变this指向）3.处理返回值。其中有个小知识点，关于ES6里面的展开运算符。function fn() {}let arr = [20, 30, 300]fn(...arr) //fn(20,30,300)fn(arr) //fn(
2020-11-18 20:01:35
117
原创 面向对象编程（OOP）中内置类原型方法扩展
向内置类原型上拓展方法内置类原型上提供了很多方法，但是这些方法不一定能满足日常业务需求，此时需要我们自己在内置类原型上拓展方法优点：1.调用起来方便2.可以链式调用，不用嵌套。3.限定了调取方法的类型，必须是指定类的实例。4.拓展的方法，小组其他成员都能用，相当于公共方法了。缺点：1.自己写的内置类的方法容易覆盖内置的方法，解决办法是在自己拓展的方法前面加my，比如mypop.同时Array.prototype={}是无效的，也怕自己会一行代码把所有的方法搞丢。2.基于for…in遍历的时
2020-11-18 15:35:23
93
原创 面向对象（oop）的易混知识点
首先是函数两种写法的不同之处。其次是成员访问中的this指向，这个地方比较细节，可以理解为this前面的一坨是一体。
2020-11-18 14:34:32
55
原创 Object.assign()必会易混点以及原型重定向中使用Object.assign()
Object.assign()知识点先看一个案例，当比较两个对象的时候，是用第二个obj2 去替换obj1 的内容当比较三个对象的时候，输出的是{}里面的内容Object.assign()浅比较let obj1 = { x: 100, y: 300, n: { name: 'Lily', gender: 'female' }}let obj2 = { z: 800, y: 600, n: {
2020-11-18 10:35:00
221
原创 面向对象（oop）的一些基础知识(二)之检测属性是否为当前对象的成员
Fn和Fn()的区别当new 执行的时候，如果不传递实参，那么可以写成new Fn，也就是不加小括号，这被称为无参数列表。相反的，如果是new Fn()被称为带参数列表。两者在优先级上也有区别https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence同时再强调一下，每一次new都是把函数重新执行，重新形成一个新的上下文，重新创造一个新的实例对象，代码重新执行。检测属
2020-11-12 16:28:09
83
原创 面向对象编程（OOP）的非常基础的知识（一）
什么是面向对象编程两种编程思想：面向对象编程（oop）/面向过程编程（pop）c语言是pop的编程语言，其他大部分编程语言是oop，比如Python、Java、c++、php。而html和css不属于编程语言，它们是标记语言。拓展：less/sass/stylus是css的预编译语言，它们让css具备oop的特点，即代码无法被浏览器直接识别，必须经过编译（成为正常的css）才能在浏览器中渲染。有三个关键词是了解oop必须掌握的：1.对象：泛指，万物皆对象，JS里面我们所有学习研究和开发的都是对象
2020-11-11 16:50:56
880
原创 全网最全JS数据类型检测方法及底层机制
四种检测数据类型的方法1.typeof2.instanceof3.constructor4.Object.prototype.toString.call([value])这四种方法各自有优缺点，其中Object.prototype.toString.call([value])是最为强大的，接下来详细说说这四种方法的利弊和适用情况。typeof...
2020-11-11 16:43:09
150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人