頁面互動是前端的核心嗎？

**

## 標題天氣轉冷，記得加衣服也要記得這些

** 2020/11/10 11:39

(1) ajax 互動式網頁應用的網頁開發技術
1: 建立一個非同步呼叫物件

2:建立一個新的`HTTP`請求,並指定該請求的方法及驗證資訊

(3)設定響應`HTTP`請求狀態變化的函式.        

(4)傳送`HTTP`請求.         

(5)獲取非同步呼叫返回的資料.    

(6)使用JS和DOM實現區域性重新整理.

ajax的核心是 ： 通過XmlHttpRequest獲取非本頁內容，
    jsonp的核心 ： 動態新增

(2)this
a.如果是一般函式,this指向全域性物件window;
b.在嚴格模式下,為undefined.
c.物件的方法裡呼叫,this指向呼叫該方法的物件.
d.建構函式裡的this,指向建立出來的例項.
(call,apply,bind會改變this的指向)

(3) jquery:
（1）使用模組化思想,模組間保持獨立,
不會導致多個開發人員合作時產生衝突
（2）結構清晰，高內聚，低耦合
（3）多型的方式使方法可以過載，提高了程式碼的複用率
（4）jQuery 的鏈式呼叫以及回溯（dom操作的鏈式操作）
（5）jQuery.extend方法來實現擴充套件靜態方法或例項方法
缺點 :
不能向後相容 , 多個外掛易衝突 , 外掛相容性差
jquery的穩定性 , 對動畫和特效的支援差

(4) 閉包的特點
1.必須有兩個函式，並且是巢狀關係，外面的函式必須返回裡面的函式
2.在全域性中必須接收返回 函式作為變數儲存
3.閉包能夠形成一個封閉的空間，可以避免汙染，儲存私有變數，
存在函式裡面 ，這個私有變數不會在函式執行完後被清理 ，
可以像全域性變數一樣被使用，不會失效。

缺點:閉包最大缺點就是會造成記憶體洩漏，存在堆中，不會被垃圾回收；
優點：
1.內容更封閉，保證命名不會衝突；
2.模組化開發—封閉的模組化環境

(5) 什麼是深淺拷貝,區別是什麼?
淺拷貝（shallowCopy）只是增加了一個指標指向已存在的記憶體地址，
深拷貝（deepCopy）是增加了一個指標並且申請了一個新的記憶體，使這個增加的指標指向這個新的記憶體，

淺拷貝 拿人手短,共用記憶體,複製指標 => 深拷貝,自食其力,複製指標,開闢記憶體

8.  說一下你最近專案開發的技術亮點
1.使用了命名檢視
2.使用slot封裝了公司自己使用的一個UI庫
3.使用了複雜的加密方式
4.配置了一個攔截器
5.自己封裝了一個懶載入的指令

9.  說一下你的前端成長經歷,你是如何一步步成為前端大牛的?
簡單的說：就是以下幾點：多做…多想…多看…多做demo，多想改進，多看書籍和別人程式碼。然後再改進自己程式碼，再做，再看，再改進。

6.  如何使元素垂直水平居中? 4種
1.彈性盒方法——flex佈局
元素：display: flex;justify-content: center;align-items: center;

2.純absolute
父元素 position: relative
子元素 position: absolute;top: 50%;left: 50%; margin-left:-1/2子元素寬度; margin-top: -1/2子元素高度;

3.margin：auto+absolute
父元素 position: relative
子元素 position: absolute；top: 0； left: 0; right:0; bottom:0;margin:auto

4.定位+transform：
父元素 position: relative
子元素 position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)

(7)關於你所熟悉的後端語言
● PHP
PHP。它是由安裝在web伺服器（Apache、Ngix）上的元件執行的。PHP程式碼可以和HTML混合到一塊。 對於初學者就能很快寫出很有價值的程式碼，這並不需要太多的練習。 這讓PHP變得越來越流行, 現在全球百分之八十的伺服器上都在執行著PHP。全球四分之一的網站都在用的一個內容管理系統–WordPress，就是用PHP寫的。
● Node.js
Node.js。它是基於Google的V8 JavaScript解釋引擎（在Chrome瀏覽器裡它負責執行客戶端的JavaScript程式碼）。與其它語言不同的是Node.js內建了處理網路請求和響應的函式庫，所以你不需要單獨的伺服器（Apache、Ngix）或者其他依賴。Node.js雖然很新但是很快就獲得了極大的追捧。在很多的大公司都有在使用，例如：Microsoft，Yahoo，LinkedIn和PayPal。

