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

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

事件循環(huán)

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

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

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

跨域處理 cors

• 瀏覽器自動實現(xiàn)
• 瀏覽器發(fā)送請求時志膀，如果檢測到跨域熙宇，會在請求頭中添加Origin，包含請求方的協(xié)議溉浙、域名及端口
• 服務(wù)端獲取后烫止，可以設(shè)置Access-Control-Allow-Origin為此Origin，實現(xiàn)跨域
• 可能對服務(wù)器數(shù)據(jù)產(chǎn)生影響的請求戳稽，會先發(fā)送一個Options預(yù)檢請求

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

• 每個函數(shù)都有prototype屬性指向原型
• 除了bind創(chuàng)建的
• 每個對象都有__proto__屬性指向創(chuàng)建對象的構(gòu)造函數(shù)的原型馆蠕；
• 通過__proto__訪問對象上不存在的屬性，鏈接成原型鏈
• 繼承
• 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及計算