自畫像圍觀哈哈哈.png

Flex（Flexible Box）

div 類的塊級(jí)元素設(shè)置 display: flex 或給span 類的行級(jí)元素設(shè)置display:inline-flex

• flex : 保持塊級(jí)元素特性，寬度默認(rèn)100%，不和行級(jí)元素一行展示；

• inline-flex: 容器為行內(nèi)inline的特性，可以和圖片文字在一行展示；

Webpack優(yōu)化（打包、熱更新）

• cache-loader 在rules 中給加載速度久的文件，如js 文件加上之后，因?yàn)檫@個(gè)loader 本身開啟也需要花費(fèi)時(shí)間，所以只能讓打包速度有所提升。

• 持久化緩存 把webpack 中的cache 的type 類型換成filesystem 并指定路徑。

  

  圖片

• 發(fā)版上傳優(yōu)化 發(fā)布文件到cdn，一是靜態(tài)文件抽離 資源較大且更改頻率低的文件，如assets 下的圖片、動(dòng)畫等，單純拆開寫腳本上傳，每次打包上傳只需要更新變化較多的js 和css 文件；二是開發(fā)環(huán)境更換國(guó)內(nèi)云服務(wù)器存儲(chǔ)桶 ，比如七牛云、騰訊云 、阿里云 等等，可根據(jù)實(shí)際情況選擇

• externals將需要引用的較大的第三方庫(kù)抽離，不要直接打進(jìn)包里，加快首屏加載速度，等到需要的時(shí)候再去請(qǐng)求。

  webpack 分析工具

  • webpack-bundle-analyzer：使用交互式可縮放樹形圖可視化網(wǎng)頁(yè)包輸出文件的大小，可視化分析工具

  • vue ui：vuecli3 自帶的webpack分析工具（使用vuecli3搭建的項(xiàng)目可使用）

  可使用的cdn服務(wù)商

  • BootCDN

  • unpkg

老生常談（Vue 版）

1. this指向

   Vue.createApp({
    data() {}
    methods: {
        getEvent() {
          // 指向vue實(shí)例
            console.log(this)
        },
       getOtherEvent: () => {
         // 指向最外層的window
         console.log(this)
       }
    }
   })
   

2. computed

   Vue.createApp({
     data() {
       return {
         count: 1,
         price: 5
       }
     },
     computed: {
       // 當(dāng)依賴的其他內(nèi)容發(fā)生變更時(shí)，才會(huì)重新執(zhí)行計(jì)算（緩存機(jī)制，更高效）
       curDate() {
         return Date.now()
       }
     },
     methods: {
       getCurDate() {
         // 只要頁(yè)面重新渲染，就會(huì)重新執(zhí)行計(jì)算
         return Date.now()
       }
     },
     template: `<div><span>{{ getCurDate() }}</span><span>{{ curDate }}</span></div>`
   })
   

老生常談（Css 版）

Css原生嵌套

• 解決的問(wèn)題

  嵌套是為了解決樣式表冗余和開發(fā)體驗(yàn)分散的問(wèn)題。嵌套可以幫助開發(fā)人員減少重復(fù)選擇器的需求，同時(shí)還可以將相關(guān)元素的樣式規(guī)則放在一起，提高樣式與目標(biāo)HTML匹配的能力。不使用嵌套的話每個(gè)選擇器都需要單獨(dú)聲明，相互直接沒(méi)有聯(lián)系，但是也要避免過(guò)度使用嵌套，以免引入樣式的復(fù)雜性和性能問(wèn)題。使用嵌套時(shí)，請(qǐng)遵循一致的命名約定和最佳實(shí)踐，以確保團(tuán)隊(duì)成員可以輕松理解和維護(hù)代碼

• 作用

  • 組織代碼
  • 減小文件大小
  • 進(jìn)行重構(gòu)

關(guān)于數(shù)組的那些事兒

數(shù)組分組

某些業(yè)務(wù)場(chǎng)景需要對(duì)已有的數(shù)組數(shù)據(jù)進(jìn)行整合統(tǒng)計(jì)，例如要對(duì)students根據(jù)group進(jìn)行整合，可以有幾個(gè)實(shí)現(xiàn)方法呢？

  const students = [
    { name: '張三'， age: 10,  group: 'C' },
    { name: '檀健次'， age: 10,  group: 'A' },
    { name: '李四'， age: 10,  group: 'B' },
    { name: '檀多多'， age: 10,  group: 'A' },
  ];

一般都是純手???封裝一個(gè)分組函數(shù)，當(dāng)然也可以借助第三方庫(kù)Lodash

• forEach

  const groupsObj = {}
  students.forEach(student => {
    const group = student.group;
    if(!groupsObj[group]) {
      groupsObj[group] = [];
    }
     groupsObj[group].push(student);
  });

• reduce

const groupsObj = students.reduce((acc, cur) => {
  const group = cur.group;
  if(!acc[group]) {
    acc[group] = [];
  }
  acc[group].push(cur);
  return acc;
}, {});

• map

const groupsObj = {};
students.map(({group,...rest}) => {
  if( !groupsObj[group]) {
    groupsObj[group]  = [];
}
 groupsObj[group].push(rest);
});

• 第三方Lodash

  const groupsObj = _.groupBy(students, student => student.group);

如果不引入第三方庫(kù)，可以用一行代碼實(shí)現(xiàn)分組就非常Nice，鏘鏘鏘鏘鏘（硬鏘鏘），如今我們強(qiáng)大的JavaScript推出了新特性Object.groupBy和Map.groupBy，由于兼容性問(wèn)題，我們?cè)谔囟g覽器版本下（最新版本的 Chrome（117））可以先小試牛刀。

• Object.groupBy()

?? 注：1. 回調(diào)函數(shù)應(yīng)返回一個(gè)字符串或 symbol，不屬于這兩種類型的值會(huì)被強(qiáng)制轉(zhuǎn)換為字符串，用于指示元素所屬的分組；2. 返回的對(duì)象中的元素和原始可迭代對(duì)象中的元素相同不是深拷貝。更改元素的內(nèi)部結(jié)構(gòu)將反映在原始可迭代對(duì)象和返回的對(duì)象中

  const groupsObj = Object.groupBy(students, student => student.group);

• Map.groupBy()

?? 注: 1. Map.groupBy 返回一個(gè) Map 對(duì)象;；2. 返回的 Map中的元素和原始可迭代對(duì)象中的元素相同不是深拷貝。更改元素的內(nèi)部結(jié)構(gòu)將反映在原始可迭代對(duì)象和返回的 Map中；3. 要訪問(wèn)返回的 Map 中的分組，必須使用最初用作 Map 鍵的相同對(duì)象（盡管你可以修改其屬性）。你不能使用另一個(gè)恰好具有相同名稱和屬性的對(duì)象；4. 不會(huì)讀取 this值。它可以在任何對(duì)象上調(diào)用，并返回一個(gè)新的 Map實(shí)例。

  const groupsObj = Map.groupBy(students, student => student.group);

參考相關(guān)文章摘錄：
在創(chuàng)業(yè)公司做前端一年，這些經(jīng)驗(yàn)到底值不值？-五八三 (583.cn)
正確使用externals，vue工程構(gòu)建性能提升67% - 掘金 (juejin.cn)

眼神中透露著盲目的活力.gif