devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端总结题_justify-content align-self object-fit

作者：你好赵伟 | 2024-03-23 13:13:27

赞

踩

justify-content align-self object-fit

选择题

1、 若要使一个弹性项目水平垂直居中，应该控制（AB）
A. 弹性容器的 justify-content
B. 弹性容器的 align-items
C. 弹性项目的 justify-content
D. 弹性项目的 align-items

解析：

考察弹性盒子里面的基本属性

2、在网格布局中，如果希望网格中的元素按照下面的方式在单元格内排列，应该控制 (AB)

image-20220525152408503

A. 网格容器的 justify-items
B. 网格容器的 align-items
C. 网格项目的 justify-items
D. 网格项目的 align-items

解析：

网格布局同样分为网格容器和网格项目。设置网格中的元素排列方式，应该是在容器上面设置。

网格项目上面只存在 justify-self、align-self、place-self 属性

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目。

align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个项目。

3、有一个新闻列表，它的缩略图宽高固定，但这样一来可能导致图片被拉伸，从而导致图片比例失调，要解决这一问题，涉及的css属性是( C )
A. min-width
B. min-height
C. object-fit
D. overflow

解析：

CSS3 新增的 object-fit 属性，可以处理图片、视频这些元素如何进行保留原始比例的剪切、缩放或者直接进行拉伸等。

4、下面的代码运行过程中，会产生多少个不同的变量i ( C )
A. 1
B. 2
C. 6
D. 10

for(var i = 0; i < 5; i++){}
for(let i = 0; i < 5; i++){}

  • 1
  • 2

解析：

let 拥有局部作用于，因此每循环一次，就会产生一个新的变量 i

而 var 由于不存在局部作用域，因此总共只有一个 i

5、下面的说法正确的有(CD)
A. for-of循环只能循环数组
B. 数组的map方法可能会改变数组的长度
C. 数组的filter方法可能会改变数组的长度
D. 数组的some方法，传入的回调可能会被运行多次

解析：

for-of 不仅可以循环数组，只有内部有迭代器的结构，都可以循环

map作为映射，之前数组多长，返回的新数组就多长

filter 本身就是过滤，只有符合要求的才返回，所以长度可能有变化

some 表示数组中有一个元素符合回掉函数的要求则会返回 true，类似于逻辑运算符的或，如果数组第一项不符合要求，自然就会去验证第二项，所以回掉函数会运行多次

6、下面的代码运行结果是 ( C )
A. 1 1
B. 1 1
C. 1 3
D. 3 3

var a = 3;
const obj = {
  a: 1,
  m1(){
    console.log(this.a)
  },
  m2: ()=>{
    console.log(this.a)
  }
}
obj.m1();
obj.m2();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

解析：

m1为普通函数，this在调用的时候确定，由于是以对象方法的形式调用的，所以指向该对象的 a 属性

m2为箭头函数，箭头没有自己的this，箭头函数如果内部使用了this，那么这个this 来自于外层的作用域。

7、关于下面函数的剩余参数args，说法正确的有 (BD)
A. 和arguments一样
B. 是一个数组
C. 如果参数数量不足，取值undefined
D. 如果参数数量不足，取值[]

function method(a, b, ...args){}

  • 1

解析：

不定参数不同于 arguments，它是一个真正的数组

8、关于GET和POST请求，说法正确的有(AC)
A. 当在浏览器地址栏中输入地址，然后回车，发出的是GET请求
B. 只要使用form表单提交，发出的一定是POST请求
C. 浏览器在发送GET请求时，不会附带请求体
D. 针对GET请求的响应，不会有响应体

解析：

考察基本的 GET 请求和 POST 请求

9、关于url地址，说法正确的是(BC)
A. https://www.baidu.com的端口号为80
B. https://www.baidu.com/news的path为/news
C. https://www.baidu.com/s?wd=a传递了一个地址参数，参数名为wd，值为a
D. url地址中的path一定和服务器文件夹结构对应

解析：

https 协议的端口号一般为 443

url 地址中的 path 大多数情况下和服务器文件夹结构对应，但不是一定。

10、下面代码运行后，打印的状态和数据是 (B)
A. 状态：PENDING，数据：undefined
B. 状态：FULFILLED，数据：1
C. 状态：FULFILLED，数据：3
D. 状态：REJECTED，数据：2

const promise = new Promise((resolve, reject) => {
  resolve(1);
  reject(2);
  resolve(3);
});
console.log(promise)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

