重构之 bug 日志

雨季mo浅忆

已于 2022-04-18 19:36:00 修改

阅读量589

点赞数

分类专栏：前端项目重构文章标签：前端项目重构

于 2021-12-18 06:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_58099903/article/details/122005469

版权

前端同时被 2 个专栏收录

158 篇文章 29 订阅

订阅专栏

项目重构

4 篇文章 0 订阅

订阅专栏

单纯只是给自己记录一下重构项目过程中遇到的一系列各种小问题吧 :

( 1 ) 比如我想在首页设置一张满屏的背景图 , 设置在根 body 上面 ,

但是呢 , 我通过直接在 / public / index.html 里面设置背景图却并没有显示出来

style="background-image: url('../src/assets/404_images/404.png'); background-size: 100%; overflow: hidden;

解决方案 :

在 src / App.vue 文件内进行设置

<script>
export default {
  name: "App",
  data() {
    return {
      bodyBgImage: require("@/assets/404_images/404.png"),
    };
  },
  mounted() {
    this.setBodyStyle();
  },
  methods: {
    setBodyStyle() {
      if (navigator.userAgent.indexOf("Windows") > -1) {
        document.body.style.backgroundImage = "url(" + this.bodyBgImage + ")";
        document.body.style.backgroundSize = "100%";
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.backgroundColor = "#FFFFFF";
        document.body.style.margin = "0px";
      }
    },
  },
};
</script>

话说这是为啥嘞 ? 难道是因为先后的执行顺序么 ? 前面设置了 , 又被后面重新挂载渲染了 ?

知识点 :

navigator.userAgent.indexOf 来判断浏览器类型

$(document).ready(function(){
	var ua = navigator.userAgent;
	if(ua.indexOf("Android")>0 || ua.indexOf("iPhone")>0 || ua.indexOf("iPad")>0) { //移动端
		location.href="${ctx}/live/wap";
	} else { // pc端
		location.href="${ctx}/live/index";
	}
});

<script language="JavaScript">
  function getOs() {
    var OsObject = "";
    if (navigator.userAgent.indexOf("MSIE") > 0) {
      return "MSIE";
    }
    if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
      return "Firefox";
    }
    if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {
      return "Safari";
    }
    if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {
      return "Camino";
    }
    if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {
      return "Gecko";
    }
  }
  alert("您的浏览器类型为:" + getOs());
</script>
 
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

前端浏览器 navigator.userAgent 操作

var userAgent = navigator.userAgent;  // 取得浏览器的 userAgent 字符串
console.log(userAgent)

/* 是否是火狐  ，火狐内核 Gecko */
var isFirefox = navigator.userAgent.indexOf('Firefox') > -1 
console.log('火狐' + isFirefox) // 返回 true  则是 ，false  则不是
/* 是否是 WebKit 内核 */
var isWebKit = navigator.userAgent.indexOf('WebKit') > -1
console.log('谷歌内核' + isWebKit) // 返回 true  则是，false  则不是
/* 是否是 谷歌 */
var isChrome = navigator.userAgent.indexOf('Chrome') > -1
console.log('谷歌' + isChrome) // 返回 true  则是 ，false  则不是
/* 是否是 opera ， opera 内核 Presto */
var isOpera = navigator.userAgent.indexOf('Opera') > -1
console.log('Opera' + isOpera) // 返回 true  则是 ，false  则不是
/* 是否是 IE 内核 */
var isTrident = navigator.userAgent.indexOf('Trident') > -1
console.log('IE内核' + isTrident) // 返回 true  则是 ，false  则不是
/* 判断是否 IE 浏览器 */
var isIE = navigator.userAgent.indexOf("compatible") > -1 && navigator.userAgent.indexOf("MSIE") > -1 && !isOpera
console.log('IE ' + isIE)

