js/es6/react/webpack

js篇

1.window的onload事件和domcontentloaded

當onload事件觸發時，頁面上全部的DOM，樣式表，腳本，圖片，flash都已經加載完成了。

當DOMContentLoaded事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash

2. JS 中的事件綁定、事件監聽、事件委託是什麼？

• 事件綁定：DOM元素上綁定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等
• 事件監聽：addEventListener() 或 attachEvent() 監聽綁定
• 事件委託：利用冒泡的原理，把事件加到父元素或祖先元素上，觸發執行效果，用到jQuery的live()、delegate()、bind()、on()等。

3. 前端怎麼解決跨域問題？(未完待續...)

域名/端口/協議不一樣會產生跨域,解決方案有:

• 經過jsonp跨域

• CORS跨域資源共享，即引入一些自定義的HTTP Header來完成客戶端與服務端的通訊

  1. 簡單通訊，定義Origin字段
  2. 簡單通訊（發送Cookie）

  Access-Control-Allow-Credentials: true
  var xhr = new XMLHttpRequest();
  xhr.w
  ithCredentials = true;
  複製代碼

  3. 非簡單通訊，如PUT或DELETE

     正式通訊以前，先發送options預請求，必須字段Access-Control-Request-Method/Access-Control-Request-Headers

• document.domain + iframe跨域（限主域相同，子域不一樣的跨域應用場景）

json和CORS的比較

• JSONP只支持GET請求，CORS支持全部類型的HTTP請求
• JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據。

function

內部屬性arguments this

1. arguments是一個類數組對象,包含傳入函數中的全部參數
2. this引用的是函數據以執行的環境對象.在調用函數以前,this的值是不肯定的,當在全局對象中調用函數時,this引用的是全局對象window,當把函數賦值給某對象時,this指的是此對象。

函數的屬性和方法

1. 屬性

• length:函數但願接收的命名參數的個數
• prototype:保存着函數的實例方法,到經過函數實例化獲得的對象能夠訪問prototype中的方法，此屬性在自定義引用類型和實現繼承頗有用處

2. 方法

apply call這兩個方法是函數的非繼承方法，用途都是設置函數體內this對象的值

//apply接收兩個參數,第一個是運行函數的做用域,通俗的說就是將這個參數做爲this指向的值.第二個參數是數組做爲執行函數的參數
function sum(num1,num2){
    return num1+num2;
}
function callSum(num1,num2){
    return sum.apply(this,arguments);
}
alert(callSum(10,10)); //20
//call接收的第一個參數也是運行函數的做用域,後面的參數也是傳遞給執行函數的參數,與apply不一樣的是,後面的參數並不是數組,而是逐個列舉出來的
function sum(sum1,sum2){
    return sum1+sum2;
}
function callSum(num1,num2){
    return sum.call(this,num1,num2);
}
alert(callSum(10,10)); //20
複製代碼

定義類和實現繼承

1. 原生js

// 父類
    function Animal(name) {
        this.name = name;
        this.sheep = function () {
            console.log(this.name + "正在睡覺")
        }
    }
    //子類
    function Dog(name) {
        Animal.apply(this, arguments);
        this.name = name;
    }
    Dog.prototype = new Animal();
    Dog.constructor.prototype = Dog;

    var dog = new Dog("dashazi");
    console.log(dog.name);
    console.log(dog.sheep());
複製代碼

2. es6

class Animal{
    constructor(name){
        this.name=name;
    }
    say(sound){
        console.log(this.name+"在說"+sound)
    }
}

class Dog extends Animal{
    constructor(name){
        super(name);
        this.name=name;
    }
}

var dog=new Dog("dashazi");
dog.say("汪汪");
console.log(dog.name);
複製代碼

es6篇

1. 箭頭函數

• 繼承當前上下文的this關鍵字
• 不須要function關鍵字來建立函數
• 省略return關鍵字
• 默認指向在定義它時,它所處的對象,而不是執行時的對象,定義它的時候,可能環境是window（即繼承父級的this）。

2. let和const

• let:具備塊級做用域，不會發生變量提高
• const:定義常量值，不能從新修改值，若是值是對象，跨域改變對象裏面的屬性

3. 解構賦值

//實現兩個變量值的交換
let a=1;
let b=2;
[a,b]=[b,a];
// 輸出a 爲2,b爲1
複製代碼

4. set構造函數

相似數組，可是成員值都是惟一的，值不可重複

5. 模板字符串

使用反引號``，${varible}

6. promise

var promise = new Promise((resolve, reject) => {
  if (操做成功) {
    resolve(value)
  } else {
    reject(error)
  }
})
promise.then(function (value) {
  // success
}, function (value) {
  // fail
})
複製代碼

const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})
promise.then(() => {
  console.log(3)
})
console.log(4)
//1 2 4 3
//Promise 構造函數是同步執行的，promise.then 中的函數是異步執行的。