解析：

由于在 Promise 构造函数里面的代码是同步代码，而且在 Promise 构造函数里面直接就改变状态了，因此得到的 Promise 状态会是一个已决的状态。

11、关于async和await说法正确的是(BC)
A. async修饰的方法内必须使用await
B. async修饰的方法必定返回Promise对象
C. await必须放到async修饰的方法内
D. await语句之后的代码可能仍然是同步代码

解析：

async 修饰的方法倒不是说必须要要用 await，但是一般不用 await 这个异步方法也没有太大意义，这就好比使用 ajax 非要设置为同步。

async 修饰的函数调用后一定会得到一个 Promise。await必须放到async修饰的方法内。

await语句之后的代码就都是异步代码了，可以写一个简单的示例来证明：

function b(){}

async function a(){
console.log(1);
await b();
console.log(2);
}
a();
console.log(3)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

12、CommonJS的特点包括(ABC)
A. 不污染全局变量
B. 可以使用module.exports导出
C. 可以导出任意类型的数据
D. 使用import导入

解析：

import 是 ES 模块化标准

13、 如果使用CommonJS导入下面的模块，导入的结果类型是 (B)
A. number
B. function
C. object
D. udefined

exports.a = 1;
exports.b = "";
module.exports = function a () {};
exports.c = true;

  • 1
  • 2
  • 3
  • 4

解析：

exports 只是一种快捷方式，最终还是导出的 module.exports 对应的值，默认对应一个对象

14、ES6中的基本（具名）导出和默认导出说法正确的是(AC)
A. 基本（具名）导出可以有多个，默认导出只能有一个
B. 如果使用*导入整个模块，只包含基本导出
C. 基本（具名）导出必须保证有名字
D. 基本（具名）导出和默认导出无法共存

解析：

考察ES模块的导入导出，关于选项 B，可以书写一个简单的示例

// index.js
export const a = 1;
export default function b() {}

  • 1
  • 2
  • 3
// index2.js
import * as test from "./index.js"

console.log(test.a)
console.log(test.default)

  • 1
  • 2
  • 3
  • 4
  • 5
<body>
<script src="./index2.js" type="module"></script>
</body>

  • 1
  • 2
  • 3

15、 从下面的ES6模块中，导入a、b和默认，下面的代码正确的是 ( C )
A. import a, b, default from "./module.js"
B. import default, {a, b} from "./module.js"
C. import c, {a, b} from "./module.js"
D. import {a, b, c as default} from "./module.js"

export var a = 1;
export var b = 2;
export var c = 3;

export function d () {};