// 因为 IE10 - IE11 的版本问题，不再支持 document.all 判断，所以 IE 判断函数要重新写
var isIeL = !!window.ActiveXObject || "ActiveXObject" in window
console.log('IELLQ ' + isIeL) // 判断是否IE浏览器
/* 判断是否 IE9 ; 如果是其他 IE 版本，则 MSIE 7.0   MSIE 8.0 */
var isIE9 = navigator.userAgent.indexOf("MSIE 9.0") > 0
console.log('IE999' + isIE9)

// 判断是否为移动端
var browser = {
  versions: function () {
    var u = navigator.userAgent;
    return {
      trident: u.indexOf('Trident') > -1,   // IE 内核
      presto: u.indexOf('Presto') > -1,     // opera 内核
      webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
      gecko: u.indexOf('Firefox') > -1,     // 火狐内核 Gecko
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为 移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android
      iPhone: u.indexOf('iPhone') > -1,     // iPhone
      iPad: u.indexOf('iPad') > -1,         // iPad
      webApp: u.indexOf('Safari') > -1      // Safari
    };
  }()
}
var isPhone = browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad
console.log("是否为移动端" + isPhone)

// JS 判断浏览器是否是 IE9 以下，处理可能遇到的兼容性问题
if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
  console.log("您的浏览器版本过低, 请使用 IE9 及以上版本");
}

项目内所用：

src / utils / tools.js

/**
 * 判断是否为 IE 浏览器
 */
const isIE = function () {
  if (window.ActiveXObject || "ActiveXObject" in window) {
    return true;
  } else {
    return false;
  }
};

export { isIE };

组件内所用：

<template>
  <div>
    <el-input ref="addressInput" v-model="address" :readonly="true"></el-input>
    <el-button
      class="copy-ad"
      type="primary"
      size="medium"
      @click="copyAddress(address)"
      >复制链接</el-button
    >
  </div>
</template>

<script>
import { isIE } from "../../../utils/tools";
export default {
  methods: {
    data() {
      return {
        address: "https://www.baidu.com",
      };
    },
    copyAddress(url) {
      // 拷贝地址
      this.$refs.addressInput.select(); // 输入框内容选中效果
      if (isIE()) {
        this.$message.success("复制成功");
      } else {
        this.$copyText(url)
          .then((res) => {
            this.$message.success("复制成功");
          })
          .catch((err) => {
            this.$message.error("该浏览器不支持自动复制, 请手动复制");
          });
      }
    },
  },
};
</script>

<template>
  <div>
    文本框高 :
    <el-input
      v-model="data.answerInputRow"
      :maxlength="2"
      :disabled="data.quInputType !== '1'"
      placeholder="3 / 行"
      @input="rowNumInput($event, data.answerInputRow, data)"
    ></el-input>
  </div>
</template>

<script>
import digitalInput from "../../../utils/digitalInput";
import { isIE } from "../../../utils/tools";

export default {
  rowNumInput(event, modelValue, data) {
    // 限制用户输入非数字内容(文本框高)
    data.answerInputRow = digitalInput(event, modelValue);
    // IE 浏览器使其自动聚焦
    if (isIE()) {
      this.$nextTick(() => {
        document.getElementById("ieFocus").focus();
      });
    }
  },
};
</script>

( 2 ) 组件命名规范性问题 :

组件注册 — Vue.js

（ 3 ）flex 布局问题

我引用的 ElementUI 组件，都是 div 元素，所以都会默认独占一行的

现在我想实现让他们在一行显示，所以我给包裹他们的父元素加了 display：flex

然后它这个字竟然也给我竖起来了呃，，我就把原来包裹它们的 span 标签换成了 div 标签，还是没有解决问题，所以那就百度呗。。

div 内的文字变成竖向了，可以通过 css 对 div 的样式进行定义和修改：

1、给 div 设置浮动。加上 float: left

2、对 div 设置好相应的宽度 width 和高度 height

3、通过 overflow: hidden 对超出 div 宽度的隐藏

相应代码为：
div { 
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    overflow:hidden 
}