(8). 談談你對物件導向的理解 物件導向的特點?
物件導向：先構造概念，然後將概念例項化，所有例項化物件都可以使用概念內的方法
通俗的理解就是：萬物皆物件！世界上的任何事和物都可以被視為物件，而我們需要關注的是物件本身可以實現的功能，不需要深入理解構成物件的元素。

物件導向有四個特點：

1. 抽象：抓住核心問題
2. 封裝：即把能夠實現功能的函式寫成封裝起來，在物件導向裡叫做方法。簡單來說就是把實現功能的函式寫成方法。
3. 繼承：繼承的意思是，在實現同一種功能的前提下，新物件可以使用舊物件的屬性和方法。
4. 多型：一個變數在引用不同型別的情況下的不同狀態。多型開發在開發元件和模組化開發的時候能節省很多資源。
   原型（prototype）
   原型可以用來建構函式的屬性和方法，使這個建構函式的屬性和方法成為公用的。使用原型的優點：在記憶體中節省資源，提高系統效能。

(9)如何深入理解原型鏈
原型鏈就是建立一個建構函式，它會預設生成一個prototype屬性並指向原型物件。使用下一個建構函式的原型物件作為這個建構函式的例項。即 nextFuction.prototype = new thisFuction();
在下下一個建構函式的原型物件 = new nextFuction。這樣下去就會構成一條例項與原型之間的鏈條，這就是原型鏈。
在通過原型鏈實現繼承的情況下，當讀取模式訪問例項中的屬性時，會先搜尋例項，然後再搜尋例項的原型，在一層一層直到找到或者到達原型鏈的末端停止，返回undefined。所有引用型別都是從object繼承來的。

(10)如何區分 宿主物件 內建物件 本地物件 分別有哪些?

宿主物件   window   document     簡單的說就是官方未定義的都是宿主物件
內建物件   不可以例項化的物件  例如: Global   Math
本地物件   可以例項化的物件 例如:  Object Array  Function Number RegExp Date …

(11)解析網址 http://localhost:8080/a/b/c?a=1&b=2#abc
protocol: ‘http:’,//協議
hostname: ‘localhost’,域名
port: ‘8080’,//埠

pathname: ‘/a/b/c’, //路徑名
search: ‘?a=1&b=2’,
hash: ‘#abc’,
href: ‘http://localhost:8080/a/b/c?a=1&b=2#abc’
host http://localhost:8080
path: ‘/a/b/c?a=1&b=2’,
query: ‘a=1&b=2’,
用到的最多的就是pathname和query兩個屬性了，請注意區分host/hostname、search/query、path/pathname之間的區別

(12) 說一下什麼是變數提升 如何解決變數提升

當我們在一個變數定義前呼叫這個變數會輸出一個undefind，因為我們用var來宣告這個變數的時候會在呼叫這個變數的前面假設定義了一個沒有被賦值的變數 ,這就是變數提升，當我們用function關鍵字來定義一個函式的時候在任何地方我們都可以呼叫這個函式，如果我們用變數宣告的方式來定義函式，在函式定義的前面呼叫函式會報undefind，也是因為變數提升， 用let宣告一個變數就不會存在變數提升

1. 你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼?
   IE: trident 核心
   Firefox：gecko 核心
   Safari:webkit 核心
   Opera:以前是 presto 核心，Opera 現已改用
   Chrome 的 Blink 核心

Doctype ：告訴瀏覽器按照何種規範解析頁 面

