148. 面试官：说说你对flutter的了解？

148期

1. 说说你对flutter的了解？

2. vuex有哪些属性，它们的意义分别是什么？

3. JS中addEventLister方法的第三个参数有什么作用？

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

也可以小程序刷题，已收录500+面试题及答案

147期问题及答案

1. vue中是如何实现样式隔离的？react中呢？

首先解释一下样式隔离的概念：样式隔离是指在组件化框架中使得各个组件的样式相互独立、不发生冲突的技术方法。

Vue中样式隔离

在Vue.js中，样式隔离通常是通过scoped属性来实现的。当你在一个<style>标签中加上scoped属性后，Vue会使用PostCSS为该组件中的样式添加一个独一无二的动态属性，同时修改这些样式规则的选择器，这样这些样式只会应用到当前组件的模板中。

<template>
  <div class="example">Scoped CSS</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

编译后大致变成这样：

<div class="example" data-v-f3f3eg9="">Scoped CSS</div>

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

React中样式隔离

在React中实现样式隔离可以使用多种方法，以下是几种常见的方法：

1. CSS Modules

CSS Modules是React中用于实现局部作用域CSS的技术。当你在React项目中导入一个.module.css文件时，生成的样式对象会自动为类名添加一个独特的哈希值，从而实现样式隔离。

示例：

import React from 'react';
import styles from './App.module.css';

const App = () => {
  return <div className={styles.example}>CSS Modules</div>;
};

对应的App.module.css文件：

.example {
  color: blue;
}

编译后，样式名会变成example__some-hash，确保样式的唯一性。

2. Styled Components

Styled-components是一个库，它允许在React组件中编写真正的CSS代码，以确保样式的封装。每个styled component都是一个包含了样式的React组件，因此可以通过JavaScript的逻辑来动态地生成样式。

import styled from 'styled-components';

const Wrapper = styled.div`
  color: green;
`;

const App = () => {
  return <Wrapper>Styled Components</Wrapper>;
};

每一个styled component都有一个唯一的类，因此不会与其他组件的样式冲突。

3. Emotion

与styled-components类似，Emotion也是一个用于编写css样式的库，它允许你在JavaScript中内联地书写css样式，并且确保了样式的隔离。

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const style = css`
  color: purple;
`;

const App = () => {
  return <div css={style}>Emotion</div>;
};

以上所述方法都可以在React应用中实现组件级别的样式隔离，确保组件之间样式不会相互影响。

2. 实现一个打平数组的工具函数？要求支持配置层级

为了实现一个能够打平数组的工具函数，并允许配置打平的层级，我们可以使用递归的方式来处理。下面是一个这样的函数示例，使用JavaScript编写：

function flattenArray(arr, depth = 1) {
  if (depth < 1 !Array.isArray(arr)) {
    // 如果层级小于1或不是数组，直接返回数组本身
    return arr;
  }

  let result = [];
  
  for (const item of arr) {
    if (Array.isArray(item)) {
      // 如果是数组，且还未达到指定的层级，则继续递归打平
      result.push(...flattenArray(item, depth - 1));
    } else {
      // 如果不是数组，则直接放入结果数组
      result.push(item);
    }
  }

  return result;
}

// 使用示例:
const exampleArray = [1, [2, [3, [4]], 5]];

console.log(flattenArray(exampleArray, 1)); // 打平一层：[1, 2, [3, [4]], 5]
console.log(flattenArray(exampleArray, 2)); // 打平两层：[1, 2, 3, [4], 5]
console.log(flattenArray(exampleArray, Infinity)); // 完全打平：[1, 2, 3, 4, 5]

在这个flattenArray函数中，我们设定了一个depth参数，默认为1，表示默认只打平一层。在函数内部检查每一个元素，如果是数组并且没有达到指定的层级，就递归地调用flattenArray并减少depth参数的值。如果元素不是数组或者已经达到指定层级，就将其直接添加到结果数组里。

你可以根据需要调整depth参数，以决定打平的层级。当depth设置为Infinity时，无论多少层嵌套的数组都会被完全打平。

3. 怎么让Chrome支持小于12px的文字？

Chrome浏览器默认不支持小于12px的文字渲染，这是为了避免文字太小而导致阅读困难。但是，如果确实需要显示小于12px的文字，可以通过以下几种方式来实现：

1. CSS的transform属性

通过使用CSS的transform属性，可以缩小容器元素，从而使得其中的文字看起来更小。

.small-text {
  font-size: 12px; /* 设置为Chrome允许的最小字体大小 */
  transform: scale(0.8); /* 缩小字体 */
  transform-origin: top left; /* 设置变换的基点 */
}

这种方式的缺点是，虽然文字看起来更小了，但是实际上占据的空间仍然是按照未缩小前计算的，可能会影响布局。

2. -webkit-text-size-adjust属性

尽管-webkit-text-size-adjust属性的主要用途是在移动设备上防止文本缩放，但可以利用它来尝试设置小字号：

.small-text {
  font-size: 10px;
  -webkit-text-size-adjust: none;
}

3. 使用SVG来显示文本

SVG允许你定义任意大小的文本，无论浏览器的限制。你可以创建一个SVG元素并在其中添加文本：

<svg viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
  <text y="15" font-size="10">这是10px的SVG文本</text>
</svg>

这种方式可以确保文本按照你设置的大小进行渲染，但是使用SVG会使得文本处理起来不如HTML文本方便。

我要提问

如果你遇到有趣的面试题，或者有想知道的前端面试题，可以在下面的小程序提问，收到问题后会在第一时间为你解答。

我要出题

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。