第三期:前端九條bug分享

時間  2020-07-03
標籤 三期 前端 九條 bug 分享 简体版
原文   原文鏈接

本期

由於須要寫這方面的文章, 致使我如今工做中很期待有趣bug的出現, 看到測試給我提bug還有點高興...css

1:element-ui的form表單組件敲'Enter'默認刷新頁面

bug現象:
如題所說, 咱們須要作的無非是禁掉默認的提交事件, element自己沒有禁用提交屬性, 下面是一塊有bug的代碼.html

<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">當即建立</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

解決方式:
在form層多了個onsubmit="return false;"
<el-form ref="form" :model="form" label-width="80px" onsubmit="return false;">前端

更好的解決方式:
這種默認提交功能項目中基本不會使用了, 因此基本是要禁止掉的, 咱們若是全局有5個form表單就要改5個地方, 因此程序員確定會想要作一個公共的處理方式, 第一時間想到的就是二次封裝, 可是雖然二次封裝, 我仍然但願這個組件叫el-form, 那麼會遇到什麼問題那?vue

  1. 必須還叫 <el-form>
  2. 我按需引入的element-ui組件, 那麼我不把它的form組件放在全局定義
  3. 我是直接徹底引入的element-ui組件, 我不想換成按需引入
  4. 避免循環引入的bug

main.js代碼以下:node

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import Form from './components/form.vue';
import 'element-ui/lib/theme-chalk/index.css';

// 這裏咱們不改變本來的組件定義, 這裏定義組件並非當即渲染, 因此能夠被頂掉.
Vue.use(ElementUI);
// 這裏使用咱們本身的組件, 名字仍是使用element-ui本來的名字.
Vue.component(ElementUI.Form.name, Form);

new Vue({
  render: h => h(App),
}).$mount('#app')

./components/form.vue裏面咱們僅需包裹一下:python

<template>
  <x-form onsubmit="return false;"  v-bind="$attrs" v-on="$listeners" >
    <slot />
  </x-form>
</template>

<script>
import { Form } from "element-ui";

export default {
  components: {
    XForm: Form
  }
};
</script>

上面要注意, 之因此我起名爲XForm就是要避免循環調用, 由於當vue識別這個組件的時候,全局是有一個el-form組件的, 不更名會報錯Uncaught RangeError: Maximum call stack size exceeded爆棧.程序員

2: intersectionObserver元素是否出如今視野內

bug現象:
我以前寫過一個圖片懶加載的插件, 第七集: 從零開始實現一套pc端vue的ui組件庫( 懶加載v-lazy )與'骨架屏模板' 組件, 這個裏面我判斷圖片是否出如今屏幕視野內的方式是, 計算圖片相對於窗口的位置, 好比說用圖片的寬減去他距離左側的距離就能夠知道它左邊是否出現以及出現的百分比, 可是... 當有了這個屬性一切都不同了, 能夠說以前本身寫的是'錯'的了.
代碼呈現
你們能夠直接拿去玩一下, 簡直太好用了.web

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #ks{
      position: absolute;
      border: 1px solid red;
      left: 10px;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="ks">我來了</div>
  <script>
    const ks = document.getElementById('ks');
    // IntersectionObserver是瀏覽器原生提供的構造函數，接受兩個參數：callback是可見性變化時的回調函數，option是配置對象（該參數可選）。
    var io = new IntersectionObserver((res)=>{
      // intersectionRatio 是可見的範圍, 均可見爲1, 都不可見爲0
      console.log('隱藏了麼',res[0].intersectionRatio)
    });
    // 開始觀察
    io.observe(ks);
    var n =0;
    ks.onclick=function(){
       this.style.left = n + 'px';
       n -=5
    }
    setInterval(()=>{
      ks.style.left = n + 'px';
       n -=5
    },100)
    // 中止觀察
    // io.unobserve(element);

    // 關閉觀察器
    // io.disconnect();
  </script>