1、什麼是Vue生命週期？
Vue例項從建立到銷燬的過程，就是Vue的生命週期。也就是從開始建立、初始化資料、編譯模板、掛載Dom – > 渲染、更新–>渲染、解除安裝等一系列過程，我們稱這是Vue的生命週期。
2、Vue生命週期的作用是什麼？
它的生命週期中有多個事件鉤子，讓我們在控制整個vue例項的過程時更容易形成好的邏輯。
3、vue生命週期總共有幾個階段？詳細講講
答：它可以總共分為8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/後
建立前/後： 在beforeCreated階段，vue例項的掛載元素 $el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el還沒有。
載入前/後：在beforeMount階段，vue例項的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue例項掛載完成，data.message成功渲染。
更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函式，說明此時vue例項已經解除了事件監聽以及和dom的繫結，但是dom結構依然存在
4、DOM 渲染在 哪個週期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。
 Vue的作用範圍會將app 裡面所有的 DOM 渲染 成 虛擬DOM(?) 把儲存在記憶體中用來描述html標籤的那些資料稱之為虛擬dom 虛擬dom是暫時的 抽象的 它會瞬間渲染成真實dom

2, vue 指令 分別說明什麼意思
(1) v-if指令：條件渲染指令，它根據表示式的真假來刪除和插入元素
v-show和v-if區別=>v-show不管條件是否成立，都會渲染html,而v-if只有條件成立才會渲染

(2) v-for指令:v-for指令基於一個陣列渲染一個列表，它和JavaScript的遍歷語法相似,v-for="item in list”,list是一個陣列，優先順序高於(1);

(3) v-model 實現資料的雙向繫結,底層原理就是 Object.defineProperty()  進行資料劫持  (監聽資料改變 從而觸發修改檢視的邏輯函式)

(4)v-bind指令(簡寫“：”):v-bind動態地繫結一個或多個特性，可以在其名稱後面帶一個引數，中間放一個冒號隔開，這個引數通常是HTML元素的特性（attribute），

(5)v-on指令(簡寫“@”)：v-on用於監聽DOM事件,用法和v-bind類似，例如<button v-on:click="show”>，修改程式碼：<button @click=“show”>

(6) v-HTML 相當於雙大括號語法,且可以解析html標籤

3 三者的區別

1. computed屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用；
2. methods方法表示一個具體的操作，主要書寫業務邏輯；
3. watch一個物件，鍵是需要觀察的表示式，值是對應回撥函式。主要用來監聽某些特定資料的變化，從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體；
   watch和computed各自處理的資料關係場景不同
   1.watch擅長處理的場景：一個資料影響多個資料
   2.computed擅長處理的場景：一個資料受多個資料影響

4,v-model  實現資料雙向繫結
        view  檢視層   修改檢視(input 事件)  v-model 會自動去更新對應的 資料(model)
        model 資料層   修改資料  通過js修改資料 v-model 會自動的去更新 資料對應的 檢視 (view)

