webpack的配置及基本運(yùn)行原理 能分清loader和plugins區(qū)別

• 核心概念：entry,output,loader,plugins
• 運(yùn)行過程：
  • 初始化參數(shù)
  • 依照參數(shù)初始化編譯器對(duì)象，注冊(cè)插件，插件監(jiān)聽構(gòu)建生命周期的節(jié)點(diǎn)，捕獲事件執(zhí)行編譯器的run方法進(jìn)行編譯
  • 從配置的entry入口，解析文件構(gòu)建依賴關(guān)系圖，根據(jù)依賴遞歸執(zhí)行
  • 執(zhí)行過程中，根據(jù)配置的loader及rule，執(zhí)行l(wèi)oader轉(zhuǎn)換，直到所有文件都被遞歸執(zhí)行完畢
  • 得到編譯后的文件結(jié)果，包含模塊及對(duì)應(yīng)關(guān)系，根據(jù)output配置生成bundle
  • 輸出文件結(jié)果

事件循環(huán)

• 異步JS代碼會(huì)被掛起并加入任務(wù)隊(duì)列，直到執(zhí)行棧為空時(shí)，從任務(wù)隊(duì)列中將代碼放入執(zhí)行棧執(zhí)行
• 隊(duì)列中的任務(wù)分為宏任務(wù)和微任務(wù)，script及settimeout屬于宏任務(wù)，promise.then屬于微任務(wù)
• 事件循環(huán)
• 執(zhí)行同步代碼，宏任務(wù)
• 檢查任務(wù)隊(duì)列是否有微任務(wù)
• 執(zhí)行微任務(wù)
• 更新UI
• 執(zhí)行任務(wù)隊(duì)列中的異步宏任務(wù)

事件模型 捕獲冒泡 事件代理

• 事件過程
  • 從document向目標(biāo)節(jié)點(diǎn)捕獲，中途遇到綁定的捕獲事件會(huì)觸發(fā)
  • 通過
  • 執(zhí)行目標(biāo)節(jié)點(diǎn)綁定的監(jiān)聽方法
  • 從目標(biāo)節(jié)點(diǎn)冒泡到document，中途遇到綁定的冒泡事件會(huì)觸發(fā)
• 使用event.stopPropagation阻止事件傳播，結(jié)束事件捕獲及冒泡
• event.stopImmediatePropagation在此基礎(chǔ)上阻止其他注冊(cè)事件
• 給同一個(gè)節(jié)點(diǎn)綁定捕獲及冒泡事件，執(zhí)行順序依照綁定順序
• 事件代理
• 需要給多個(gè)子元素綁定事件時(shí)，可以綁定在父元素上，使用冒泡得到的event.target區(qū)分，節(jié)省內(nèi)存

跨域處理 cors

• 瀏覽器自動(dòng)實(shí)現(xiàn)
• 瀏覽器發(fā)送請(qǐng)求時(shí)，如果檢測(cè)到跨域，會(huì)在請(qǐng)求頭中添加Origin，包含請(qǐng)求方的協(xié)議、域名及端口
• 服務(wù)端獲取后，可以設(shè)置Access-Control-Allow-Origin為此Origin，實(shí)現(xiàn)跨域
• 可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生影響的請(qǐng)求，會(huì)先發(fā)送一個(gè)Options預(yù)檢請(qǐng)求

原型鏈 繼承的幾種方式 靜態(tài)方法和實(shí)例方法

• 每個(gè)函數(shù)都有prototype屬性指向原型
• 除了bind創(chuàng)建的
• 每個(gè)對(duì)象都有__proto__屬性指向創(chuàng)建對(duì)象的構(gòu)造函數(shù)的原型；
• 通過__proto__訪問對(duì)象上不存在的屬性，鏈接成原型鏈
• 繼承
• ES5

    function Parent(foo) {
      this.foo = foo
    }
    Parent.prototype.test1 = function () {
      return `test1`
    }
    function Child(bar) {
      Parent.call(this, bar)
      this.bar = bar
    }
    Child.prototype = Object.create(Parent.prototype)
    Child.prototype.constructor = Child
    Child.prototype.test2 = function () {
      return `test2`
    }
    const child = new Child(1)
    console.log(
      child.foo,// 1
      child.bar,// 1
      child.test1(),// test1
      child.test2(),// test2
    )

vue 的基本原理，響應(yīng)式說一下大概過程

通信

生命周期

router也看一下

flex布局常用屬性

rem及計(jì)算