对函数式编程的理解?优缺点?
一、是什么函数式编程是一种”编程范式”(programming paradigm),一种编写程序的方法论
主要的编程范式有三种:命令式编程,声明式编程和函数式编程
相比命令式编程,函数式编程更加强调程序执行的结果而非执行的过程,倡导利用若干简单的执行单元让计算结果不断渐进,逐层推导复杂的运算,而非设计一个复杂的执行过程
举个例子,将数组每个元素进行平方操作,命令式编程与函数式编程如下
12345678// 命令式编程var array = [0, 1, 2, 3]for(let i = 0; i < array.length; i++) { array[i] = Math.pow(array[i], 2)}// 函数式方式[0, 1, 2, 3].map(num => Math.pow(num, 2))
简单来讲,就是要把过程逻辑写成函数,定义好输入参数,只关心它的输出结果
即是一种描述集合和集合之间的转换关系,输入通过函数都会返回有且只有一个输出值
可以看到,函数实际上是一个关系,或者说是一种映射,而这种映射关系是可以组合的,一旦我们知 ...
说说你对vue的mixin的理解,有什么应用场景?
一、mixin是什么Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类
Mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂
Vue中的mixin先来看一下官方定义
mixin(混入),提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。
本质其实就是一个js对象,它可以包含我们组件中任意功能选项,如data、components、methods 、created、computed等等
我们只要将共用的功能以对象的方式传入 mixins选项中,当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来
在Vue中我们可以局部混入跟全局混入
局部混入定义一个mixin对象,有组件options的data、methods属性
12345678910var myMixin = { created: function () { this.hello() }, methods: { hello: fu ...
Vue常用的修饰符有哪些有什么应用场景
一、修饰符是什么在程序世界里,修饰符是用于限定类型以及类型成员的声明的一种符号
在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理
vue中修饰符分为以下五种:
表单修饰符
事件修饰符
鼠标按键修饰符
键值修饰符
v-bind修饰符
二、修饰符的作用表单修饰符在我们填写表单的时候用得最多的是input标签,指令用得最多的是v-model
关于表单的修饰符有如下:
lazy
trim
number
lazy在我们填完信息,光标离开标签的时候,才会将值赋予给value,也就是在change事件之后再进行信息同步
12<input type="text" v-model.lazy="value"><p>{{value}}</p>
trim自动过滤用户输入的首空格字符,而中间的空格不会过滤
1<input type="text" v-model.trim=&quo ...
Javascript中如何实现函数缓存?函数缓存有哪些应用场景?
一、是什么函数缓存,就是将函数运算过的结果进行缓存
本质上就是用空间(缓存存储)换时间(计算过程)
常用于缓存数据计算结果和缓存对象
1234const add = (a,b) => a+b;const calc = memoize(add); // 函数缓存calc(10,20);// 30calc(10,20);// 30 缓存
缓存只是一个临时的数据存储,它保存数据,以便将来对该数据的请求能够更快地得到处理
二、如何实现实现函数缓存主要依靠闭包、柯里化、高阶函数,这里再简单复习下:
闭包闭包可以理解成,函数 + 函数体内可访问的变量总和
123456789(function() { var a = 1; function add() { const b = 2 let sum = b + a console.log(sum); // 3 } add()})()
add 函数本身,以及其内部可访问的变量,即 a = 1 ,这两个组合在⼀起就形成了闭包
柯里化把接受 ...
JavaScript中的事件模型
一、事件与事件流javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等
由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念
事件流都会经历三个阶段:
事件捕获阶段(capture phase)
处于目标阶段(target phase)
事件冒泡阶段(bubbling phase)
事件冒泡是一种从下往上的传播方式,由最具体的元素(触发节点)然后逐渐向上传播到最不具体的那个节点,也就是DOM中最高层的父节点
12345678910<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Event Bubbling</title> </head> <body> ...
Vue实例挂载的过程
一、思考我们都听过知其然知其所以然这句话
那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么?
过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等
一、分析首先找到vue的构造函数
源码位置:src\core\instance\index.js
12345678function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options)}
options是用户传递过来的配置项,如data、methods等常用的方法
vue构建函数调用_init方法,但我们发现本文件中并没有此方法,但仔细可以看到文件下方定定义了很多初始化方法
12345init ...
列表页跳转详情页的一些最佳实践?
一、常见问题在列表页跳转到详情页时,通常会遇到以下问题:
详情页数据获取方式
返回列表页如何定位到之前位置
列表页数据缓存
详情页数据共享
URL 参数处理
二、解决方案1. 数据传递方式1.1 URL 参数传递123456789101112131415161718192021222324252627282930313233343536// Vue Router 示例const routes = [ { path: '/detail/:id', name: 'detail', component: DetailPage, props: true // 将路由参数作为组件的 props }]// 列表页跳转methods: { goToDetail(id) { this.$router.push({ name: 'detail', params: { id }, query: { ...
对事件循环的理解
一、是什么首先,JavaScript 是一门单线程的语言,意味着同一时间内只能做一件事,但是这并不意味着单线程就是阻塞,而实现单线程非阻塞的方法就是事件循环
在JavaScript中,所有的任务都可以分为
同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行
异步任务:异步执行的任务,比如ajax网络请求,setTimeout 定时函数等
同步任务与异步任务的运行流程图如下:
从上面我们可以看到,同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。上述过程的不断重复就事件循环
二、宏任务与微任务如果将任务划分为同步任务和异步任务并不是那么的准确,举个例子:
1234567891011121314console.log(1)setTimeout(()=>{ console.log(2)}, 0)new Promise((resolve, reject)=>{ console.log('new Promise') ...
什么是事件代理?应用场景?
一、是什么事件代理,俗地来讲,就是把一个元素响应事件(click、keydown……)的函数委托到另一个元素
前面讲到,事件流的都会经过三个阶段: 捕获阶段 -> 目标阶段 -> 冒泡阶段,而事件委托就是在冒泡阶段完成
事件委托,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,而不是目标元素
当事件响应到目标元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数
下面举个例子:
比如一个宿舍的同学同时快递到了,一种笨方法就是他们一个个去领取
较优方法就是把这件事情委托给宿舍长,让一个人出去拿好所有快递,然后再根据收件人一一分发给每个同学
在这里,取快递就是一个事件,每个同学指的是需要响应事件的 DOM 元素,而出去统一领取快递的宿舍长就是代理的元素
所以真正绑定事件的是这个元素,按照收件人分发快递的过程就是在事件执行中,需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个
二、应用场景如果我们有一个列表,列表之中有大量的列表项,我们需要在点击列表项的时候响应一个事件
1234567<ul ...
Vue中的$nextTick有什么作用?
一、NextTick是什么官方对其的定义
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
什么意思呢?
我们可以理解成,Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新
举例一下
Html结构
1<div id="app"> {{ message }} </div>
构建一个vue实例
123456const vm = new Vue({ el: '#app', data: { message: '原始值' }})
修改message
123this.message = '修改后的值1'this.message = '修改后的值2'this.message = '修改后的值3'
这时候想获取页面最新的D ...