v-model 本質上不過是語法糖 ( 包含大量邏輯程式碼塊集合
負責監聽使用者的輸入事件以更新資料,底層原理就是 :
        Object.defineProperty()  進行資料劫持  (監聽資料改變 從而觸發修改檢視的邏輯函式)  (監聽輸入框輸入事件 從而修改對應的資料) 它會根據控制元件型別自動選取正確的方法來更新元素

v-model 也有修飾符 
        lazy    input 變為 change 延遲觸發 
        trim    去除首尾空格
        number  使用者的輸入值轉為數值型別

5,  說一下 什麼 變異陣列和非變異陣列  以及  可變物件 和 不可變物件 
變異陣列的方法

1. 變異陣列方法 觸發vue 檢視更新 改變原陣列
   push()
   pop()
   shift()
   unshift()
   splice()
   sort()
   reverse()
   join()

2. 非變異陣列方法 不會改變原陣列 無法觸發Vue檢視更新 返回新的陣列
   filter()
   concat()
   slice()
   find()

6.  vue 如何實現 深度監聽 以及什麼時候需要用到深度監聽
深度監聽需要用到的情況：
watch:{} 可監聽資料，資料發生變化， 處理函式，watch雖可監聽，但只是淺監聽，只監聽資料第一層或者第二層，例如物件裡面套物件data: {obj: {a: 123} }
深度監聽使用方法：
重點：handler方法，deep屬性，immediate屬性
之前我們寫的 watch 方法其實預設寫的就是這個handler,Vue.js會去處理這個邏輯，最終編譯出來其實就是這個handler。

deep的意思就是深入觀察，監聽器會一層層的往下遍歷，給物件的所有屬性都加上這個監聽器，但是這樣效能開銷就會非常大了，任何修改obj裡面任何一個屬性都會觸發這個監聽器裡的 handler。

7 關於自定義
自定義指令是用來操作DOM的。儘管Vue推崇資料驅動檢視的理念，但並非所有情況都適合資料驅動。自定義指令就是一種有效的補充和擴充套件，不僅可用於定義任何的DOM操作，並且是可複用的。
過濾器的作用：實現資料的篩選、過濾、格式化。

8你選vue框架的出發點是什麼？vue開發中遇到過哪些棘手的問題？
vue的優勢：
1.是一個輕巧、高效能、可元件化的MVVM庫，同時擁有非常容易上手的API
2.響應式程式設計、元件化
3.輕量級框架、簡單易學、雙向資料繫結、元件化、檢視、資料和結構的分離、虛擬DOM、執行速度快
遇到的坑:

1. 路由變化頁面資料不重新整理問題
   出現這種情況是因為依賴路由的params引數獲取寫在created生命週期裡面,因為相同路由二次甚至多次載入的關係 沒有達到監聽，退出頁面再進入另一個文章頁面並不會執行created元件生命週期,導致文章資料還是第一次進入的資料解決方法：watch監聽路由是否變化

9,this.$nextTick使用過沒?具體用於什麼場景定義：將回調延遲到下次DOM更新循環之後執行。在修改數據之後立即使用它，然後等待DOM更新。（當data中的某個屬性改變的時候，這個值並不是立即渲染到頁面上，而是先放到watcher隊列上（異步），只有當前任務空閒的時候才會去執行watcher隊列上的任務。）優點：想對未來更新後的視圖進行操作，我們只需要把要執行的函數傳遞給this.$nextTick方法，vue就會給我們做這個工作。

10,vue slot 具體用法  你專案怎麼使用slot
slot用於封裝元件中，寫在子元件  接收父元件動態傳遞子元件內容片斷
slot插槽的使用方法其實就是類似於一個子元件或者標籤的引用的過程，在父元件裡面定義一個slot，給她起個name，然後元件引入到子元件，子元件裡面有個元素的屬性slot值等於name，然後父元件裡面沒有值的時候就可以顯示子元件裡面的資訊了（切記：插槽slot要寫在父元件裡面！！！）

vue 如何繫結事件 繫結變數 繫結屬性  
事件繫結:v-on @
屬性繫結 v-bind :
變數：雙大括號

vue 父元件 去訪問 通訊 作用 子元件 方式有哪些 ?
1、ref 加在子元件上，用this.ref.name 獲取到的是元件例項，可以使用元件的所有方法。
2.父元件通過 props 向下傳遞資料給子元件,子元件在props中建立一個屬性，用以接收父元件傳過來的值
3 空的vue例項
4 vuex

vue子元件 去通訊 父元件的方式有哪些？
1.通過this.$emit()來觸發父組件的方法。具體就是子組件觸發$emit繫結的事件watchChild，然後父元件監聽watchChild，一旦watchChild被觸發便會觸發父元件的parentReceive方法.
2.在子元件props中定義屬性onOK，型別為function，然後在父元件中把要觸發的方法名傳遞給onOK屬性，最後在子元件中判斷onOk是否存在，是的話直接執行這個方法。
3.this.$parent方法

vue路由 裡面路由守衛 哪三種路由守衛？什麼作用
監聽路由切換 各寫以一個路由守衛函式
1全域性守衛 ① 全域性 router.beforeEach((to, from, next) => {})
② 後置 router.afterEach((to, from) => {})
③ 全域性解析守衛 router.beforeResolve((to, from, next) => {})
2元件內守衛 router.beforeRouteEnter((to, from, next) => {})
router.beforeRouteUpdate((to, from, next) => {})
router.beforeRouteLeave((to, from, next) => {})
3路由獨享守衛 router.beforeEnter((to, from, next) => {})
作用 ：對每一次頁面的跳轉或重新整理進行判斷

1. 簡述一下你知道的有哪些ES6的新特性
   Let const 結構賦值 箭頭函式 字串模板 class類
   類。promise。箭頭函式 解構賦值。let const   async await
   1.箭頭操作符(箭頭函式)
   2.類的支援（class）
   3.字串模板
   4.引數結構
   5.引數預設值，不定引數，擴充引數
   6.let與const 關鍵字
   7.模組
   8.Promise

2. 說一下什麼是塊級作用域 , 它有什麼作用
   塊級作用域就是let const,作用就是不會進行變數提升，能解決記憶體洩漏
   Let const
   作用：
   變數提升

3. 塊級作用域任意巢狀

4. 外層作用域無法讀取內層作用域的變數

5. 內層作用域可以定義外層作用域的同名變數

6. 函式本身的作用域在其所在的塊級作用域之內

7. 在ES5中，因為沒有塊級作用域，獲得廣泛運用的是立即執行函式。現在ES6增加了塊級作用域，那麼立即執行函式就不再必要了

8. 在嚴格模式下，函式只能在頂級作用域和函式內宣告，在if程式碼塊和迴圈程式碼塊下的宣告都會報錯。

9. 談談箭頭函式 有什麼特點 ()=>{}
   1.不能作為建構函式，不能使用new
   2.不能使用arguments，取而代之用rest引數解決
   3.不繫結this，會捕獲其定義時所在的this指向作為自己的this
   4.箭頭函式沒有原型物件
   5.與執行時this無關 ，只與定義時的this有關。 箭頭函式能夠儲存this的指向

1、語法簡單
2、內建return語句、單行程式碼返回當前程式碼的返回值、多行時返回undefined
3、自動繫結this、this為上級的作用域中、也就是定義時所在的作用域中的this
4、沒有arguments引數
5、 沒有constructor、prototype屬性、不能被new
6、以字面量的形式作為物件的屬性時、容易發生引用錯誤

5. ES6 中你是怎麼使用 promise 的 ？

New promise 帶2個引數（resolve，reject）執行返回一個成功的回撥函式或是一個失敗的回撥函式。再在返回的函式上直接呼叫then方法，then接收一個引數，是函式（這個函式是回撥函式）
promise是用來實現非同步程式設計的一種解決方案
Promise在生命週期內有三種狀態，
分別是
pending（進行中）、
Resolved（已完成，又稱 Fulfilled） 或
rejected（已失敗）
使用方式：（一個成功的resolve函式， 一個失敗的reject函式）
（1）new Promise(function(resolve, reject)
（2）then(resolve,reject)
（3）then(resolve),catch(reject)

6. 嚴格模式 有什麼 特點 ? （3-4條）

1.嚴格模式下不可以使用with（）
2.嚴格模式下，變數必須宣告
3.嚴格模式下，this預設是undefined
4.嚴格模式下，為只讀變數和不可擴充套件物件賦值會報錯
5.嚴格模式下，函式的形參不可以同名
6.嚴格模式下，不可以使用caller和arguments的屬性，會報錯
7. 混合開發的原理(cordova DCloud 微信JSSDK)
WebViewJavacrriptBridge是移動UIView和Html互動通訊的橋樑，實現native code和js 的互相呼叫的橋樑。
8. 混合開發的優缺點
優點
1.一次編譯多平臺執行
2.開發速度快，不需要了解各個平臺的native開發語言也可以開發輕量級移動應用
3.各平臺UI表現一致
4.內容更新不需要內容審查
缺點

1. 使用體驗與native開發有差距

2. 前端程式碼容易被盜取

3. JSSDK 你知道的有哪些 API (SDK JDK)
   Wx.createAudioContext(相機)
   Wx.createMapContext（地圖）
   Wx.getExtConfig（第三方平臺）
   Wx.getShareInfo（獲取轉發詳細資訊）

分享到朋友圈 wx.ready(function{ })
影像選擇介面 wx.chooseImage({})
獲取地理位置介面 wx.getLocation({})
wx.request wx.showtoast. wx.showloading  wx.getstoragesync. wx.getuserinfo
Map. Swiper   button input  scroll-view from image

10. 你在實際開發中如何和IOS/Android 程式設計師進行互動的。
    傳統開發模式：
    一般傳統上的開發協作模式有兩種：
    一種是前端先寫一個靜態頁面，寫好後，讓後端去套模板。靜態頁面可以本地開發，也無需考慮業務邏輯只需要實現View即可。不足是還需要後端套模板，這些前端程式碼後端需要瀏覽一遍，以免出錯。
    另一種協作模式是，前端直接去寫模板，這樣做的問題在於，前端編寫過程中很依賴與後端環境，如果當後端沒寫完的情況下，前端幾乎沒法幹活。
    從傳統到前後端分離：
    前後端分離意味著，前後端之間使用 JSON 來交流，兩個開發團隊之間使用 API 作為契約進行互動。從此，後臺選用的技術棧不影響前臺。當後臺開發人員選擇 Java 的時候，我可以不用 JSP 來編寫前端頁面，繼續使用我的 React 又或者 Angular。而我使用 React 時，也不影響後臺使用某一個框架。安卓和IOS app也可以使用 JSON 來和後端交流。

當變數還沒有賦值的時候，使用變數的時候，會報一個undefined，js是弱語言，會進行變數提升
後臺傳一個URL給你，將URL傳給安卓/iOS,他負責播放

12. 微信小程式開發 中 關於 page的生命週期鉤子函式 有哪些?
    onload onready. onShow,onHide,onUnload

13. 微信小程式 你經常使用哪些指令 wx:if wx:for hidden

14. 微信小程式 繫結事件 bindtap 和 catch 的區別
    bindtap.  不會阻止事件冒泡。  catch。阻止事件冒泡

1.  html5 新特性   CSS3 新特性
html5 新特性
用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線儲存的更好的支援 localStorage&sessionStorage
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控制元件，比如 calendar、date、time、email、url、search
css3 新特性
陰影 文字陰影text-shadow 盒子陰影 box-shadow
邊框圓角 border-radius
邊框圖片boeder-image
過渡trasition
animation動畫
2D 3D動畫
偽類選擇器 first-child last-child nth-child(n)
背景： 背景大小 background-size 背景原點background-origin 多背景background: url() ,url(),url()
漸變 ： 線性漸變：background-image:linear-gradient(漸變方向開始和結束狀態，漸變範圍（距離）) 徑向漸變background-image:radial-gradient(圓點，開始、結束)
2.  本地儲存指的是什麼? localStorage&sessionStorage 的區別?什麼是離線儲存
本地儲存指的是儲存在使用者本地終端上的資料
sessionStorage，只會在視窗開啟的時候才有效，一次性快取會話，關閉瀏覽器自動釋放
localStorage，只要沒有手動清除，就會一直保留，永久儲存，以檔案形式儲存
HTML5提出的一個新的特性：離線儲存。通過離線儲存，我們可以通過把需要離線儲存在本地的檔案列在一個manifest配置檔案中，這樣即使在離線的情況下，使用者也可以正常使用App。

3.  前端效能優化的方法有哪些? 6條
1.優化圖片資源的格式和大小
2.開啟網路壓縮
3.使用瀏覽器快取
4.減少重定向請求
5.使用CDN儲存靜態資源
6.減少DNS查詢次數
7.壓縮css和js內容
4.  你知道瀏覽器相容的bug有哪些，說出對應相容bug的解決方式 3 條
一、不同瀏覽器的標籤預設的外邊界和內填充不同
解決方案：css裡 *{margin:0; padding:0;}
　二、塊屬性標籤float後，又有橫向的margin情況下，在IE6顯示margin比設定的大
解決方案：在float的標籤樣式控制中加入display:inline;轉化為行內屬性
三、設定較小高度標籤(一般小於10px)，在IE6、IE7，遨遊中高度超出設定高度值
解決方案：給超出高度的標籤設定overflow:hidden;或者設定行高line-height小於你設定的高度
四，標籤最低高度設定min-height不相容
　　解決方案：如果設定一個標籤最小高度為200px，需要進行設定 {min-height:200px; height:auto !important;height: 200px; overflow:visible;}

6.  DOM和DOM2事件寫法的區別?
dom0級後面繫結的事件會覆蓋前面繫結的事件，點選的時候會執行新繫結的
dom2級不會覆蓋前面繫結的事件，點選的時候所有繫結的事件會依次執行一遍

8.  webpack和gulp的區別？
1.Gulp側重於前端開發的 整個過程 的控制管理（像是流水線），我們可以通過給gulp配置不通的task（通過Gulp中的gulp.task()方法配置，比如啟動server、sass/less預編譯、檔案的合併壓縮等等）來讓gulp實現不同的功能，從而構建整個前端開發流程。
2.Webpack有人也稱之為 模組打包機 ，由此也可以看出Webpack更側重於模組打包，當然我們可以把開發中的所有資源（圖片、js檔案、css檔案等）都可以看成模組，最初Webpack本身就是為前端JS程式碼打包而設計的，後來被擴充套件到其他資源的打包處理。Webpack是通過loader（載入器）和plugins（外掛）對資源進行處理的。
3.另外我們知道Gulp是對整個過程進行控制，所以在其配置檔案（gulpfile.js）中配置的每一個task對專案中 該task配置路徑下所有的資源 都可以管理。比如，對sass檔案進行預編譯的task可以對其配置路徑下的所有sass檔案進行預編譯處理

隨便問問 專場
1.  你覺得的HTTP的狀態碼有哪些?仔細說明
1開頭：（被接受，需要繼續處理。）這一型別的狀態碼，代表請求已被接受，需要繼續處理。
2開頭 （請求成功）這一型別的狀態碼，代表請求已成功被伺服器接收、理解、並接受
3開頭 （請求被重定向）這類狀態碼代表需要客戶端採取進一步的操作才能完成請求。通常，這些狀態碼用來重定向，後續的請求地址（重定向目標）在本次響應的 Location 域中指明。
4開頭：（請求錯誤）這類的狀態碼代表了客戶端看起來可能發生了錯誤，妨礙了伺服器的處理。
5開頭：（伺服器錯誤）這類狀態碼代表了伺服器在處理請求的過程中有錯誤或者異常狀態發生，也有可能是伺服器意識到以當前的軟硬體資源無法完成對請求的處理。

具體：
200 OK 伺服器成功處理了請求（這個是我們見到最多的）
404 Not Found(頁面丟失)未找到資源
500 Internal Server Error：伺服器內部出現了錯誤.資料庫問題

3.  你專案中如何處理跨域請求?（JSONP 反向代理 proxy  postMessage CROS ）
同源策略:
請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,埠,協議相同.
1.jsonp
通常為了減輕web伺服器的負載，我們把js、css，img等靜態資源分離到另一臺獨立域名的伺服器上，在html頁面中再通過相應的標籤從不同域名下載入靜態資源，而被瀏覽器允許，基於此原理，我們可以通過動態建立script，再請求一個帶參網址實現跨域通訊。
JSONP 是 JSON with padding（填充式 JSON 或引數式 JSON）的簡寫。

5.  什麼是事件委託? 列舉使用事件委託的地方
1.通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。也就是：利用冒泡的原理，把事件加到父級上，觸發執行效果。
好處:
1.提高效能。
2.新新增的元素還會有之前的事件。

6.  你如何在jquery  外掛的基礎上封裝新的外掛 ($.extend    $.fn.extend)($ 和 $.fn 的區別 )

1. jQuery.extend() 方法有一個過載。
   　 jQuery.extend(object) ,一個引數的用於擴充套件jQuery類本身，也就是用來在jQuery類/名稱空間上增加新函式，或者叫靜態方法，例如jQuery內建的 ajax方法都是用jQuery.ajax()這樣呼叫的，有點像 “類名.方法名” 靜態方法的呼叫方式。
   2.jQuery.fn.extend(object)擴充套件 jQuery 元素集來提供新的方法（通常用來製作外掛）。
   首先我們來看fn 是什麼東西呢。檢視jQuery程式碼，就不難發現。
   jQuery.fn = jQuery.prototype = {
   　　　init: function( selector, context ) {…};
   };

7.  使用版本控制工具git
git remote -v 檢視遠端關聯網址
git remote rm origin 清除之前的關聯
git remote add origin https:// 新增新的關聯

git stash 儲存當前工作進度
git pull origin master 拉取遠端程式碼到本地

// 最基礎的五步步走!
git add ./ 把程式碼新增到暫存區
git commit -m “bu1” 程式碼提交到了 HEAD
git push origin master 程式碼提交到遠端倉庫

  分支與遠端的關係
  建立“feature_x”的分支，並切換過去：git checkout -b feature_x
 切換回主分支：git checkout master
 再把新建的分支刪掉：git branch -d feature_x
 除非將分支推送到遠端倉庫，不然該分支就是 不為他人所見的：

git push origin

4.解決衝突絕招
   如果衝突，自己修改的檔案自己知道，則把修改的檔案複製到其它目錄，然後強制用遠端覆蓋本地檔案，然後把修改的檔案考回來覆蓋。這樣的好處是多人修改後，多個檔案，修改起來太複雜。這樣的方式非常方便高效。

具體：
別光解決問題，想想究竟發生了什麼
學會預見未來的瀏覽器發展趨勢
前後端開發的一個主要區別在於後端程式碼通常都執行在完全由你掌控的環境下。前端相對來說不那麼在你的掌控之中。不同使用者的平臺或裝置是前端永恆的話題，你的程式碼需要優雅掌控這一切。
閱讀規範文件
瀏覽器有 bug 是很難免的事，但是當同一份程式碼在兩個瀏覽器渲染出來的效果不一樣，人們總會不假思索的推測，那個“廣受好評”的瀏覽器是對的，而“不起眼”的瀏覽器是錯的。但事實並不一定如此，當我的假設出現錯誤時，我選取的變通辦法都會在未來遭遇問題。
閱讀別人的程式碼
自己獨立解決問題絕對是個不錯的方式，但是這不應該是我唯一的方式，因為它很快就會讓我穩定在某個層次。閱讀別人的程式碼會讓我開闊思維，並且閱讀和理解別人寫的程式碼也是團隊協作或開源貢獻必須具備的能力。
與比你聰明的人一起工作
“造輪子”
造一個自己喜歡的或者平時使用頻率很高的的 JavaScript 庫或 CSS 框架，在我遇到困難的時候，所有現成的庫的原始碼都會為我提供幫助。
把你學到的東西都記錄下來

10. 如何看待當前前端發展的趨勢,和未來技術走向?
    看未來的發展方向，無非就是看現在的解決方案所存在的痛點。
11. 瀏覽器的效能問題
    和原生的 App 相比，效能一直一個致命的痛點，如果要追求效能，肯定得用原生 App。那麼在效能上，未來幾年可能是一個方向。
    ①前端程式碼編譯為位元組碼，雖然還是難以達到原生App的水平，但已經能夠滿足絕大部分應用的效能需求，WebAssembly 位元組碼和底層機器碼很相似可快速裝載執行，因此效能相對於 JS 解釋執行大大提升。
    ②統一的DOM樹限制了單執行緒的渲染
    理論上來說，一個頁面某個時間變化的部分只是集中在一小塊區域，沒有必要將整個DOM樹鎖住。因此，一個可能的方向是分割槽渲染，即將頁面劃分為幾個不同的區域，每個區域有獨立的DOM樹，獨立渲染，那麼效能會高很多，類似於 App 開發中的元件，元件類的執行不影響其它元件，如果需要依賴其它元件，通過元件間訊息進行通訊。

Ps:

1. 多注重框架原理，現在對於前端工程化，個人認為差不多到了瓶頸期，很難有新的突破，注重原理才能很好的應對未來的發展。
2. 眼界放寬、拓寬自己知識的廣度。
   3.TS 一定會再火的，未來專案會越來越複雜，用了 TS 專案的風險會可控很多。

1. （什麼是模組化開發 怎麼實現模組化開發） require exports defined
模組定義 define
模組暴露 exports
模組引入 require

2. node 開發 返回的資料的文件型別格式有哪些 5條 （content-type）
buffer string  css js from json

3. npm  安裝開發依賴 專案依賴 
–global    -g    全域性依賴
–save-dev  -D    開發依賴   devDependencies   輔助開發
–save      -S    專案依賴   dependencies      專案始終需要

4. mongodb 和 mysql 資料庫的區別

5. 說一下加密方式有哪些 談一下基於node 加密模組
常用的加密方式有md5、sha1、base64、Hmac、AES、Diffie-Hellman等，基於node的加密模組是crypto模組

6. node + express ejs 後端模板引擎 有哪些特點
1，快取功能，能夠快取已經解析好的html模版；
2，可以使用express檢視系統；
3，可以自定義標籤，
比如  ‘<%’  可以使用  ‘{{’  替代，  ‘%>’  用  ‘}}’  代替；
4，編譯和渲染速度快；
5，支援瀏覽器端和伺服器端；
6，自定義標記分隔符；
模版標籤很簡單。 編譯速度快。完全支援express系統。