149期
1. [] == ![] 的结果是什么?为什么?
2. base64编码为什么会让图片变大?
3. JS中的变量提升是什么意思?
上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布
也可以小程序刷题,已收录500+面试题及答案
148期问题及答案
1. 说说你对flutter的了解?
Flutter是由Google开发并于2017年推出的开源UI软件开发工具包(SDK)。它的主要目的是使开发者能够通过一套代码库快速构建在iOS、Android、网页和桌面端上都表现良好的高性能、高保真的应用。
以下是我对Flutter的一些了解:
跨平台:Flutter支持跨平台开发,它的最大卖点之一是“一次编写,到处运行(Write Once, Run Anywhere)”,允许开发者使用相同的代码库就能构建多个平台的应用。
Dart语言:Flutter使用Dart语言,这是一种由Google开发的面向对象的编程语言。Dart语言旨在易于学习和使用,它支持JIT(Just-In-Time)编译,让开发过程中的热重载变得可能,同时也支持AOT(Ahead-Of-Time)编译,以确保应用的最终发布版本有最佳性能。
热重载:Flutter提供了热重载功能,开发者可以在不重新启动应用的情况下,实时看到对代码的更改效果,这显著提高了开发效率。
组件丰富:Flutter拥有大量可定制的Widget(组件),这些组件可以帮助开发者构建复杂的UI,而且风格与原生组件非常接近,包括Material Design(Android)和Cupertino(iOS)。
性能接近原生:由于Flutter的渲染引擎(Skia)可以直接打包到应用内,并使用Dart编写所有代码,这使Flutter应用在运行时不依赖于任何中间层,因此其性能非常接近原生应用。
开源社区:Flutter有一个快速增长的开源社区,提供了大量的插件和开发工具,辅助开发者更高效地构建应用。
适用场景广泛:Flutter既可以用来开发移动端应用,也逐步扩展到了网页和桌面应用的开发,甚至可以用来创建嵌入式项目。
自定义绘制:Flutter提供了强大的绘制引擎,可以让你自定义非常复杂的UI效果和动画。
虽然Flutter在跨平台UI框架中具有众多优势,但是它也有一些局限性,例如对某些平台特有功能的访问可能不如使用原生SDK来得直接,以及大型项目中Dart语言的生态系统不如JavaScript等其他语言丰富。不过,随着Flutter不断更新和社区贡献的增长,这些局限性正在逐步被克服。
2. vuex有哪些属性,它们的意义分别是什么?
Vuex是专为Vue.js应用程序开发的状态管理模式及库。在复杂的Vue应用中,组件之间共享状态时使用Vuex可以更加方便和高效。Vuex具有以下几个核心概念:
State(状态):
意义:State是Vuex的核心,是存储的基本数据。在Vuex中,state是一个单一的对象,包含了所有的应用层级状态(也就是数据)。所有由同一个state衍生的状态和UI都应当是同步的。
Getters(获取器):
意义:Getters可以理解为Vuex中的计算属性,它可以用来派生出一些状态,以便于多个组件之间复用。如果有多个组件需要用到某种由state派生出来的状态,可以使用getter来实现。
Mutations(变更):
意义:Mutations是唯一可以直接变更state的东西。这是一个同步事务,任何时候进行state的变更,都应该通过mutation来做,这样才能精确地追踪到状态的变化。
Actions(动作):
意义:Actions与mutations功能类似,但是不同之处在于它可以包含任意异步操作。Action提交的是mutation而不是直接变更状态,可以包含任意异步操作,这允许我们先进行数据的获取,然后再调用mutation去改变state。
Modules(模块):
意义:当应用非常复杂时,状态对象会非常臃肿,Modules允许我们将store分割成模块(module),每个模块拥有自己的state、mutation、action、getter,甚至是嵌套模块。
下面是一个具体例子,以展示Vuex中不同属性的使用:
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
doubleCount: state => state.count * 2
},
mutations: {
increment: (state, payload) => {
state.count += payload.amount;
}
},
actions: {
incrementAsync: ({ commit }, payload) => {
setTimeout(() => {
commit('increment', payload);
}, 1000);
}
},
modules: {
// 定义子模块
myModule: {
// 模块内容...
}
}
});
在这个示例中:
state
提供了一个初始化的count
状态。getters
提供了一个名为doubleCount
的计算属性,它会返回count
的两倍。mutations
定义了一个名为increment
的函数,用于增加count
的值。actions
定义了一个名为incrementAsync
的函数,作异步操作后通过commit
调用increment
变更状态。modules
允许你将store分割成子模块,每个模块维护自己的状态、变更等。
通过上述的属性,Vuex提供了一种集中管理Vue应用所有组件的状态的机制,并遵循严格的规则以保证状态变更是可追踪和维护的。
3. JS中addEventLister方法的第三个参数有什么作用?
在JavaScript中,addEventListener
方法用来为元素添加事件处理器。这个方法可以接受三个参数:
type
- 字符串参数,表示监听事件类型的名称,例如'click'
、'mouseover'
等。listener
- 事件触发时,会调用的函数或者实现了Event
接口的对象。options
或者useCapture
(第三个参数)- 这个参数可以是一个布尔值或一个对象,它用于指定监听器的行为。
useCapture
(布尔值的用法)
当第三个参数是布尔值的时候,它被称为useCapture
。如果为true
,事件监听器会在捕获阶段触发;如果为false
(或省略),事件监听器会在冒泡阶段触发。
捕获阶段(Capture Phase):事件从文档的根节点(例如
window
)向下,通过DOM树传播到目标元素的过程。冒泡阶段(Bubbling Phase):事件从目标元素开始,向上通过DOM树传播回文档的根节点的过程。
大部分事件的默认行为是在目标元素同一层级监听捕获或冒泡,但是使用useCapture
设置为true
可以让你在捕获阶段而不是冒泡阶段处理事件。
options
对象的用法
为了提供更为详尽的配置选项,addEventListener
的第三个参数也可以是一个具有多个属性的对象,常用的几个属性包括:
capture
- 布尔值,和使用useCapture
作为布尔值时的功能相同,设置为true
表示在捕获阶段监听事件,设置为false
表示在冒泡阶段监听事件。once
- 布尔值,若设置为true
,监听器会在触发一次事件之后自动移除。passive
- 布尔值,当设置为true
时,表示监听器永远不会调用preventDefault
方法。如果监听器不会调用preventDefault
,那么浏览器可以在监听器运行之前执行事件的默认动作,从而提高滚动等事件的性能。signal
- 一个AbortSignal
对象,允许你随时移除事件监听器。
示例代码:
// 使用布尔值作为第三个参数
element.addEventListener('click', handler, false);
// 使用options对象作为第三个参数
element.addEventListener('click', handler, {
capture: false, // 相当于之前的useCapture
once: true, // 事件处理函数触发一次后自动移除
passive: true // 表明不会调用`preventDefault`函数
});
在旧版浏览器中可能不支持使用对象作为第三个参数,因此在跨浏览器编码时应当考虑兼容性问题。但现代浏览器通常都支持这些选项。
我要提问
如果你遇到有趣的面试题,或者有想知道的前端面试题,可以在下面的小程序提问,收到问题后会在第一时间为你解答。
我要出题
学习不打烊,充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题,每天坚持花20分钟来学习与思考,在千变万化,类库层出不穷的今天,不要等到找工作时才狂刷题,提倡每日学习。