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來完成客戶端與服務端的通訊
- 簡單通訊，定義Origin欄位
- 簡單通訊（傳送Cookie）
Access-Control-Allow-Credentials: true var xhr = new XMLHttpRequest(); xhr.w ithCredentials = true; 複製程式碼-
非簡單通訊，如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
- arguments是一個類陣列物件,包含傳入函式中的所有引數
- 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 裡面包含具體頁面
- index.json (配置當前頁面標題和引入元件等)
- index.wxml (頁面結構)
- index.wxss (頁面樣式表)
- 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優化