</body>
</html>

具體的詳細解讀你們能夠看看阮一峯老師對這個方法的介紹, 這條只能算是api知識點, 可是在不知道這個api的狀況下確實對我形成了困擾.npm

3: 項目名也就是main對應的字段, 須要避免與內部的包名重複

bug現象
我建立了一個名爲xxx的項目, 而且在項目裏面引入了一個叫xxx的包, 這就會致使項目報錯.element-ui

bug解決
改掉package.json文件中的name屬性.

bug回味

  1. 項目起名也是須要有必定章法的, npm包的起名也是要有必定章法的, 好比bable的命名就挺棒的@babel/core @babel/preset-env 這兩個包第一眼看去就是圍繞着babel產生的包顯得很專業.
  2. 咱們發佈包也要避免污染npm的總體環境, 命名分爲核心包與圍繞核心包的擴展功能包, 由於一旦發佈就很差撤回了, 並且包的名字是不可重複的.

4: flow-root 清除浮動最友好的方式, 不會影響元素自己 也很少寫元素

解決的主要問題
清除浮動dispaly:flow-root造成"BFC"

爲何要用它?

  1. 能夠說之前用的方式都不是專門針對清除浮動的, 而它纔是專業.
  2. 不用新增元素, 哪怕只是佔用個僞元素, 沒準僞元素須要去作其餘的事.
  3. 不用新增屬性, 也就是不用多寫一條樣式, 直接把自身的'display'改了就好.
  4. 不影響父級屬性, 好比你用overflow: hidden;實際上是影響了自身的屬性,內部元素無法出去了.

意義何在
我看到了css的堅持, 現階段用浮動佈局的人很少了, 但css不會由於這樣就無論, 它依然想作到更好的解決辦法, 可讓咱們感受到前端會一直進步下去.

推薦:
推薦沒看過的同窗看下我寫的佈局相關的文章, 跟浮動說拜拜記一次grid佈局實戰應用分享會

5: 兼容ie11 報錯 script1006: 缺乏 ')'

別看已經到11了,兼容性仍是不行

bug描述
這個問題是同組的同窗遇到的, 臨時決定兼容ie11出現了下面的錯誤:
30116AB5-917F-4ef8-9EF1-0B27DC6B8483.png

點擊這個bug:
cw.png

bug分析
這個bug是因爲ie11監測到了不懂的語法, 可是ie直接這樣指出問題的所在開發人員也很差定位,那咱們須要解決的核心問題就是把全部es5之後的語法轉義爲es5應該就能解決問題.
連let都不認識? 我幾乎不玩ie.
ii.png

bug定位
zhaobao.png
細心觀察的話就會發現, 這個出問題的包的名字在上面.
在配置文件裏面沒有搜索到這個包, 那麼這個包極可能是在依賴的依賴中, 甚至更深!

bug解決
在vue.config.js裏面配置指定解析項:transpileDependencies: ['resize-detector'],

transpileDependencies:中文意思是跨文件依賴項, 官網的描述以下:
gwnb.png

6: 嘗試使用postcss-bem插件

故事陳述
想要進步的前端同窗必定不甘於固有的模式, 因此一個同窗學習了這篇文章(友情連接):PostCSS深刻學習: 結合BEM和SUIT方法使用PostCSS.
你們有時間能夠看一看挺有意思的想法, 當時咱們的第一印象就是能夠玩一玩.

介紹插件
爲了懶得看上面的文章的同窗我來介紹一下, 這個插件可使咱們項目更好的使用'bem'的結構來寫css, 注意:只是css, 好比聲明一個hello的盒子, 裏面有hello-header元素.
看起來是否是還挺舒服的.

@component hello {
  @descendent header {
    border: 1px solid #ccc;
  }
}

