记录新招大佬针对项目所提出的优化点建议

目录

1、将 debounce 封装函数替换为 v-debounce 全局自定义指令

1-1、原 debounce 封装函数

1-2、替换的 v-debounce 全局自定义指令

2、使用 Vue 中 style scoped 深度访问新方式 :deep()

2-1、 >>>

2-2、/deep/

2-3、::v-deep

2-4、:deep()

3、Edge 浏览器与 IE 浏览器实现滚动条兼容

4、利用 scss 提取图片路径公共部分

5、避免大量 “ 有迹可循 ” 的代码重复出现

---

背景 ：

    深知计算机互联网这条路 “学无止境” 啊，但是在固有的思想状态下，一个人终究还是懒得学习新的东西并且去加以运用，融会贯通，所以自己的实力一直止步不前，固步自封。

    但当这种平衡的状态打破之后，必定会有新的改变，就好比现在我们组注入了新的血液，新招了一个前端大C，然后平静的 “ 湖泊 ” 自此就开始产生了涟漪，思想的火花产生了碰撞，原本懒得优化项目的一些东西，在得到了合理化的建议之后，也开始慢慢要改进了，下面就挨个记录一下项目优化的点吧，虽然自己懒得学新东西使自己进步，但巩固好已学，已用的知识，随时记录下来我还是挺喜欢的，下面正式进入话题 ：

---

1、将 debounce 封装函数替换为 v-debounce 全局自定义指令

使用起来会比原来方便一些。

1-1、原 debounce 封装函数

utils / tools.js

/**
 * 函数防抖 是n秒后延迟执行，多用于页面scroll滚动，窗口resize，防止按钮重复点击
 * @param {Function} fn 是我们需要包装的事件回调
 * @param {Number} delay 是每次推迟执行的等待时间
 * @returns
 */
export default function (fn, delay) {
	// 记录上一次触发的时间
	var timer = null;
	return function () {
		// 保留调用时的this上下文
		var context = this;
		// 保留调用时传入的参数
		var args = arguments;
		// 每次事件被触发时，都去清除上一次延时器
		if (timer) clearTimeout(timer);
		// 设立新的定时器
		timer = setTimeout(function () {
			fn.apply(context, args);
		}, delay);
	};
};

使用 ：

---

1-2、替换的 v-debounce 全局自定义指令

utils / directives.js

/**
 * v-debounce 防抖指令 防止重复点击
 * @param {Function} fn 方法名【必传】
 * @param {*} params 函数参数
 * @param {String} event 触发方式click
 * @param {Number} delay 防抖时间1000
 */
const debounce = Vue.directive('debounce', {
	inserted: function (el, binding) {
		let timer; // 定时器
		const { fn, params, event, delay } = binding.value;
		el.addEventListener(event || 'click', () => {
			// 每次事件被触发时，都去清除之前旧的定时器
			if (timer) clearTimeout(timer);
			// 设立新的定时器
			if (binding.value.hasOwnProperty('params')) {
				// 传参用法：v-debounce="{ fn: 方法名, params: '传参', delay: 防抖时间 }"
				timer = setTimeout(() => {
					fn(params);
				}, delay || 1000);
			} else {
				// 不传参用法：v-debounce="方法名"
				timer = setTimeout(() => {
					binding.value();
				}, 1000);
			}
		});
	},
});

export { debounce };

使用 ：

// main.js 中引用
import "./utils/directives";

防抖

防抖

  methods: {
    submitForm (id) {
      console.log('防抖', id);
    },
  },

---

2、使用 Vue 中 style scoped 深度访问新方式 :deep()

自 Vue2 从 2.7.0 开始，Vue3 ，一律采用这种方式用来深度访问组件样式。

以往 Vue2 项目 style 使用的样式种类有很多，所对应的样式穿透写法也不一样，很难统一

---

2-1、 >>>

如果 Vue2 的 style 使用的是 css ，那么使用 ： >>>

但是像 less 和 scss 等预处理器却无法解析 >>>

---

2-2、/deep/

如果 Vue2 的 style 使用的是 less ，那么使用 ： /deep/

---

2-3、::v-deep

如果 Vue2 的 style 使用的是 scss ，那么使用 ： ::v-deep  切记必须是双冒号

---

下面贴上 node_modules 中的一段解析 scoped 的源码

---

由于上述针对 style 标签使用不同的 样式类型，需要使用不同的 样式穿透语法，

所以很难统一，项目维护起来也比较麻烦

（ 比如项目将 node-sass 替换为 dart-sass 的话，就需要全局替换穿透语法了 。）

因此，自 Vue2 从 2.7.0 开始，Vue3 后，一律采用 :deep() 方式来深度访问组件样式。

---

2-4、:deep()

• :deep() 对于第一层内部组件样式，加不加，样式都会生效。

观察下面组件

:deep(.el-input){
  font-size:20px
}
.el-input{
  font-size:20px
}
// 这两个都可以。对于内部组件，第一层加不加 :deep都可以

• 对于除第一层之外的，第二、三...层样式，则必须加：deep()，加载自己身上，或者外面父上都可以

.el-input{
  // 不起作用
  .el-input__inner{
      font-size:40px;
  }
}

.el-input{  
  // 起作用
  :deep(.el-input__inner){
      font-size:40px;
  }
}
或者
:deep(.el-input){
  // 也起作用，外面有deep
  .el-input__inner{
      font-size:40px;
  }
}
或者
:deep(.responsive-btns){
  .el-input{
      // 也起作用，外面有deep
      .el-input__inner{
          font-size:40px;
      }
  }
}

---

3、Edge 浏览器与 IE 浏览器实现滚动条兼容

使用 Element UI 组件库 “ 失传已久 ” 的 el-scrollbar 组件 来实现兼容性处理。

以往写的浏览器滚动条兼容处理，经常都是 IE浏览器 无法做到与大家同步的效果，

只能修改其滚动条各种属性的颜色样式。。

详见文章 ：

前端自定义设置各浏览器滚动条scrollbar样式的方法

---

所以，由于 IE 的特殊性，我们只好另辟蹊径，既然不能改样式，那么就自己写一个

假的滚动条，利用 Element UI 的 el-scrollbar 组件来帮助我们实现。

---

4、利用 scss 提取图片路径公共部分

---

5、避免大量 “ 有迹可循 ” 的代码重复出现

思路就是尽量将有规律的东西去循环渲染展示出来

---