js/es6/react/webpack

leinizisky發表於2019-03-05
JSReactWeb

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;
複製程式碼

    1. 非簡單通訊，如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優化

相關文章