from liyan

①js模塊化的理解

• 為了解決復(fù)雜js，維護(hù)困難，變量全局污染的問題。

無(wú)模塊化 > commonjs > AMD > CMD > ES Module

1. 無(wú)模塊化

• 即 需要按順序引入，被依賴的js文件必須放在前面。否則會(huì)報(bào)錯(cuò)。

<script src="jquery.js"></script>
<script src="jquery_scroller.js"></script>
<script src="main.js"></script>
<script src="other1.js"></script>
<script src="other2.js"></script>
<script src="other3.js"></script>

• 缺點(diǎn) : 依賴關(guān)系不明顯，維護(hù)成本高，污染全局作用域。

2. commonjs

• 該規(guī)范最初使用的服務(wù)端的node，他有四個(gè)環(huán)境變量：module、exports、require、global。實(shí)際使用時(shí)，用module.exports定義當(dāng)前模塊對(duì)外輸出的接口。用require加載模塊(同步)

3. AMD

• api : require 、require.config 、define
• 即通過define來(lái)定義一個(gè)模塊，然后使用require來(lái)加載一個(gè)模塊, 使用require.config()指定引用路徑。

4. ES Module

• ES6中，使用import關(guān)鍵字引入模塊，通過export關(guān)鍵字導(dǎo)出模塊。但是由于es6目前無(wú)法在瀏覽器中執(zhí)行，暫時(shí)只能通過babel將不被支持的import編譯為require
• export default 可以指定默認(rèn)導(dǎo)出，一個(gè)模塊只能有一個(gè) export defalut

②繼承與實(shí)現(xiàn)繼承

ES5繼承

• 在子類中運(yùn)行父類函數(shù)，通過call改變其this指向。Parent.call(this,arguments)
• 改變子類的prototype ：Child.prototype = Object.create(Parent.prototype)
• 改變子類原型構(gòu)造器指向 : Child.prototype.constructor = Child

ES6繼承

• extends關(guān)鍵字 繼承父類：class Child extends Parent{...}
• 在子類的constrctor 中 調(diào)用super函數(shù)，傳入父類所需的參數(shù)

③ES6新特性

• 引入了嚴(yán)格模式
• let const 聲明變量
• symbol 基本數(shù)據(jù)類型：可用于定義對(duì)象屬性的唯一性。
• 解構(gòu)賦值
• 箭頭函數(shù)，形參默認(rèn)值，三點(diǎn)運(yùn)算符
• 數(shù)組的擴(kuò)展
• 對(duì)象的擴(kuò)展
• Set、Map 全新的數(shù)據(jù)結(jié)構(gòu)
• Proxy 代理
• Class 類的概念
• Promise 解決異步編程的機(jī)制
• Iterator 遍歷器機(jī)制，for...of(默認(rèn)不能遍歷對(duì)象)
• Module 模塊化

④ nextTick的理解

• 由于Vue的DOM操作是異步執(zhí)行的。當(dāng)你在組件中改變data的值時(shí)，該組件不會(huì)立刻重新渲染。當(dāng)刷新異步隊(duì)列時(shí)，該組件會(huì)在下一個(gè)”tick“中更新。當(dāng)你依賴于DOM更新后的操作時(shí)，請(qǐng)?jiān)跀?shù)據(jù)變化之后立刻調(diào)用Vue.nextTick(),該回調(diào)函數(shù)將在DOM更新完成后調(diào)用。

⑤ v-if 與 v-show的區(qū)別

• v-if 只有條件為真才會(huì)渲染，而v-show將始終渲染。
• 當(dāng)需要頻繁切換其顯示隱藏狀態(tài)時(shí)，使用v-show，因?yàn)殚_銷小。

不推薦v-if 與 v-for同時(shí)使用！當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)。

⑥ 閉包以及使用場(chǎng)景

• 閉包理解：簡(jiǎn)單來(lái)說(shuō)就是 兩個(gè)嵌套的函數(shù)，內(nèi)部函數(shù)訪問了外部函數(shù)的變量。由于這種引用關(guān)系導(dǎo)致變量不會(huì)被垃圾回收機(jī)制回收，一直存在與內(nèi)存中。當(dāng)閉包使用完成后，最好賦值為null，取消引用。
• 使用場(chǎng)景：1. 循環(huán)給button綁定事件 2.變量私有化 3. 節(jié)流防抖

⑦ 跨域 以及 如何解決？

瀏覽器出于安全考慮，有同源策略。協(xié)議、域名、端口有一個(gè)不同就算是跨域。就無(wú)法發(fā)送ajax請(qǐng)求，防止CSRF攻擊。

• jsonp 利用<script>不受同源限制，將<script>標(biāo)簽指向一個(gè)需要訪問的域名，并指定一個(gè)回調(diào)函數(shù)接受數(shù)據(jù)即可。兼容性好，但是只支持get請(qǐng)求
• cors需要服務(wù)端配合 （node.js）
• vue-cli 配置proxyTable
• webpack中devServer也可以配置proxy
• nginx代理跨域

⑧ jQ的擴(kuò)展函數(shù)寫法

工具類函數(shù)

• 使用$.extend({})配置，配置后使用 $.xxx調(diào)用

jQuery對(duì)象類函數(shù)

• 使用$.fn.extend({})配置，配置后使用$('#id').xxx調(diào)用
• 如果對(duì)象是id獲取的，那么只有一個(gè)，可以在函數(shù)內(nèi)使用this.prop訪問。
• 如果對(duì)象有多個(gè)(通過class獲取)，需要用this.each() 循環(huán)，在循環(huán)內(nèi)使用 this 訪問該對(duì)象。