bug1描述
他的文章裏沒說怎麼配置進vue項目裏面, 多是由於文章是2015年寫的太早了, 因此具體怎麼弄進去你們能夠自行研究, 網上資料挺少的就看你們的學習能力了, 我是寫在了postcss.config.js文件裏面.

module.exports = {
  plugins: [
    require('postcss-bem')({}),
    require('postcss-nested')({}),
  ],
};

運行就報錯:
zhaobus.png

bug1解決
真是挺坑的問題, 但仍是找到了解決方案:
老版本moveto方法變成append方法才管用, 因此咱們須要把源碼下載到本地替換掉全部的moveto方法....

bug2描述
問題基本解決了能夠很爽的開始寫了麼?? no...
仍是下面的結構, 好比我想取hello-header元素下面的p標籤, 這樣是取不到的, 必須給p標籤一個名字, 而且這個名字必須是符合上面層級關係的規範'bem'命名...不然瘋狂報錯.

@component hello {
  @descendent header {
    border: 1px solid #ccc;
  }
}

bug2解決
沒找到解決方法

問題分析
這個插件想法頗有趣, 可是弊端也挺多, 整體來講思想值得respect, 相應的問題以下:

  1. 無人維護沒法放心使用.
  2. 限制太多反而限制了css代碼的厲害之處.

不會爲了使用新技術而使用新技術, 這個技術並非那麼好, 那咱們索性就學習他的思想與玩法, 並不必定要使用它,要懂得取捨.

7: 1.toString() 報錯是由於 1. 至關於 1.0 ?

保持好奇心
有些時候吧, 書上或者視頻上也不必定全對

原由
咱們常說像1這種數字不能直接.toString(), 由於他是基本值, 只有進行了包裝類變成object才能進行'.'的操做, 好比new Number(1).toString(), 這類說法很主流, 可是接下來的一段代碼怎麼解釋?

hq.png

問題猜測...
數字不能夠直接用'.'來取屬性是由於系統認爲這個'.'是小數點, 而不是操做符,那麼咱們只要不讓引擎覺得咱們寫的是小數點就ok了, 下面的方法我來解釋一下:

  1. 1.123.toString() 一個普通的數字只能有一個小數點, 那麼第二個'.'也就會被解析爲取屬性.
  2. 若是咱們明確告訴系統咱們在取屬性, console.log(1.123['toString']())那麼系統也就會正確解析.

llc.png

將來展望
我寫代碼時間過短能力還不足, 期待明年的本身能夠從v8引擎的角度來分析問題.

8: element-ui表格table的懶加載封裝

bug描述
後端同窗一下給我返回3萬條列表數據, 致使頁面'假死', 無奈的是產品不容許作成分頁的.

bug分析
顯而易見dom太多了, 可是element-ui自己沒有這種table的懶加載, 他只有table內部樹形結構的懶加載, 那麼咱們本身封裝一個能夠懶加載的表格吧, 剛好element-ui自己有個懶加載組件(不記得的同窗能夠擼擼官網):
bs.png

bug解決
單獨封裝懶加載的table, 利用一個能夠無限滾動的外殼dom,每次觸底幫助用戶處理一下顯示的數據, 這裏我就展現一下大致的核心代碼.
./components/ScrollTable.vue文件

<template>
<!-- 可變的都當作參數傳進來就行了, 這裏我只演示一下思想 -->
  <div
    class="scroll-box"
    ref="scrollBox"
    v-infinite-scroll="load"
    :infinite-scroll-delay="200"
    :infinite-scroll-distance="100"
  >
    <el-table border style="width: 300px" :data="list">
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  props:{
    reslist:Array
  },
  data() {
    return {
      list: [],
      count: 0 // 初始值可傳
    };
  },
  methods: {
    load() {
      if (this.$refs.scrollBox) {
        this.count += 10; // 這個10也可讓用戶本身傳, 每次觸底加載幾條
        this.$refs.scrollBox.scrollTop -= 30;
        // 這裏能夠作一下已到底的處理
        this.list = this.reslist.slice(0, this.count);
      }
    }
  }
};
</script>

