折海棠赠晩宁.-CSDN博客

原创 web前端面试题必备

1、vue数据双向绑定原理vue.js 是采用数据劫持结合发布者-订阅者的模式的方法，通过Object.defineProperty()来劫持各个属性的Getter、setter，在数据变动时发送消息给订阅者。它实现的整个流程是先为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者，v-model就会添加一个订阅者，接着用input举例，为input添加监听事件，修改值就会为这个属性赋值

2020-10-12 09:21:52 885 2

原创感悟+北京and新疆知识点

重点知识文件

2023-02-08 13:56:09 1402

原创大厂前端开发笔试题

答题说明做题时间： 30分钟，能做多少做多少加分项：使用TypeScript/ES6编写函数有明确的输入输出类型定义明确合理边界情况处理完善注释清晰采用声明式编程一、函数限频已知一个分页加载的卡券列表页，只要页面滚动到底部就向服务器发起请求，加载下一页卡券数据。由于滚动事件非常频繁，过多的请求导致服务器压力很大。请编写一个函数，减少上述场景发起请求的频率/** * @param {Function} handler 逻辑函数 * @param {number} gap 间隔时

2022-03-17 10:31:33 1203

原创 web前端面试题最全版总结

一、前端必备1、web前端性能优化1.1 性能评级工具PageSpeed 是由谷歌官方开发的一款可以分析页面载入的各个方面，包括资源、网络、DOM以及时间线等等信息的在线检测工具。(Google的插件)YSlow是Yahoo发布的一款基于FireFox(火狐浏览器)的插件，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则进行优化。它可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意1.2 前端性能优化1、从DOM结

2021-12-22 18:34:13 1419

原创解决uniapp微信开发小程序背景本地图片渲染层网络层错误问题

一、首先看一下我们的源代码和报错原因1.1源代码是这个样子的1.2先来看下我们的页面1.2.1原设计图是这个样子的1.2.2而此时我们的页面1.3然后来看下我们的报错二、解决方法2.1先来看下我们的源代码把原有的background-image: url(../../static/img/hd2.png);剪切掉放到我们的template中的布局中2.2 然后再来看下我们的页面此方法是自己试出来的如果有效果的话请劳烦您的小手点个赞！！...

2020-12-22 10:36:10 3330 1

原创什么是RESTful API？

一. 定义Rest的全称是Representational State Transfer，2000年由Roy Fielding发表在他的博士论文中，首次提出了Restful的概念。Restful 做为一种接口的设计规则，基于HTTP协议，可以使用XML格式或JSON格式传输数据。对于使用restful这套规则定义开发的接口，我们称之为Restful API。关于Restful的具体表现形式，简单可以用一句话概括：URL定位资源，使用HTTP请求（GET、POST、PUT、DELETE等）对资源进行操作

2020-10-15 08:41:56 1008

原创 vue双向数据绑定原理(面试必备)

原理vue.js是采用数据劫持结合发布者-订阅者的模式的方法，通过Object.defineProperty()来劫持各个属性的Getter、setter，在数据变动时发送消息给订阅者。实现的整个流程首先为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者，v-model就会添加一个订阅者，接着为input添加监听事件，修改值就会为该属性赋值，触发该属性的set方法，在 set方法内

2020-10-05 10:05:07 385

转载在微信开发程序中点击执行“构建npm“报错

一、官网给的文档写的不够充分，需要你充分理解npm的使用方法，才能明白的；二、开始步骤： 1、第一步：npm init 2、第二步：npm install --production 3、第三步： npm i vant-weapp -S --production三、还要注意一点就是微信开发者工具要更新到最新版本，不然点击工具没有构建npm这一栏，原文：https://blog.csdn.net/zfeng816/article/details/85095885...

2020-09-25 21:32:57 348

原创 Vue 项目性能优化 (图片优化)

Webpack 对图片进行压缩在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片：首先，安装 image-webpack-loader ：npm install image-webpack-loader --save-dev

2020-09-24 21:45:27 852

原创 vue 自定义指令如何使用和应用场景

作用：是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。自定义指令编写的方式有2种 1、全局自定义指令全局的指令必须要在实例化之前进行定义 Vue.directive(参数1,参数2) 参数1: 指令的名称参数2: 指令实现的函

2020-09-20 21:21:37 307

原创 vue组件封装

我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、

2020-09-20 21:08:16 105

原创 vue中的事件修饰符

常用的修饰符@事件.stop 阻止事件冒泡@事件.prevent 阻止事件默认行为@事件.capture 触发事件捕获@事件.self 当事件在该元素本身触发回调@once 只执行一次@事件.passive 告诉浏览器你不想阻止事件的默认行为.使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。v-model的修饰符<1>

2020-09-20 21:04:18 153

原创 js的数据类型存储

js数据类型JavaScript一共有8种数据类型：7种基本数据类型： Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值）和 BigInt（es10新增）；1种引用数据类型： Object（Object本质上是由一组无序的名值对组成的）。里面包含 function、Array、Date等。JavaScript不支持任何创建自定义类型的机制，而所有值最终都将是上述 8 种数据类型之一。如何存储基本数据类型：直接存储在栈（sta

2020-09-20 20:52:21 203

原创 vue常用指令

1、v-model多用于表单元素实现双向数据绑定2、v-for循环数组或json3、v-show显示/隐藏dom元素，通过display=block/none来控制元素显示/隐藏4、v-if判断显示/隐藏 dom元素5、v-else-if必须和v-if连用6、v-else必须和v-if连用不能单独使用否则报错模板编译错误7、v-bind绑定属性v-bind:class 三种绑定方法1、对象型 ‘{red:isred}’2、三元型 ‘isred

2020-09-16 21:42:58 107

原创 vue中的11个生命周期

BeforeCreate（创建前）该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前，实例初始化之后被调用。在该阶段组件未创建，不能访问数据，组件中的 data，ref 均为 undefined。Created（创建后）在组件创建完成后立即调用在这一步实例已经完成了数据观测属性和方法的运算 watch、event事件回调但是还没有渲染成html模板组件中的data已经存在可以进行操作了但是el仍然是undefiend 因为挂载

2020-09-16 08:25:16 2935

原创在vue中v-if和v-show的区别与使用场景

相同点都可以动态控制着dom元素的显示隐藏区别一、基于vue框架v-if：控制DOM元素的显示隐藏是将DOM元素整个添加或删除；v-show：控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的二、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；...

2020-09-15 20:41:27 162

原创 vue中axios封装和api接口管理

vue中Axios的封装和API接口的管理我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。1. 安装npm install axios; // 安装axios2. 目录创建一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一

2020-09-14 19:19:09 221

原创事件监听

1、事件监听的定义关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。在Javascript中，浏览器一般分为两大类：① 基于IE内核的浏览器（版本号小于9的IE浏览器）

2020-09-14 08:43:35 402

原创 JS的23种设计模式

一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。其实还有两类：并发型模式和线程池模式。用一个图片来整体描述一下：二、设计模式的六大原则总原则：开闭原则（Open Close

2020-09-14 08:31:04 748

原创内存泄漏与垃圾回收机制

什么是内存泄漏？程序的运行需要内存，只要程序提出要求，操作系统或者运行是就必须供给内存。对于持续运行的服务进程，必须及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏。有些语言（比如c语言）必须手动释放内存，程序员负责内存管理。这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"。标题常见的内存泄漏的原因全局变量引起的内存泄漏 function leaks(){ leak = 'xxx

2020-09-13 21:44:25 166

原创 5种方式实现数组扁平化

数组扁平化概念数组扁平化是指将一个多维数组变为一维数组[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]实现方法：1. reduce遍历数组每一项，若值为数组则递归遍历，否则concat。function flatten(arr) { return arr.reduce((result, item)=> { return result.concat(Array.isArray(item) ? flatten(i

2020-09-10 21:56:35 151

原创 JS最简单、实用的两种数据排序的方法

1.sort() 方法sort() 方法以字母顺序对数组进行排序：var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.sort(); // 对 fruits 中的元素进行排序2.比值函数比较函数的目的是定义另一种排序顺序。比较函数应该返回一个负，零或正值，这取决于参数语法：function(a, b){return a-b}实例1:查找最高（或最低）的数组值JavaScript 不提供查找数组中最

2020-09-09 19:52:44 572

原创最常用、最简单的JS数组去重的两种方法

1.遍历数组法（indexOf方法）它是最简单的数组去重方法实现思路：新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中；var arr=[2,8,5,0,5,2,6,7,2];function e(arr){ var newArr=[]; //临时数组 for (var i = 0; i < arr.length; i++) { if(newArr.indexOf(arr[i])==-1){ newArr.push(ar

2020-09-09 19:39:28 246

原创 ES6常用的数组方法总结

1、Array.from()用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组。let json ={ '0':'11', '1':'22', '2':'33', length:3 } let arr = Array.from(json); console.log(arr); // ["11", "22", "33"] 2、Array.of()将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。let arr1

2020-09-08 21:25:54 189

原创 ES5常用的数组方法总结

ECMAScript 5中对Array中新增了9个方法：5个迭代方法（循环操作数组中的各个项）：forEach(),map(),filter(),every()和some()2个归并方法（迭代数组所有项，最终返回一个值）：reduce()和reduceRight()2个索引方法：indexOf() 和 lastIndexOf()；一、forEach()方法跟之前的for()循环一样，只是forEach更灵活遍历当前数组，参数为一个回调函数，回调有三个值：1.e当前元素，2. index当

2020-09-08 20:17:29 778

原创 generator总结（异步编程、yield、next()、await 、async）

提示：Generator 是一个迭代器生成函数，其返回值是一个迭代器（Iterator），可用于异步调用。迭代器协议：定义了一种标准的方式来产生一个有限或无限序列的值Generator 函数的定义语法上，可以把理解成，Generator 函数是一个状态机，封装了多个内部状态。形式上，Generator 函数是一个普通函数。它不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用y

2020-09-06 16:17:02 238

原创 async/await（优势在于处理then链）

词法定义asyncasync 是“异步”的简写， async 用于申明一个异步的 functionawait有两个作用，一是作为求值关键字，二是将异步操作变成同步操作；如果方法中使用了await，那么在方法前面必须加上asyncawaitawait 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。async/await其实是Promise的语法糖，它能实现的效果都能用then链来实现，它是为优化then链而开发出来的。从字面上来看，async是“

2020-09-06 16:01:41 1204

原创 Promise总结（promise 是什么？有哪些状态和参数？如何使用？）

Promise 是什么？Promise 是异步编程的一种解决方案:主要用于异步计算可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果可以在对象之间传递和操作 promise，帮助我们处理队列Promise的参数是什么？Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用：在异步操作失败时调用，并将异步

2020-09-06 15:34:53 2547

原创 var与let、const的区别以及代码总结

一、声明的变量是否会挂载在window上？var声明的变量会挂载在window上，而let和const声明的变量不会代码如下：var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,window.c); // 1 undefined二、是否存在变量提升？var声明变量存

2020-09-06 14:58:46 121

转载 VueX如何使用和相关面试题（Vue状态管理模式)

一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。1.2 安装由于VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCli 2.

2020-09-03 23:20:04 414

原创 JS中原型与原型链详解

1.原型的概念protoJavaScript的所有对象中都包含了一个[proto]内部属性，这个属性所对应的就是自身的原型。prototypeJavaScript的函数对象，除了原型[proto]之外，还有prototype属性，当函数对象作为构造函数创建实例时，该prototype属性值将被作为实例对象的原型[proto]constructor每个原型都有一个constructor属性，指向该关联的构造函数。2.原型链概念实例对象与原型之间的连接，叫做原型链。当一个对象调

2020-09-02 22:40:46 140

原创 JS继承（ES5的6种继承 and ES6新增）

ES5 有 6 种方式可以实现继承，分别为1.原型链继承父类的实例作为子类的原型原型链继承的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。 //原型链继承 function Fu() { this.name = "张三"; this.age = 2; } Fu.prototype.child = function() { return this.name; }; let a = new Fu()

2020-09-02 20:20:56 149

原创 JS中改变this指向的方法(call和apply、bind)

导读：thisthis是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。this一般指向的是当前被调用者，但也可以通过其它方式来改变它的指向，下面将介绍三种方式call，apply，bindcall、apply、bind的作用是改变函数运行时this的指向。call，apply，bind 这三个函数是 Function原型上的方法 Function.prototype.call() Function.pr

2020-09-01 19:45:46 570

原创 js数据类型判断的四种方法

1、typeof（返回数据类型）返回数据类型，包含这7种： number、boolean、symbol、string、object、undefined、function。typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用2、instanceof（实例、判断对象类型）注意： instanceof 检测的是原型判断 new 关键字创建的引用数据类型不考虑 null 和 undefined（这两个比较特殊）以对象字面量创建的基本数据类型instanc

2020-09-01 00:13:34 154

原创 JS数据类型(8种)

注意：JS的数据类型有8种。在ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null。ES6 中新增了一种 Symbol。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）JS数据类型：总结1､Undefined 类型只有一个值。在使用var 声明变量但未对其加初始化时，这个变量就

2020-09-01 00:09:02 233

原创 H5 的新特性总结

1、语义化标签：header、footer、section、nav、aside、article2、增强型表单：input的多个 type3、新增表单元素：datalist、keygen、output4、新增表单属性：placehoder、required、min 和 max5、音频视频：audio、video6、canvas绘画7、地理定位8、拖拽9、本地存储：localStorage - 没有时间限制的数据存储；sessionStorage- 针对一个 session 的数据存储，当用户关

2020-08-30 16:08:00 259

原创 css3动画的总结

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。CSS3 中有三个关于动画的样式属性transform、transition和animation；transformtransform可以用来设置元素的形状改变，主要有以下几种变形：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形），语法如下：

2020-08-30 15:28:35 142

空空如也

空空如也