(function(){
  // 自定義插件
  // 擴(kuò)展jquery工具方法
  $.extend({
    minVal(a,b){
      return a>b?b : a
    }
  })
  // 擴(kuò)展對(duì)象方法
  $.fn.extend({
    checkVal(){
      this.prop("innerHTML",'通過this.prop訪問')
    },
    changeVal(){
      this.each(function(){
        this.innerHTML = 'each內(nèi)通過this訪問'
      })
    }
  })
})()

⑨ 移動(dòng)端適配方案

• vh vw 相對(duì)于視口大小的百分比單位。如 iphone邏輯大小: 375 * 667 那么 1vh = 66.7px;
  1vw = 37.5px;
• viewport + rem方案
• 手淘 flexble.js原理：從分析可以看出 flexible.js 主要是通過動(dòng)態(tài)辨別設(shè)備的 DPR 設(shè)置根節(jié)點(diǎn)的字體大小，并搭配能跟隨根節(jié)點(diǎn)字體大小而改變大小的 rem 單位來(lái)實(shí)現(xiàn)在不同終端適配的。

⑩ 一個(gè)按鈕如何綁定多個(gè)事件

• 使用addEventListener

//判斷瀏覽器是否支持這個(gè)方法
if(element.addEventListener){
  element.addEventListener(type,fn,false);
}else if(element.attachEvent){
  element.attachEvent("on"+type,fn);
}else{
  element["on"+type]=fn;
}

? 前端優(yōu)化方法

1. webpack打包優(yōu)化 ， 開啟gzip壓縮
   • 使用babel-loader時(shí)，include，exclude關(guān)鍵字用來(lái)避免不必要的轉(zhuǎn)譯。如node_modules內(nèi)的文件。開啟緩存。
   • 文件按需加載，懶加載，預(yù)加載
   • 圖片優(yōu)化：字體圖標(biāo)或者svg
   • 瀏覽器緩存機(jī)制，配置app.cache文件
2. 代碼優(yōu)化
   • 事件代理
   • 函數(shù)防抖節(jié)流
   • 頁(yè)面重繪重排
   • 一個(gè)函數(shù)只做一件事，提高復(fù)用性。

? 小題 - cookie，localStorage，sesstionStorage特點(diǎn)和區(qū)別

• 相同點(diǎn): 三者都是保存在瀏覽器端，且都是同源的。
• 不同點(diǎn):
  1. cookie始終在同源的http請(qǐng)求下攜帶，即cookie始終在瀏覽器與服務(wù)器之間傳遞。cookie還有路徑的概念，可以限制在某個(gè)路徑下。sesstionStorage和localStorage不會(huì)發(fā)送給服務(wù)器，僅在本地保存。
  2. cookie 大小為4k，storage大小為 5m 左右
  3. cookie可以設(shè)置過期時(shí)間，不受瀏覽器影響
     sesstionStorage 回話關(guān)閉后就會(huì)刪除
     localStorage 始終有效，需要手動(dòng)刪除
  4. 作用域：
     localStorage 和 cookie 在所有同源文檔中都共享
     sesstionStorage 僅在同一個(gè)窗口中共享 ，被限制在了窗口內(nèi)

? 小題 - 防抖節(jié)流

• 防抖 (場(chǎng)景：搜索聯(lián)想詞)
  在一段時(shí)間內(nèi)重復(fù)觸發(fā)函數(shù)，僅僅會(huì)執(zhí)行最后一次。
• 節(jié)流 (場(chǎng)景：上拉下拉加載更多)
  在一段時(shí)間內(nèi)重復(fù)觸發(fā)函數(shù)，僅會(huì)觸發(fā)一次函數(shù)。

它們都以閉包的形式存在，使用setTimeOut實(shí)現(xiàn)

? 小題 -重排&&重繪

• 重排(回流)
  當(dāng)改變DOM元素的寬高等尺寸單位會(huì)發(fā)生重排。
• 重繪
  當(dāng)改變DOM元素背景，透明度等，會(huì)發(fā)生重繪。

重排必然重繪，重繪不一定會(huì)重排，但是我們應(yīng)該盡量減少重排重繪所帶來(lái)的性能問題

• 將DOM操作合并
• 利用定位，脫離文檔流即不會(huì)發(fā)生重繪重排。

? 首屏優(yōu)化

• 骨架屏占位
• 懶加載(模塊懶加載，圖片懶加載)
• 請(qǐng)求排序(首先請(qǐng)求頁(yè)面內(nèi)容，在請(qǐng)求頁(yè)面數(shù)據(jù))
• 瀏覽器緩存
• cdn分發(fā)（通過給不同服務(wù)器部署相同內(nèi)容，根據(jù)用戶位置決定請(qǐng)求那一臺(tái)服務(wù)器，或者根據(jù)服務(wù)器壓力來(lái)分發(fā)請(qǐng)求）
• http gzip壓縮：通常在response header中指定content-encoding

? 基本數(shù)據(jù)類型

• String
• Number
• Boolean
• Symbol
• Undefined
• Null

? 引用數(shù)據(jù)類型

• Object （function,array,RegExp等）

? 變量提升 函數(shù)提升

• var 會(huì)變量提升到作用域頂端，值為undefined
• function 會(huì)提升到var之前，在函數(shù)聲明之前也可以調(diào)用函數(shù)

①②③④⑤⑥⑦⑧⑨⑩????????????????????????????????????????