最后
全网独播-价值千万金融项目前端架构实战
从两道网易面试题-分析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进行图片的处理
===========================================================================
下拉框遍历时,需要注意options标签保持同一行,若是存在换行,会导致选中时的值存在多余的空白
{{item.label}}
需要将Options和下拉框的值保持在同一行
{{item.label}}===========================================================================
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
前端资料汇总