const promise = new Promise((resolve, reject) => {
  resolve('success1')
  reject('error')
  resolve('success2')
})

promise
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })
//then,success1
//由於構造函數中的 resolve 或 reject 只有第一次執行有效，屢次調用沒有任何做用，呼應代碼二結論：promise 狀態一旦改變則不能再變

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('once')
    resolve('success')
  }, 1000)
})
const start = Date.now()
promise.then((res) => {
  console.log(res, Date.now() - start)
})
promise.then((res) => {
  console.log(res, Date.now() - start)
})
// once
// success 1000
// success 1000
//由於promise 的 .then 或者 .catch 能夠被調用屢次，但這裏 Promise 構造函數只執行一次。或者說 promise 內部狀態一經改變，而且有了一個值，那麼後續每次調用 .then 或者 .catch 都會直接拿到該值
複製代碼

• promise 能夠鏈式調用。romise 每次調用 .then 或者 .catch 都會返回一個新的 promise，從而實現了鏈式調用

react篇

1.React 中 keys 的做用是什麼？

key 在其同級元素中具備惟一性,根據key值來判斷該元素是建立仍是移動，從而減小沒必要要的元素從新渲染

2.調用 setState 以後發生了什麼？

將傳入的參數對象與組件當前的狀態合併，而後觸發調和過程（Reconciliation），調和根據新的狀態構建 React 元素樹而且着手從新渲染整個 UI 界面，據新樹和舊樹的差別對界面進行最小化重渲染，保證了按需跟新還不是所有從新加載

3. 爲何虛擬dom會提升性能？

虛擬dom至關於在dom和js之間加了一個緩存，dom diff算法避免了沒有必要的dom操做。

用javascript對象結構表示dom樹的結構，而後用這個樹構建一個真正的 DOM 樹，當變動時候從新構造一個對象樹，新樹和舊樹做比較

4. react diff 原理

• 按照樹形結構層級分解，只比較同級元素
• 列表結構的每一個單元添加惟一的 key 屬性，方便比較
• 匹配相同的組件名

5. react 中 refs 的做用是什麼？

訪問dom元素，給元素添加ref屬性

6. state和props之間有什麼不一樣？

• state是一個初始值，是組件內部的，可變的
• props是父組件傳遞給子組件的，是不可變得

7.什麼是受控組件？

像input,textarea，select這些組件的輸入和value由state來追蹤

8.(在構造函數中)調用 super(props) 的目的是什麼？

子類必須在 constructor 中調用 super()，遞 props 給 super() ，子類才能經過this.props調用

9. react中構建組件的方式？

• es6中的class 名成 extends component{}
• React.creatClass{}
• 函數組件

10. react 項目用過什麼腳手架?

creat-react-app
複製代碼

11. redux

解決了組件間狀態共享的問題,action ,store,reducer

12. react的工做原理

建立虛擬dom，當狀態改變時，根據diff算法來虛擬dom的改變，以後根據調和來更改dom

13.react 的優點？

• 只看render()就知道組件如何被渲染
• jsx，更直觀可讀

14. Redux Thunk 的做用是什麼?

• 延遲 action 的派發(dispatch),能夠處理異步 action 的派發(dispatch)

webpack篇

1.什麼是webpack和grunt和gulp有什麼不一樣？

• webpack是一個模塊打包器，遞歸的打包成幾個文件
• 不一樣：code-splitting、模塊化(AMD，ESM，CommonJs)、全局分析

2.什麼是bundle,什麼是chunk，什麼是module?

bundle是由webpack打包出來的文件，chunk是指webpack在進行模塊的依賴分析的時候，代碼分割出來的代碼塊。module是開發中的單個模塊。

微信小程序篇

1.主要文件和目錄的做用？

• project.config.json 項目配置文件，用得最多的就是配置是否開啓https校驗
• App.js 設置一些全局的基礎數據
• App.json 底部tab, 標題欄和路由等設置
• App.wxss 公共樣式，引入iconfont等
• pages 裏面包含具體頁面
  1. index.json (配置當前頁面標題和引入組件等)
  2. index.wxml (頁面結構)
  3. index.wxss (頁面樣式表)
  4. index.js (頁面的邏輯，請求和數據處理等)

2. wxml與標準的html的不一樣

• 小程序運行在JS Core內，沒有DOM樹和window對象，小程序中沒法使用window對象和document對象
• 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式

3. WXSS和CSS的不一樣

• WXSS新增了尺寸單位，WXSS 在底層支持新的尺寸單位 rpx

4.程序的雙向綁定和vue的異同

大致相同，但小程序直接this.data的屬性是不能夠同步到視圖的，必須調用this.setData()方法！

實戰

1. 人們都說setState是異步的，你怎麼看？

2. 你瞭解react的合成函數麼？

3. 用過哪些react組件？

4. 用過哪些react ui組件？

5. webpack怎麼打包優化？

• css 代碼單獨打包
• 區分打包類庫代碼
• hash優化