<style>
.scroll-box {
  overflow: auto;
  /* 這些當作參數傳進來就行了 */
  width: 300px;
  height: 260px;
  padding-bottom: 20px;
}
</style>

使用:

<template>
  <div id="app">
    <el-scroll-table :reslist="list">
      <el-table-column type="index" width="50" label="序號" />
      <el-table-column prop="name" label="參數" />
    </el-scroll-table>
  </div>
</template>

<script>
import ElScrollTable from "./components/ScrollTable.vue";
export default {
  name: "App",
  components: {
    ElScrollTable
  },
  data() {
    return {
      list: []
    };
  },
  mounted(){
    for(let i=0;i<90;i++){
      this.list.push({
        name:'金毛'+ i
      })
    }
  }
};
</script>

問題回顧

  1. this.$refs.scrollBox.scrollTop -= 30這段莫名其妙的代碼它解決了無限觸底加載的bug, 由於每次觸底以後雖然加載新數據, 可是滾動條位置還停留在最底部, 這樣就會一直加載.
  2. 咱們能夠再加一段代碼用來重置參數, 或者每次用戶本身去出發重置方法, 或是監聽用戶傳值的變化而重置.
  3. 這種方式比較適合後端把全部數據都給到咱們, 好比我此次遇到的就是一次拿到3萬條, 用戶不可能每次下拉十條一直看一萬條, 後端非要返給我那就我接到數據後進行了截斷, 畢竟放內存裏也是會佔空間的.
  4. 使用起來很簡單, 效果也還不錯, 可是在pc端大部分仍是用分頁器作的, 這種需求挺少但不是沒有, 徹底體的組件時間關係我暫時沒有去作, 有興趣的同窗根據本身的需求能夠玩一玩.

9: vue項目icon錯亂與引入scss文件失效

bug描述
忽然有一天夜裏同事發覺新上線的版本icon是錯亂的, 只在少數電腦上能夠復現, 而且icon並非一開始就錯亂而是正常顯示2s後開始錯亂.

bug解決
查了好多地方都沒找到,由於他有2s鍾是正常的, 這個現象影響了個人思路, 另外一個同窗發現打包出來的icon代碼好像是混亂的, 那麼咱們就把vue裏面的style標籤上的lang="scss"去掉, 原本我不信但結果還真的好了....,罪魁禍首是dart-sass.

dart-sass是啥
引用官網的一段話:
Dart Sass 是 Sass 的主要實現版本，這意味着它集成新 功能要早於任何其它的實現版本。Dart Sass 速度快、易於安裝，而且 能夠被編譯成純 JavaScript 代碼，這使得它很容易集成到現代 web 的開發流程中。, 好比咱們平時下載node-sass會出現失敗或者是缺乏python2的報錯, 而dart-sass就沒有這樣的問題, 而且速度很快.

bug2描述
咱們以前引入的一個scss文件不生效了, 就是沒有code格式報錯,沒有控制檯報錯, 就是文件裏面的內容不生效了.

bug2解決
原來是因爲咱們取消了app.vue文件裏面style的lang="scss", 再次引入scss文件並不會走scss解析器, 而這個scss文件裏面的第一行我用// 這樣的註釋寫明瞭這個文件的功能, 致使下面的代碼所有失效, 解決方式就是把//更改成/**/下面的文件就ok了, 固然若是你下面的代碼是scss規範書寫的那也沒法解析出來, 因此要謹慎使用dart-sass.
但我如今仍是不明白爲何會有2s鍾正常顯示, 這個等我年末研究v8的時候再來從底層的角度搞定它.

end:

此次遇到的bug讓我體會到我如今沒法理解的問題不表明不會發生, 只是我能力還不夠加油提升吧! 本次的分享就是這樣，歡迎交流, 祝天天進步

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程