- 博客(53)
- 收藏
- 关注
RSS订阅
原创 面试题总结
Vue生命周期、Vue 组件之间的通信、原型与原型链、promise、Vue的双向数据绑定原理、vue2与vue3的区别、h5新特性、CSS3动画、generator迭代器、v-if与v-show的区别、axios封装与api接口管理、vue过滤器filter、数据类型判断、js数据类型、this, call, apply, bind、...
2021-09-03 14:18:25
101
原创 常见的块级/行内/空元素
行内元素有：span a b i img input select strong块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…空元素(没有内容)： br hr img input link meta
2021-04-05 01:43:14
234
原创 BFC
一般情况下面试官会问：1. 什么是边距重叠？2. 什么情况下会发生边距重叠？3. 如何解决边距重叠？1. 两个div都设置了内边距padding或外边距margin，在垂直方向上，两个div边距会发生重叠2.1：父子关系的边距重叠：比如父级div包裹子级div时！给子级div加了外边距margin 。这时父级也会有外边距margin2.2：同级兄弟关系的重叠：3.1：解决父子关系的边距重叠问题：加一句：overflow: hidden;3.2：解决父子关系的边距重叠问题：可通
2021-04-05 01:19:28
107
原创 获取屏幕宽高方法
Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight
2020-10-13 09:23:36
698
原创 闭包
闭包:当一个函数的返回值是另外一个函数,返回的那个函数如果调用了其父函数的内部变量,返回的那个函数在外部被执行,就产生了闭包.闭包是一个环境,具体指的就是外部函数–高阶函数 closure闭包的三个特性1:函数套函数2:内部函数可以直接访问外部函数的内部变量或参数3:变量或参数不会被垃圾回收机制回收 GC闭包的优点:1:变量长期驻扎在内存中2:避免全局变量的污染3:私有成员的存在闭包的缺点:常驻内存 增大内存的使用量 使用不当会造成内存的泄露.闭包的应用场景：1.setTimeo
2020-10-12 10:22:46
122
原创 vue2与vue3的区别
1、vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。2、默认进行懒观察（lazy observation）。在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3
2020-10-09 09:44:16
535
原创 Vue 组件之间的通信
1、props / $emit 适用 父子组件通信2、EventBus创建一个空的 vue 并暴露出去，这个作为公共的 bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件 A 中通过 bus.emit（’自定义事件名’，要发送的值）发送数据，在组件 B中通过 bus.on（‘自定义事件名‘,function(v) { //v 即为要接收的值 }）接收数据3、Vuex 适用于 父子、隔代、兄弟组件通信4、provide / inject 适用于 隔代组件通信祖先组件中通过
2020-10-09 08:34:02
129
原创 图片懒加载原理
什么是图片懒加载？有很多图片时，先加载可视区域的图片，往下滑动时，再加载下面的图片。这就是图片懒加载。图片懒加载的作用，缓解浏览器的压力，增强用户体验。图片懒加载的基本原理1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址2､ 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中3､ 当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址1.document.documentElement.clientHeight获取
2020-10-05 22:35:05
101
原创 小程序生命周期
//index.jsPage({ data: { text: "This is page data." }, onLoad: function(options) { // 页面创建时执行 }, onShow: function() { // 页面出现在前台时执行 }, onReady: function() { // 页面首次渲染完毕时执行 }, onHide: function() { // 页面从前台变为后台时执行 },.
2020-10-05 08:39:47
85
原创 vue项目打包上线流程
作用：我们在完成项目打包上线的时候，会发现他的文件很大，这个时候我就需要对项目先做一些优化，优化之后在进行打包一、项目打包之前的优化1. 通过 externals 加载外部 CDN 资源默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在externals 中的第三方依赖包，都不会被打包。con
2020-09-25 07:59:23
510
原创 JS放大镜
分析难点列出1.鼠标在图片区域时，透明小区域出现，放大的区域出现2.鼠标移出图片时，透明小区域小时，放大区域消失3.透明小区域随着鼠标移动难点解决关键（对应解决回答）1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.layer.
2020-09-23 08:01:00
87
原创 vue中mixins(混入)的使用
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 vue中提供了一种混合机制–mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别，后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。而
2020-09-22 21:33:52
270
原创 vue中的provide和inject (依赖注入)
定义：在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效作用：provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。provide: function () {return {getMap: th
2020-09-22 21:22:27
289
原创 vue虚拟DOM 和 Diff原理
虚拟DOM概念：用js来模拟DOM中的节点。传说中的虚拟DOM。class Element { constructor(tag,ats,children){ this.tag = tag; this.ats = ats || {}; this.children = children || {} } render(){ // 这个函数会生成真实DOM，会把render的结果添加到页面中去 }}Diff原理diff算法就是进行虚拟节点对比，并返回
2020-09-20 20:00:46
175
原创 vue自定义指令的应用场景
使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&
2020-09-20 19:47:58
72
原创 vue自定义指令directive
如何创建自定义指令1、指令的使用<div id="app"> <div v-dir1 v-color="'red'"></div> <input type="text" v-focus /></div>2、创建局部指令// var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: {
2020-09-20 19:41:53
68
原创 vue过滤器filter
作用：过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器、全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })var
2020-09-20 19:24:54
65
原创 vue组件封装
思路：你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？…vue组件封装1、我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）
2020-09-18 08:11:29
114
原创 vue中的事件修饰符
１. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）２. prevent：阻止默认事件的发生默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。３. capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。４. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事.
2020-09-17 22:17:32
110
原创 Vue的双向数据绑定原理
Vue的双向数据绑定原理vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile解析模板指令，将模板中的变量替换成
2020-09-16 22:33:01
119
原创 vue常用的指令
vue常用指令：v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bin
2020-09-16 22:14:51
45
原创 v-if与v-show的区别
一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的三、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗四、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；转载于我亲爱的田老师...
2020-09-15 22:18:12
58
原创 Vue生命周期
1、创建vue实例，new Vue()；2、在创建Vue实例的时候，执行了init()，在init(初始化)过程中首先调用了beforeCreate钩子函数；3、同时监听data数据，初始化vue内部事件，进行属性和方法的计算；4、以上都干完了，调用Created钩子函数(一般axios请求会在这个周期内进行)；5、模板编译，把data对象里面的数据和vue语法写的模板编译成HTML。编译过程分三种情况：1）实例内部有template属性，直接调用，然后调用render函数去渲染；2）没有该属性调用
2020-09-15 22:14:47
69
原创 axios封装与api接口管理
思路axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。axios封装步骤安装axiosnpm install axios; // 安装axios复制代码目录创建在src目录下，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url, request.js对外暴露我们放在的a
2020-09-14 22:23:43
106
原创 JavaScript事件模型
事件模型：JavaScript事件使得网页具备互动和交互性，我们应该对其深入了解以便开发工作，在各式各样的浏览器中，JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。1.原始事件模型（DOM0级）这是一种被所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件：（1）在html代码中直接指定属性值：<button id="demo" type="button" onclick="doSomeT
2020-09-13 21:42:34
179
原创 JavaScript事件监听
js 实现事件监听1、行内绑定行内绑定：在ＨＴＭＬ 的标签中通过onclick属性进行绑定，绑定方式为：on＋ 事件名称， 在将所触发你事件赋值给该属性<button onclick='onClick()'></button>2、 使用元素进行事件绑定使用element.onclick 进行 事件绑定，通过操作DOM元素，为DOM绑定事件【使用形式同行内绑定】window.onload = function (){ let btn = document.
2020-09-13 21:17:24
104
1
原创 垃圾回收和内存泄漏
1、什么是内存泄漏？程序的运行需要内存，只要程序提出要求，操作系统或者运行是就必须供给内存。对于持续运行的服务进程，必须及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏。有些语言（比如c语言）必须手动释放内存，程序员负责内存管理。这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"。内存泄漏的识别方法怎样可以观察到内存泄漏呢？如果连续五次垃圾回收之后，内存占用一次比一次大，就有内存泄漏。这就
2020-09-13 20:29:38
137
原创 JavaScript设计模式
什么是设计模式？设计模式就是针对某一个问题而提出的一个解决方案其实我们在开发的过程中可能很少会用到设计模式，因为很多东西别人都帮我们封装好了，我们直接拿过来用即可。设计模式1、工厂模式故名思意，我们从字面上的意思就可以看到，可以想象一座工厂源源不断产出一样的产品，流水线作业。没错，工厂模式就是这样。class Person { constructor(name) { this.name = name } getName() { c
2020-09-13 19:47:31
107
原创 数组扁平化
什么是数组扁平化？数组扁平化就是将一个多维数组转换为一个一维数组实现基本方式1、对数组的每一项进行遍历。2、判断该项是否是数组。3、如果该项不是数组则将其直接放进新数组。4、是数组则回到1，继续迭代。5、当数组遍历完成，返回这个新数组。1、扩展运算符//ES6 增加了扩展运算符，用于取出参数对象的所有可遍历属性，拷贝到当前对象之中：var arr = [1, [2, [3, 4]]];console.log([].concat(...arr)); // [1, 2, [3, 4]
2020-09-10 20:45:41
205
原创 事件委托
什么是事件委托？事件委托，顾名思义，就是将本来需要 A 处理的事情，委托给 B 来处理。在 JavaScript 中的事件委托又称事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。当然，如果子元素阻止了事件冒泡，那么委托也就没法实现了。有什么好处？提高性能需要触发每个li来改变他们的背景颜色* { padding: 0; margin: 0; list-style: none; } #
2020-09-10 20:38:04
62
原创 数组排序（方法）
数组排序的四最常用的种方法：1.使用sort()对数组排序： var arr=[11,45,2,32,89,0]; arr.sort(function(a,b){ return a-b; }) document.write(arr);2. reverse()逆序var arr=[11,45,2,32,89,0];arr.reverse(arr);document.write(arr);3.冒泡排序：概念：数组
2020-09-09 19:27:28
6116
原创 数组去重（方法）
数组去重的方法一、利用ES6 Set去重（ES6中最常用）var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];function unique (arr) { return Array.from(new Set(arr))}console.log(unique(arr))二、利用for嵌套
2020-09-09 19:13:32
163
原创 es6新增的数组方法
数组创建Array.of()将参数中所有值作为元素形成数组。console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] // 参数值可为不同类型console.log(Array.of(1, '2', true)); // [1, '2', true] // 参数为空时返回空数组console.log(Array.of()); // []Array.from()将类数组对象或可迭代对象转化为数组。// 参数为数组,返回与原数组一样的数组c
2020-09-08 22:08:52
146
原创 es5新增的数组方法
常用数组元素的迭代方法：1、 map()方法返回一个新数组，新数组是原数组的映射；不改变原数组的值；新数组的元素值是每次函数return的返回值；若不写return，接收的新数组的元素值将全为空；var arr = [20,13,11,8,0,11];var brr = arr.map(function(item)){ //练习一：将数组的每个元素都将增加到原来的1.2倍 return item*1.2; // 此时brr为a数组每个元素的1.2倍 //练习二：若return 1，
2020-09-08 20:08:40
297
原创 async 和 await
什么是async/awaitasync、await是一种同步写法，但也是一种异步操作，两个必须同时写才有效await作用：等数据加载过来再去运行下面的js内容，而且await接收的对象必须是promiseasync、await作用：数据的接收、异步问题的处理async 和 await 的使用场景：解决了 promise 中的点 then 链原始的写法:/** * 传入参数 n，表示这个函数执行的时间（毫秒） * 执行的结果是 n + 200，这个值将用于下一步骤 */f
2020-09-06 21:14:06
231
原创 generator
generator是什么?是一个迭代器生成函数，返回值是一个迭代器，可用于异步计算，generator函数是ES6一种特殊的函数，与其他普通函数不一样！使用场景：function* str(){ yield "a" yield "b" return "c"}var s = str()s.next() {value:"a",done:false}s.next() {value:"b",done:false}s.next() {value:"c",done:true}
2020-09-06 20:29:33
90
原创 promise
promise是什么？1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列promise的三种状态：pending 等待状态：创建Promise对象时的初始状态resolved 成功状态: 成功时的状态rejected 失败状态: 失败时的状态promise解决了回调地狱的问题，不会导致难以维护，then也可以按照顺序执行 let fs = require("fs"); // 封装了一个
2020-09-06 19:39:24
91
原创 var与let、const
一、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声明变量存在变量提升，let和const不存在变量提升console.log(a);
2020-09-06 18:47:16
75
原创 vuex
state：存储状态（变量）mutations ：修 改 状 态 ， 并 且 是 同 步 的 。 在 组 件 中 使用$store.commit(’’,params)。这个和我们组件中的自定义事件类似。actions：异步操作。在组件中使用是$store.dispath(’’)getters：对数据获取之前的再次编译，可以理解为 state 的计算属性。我 们在组件中使用 $sotre.getters.fun()modules：store 的子模块，好处：为了开发大型项目，方便状态管理而
2020-09-03 21:21:28
73
原创 js继承
ES5 有 6 种方式可以实现继承，分别为：1.原型链继承原型链继承的基本思想是利用原型让一个引用类型继承，另一个引用类型的属性和方法。缺点：1、通过原型来实现继承时，原型会变成另一个类型的实例，原先的实例属性变成了现在的原型属性，该原型的引用类型属性会被所有的实例共享。2、在创建子类型的实例时，没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数。2.借用构造函数在子类型的构造函数中调用超类型构造函数优点:1、可以向超类传递参数2、解决了原型中包含引用类型值被所有实
2020-09-02 20:59:42
77
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人