- 博客(30)
- 收藏
- 关注
RSS订阅
原创 前端面试题总结
link和@import的区别1.link是html标签，@import在css里是值导入外部样式表2.页面被加载时，link会被同时加载，而import会等它先加载完再加载3.import只支持IE5以上才支持，而link是css样式，没有兼容问题4.link比import权重要大5.link支持javascript改变样式，而import不支持javescript原型和原型链每一个函数对象里都有一个prototype属性，被称为显示原型每一个实例对象里都有一个_ _ proto _ _属
2020-10-26 08:23:31
1315
6
原创 前端开发小技巧
1.使用element表格时会多出一块.gutter解决:在style中加/deep/ body .el-table th.gutter { display: none !important;}
2021-12-13 11:20:52
888
原创 封装微信小程序的数据请求流程
1.目录结构在根目录下创建http目录及api.js文件 fetch.js以及http.js文件；在根目录下创建env目录,创建index.js配置并导出多个开发环境module.exports={ //开发环境 Dev:{ "BaseUrl":"https://www.develep.com" }, //测试环境 Test:{ "BaseUrl":"https://www.test.com" }, //生产环境 Prod:{ "BaseUr
2020-09-28 17:11:14
350
原创 vue中的provide和inject
一、名词解析：provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。说明：provide 和 inject 主要
2020-09-23 08:46:06
139
原创 axios封装与api接口管理
一、前言axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库二、axios封装步骤安装axios npm install
2020-09-14 21:49:18
105
原创 事件监听、事件模型
事件监听事件监听就是让计算机等待某个事件的发生，当这个事件发生之后，对其做出一个相应，如等待鼠标单击按钮，单击发生时打开一个新的页面；但是你写的监听事件发现这件事情后，会进行阻止，让其无法跳转。事件监听涉及到三个类对象1、EventSource(事件源）事件发生的场所2、Event(事件)：事件封装界面组件上面发生的特定事件3、EventListener(事件监听器)：负责监听事件源发生的事件事件监听用法1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖
2020-09-13 20:42:59
144
原创 JS垃圾回收机制和内存泄漏
一、浏览器内存泄漏浏览器封装的V8引擎支持对JS进行解析，当程序运行（runtime）时，只要程序提出需要内存，例如声明赋值字符串、对象、数组等变量时；操作系统就必须给分配内存使用，对于持续运行的服务进程，变量不断增加，并且内存没有得到及时的释放，内存占有会越来越大，轻则影响系统性能，重则直接导致系统崩溃。1、闭包加引用 let fn = () =>{ let a = 0 return () => { return a++
2020-09-13 19:57:50
98
原创 JS设计模式
1.工厂模式function createPerson(name,age,job){ var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.speak = function(){ console.log(this.name); }; return obj}var person1 = createPerson('panrui',20,'前
2020-09-13 19:07:39
102
原创 JS数组排序（冒泡、快速、插入）
1.冒泡排序法将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>ar
2020-09-11 11:46:50
185
原创 JS数组去重
情境：将数组var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a’,{},{}]中重复的值过滤掉1.ES6-set使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, nu
2020-09-11 11:30:06
61
原创 JavaScript事件代理（事件委托）
基本概念事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。举个通俗的例子比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一 一分发给每个宿舍同学；在这里，取快递就是一个事件，
2020-09-10 23:09:31
89
原创 数组扁平化
扁平化数组的扁平化，就是将一个嵌套多层的数组array(嵌套可以是任何层数)转换为只有一层的数组。例：假设有个名为flatten的函数可以做到数组扁平化， 效果就会如下：var arr = [1, [2, [3, 4]]];console.log(flatten(arr)) // [1, 2, 3, 4]递归通过遍历最外层数组的每一个元素，看看是否还是数组，如果是的话，继续递归执行，不是的话，放到最后的结果数组当中，代码如下: let arr = [1, [2, [3, 4]]];
2020-09-10 21:54:32
126
原创 ES6数组中的方法
1.forEach()函数1.数组名.forEach（function（数组中一个元素的值）{对之恶个值进行处理…})2.数组名.forEach（test）test为方法名，不用加（），把函数引用传进去
2020-09-08 21:56:30
82
原创 ES5中数组的方法
1.forEach从头到尾遍历数组，为每个元素调用指定函数第一个参数：传递的函数该函数调用的参数：数组元素，元素索引，数组本身例子：2.map()调用数组的每个元素传递给指定的函数，并返回一个包含返回值的新数组；传递给map()的函数有返回值，map()返回新数组，不会修改调用的数组；如果是稀疏数组，返回的也是相同方式的稀疏数组例子：filter()返回数组的一个子集，回调函数用于逻辑判断是否返回，返回true则把当前元素加入到返回数组中，false则不加；新数组只包含true的值，
2020-09-08 21:25:25
183
原创 generator（特点，用途）
Generator 函数的定义语法上，可以把理解成，Generator 函数是一个状态机，封装了多个内部状态。形式上，Generator 函数是一个普通函数。它不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。generator的用途：在JavaScript中,一个函数一旦被执行,就会执行到最后或者被return,运行期间不会被外部所影响打断,而generat
2020-09-07 08:17:46
1030
原创 Async和await
asyncasync 是“异步”的简写， async 用于申明一个异步的 functionawaitawait 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。特点：asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数异步async函数调用，跟普通函数的使用方式一样异步async函数返回一个promise对象async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的例：//基本用法的asyn.
2020-09-07 08:01:07
62
原创 promise(特点及应用)
什么是promisepromise是一种异步编程解决方案为什么有Promises这个东西同步的方式写异步的代码，用来解决回调地狱问题。此外，promise对象提供统一的接口，使得控制异步操作更加容易。Promise的两个特点Promise对象的状态不受外界影响1）pending 初始状态2）fulfilled 成功状态3）rejected 失败状态Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态Promise的状态一旦改变，
2020-09-06 20:10:12
105
原创 JavaScripct中var、let、const的区别
在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点，所以ES6提出了使用let和const声明变量，下面就来看看他们之间的区别。1.是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。console.log(f) //undefinedvar f = 1 ;con
2020-09-06 20:03:09
108
原创 一分钟带你了解Vuex(新手推荐)
Vuex是什么？Vuex是一个专为Vue.js应用程序开发的**状态管理模式。**它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化想要了解Vuex，就要先了解它里面的属性state：存储状态(变量)getters:对数据获取之前的再次编译，可以理解为state的计算属性，﹩soter.getters.fun()mutations:修改状态，并且是同步的，和组件中自定义事件类似,在组件中使用﹩store.commit(" “，params)actions:
2020-09-03 21:01:00
104
原创 js继承
原型链继承利用原型让一个引用类型继承另一个引用类型的属性和方法缺点:1.通过原型来实现继承是，原型会被变成另一个类型的实例，原型链属性变成了现在的原型属性，该原型的引用类型属性会被共享2.在创建子类型的实例时，没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数借用构造函数继承在子类型的构造函数中调用超类型构造函数优点：1.可以向超类型传递参数2.解决了原型中包含引用类型值被所有实例共享的问题缺点:1.方法都在构造函数中定义，超类型原型中定义的方法对于子类型而言时不可见的
2020-09-02 20:42:19
96
原创 原型和原型链
原型javescript的所有对象都包含了一个[proto]内部属性，这个属性就是原型。javescript的函数对象，除了原型[proto]之外，还有prototype属性，当函数对象作为构造函数创建的实例时，该prototype属性值将会被作为实例对象的原型[proto]原型链当一个对象调用自身不存在的属性和方法时，就会去自己的[proto]关联的前辈prototype对象上去找，如果没找到，就会接着去往上找，就像我们的食物链一样，以此类推，直到找到属性方法或undefined为止...
2020-09-02 19:54:41
58
原创 this以及apply,call,bind之间的区别
关于this对象this对象是在运行时基于函数的执行环境绑定的：在全局环境中，this等于windown，而当函数被某个对象调用时，this等于那个对象每个函数都有自己的执行环境，全局执行是最外围的一个执行环境。this指向就是当前代码所在的执行环境改变this执行的几种方法以及之间的区别：apply()和call()每个函数都包含两个非继承而来的方法：apply()和call()，他们两个都是用来在特定的作用域中调用函数，然后可以设置调用函数的this指向。**apply()和call()可以
2020-09-01 20:41:31
99
原创 JS数据类型以及数据类型的判断
JS数据类型可以帮助我们更好的操作变量共有8种数据类型Number、String、Boolean、Null、undefined、object、symbol、bigInt
2020-09-01 08:11:08
232
原创 H5新特性
详情请点击此处1.语义化标签好处:1.使代码结构清晰，便于阅读2.便于SEO3.无障碍阅读4.便于后期的维护与开发2.智能表单html5中提供了多个新的类型的input类型1.color2.datatime3.data4.tel5.e-mail6.number7.range8.search3.音频（audio）和视频（video）4.canvas5.svg6.地理地位7.拖放的API8.web worker9.web storage10. web socket...
2020-08-30 20:09:51
134
1
原创 css3动画
CSS3动画在CSS3之前，动画都是由JaveScript动态改变元素样式属性来完成的，这种方式性能上存在一些问题。CSS3可以让动画变得更加容易，性能也更好。CSS3动画有三个动画样式属性transform渐变动画transition转变动画animation自定义动画transform我们先看一下 transition 的属性：property:填写需要变化的css属性如：width,line-height,font-size,color等,所有作用与dom样式的属性;dura
2020-08-30 20:00:29
158
原创 HTML+CSS的两栏、三栏布局以及垂直居中
1.两栏布局（左固定，右适应）先写出初始样式和结构<div class="container"> <div class="left">Lorem ipsum dolor sit amet</div> <div class="right">Lorem ipsum dolor sit amet</div></div>div { height: 200px; color: #fff;}floa
2020-08-27 21:00:42
1239
原创 Vue封装网络模块步骤
Vue封装网络模块Vue封装网络模块第一步在scr里面创建一个network文件夹第二步在network文件夹里面创建三个文件第一个文件夹 config.js，在里面写入以下`// 定义请求方式export const Method = { GET:"get", POST:"post"}export const PATH = { // 首页接口 shouye_list:"/home/multidata"}第二个文件夹 core.js ， 在里面
2020-08-27 20:16:10
356
原创 盒模型和flex布局
盒模型1.什么是盒模型？盒模型就是一个盒子，封装HTML元素，所有的html元素都可以说是一个盒模型，它包括边框，边距填充和内容2.盒模型有两种标准盒模型在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)怪异盒模型（IE盒模型）3、两种盒模型的切换box-sizing可以切换盒模型(默认属性是content-box)box-sizing: content-box 是W3C盒子模型box-sizing: borde
2020-08-25 20:54:18
718
1
原创 git 多人协作开发流程
具体流程如图所示第一步需要我们把仓库内的东西引入到自己的文件夹里1：git pull （引入）或 git clone 远程仓库地址 （克隆）第二步需要我们正常操作git 仓库1：git init （仓库初始化）2：git add . （跟踪新文件）3：git commit -m “” （将工作区的内容放入暂存区）4：git push 远程仓库地址 （推送到远程仓库）或git remote add origin 远程仓库地址git push -u origin maste
2020-08-25 11:25:04
248
1
原创 git的基本使用方法
git基本使用方法git init 初始化git仓库 (mac中Command+Shift+. 可以显示隐藏文件)git status 查看文件状态git add 文件列表 追踪文件git commit -m 提交信息 向仓库中提交代码git log 查看提交记录撤销用暂存区中的文件覆盖工作目录中的文件： git checkout 文件将文件从暂存区中删除： git rm --cached 文件将 git 仓库中指定的更新记录恢复出来，并且覆盖暂存区和工作目录：git rese
2020-08-24 16:33:51
139
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人