export default {
	a: 1,
  b: 2,
  c: 3,
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

解析：

同样是考察ES的模块化内容，基本导出要通过解构来获取，默认导出要自己取一个名字。

16、如果一个包的代码所有工程都要使用，应该对它进行(A)
A. 本地安装
B. 全局安装
C. 本地安装和全局安装
D. 以上都可以

解析：

全局安装一般设置到诸如 cli 一类的工具才会全局安装。

17、如果一个工程具有下面的目录结构，假如 src/index.js 中想使用包a，下面的导入语句正确的是 (ACD)
A. require("a")
B. require("../a")
C. require("../node_modules/a")
D. require("a/index.js")

|-- node_modules
|   |-- a
|    		|-- index.js
|   |-- b
|       |-- index.js
|-- src
|   |-- index.js

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

解析：

考察 require 的基本语法，b 选项跨过了 node_modules 目录

18、下面哪组地址是满足同源策略的(D)
A. http://127.0.0.1和http://localhost
B. https://www.baidu.com和http://www.baidu.com
C. https://www.zhihu.com和https://zhihu.com
D. https://ke.qq.com和https://ke.qq.com/duyi

解析：

A 是域名不同

B 是协议不同

C 是主机名不同

19、 如果生产环境没有跨域问题，但在开发阶段有跨域问题时，应该采取的措施是(D)
A. 与后端开发商量，让服务器支持跨域
B. 全程使用mock模拟数据，不发送真实的请求
C. 由于生产环境没有跨域问题，所以直接到生产环境中开发
D. 配置开发服务器devServer的代理

解析：

A 错在前后端分离开发，根本不需要后端做任何事情，后端只需要提供数据即可

B 前期可以使用 Mock，但是最终跨域问题还是要解决的

正确的方案就是前端启动一个服务器，然后通过这个服务器转发请求

20、下面这段vue代码运行后，页面无法显示图片，最有可能的原因是 (D)
经检查，assets目录下确实有1.png
A. 网络问题
B. 图片损坏
C. 页面卡顿
D. 打包结果中的路径和源码路径不同

<template>
  <div>
    <img :src="imgUrl">
  </div>
</template>

<script>
export default {
  data(){
    return {
      imgUrl: '../assets/1.png'
    }
  }
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

解析：

很明显是 D，前面三个错得太离谱

21、 关于css module说法正确的是(AC)
A. 避免了类名冲突
B. 导入后，得到的是一个css字符串
C. 导入后，得到的是一个对象
D. 导入后，得到的是一个类名字符串

解析：

css module 主要就是将 css 分模块，好处就是避免类名冲突，导入后得到的是对象

关于 css module 可以参阅 https://www.ruanyifeng.com/blog/2016/06/css_modules.html

22、 关于v-show和v-if的说法正确的有？(ABC)
A. 两者都可以控制元素的显示和隐藏
B. v-show通过控制css中的display设置为none，控制元素隐藏
C. v-if动态的向DOM数内添加或者删除DOM元素
D. 在频繁的切换展示时，v-show相对于v-if要更消耗性能

解析：

D 的说法刚好相反，v-show 更节约性能

下面两道题都是考察 vue 的生命周期钩子函数，有关 vue 中的生命周期钩子函数，说明如下:

  • beforeCreate：在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。
  • created：在实例创建之后调用。此时已完成数据观测、事件方法，但尚未开始 DOM 编译，即未挂载到 document 中。
  • beforeMount：在 mounted 之前运行。
  • mounted：在编译结束时调用。此时所有指令已生效，数据变化已能触发 DOM 更新，但不保证 $el 已插入文档。
  • beforeUpdate：在实例挂载之后，再次更新实例（例如更新 data）时会调用该方法，此时尚未更新 DOM 结构。
  • updated：在实例挂载之后，再次更新实例并更新完 DOM 结构后调用。
  • beforeDestroy：在开始销毁实例时调用，此刻实例仍然有效。
  • destroyed：在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。
  • activated：需要配合动态组件 keep-live 属性使用。在动态组件初始化渲染的过程中调用该方法。
  • deactivated：需要配合动态组件 keep-live 属性使用。在动态组件初始化移出的过程中调用该方法。

23、关于vue的ref，说法正确的有？(AD)
A. 当某个元素使用了特性ref，通过this.$refs.xxx能获取到该元素的真实DOM
B. 当某个组件使用了特性ref，通过this.$refs.xxx获取到的是组件根元素的真实DOM
C. 在created钩子函数中，可以通过ref获取到真实DOM
D. 在mounted钩子函数中，可以通过ref获取到真实DOM

解析：

this.$refs.xxx 获取的是元素真实 DOM

created 阶段并未进行 DOM 渲染，所以无法获取真实 DOM

24、 关于vue生命周期的说法正确的是？(ABC)
A. Vue从创建到挂载完毕，依次触发的钩子函数为：beforeCreate、created、beforeMount、mounted
B. 当数据被更改时，依次触发的钩子函数为：beforeUpdate、updated
C. 当组件被销毁时，依次触发的钩子函数为：beforeDestroy、destroyed
D. 在beforeCreate中，可以获取到真实的DOM

解析：

beforeCreate 阶段是不可能有真实 DOM 的

25、 父子组件的通信方式，正确的是(ACD)
A. 父组件向子组件传递props
B. 由父组件触发事件，子组件监听
C. 由子组件触发事件，父组件监听
D. 子组件提供插槽，父组件传入插槽内容

解析：

B 的顺序刚好反了，是子组件来触发事件

26、什么时候我们可以考虑使用组件Mixin( C )
A. 多个组件有部分相同的CSS
B. 多个组件有部分相同的HTML
C. 多个组件有部分相同的JS逻辑

解析：

复用 JS 的时候

27、 source map的作用是(BD)
A. 避免打包压缩，直接将工程源码放入到打包结果
B. 将打包结果和源码进行映射，便于在浏览器中调试
C. 如果使用source map的方式打包，会显著增加浏览器运行的代码体积
D. 使用source map的方式打包，可运行的代码体积几乎不受影响，只是会多出一些.map文件

解析：

A 明显错误，C 和 D 是互斥的

28、关于vue事件总线的说法，正确的是(ACD)
A. 事件总线可用于非父子组件的通信
B. 事件总线的实现，必须借助Vue构造函数
C. 事件总线中维护了一个事件队列
D. 在某个组件卸载后，需要移除它对事件的监听

解析：

构造函数可以自己实现，只不过使用 Vue 方便一些，有些内置功能已经实现了，但并不是说必须要使用

29、关于命名路由，说法正确的是(A)
A. 让路由的逻辑含义和其路径解耦，为将来路径的变更提供便利
B. 命名路由的名称必须和路径一致
C. 命名路由不可以携带param
D. 命名路由不可以携带query

解析：

命名路由就是为了更方便而已，和普通路由相比没有任何的限制，因此 C、D 错误

B 也是错的，命名路由简单来讲就是自己取一个名字

30、vue-router的mode包括：(ABC)
A. hash
B. history
C. abstract
D. navigator

解析：

常用的是 hash 和 history，但是如果去看官方文档，会发现有三个值

官方文档链接：https://v3.router.vuejs.org/api/#mode

31、 关于<RouterLink>组件，说法正确的是(ABCD)
A. 最终会生成a元素
B. 有属性to，表示跳转目标
C. 当链接地址和当前页面地址匹配时，会自动附加激活样式
D. to属性可以赋值为一个对象

解析：

全部都正确。默认生成 a 元素，但是可以通过 tag 属性来指定

32、关于vuex的mutations，说法正确的是(D)
A. 可以使用异步代码
B. 不能直接更改state
C. 可以触发actions
D. 通过commit触发

解析：

mutations 就是用来同步修改 state 的，触发 mutations 的方式为 commit

33、关于vuex的actions，说法正确的是(ABC)
A. 可以使用异步代码
B. 不能直接更改state
C. 可以触发mutations
D. 通过commit触发

解析：

actions 最终还是触发 mutation 来修改 state，action 主要解决异步的问题

34、在一个使用了vuex的系统中，如果观察到某个共享数据发生了变化，说明(B)
A. 一定有action触发
B. 一定有mutation触发
C. 一定只有一个组件修改了数据
D. 一定只有一个组件读取了数据

解析：

既然共享数据发生了变化，那就是 state 发生了变化，触发 state 的唯一方式就是 mutation

35、新闻详情页的路由为/news/detail/:id，如果要在详情页组件中获取到新闻的id，正确的代码是(D)
A. this.$router.id
B. this.$router.params.id
C. this.$route.id
D. this.$route.params.id

解析：

基本语法，没啥好说的，注意 this. r o u t e r 和 t h i s . router 和 this. router和this.route 的区别

36、 如果某些页面需要登录后才能访问，最合适的做法是(B)
A. 为每个需要登录的组件添加判断，如果用户没有登录，则跳转到登录页
B. 在页面路由位置添加meta，使用自定义属性标识该路由的访问权限，然后使用路由守卫统一判定
C. 每进入一个页面，都需要登录一次
D. 登录后，把登录的信息保存到localstorage，在鉴权时，仅需判断localstorage中是否有值即可

解析：

涉及到鉴权，一般都通过导航守卫来判断是否能够进入

37、如果vue的打包体积过大，经过分析，发现有很多兼容性代码占用了大量空间，进一步发现，之前设置的兼容范围太广，此时，正确的解决方向有(AB)
A. 设置.browserlistrc，根据需要缩小兼容范围
B. 启用现代模式打包，针对现代浏览器优化打包体积
C. 去掉babel，不加入兼容代码
D. 不使用ES6和CSS3代码，以减少打包体积

解析：

C 和 D 是明显错误的，简直就是在摆烂

38、发现vue的打包体积过大，经过分析，发现主要体积被一些公共库所占用，正确的解决方向有(BC)
A. 去掉所有的第三方库，全部手写
B. 尽量使用具名导入，以便配合tree shaking
C. 一些知名库可以使用CDN
D. 在node_modules中修改公共库的代码，减少它的体积

解析：

A 肯定是不现实的，D 不可能去修改别人的代码

39、针对element-ui的说法正确的是(BCD)
A. vue官方提供的组件库
B. 第三方组件库
C. 主要用于搭建中后台系统
D. 使用element-ui的系统一般无须设计师参与

解析：

第三方组件库有很多，大家可以列举一下

40、组件A中提供了一个方法method，若想在组件B中调用该方法，正确的做法是(A)
A. 在组件B中使用组件A，设置好ref，通过ref得到的组件实例调用方法
B. 在组件B中导入组件A，直接A.method()调用
C. 无须导入组件A，在组件B中使用this.A.method()调用
D. 无须导入组件A，在组件B中使用this.method()调用

解析：

明显是 A，一般通过 ref 获取到组件实例

BCD 都没有这些用法

简答题

1、聊一聊你接触过哪些常用的第三方库，它们都是做什么用的

参考答案：

  1. jQuery：在传统模式下，操作DOM更简单

  2. Lodash：提供了一些常见的工具函数

  3. Animate.css：提供了丰富的CSS3动画

  4. Axios：多环境适配的远程请求库

  5. MockJS：模拟数据

  6. Moment：时间日期处理

  7. Echarts：数据可视化

  8. …

2、模块化、包管理器、webpack全家桶的出现，给前端开发带来了哪些变化

参考答案：

  1. 解决了全局污染的问题

  2. 解决了依赖混乱、版本控制、依赖库更新等问题

  3. 解决了兼容性问题，开发时更加专注于业务

  4. 打包时代码自动混淆压缩，减少了最终体积

  5. 使用文件指纹避免了更新时遭遇的缓存问题

  6. 解决了CSS类名易混淆的问题

  7. 可以使用模块化的方式编写样式

  8. 可以使用更高级的语言（LESS、SASS）等编写样式

  9. 工程目录结构更加精细合理

  10. 模块数量变多，每个模块中的代码减少

  11. 区分开发环境和生产环境，提供开发服务器，可解决开发阶段的跨域问题

  12. …

代码题

1、根据下图的信息，使用弹性盒实现一个三栏布局

image-20220525151751353 
.container{
  /* code here */
}

.left-aside{
  /* code here */
}

.main{
  /* code here */
}

.right-aside{
  /* code here */
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

参考答案：

.container{
/* code here */
	display: flex;
	width: 100vw;
	height: 100vh;
}

.left-aside{
	/* code here */
	width: 300px;
	flex-shrink: 0;
}

.main{
	/* code here */
	flex: 1 1 auto;
}

.right-aside{
	/* code here */
	width: 200px;
	flex-shrink: 0;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  1. 实现一个组件，该组件仅包含一个按钮，每点击N次会触发事件nclick

组件属性：

  • count：组件每点击多少次会触发nclick事件，默认值10
  • content：按钮的文本内容，默认值click

组件事件：

  • nclick：当组件每点击指定次数后触发，有一个参数，表示触发的次数
<template>
	
</template>

<script>
	export default {}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

参考答案：

<template>
	<button @click="handleClick">{{content}}</button>
</template>

<script>
export default {
 props: {
   count: {
     type: Number,
     default: 10,
   },
   content: {
     type: String,
     default: 'click'
   }
 },
 data(){
   return {
     clickTimes: 0,
     triggerTimes: 0
   }
 },
 method:{
   handleClick(){
     this.clickTimes++;
     if(this.clickTimes % this.count === 0){
       // 触发事件
       this.triggerTimes++;
       this.$emit('nclick', this.triggerTimes);
     }
   }
 }
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

3、实现一个开关组件，样式参考：https://element.eleme.cn/#/zh-CN/component/switch
组件属性：

  • value：类型boolean，表示开关是否打开，默认值false

组件事件：

  • input：当开关状态变化时触发，事件参数是一个boolean，表示开关变化后是否应该打开
<template>

</template>

<script>

</script>

<style scoped>

</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

参考答案：

<template>
 <span @click="handleClick" class="switch" :class="{ selected: value }"></span>
</template>

<script>
export default {
props: {
	value: {
    type: Boolean,
    default: false,
    },
  },
  methods: {
   handleClick() {
     this.$emit('input', !this.value);
  },
 },
};
</script>

<style scoped>
.switch {
display: inline-block;
width: 40px;
height: 20px;
background: #ff4949;
 border-radius: 10px;
 box-sizing: border-box;
 padding: 2px;
 cursor: pointer;
 transition: 0.2s;
}
.switch::before {
 content: '';
 display: block;
width: 16px;
height: 16px;
 background: #fff;
 border-radius: 50%;
 transition: 0.2s;
}
.switch.selected {
 background: #13ce66;
}
.switch.selected::before {
transform: translateX(20px);
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/295368
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号