2024年最新前端-提升自己的代码水平(1),大数据高频面试题

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价,看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战,如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

比如某个页面中存在三个Modal弹框

// bad

// 每一个数据控制对应的Modal展示与隐藏

new Vue({

data() {

return {

modal1: false,

modal2: false,

modal3: false,

}

}

})

// good

// 当modalType为对应的值时 展示其对应的弹框

new Vue({

data() {

return {

modalType: // modalType值为 modal1,modal2,modal3

}

}

})

图片

=====================================================================

功能的开发过程中,图片的处理往往是比较容易被忽略的环节,也会在一定程度影响开发的效率和页面的性能

图片压缩问题,除非特别要求图片必须高质量的显示,否则都应该进行对应的压缩处理

不同业务场景进行图片格式的选型

  • JPG 适用于呈现色彩丰富的图片JPG 图片经常作为大的背景图、轮播图或 Banner 图出现等

Logo、颜色简单且对比强烈的图片或背景、需要透明度等

  • 将常用且变动频率很低的小图片进行合并成雪碧图,对于变动比较频繁和小于6KB的图片进行base64处理

  • 根据项目图片数量和项目的用户机型分布等,考虑采取webp进行图片的处理

Select优化

===========================================================================

下拉框遍历时,需要注意options标签保持同一行,若是存在换行,会导致选中时的值存在多余的空白

{{item.label}}

需要将Options和下拉框的值保持在同一行

{{item.label}}

data数据层级

===========================================================================

data数据具有数据层级结构,切勿过度扁平化或者嵌套层级过深,若是过度扁平化会导致数据命名空间冲突,参数传递和处理,若是层级嵌套过深也会导致vue数据劫持的时候递归层级过深,若是嵌套层级丧心病狂那种的,小心递归爆栈的问题。而且层级过深会导致数据操作和处理不便,获取数据做容错处理也比较繁琐。一般层级保持2-3层最好。

若是只有一层数据,过于扁平

{

name: ,

age: ,

gender:

}

导致处理不方便

适当的层级结构不仅增加代码的维护和阅读性,还可以增加操作和处理的便捷性

{

person: { // 个人信息

name: ,

age: ,

gender:

}

}

策略模式

=======================================================================

策略模式的使用,避免过多的if else判断,也可以替代简单逻辑的switch

const formatDemandItemType = (value) => {

switch (value) {

case 1:

return 基础

case 2:

return 高级

case 3:

return VIP

}

}

// 策略模式

const formatDemandItemType2 = (value) => {

const obj = {

1: 基础 ,

2: 高级 ,

3: VIP ,

}

return obj[value]

}

样式穿透

=======================================================================

在开发中修改第三方组件样式是很常见,但由于 scoped 属性的样式隔离,可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用(组件样式污染、不够优雅),样式穿透在css预处理器中使用才生效。

  • less使用 /deep/
  • scss使用 ::v-deep

前端面试题汇总

JavaScript

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值