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分钟来学习与思考,在千变万化,类库层出不穷的今天,不要等到找工作时才狂刷题,提倡每日学习。