前端开发中的常见优化

目录

外观

兼容

不同尺寸（包裹，height:100%）

[不同 浏览器 隐藏滚动条 的 不同属性名](#不同 浏览器 隐藏滚动条 的 不同属性名)

重排->重绘

[不显示 display:none->禁用disable](#不显示 display:none->禁用disable)

性能

导航重复（修改原型push、replace方法）

[搜索防抖 import { debounce } from 'lodash'](#搜索防抖 import { debounce } from 'lodash')

严谨性

少用any类型

路由参数query和params

---

外观

兼容

不同尺寸（包裹，height:100%）

.workbench-create {
  height: 100%;
  display: flex;
}

不同 浏览器 隐藏滚动条 的 不同属性名

.left-wrap {
    height: 100%;
    overflow: auto;
    flex: 1;
    padding-left: 40px;
    //隐藏元素的滚动条。这通常用于自定义滚动条样式。
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
    //伪元素选择器，用于选择Webkit浏览器（如Chrome、Safari等）中的滚动条。
      display: none;
      /* Chrome Safari */
    }

重排->重绘

不显示 display:none->禁用disable

性能

导航重复（修改原型push、replace方法）

push：将新的路由添加到浏览器的历史记录中，这样用户就可以通过浏览器的后退按钮回到之前的路由。

this.$router.push('/about')

replace：不会在浏览器的历史记录中留下新的条目，而是直接替换当前的历史记录条目。

this.$router.replace('/contact')

比如在处理登录 页面时，登录成功后可能会用replace方法替换当前路由，以防止用户通过后退按钮回到登录页面。

修改 VueRouter 的原型方法 push 和 replace，用来捕获导航重复错误并进行处理，

而不会在控制台中抛出错误，从而避免了不必要的错误提示和潜在的问题。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      throw err;
    }
  });
};

const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      throw err;
    }
  });
};

const router = new VueRouter({
  // 路由配置...
});

export default router;

搜索防抖 import { debounce } from 'lodash'

    <mds-select
              style="width: 480px"
              v-model="formData.applyOa"
              :multiple="true"
              placeholder="选择或搜索OA"
              filterable
              :remote="true"
              :remote-method="searchOA"
              :disabled="showDetail"
              clearable
              @change="changeOA"
            >
              <mds-option
                class="select-oaAndDept"
                v-for="item in OAoptions"
                :key="item.oa"
                :value="item.empOa"
                :label="item.empNmAndOa"
              >
                <div class="select-name">
                  {{ item.empNmAndOa }}
                  <div class="select-dept">{{ item.deptNm }}</div>
                </div>
              </mds-option>
            </mds-select>

import { debounce } from 'lodash'

//防抖
// OA list
  OAoptions: any = []
  searchOA = debounce(this.searchOaAPi, 500)
  searchOaAPi(val: any) {
    bspUserInfoFuzzyQueryOaList({
      empOaOrNm: val,
      partitionDt: ''
    }).then((res: any) => {
      if (res && res.code == 200) {
        this.OAoptions = res.data
      } else {
        this.$message.error(res.msg || '系统错误')
      }
    }).catch((e: any) => {
      this.$message.error(e.msg)
    })
  }

严谨性

少用any类型

路由参数query和params