大廠面試-小米

 小米

 原生js

 node中eventloop和瀏覽器eventloop的區別是什麼？

瀏覽器環境下，microtask 的任務隊列是每一個 macrotask 執行完以後執行。而在 Node.js 中，microtask 會在事件循環的各個階段之間執行，也就是一個階段執行完畢，就會去執行 microtask 隊列的任務。

  
  
  

接下咱們經過一個例子來講明二者區別：

  

setTimeout(()=>{

    console.log('timer1')

    Promise.resolve().then(function() {

        console.log('promise1')

    })

}, 0)

setTimeout(()=>{

    console.log('timer2')

    Promise.resolve().then(function() {

        console.log('promise2')

    })

}, 0)

1

2

3

4

5

6

7

8

9

10

11

12

瀏覽器端運行結果：timer1=>promise1=>timer2=>promise2

  

瀏覽器端的處理過程以下：

  
  
  

Node 端運行結果：timer1=>timer2=>promise1=>promise2

  

全局腳本（main()）執行，將 2 個 timer 依次放入 timer 隊列，main()執行完畢，調用棧空閒，任務隊列開始執行；

首先進入 timers 階段，執行 timer1 的回調函數，打印 timer1，並將 promise1.then 回調放入 microtask 隊列，一樣的步驟執行 timer2，打印 timer2；

至此，timer 階段執行結束，event loop 進入下一個階段以前，執行 microtask 隊列的全部任務，依次打印 promise一、promise2

Node 端的處理過程以下：

  
  
  

總結

  

瀏覽器和 Node 環境下，microtask 任務隊列的執行時機不一樣

  

Node 端，microtask 在事件循環的各個階段之間執行

瀏覽器端，microtask 在事件循環的 macrotask 執行完以後執行

 jQuery相對於原生js有哪些優點？

https://www.cnblogs.com/qitia...

一、輕量級

  

JQuery很是輕巧，採用Dean Edwards編寫的Packer壓縮後，大小不到30KB,若是使用Min版而且在服務器端啓用Gzip壓縮後，大小隻有18KB。

  

1

gzip： 天天一個linux命令（32）：gzip     減小文件大小有兩個明顯的好處，一是能夠減小存儲空間，二是經過網絡傳輸文件時，能夠減小傳輸的時間。gzip是在Linux系統中常用的一個對文件進行壓縮和解壓縮的命令，既方便又好用。gzip不只能夠用來壓縮大的、較少使用的文件以節省磁盤空間，還能夠和tar命令一塊兒構成Linux操做系統中比較流行的壓縮文件格式。據統計，gzip命令對文本文件有60%～70%的壓縮率。

  
  

二、強大的選擇器

  

JQuery容許開發者使用從CSS1到CSS3幾乎全部的選擇器，以及JQuery首創的高級並且複雜的選擇器，另外還能夠加入插件使其支持XPath選擇器，甚至開發者能夠編寫屬於本身的選擇器。因爲JQuery支持選擇器這一特性，所以有必定CSS經驗的開發人員能夠很容易的切入到JQuery的學習中來。

  

1

2

3

4

5

6

XPath： 

              XPath 是一門在 XML 文檔中查找信息的語言。XPath 可用來在 XML 文檔中對元素和屬性進行遍歷。

               XPath 是 W3C XSLT 標準的主要元素，而且 XQuery 和 XPointer 都構建於 XPath 表達之上。

                所以，對 XPath 的理解是不少高級 XML 應用的基礎。

  
  
  

三、出色的DOM操做的封裝

  

JQuery封裝了大量經常使用的DOM操做，使開發者在編寫DOM操做相關程序的時候可以駕輕就熟。JQuery輕鬆地完成各類本來很是複雜的操做，讓JavaScript新手也能寫出出色的程序。

四、可靠的事件處理機制

  

JQuery的事件處理機制吸取了JavaScript專家Dean Edwards編寫的事件處理函數的精華，是的JQuery在處理事件綁定的時候至關可靠。在預留退路、按部就班以及非入侵式編程思想方面，JQuery也作得很是不錯。

  

五、完善的Ajax

  

JQuery將全部的Ajax操做封裝到一個函數$.ajax()裏，使得開發者處理Ajax的時候可以專心處理業務邏輯而無需關心複雜的瀏覽器兼容性和XMLHttpRequest對象的建立和使用的問題。

  

六、不污染頂級變量

  

JQuery只創建一個名爲JQuery的對象，其全部的函數方法都在這個對象之下。其別名$也能夠隨時交流控制權，絕對不會污染其餘的對象。該特性是JQuery能夠與其餘JavaScript庫共存，在項目中放心地引用而不須要考慮到後期的衝突。

  

七、出色的瀏覽器兼容性

  

做爲一個流行的JavaScript庫，瀏覽器的兼容性是必須具有的條件之一。JQuery可以在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常運行。JQuery同時修復了一些瀏覽器之間的的差別，使開發者沒必要在開展項目前創建瀏覽器兼容庫。

  

八、鏈式操做方式

  

JQuery中最有特點的莫過於它的鏈式操做方式——即對發生在同一個JQuery對象上的一組動做，能夠直接接連寫無須要重複獲取對象。這一特色使得JQuery的代碼無比優雅。

  

9.隱式迭代

  

當用JQuery找到帶有「.myClass」類的所有元素，而後隱藏他們時。無需循環遍歷每個返回的元素。相反，JQuery裏的方法都被設計成自動操做的對象集合，而不是單獨的對象，這使得大量的循環結構變得再也不必要，從而大幅度地減小代碼量。

  

十、行爲層與結構層的分離

  

開發者可使用選擇器選中元素，而後直接給元素添加事件。這種將行爲層與結構層徹底分離的思想，可使JQuery開發人員和HTML或其餘頁面開發人員各司其職，擺脫過去開發衝突或我的單幹的開發模式。同時，後期維護也很是方便，不須要在HTML代碼中尋找某些函數和重複修改HTML代碼。

  

十一、豐富的插件支持

  

JQuery的易擴展性，吸引了來自全球開發者來編寫JQuery的擴展插件。目前已經有超過幾百種官方插件支持，並且還不斷有新插件面試。

  

十二、完善的文檔

  

JQuery的文檔很是豐富，現階段多位英文文檔，中文文檔相對較少。不少熱愛JQuery的團隊都在努力完善JQuery中文文檔，例如JQuery的中文API。

  

1三、開源

  

JQuery是一個開源的產品，任何人均可以自由地使用並提出修改意見。

 一個頁面從輸入url到頁面加載顯示完成，發生了什麼？

1.瀏覽器經過DNS將url地址解析爲ip(若是有緩存直接返回緩存，不然遞歸解析)

2.經過DNS解析獲得了目標服務器的ip地址後，與服務器創建TCP鏈接。

    - ip協議：選擇傳輸路線，負責找到

    - tcp協議：三次握手，分片，可靠傳輸，從新發送的機制

3.瀏覽器經過http協議發送請求(增長http的報文信息)頭 體 行

4.服務器接收請求後，查庫，讀文件，拼接好返回的http響應

5.瀏覽器收到html，開始渲染

6.解析html爲dom，解析css爲css-tree，最終生成render-tree阻塞渲染

7.遍歷渲染樹開始佈局，計算每一個節點的位置大小信息

8.將渲染樹每一個節點繪製到屏幕

9.加載js文件，運行js腳本

10.relow(樣式)和repaint(位置)

 JSONP和ajax的區別是什麼？

https://www.cnblogs.com/xiaox...

json和jsonp和ajax的實質和區別

ajax的兩個問題

　　1.ajax以何種格式來交換數據

　　2.跨域的需求如何解決

　　　　數據跨域用自定義字符串或者用XML來描述

　　　　跨域能夠用服務器代理來解決

jsonp來跨域

　　json是一種數據交換格式 「暗號」    描述信息格式

　　jsonp是非官方跨域數據交互協議 「接頭方式」  信息傳遞雙方約定的方法

  

　　json是基於文本的數據交換方式或者數據描述格式

　　　　json的優勢

　　　　　　1.基於純文本，跨平臺傳遞極其簡單；

　　　　　　2.javascript原生支持，後臺語言幾乎所有支持

　　　　　　3.輕量級數據格式，佔用字符數量極小，特別適合互聯網傳遞

　　　　　　4.可讀性比較強，沒必要xml那麼一目瞭然但在合理的依次縮進以後仍是很容易識別的

　　　　　　5.容易編寫和解析，固然前提是知道數據結構

　　　　json的格式或者規則

　　　　　　json以很是簡單的方式來描述數據結構 xml能作的它都能作

　　　　　　1.json的數據兩種數據類型 大括號{}和方括號\[\] 其他英文冒號,是分隔符 冒號:是映射符 英文雙引號""是定義符

　　　　　　2.{}是描述一組 不一樣類型的無序鍵值對集合 每一個鍵值對理解爲OOP的屬性描述

　　　　　　    \[\]是描述一組 相同類型的有序數據的集合 對應OPP的數組

　　　　　　3.{}不一樣類型無序鍵值對和\[\]相同類型有序集合中有有多個子項，經過英文逗號分隔

　　　　　　4.鍵值對以英文冒號:分隔而且建議鍵名都加英文雙引號""，以便不一樣語言的解析

　　　　　　5.json內部經常使用數據類型是字符串(必須用雙引號引發來其餘不用) 數字 布爾 日期 null 

　　　　　　　　日期比較特殊？？？？？？

  

複製代碼

 1             var person = { //一我的的描述

 2                 "name":"Bob",

 3                 "Age":32,

 4                 "Company":"IBM",

 5                 "Engineer":true

 6             }  

 7             var personAge = person.Age;

 8             var conference = {        //描述一次會議

 9                 "Conference": "Future Marketing",

10                 "Date": "2012-6-1",

11                 "Address": "Beijing",

12                 "Members":

13                     \[

14                         {

15                             "Name": "Bob",

16                             "Age": 32,

17                             "Company": "IBM",

18                             "Engineer": true

19                         },

20                         {

21                             "Name": "John",

22                             "Age": 20,

23                             "Company": "Oracle",

24                             "Engineer": false

25                         },

26                         {

27                             "Name": "Henry",

28                             "Age": 45,

29                             "Company": "Microsoft",

30                             "Engineer": false

31                         }

32                     \]

33                 }

34                 var henryIsAnEngineer = conference.Members\[2\].Engineer;// 讀取參會者Henry是否工程師 

複製代碼

jsonp的產生緣由

　　1.Ajax直接請求普通文件存在跨域無權限訪問的問題（靜態頁、動態頁、web服務、wcf只要是跨域請求一概不許）

　　2.web的頁面上調用js文件是不受跨域的影響（凡擁有src屬性的標籤都擁有跨域能力script img iframe）

　　3.能夠判斷 如今想經過純web端(ActiveX控件、服務端代理、H5之Websocket等方式不算)跨域訪問數據就只有一種可能，就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶度調用和進一步處理；

　　4.json的純字符數格式能夠簡潔的描述複雜數據還被js原生支持

　　5.web客戶端經過與調用腳本同樣的方式來調用跨域服務器上動態生成的js格式文件(後綴.json)，服務器之因此要動態生成json文件目的把客戶端須要的數據裝入進去

　　6.客戶端在對json文件調用成功後得到本身所需的數據剩下的就按照本身需求進行處理和展示，這種獲取遠程數據的方式很是像ajax其實並同樣

　　7.爲了方便客戶端使用數據逐漸造成非正式傳輸協議jsonp

　　　　該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住json數據 這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據

  

複製代碼

 1     <!DOCTYPE html>

 2         <html>

 3             <head>

 4              <title></title>

 5             </head>

 6             <body>

 7                 <script>

 8                 var flightHandler = function (data) {

 9                     alert('您查到的信息：票價' + data.price + '元，餘票' + data.tickets + '張。');

10                 };

11                 var url = "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler";

12                 var script = document.createElement('script');

13                     script.setAttribute('scr',url);

14                 document.getElementsByTagName('head')\[0\].appendChild(script);

15 

16                 </script>

17             </body>

18         </html>

複製代碼

　　jsonp.html

  

1             flightHandler({

2                 "code":"1991",

3                 "price":1991,

4                 "tickets":5

5             });

　　jQuery如何實現jsonp調用

  

複製代碼

 1     <!DOCTYPE html>

 2     <html>

 3     <head>

 4         <title>123</title>

 5         <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 6         <script>

 7             $(document).ready(function () {

 8                 $.ajax({

 9                     type: "get",

10                     async: false,

11                     url: "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler",

12                     dataType: "jsonp",

13                     jsonp: "callback",//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(通常默認爲:callback)

14                     jsonpCallback: "flightHandler",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據

15                     success: function(json) {

16                         alert('您查詢到航班信息：票價： ' + json.price + ' 元，餘票： ' + json.tickets + ' 張。');

17                     },

18                     error: function() {

19                         alert("123456");

20                     }

21 

22                 });

23             });

24         </script>

25     </head>

26     <body>

27     </body>

28     </html>    

複製代碼

ajax和jsonp的實質核心、區別聯繫

　　1.ajax和jsonp的調用方式很像，目的同樣，都是請求url，而後把服務器返回的數據進行處理，所以jquery和ext等框架都把jsonp做爲ajax的一種形式進行了封裝；

　　2.實質不一樣

　　　　ajax的核心是經過xmlHttpRequest獲取非本頁內容

　　　　jsonp的核心是動態添加script標籤調用服務器提供的js腳本

　　3.區別聯繫

　　　　不在因而否跨域

　　　　ajax經過服務端代理同樣跨域

　　　　jsonp也不併不排斥同域的數據的獲取

　　4.jsonp是一種方式或者說非強制性的協議

　　　　ajax也不必定非要用json格式來傳遞數據

 常見的跨域方式有哪些？

\- cors

服務器端對於CORS的支持，主要就是經過設置Access-Control-Allow-Origin來進行的。若是瀏覽器檢測到相應的設置，就能夠容許Ajax進行跨域的訪問。

  

\- jsonp

var script = document.createElement('script');  

script.src = "http://aa.xx.com/js/\*.js";  

document.body.appendChild(script);

  

\- postMessage

window對象新增了一個window.postMessage方法，容許跨窗口通訊，不論這兩個窗口是否同源。目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。

  

\- window.name

  

\- location.hash

  

\- http-proxy

  

\- nginx

  

\- websocket

  

\- iframe

基於iframe實現的跨域要求兩個域具備aa.xx.com,bb.xx.com這種特色，也就是兩個頁面必須屬於同一個頂級基礎域（例如都是xxx.com，或是xxx.com.cn），使用同一協議（例如都是 http）和同一端口（例如都是80），這樣在兩個頁面中同時添加document.domain，就能夠實現父頁面調用子頁面的函數

 es6實現解構是深拷貝仍是淺拷貝？

https://www.cnblogs.com/cckui...

對象的擴展運算符（...）用於取出參數對象的全部可遍歷屬性，拷貝到當前對象之中。

  

拷貝對象

  

let aa = {

    age: 18,

    name: 'aaa'

}

  

let bb = {...aa};

console.log(bb);  // {age: 18, name: "aaa"}

合併對象

  

擴展運算符（...）能夠用於合併兩個對象

  

let aa = {

    age: 18,

    name: 'aaa'

} 

  

let bb = {

    sex: '男'

}

let cc = {...aa, ...bb}; 

  
  

// 等同於： 

// let cc = Object.assign({}, aa, bb);

  
  

console.log(cc); // {age: 18, name: "aaa", sex: "男"}

拷貝並修改對象

  

在擴展運算符後面，加上自定義的屬性，則擴展運算符內部的同名屬性會被覆蓋掉。

  

let aa = {

    age: 18,

    name: 'aaa'

}

let dd = {...aa, name: 'ddd'};

  

// 等同於： 

// let dd = {...aa, ...{name: 'ddd'}};

// let dd = Object.assign({}, aa, { name: 'ddd'});

  
  
  

console.log(dd); // {age: 18, name: "ddd"}

通常，在 redux 中修改 state 時，會用解構賦值的方法。

  

可是，解構後獲得的新對象，相對於老對象，是淺拷貝，仍是深拷貝？

  

例如，下面確定是引用賦值：

  

let aa = {

    age: 18,

    name: 'aaa'

}

  

let bb = aa;

bb.age = 22;

  

console.log(aa.age); // 22

上面， 對象 bb 是 aa 的一個引用賦值。那麼，若是使用解構賦值獲得 bb 呢：

  

let aa = {

    age: 18,

    name: 'aaa'

}

  

let bb = {...aa};

bb.age = 22;

  

console.log(aa.age); // 18

可見，改變 bb 的屬性 age 的值，並不會改變對象 aa 的屬性的 age 的值，因此，上面的例子bb是aa的一份拷貝

可是，這個拷貝是隻有一層的淺拷貝，仍是深拷貝？

let aa = {

    age: 18,

    name: 'aaa',

    address: {

        city: 'shanghai'

    }

}

  

let bb = {...aa};

bb.address.city = 'shenzhen';

  

console.log(aa.address.city);  // shenzhen

可見，aa 解構賦值到新對象 bb，只是進行了一層淺拷貝，對象 bb 中的屬性（address）的屬性（city）仍是對象 aa 中屬性的屬性的引用。

  

若是像拷貝 aa 中的 city 屬性，能夠像下面處理：

  

let aa = {

    age: 18,

    name: 'aaa',

    address: {

        city: 'shanghai'

    }

}

  

let bb = {

    ...aa,

    address: {...aa.address}

};

  

bb.address.city = 'shenzhen';

  

console.log(aa.address.city);  // shanghai

 js如何實現繼承？

https://www.cnblogs.com/ranyo...

想要繼承，就必需要提供個父類（繼承誰，提供繼承的屬性）

　　1、原型鏈繼承

　　　　重點：讓新實例的原型等於父類的實例。

　　　　特色：一、實例可繼承的屬性有：實例的構造函數的屬性，父類構造函數屬性，父類原型的屬性。（新實例不會繼承父類實例的屬性！）

　　　　缺點：一、新實例沒法向父類構造函數傳參。

　　　　　　　二、繼承單一。

　　　　　　　三、全部新實例都會共享父類實例的屬性。（原型上的屬性是共享的，一個實例修改了原型屬性，另外一個實例的原型屬性也會被修改！）

　　2、借用構造函數繼承

　　　　重點：用.call()和.apply()將父類構造函數引入子類函數（在子類函數中作了父類函數的自執行（複製））

　　　　特色：一、只繼承了父類構造函數的屬性，沒有繼承父類原型的屬性。

　　　　　　　二、解決了原型鏈繼承缺點一、二、3。

　　　　　　　三、能夠繼承多個構造函數屬性（call多個）。

　　　　　　　四、在子實例中可向父實例傳參。

　　　　缺點：一、只能繼承父類構造函數的屬性。

　　　　　　　二、沒法實現構造函數的複用。（每次用每次都要從新調用）

　　　　　　　三、每一個新實例都有父類構造函數的副本，臃腫。

  

　　3、組合繼承（組合原型鏈繼承和借用構造函數繼承）（經常使用）

　　　　重點：結合了兩種模式的優勢，傳參和複用

　　　　特色：一、能夠繼承父類原型上的屬性，能夠傳參，可複用。

　　　　　　　二、每一個新實例引入的構造函數屬性是私有的。

　　　　缺點：調用了兩次父類構造函數（耗內存），子類的構造函數會代替原型上的那個父類構造函數。

  

　　4、原型式繼承

　　　　重點：用一個函數包裝一個對象，而後返回這個函數的調用，這個函數就變成了個能夠隨意增添屬性的實例或對象。object.create()就是這個原理。

　　　　特色：相似於複製一個對象，用函數來包裝。

　　　　缺點：一、全部實例都會繼承原型上的屬性。

　　　　　　　二、沒法實現複用。（新實例屬性都是後面添加的）

　　5、寄生式繼承

　　　　重點：就是給原型式繼承外面套了個殼子。

　　　　優勢：沒有建立自定義類型，由於只是套了個殼子返回對象（這個），這個函數瓜熟蒂落就成了建立的新對象。

　　　　缺點：沒用到原型，沒法複用。

　　6、寄生組合式繼承（經常使用）

　　　　寄生：在函數內返回對象而後調用

　　　　組合：一、函數的原型等於另外一個實例。二、在函數中用apply或者call引入另外一個構造函數，可傳參　

　　　　重點：修復了組合繼承的問題

  

　　　　繼承這些知識點與其說是對象的繼承，更像是函數的功能用法，如何用函數作到複用，組合，這些和使用繼承的思考是同樣的。上述幾個繼承的方法均可以手動修復他們的缺點，但就是多了這個手動修復就變成了另外一種繼承模式。

　　　　這些繼承模式的學習重點是學它們的思想，否則你會在coding書本上的例子的時候，會以爲明明能夠直接繼承爲何還要搞這麼麻煩。就像原型式繼承它用函數複製了內部對象的一個副本，這樣不只能夠繼承內部對象的屬性，還能把函數（對象，來源內部對象的返回）隨意調用，給它們添加屬性，改個參數就能夠改變原型對象，而這些新增的屬性也不會相互影響。

 10個ajax同時發出請求 而且所有返回展現結果 而且最多容許出現三次失敗

let errorCount = 0

let p = new Promise((resolve, reject) => {

    if (success) {

         resolve(res.data)

     } else {

         errorCount++

         if (errorCount > 3) {

            // 失敗次數大於3次就應該報錯了

            reject(error)

         } else {

             resolve(error)

         }

     }

})

Promise.all(\[p\]).then(v => {

  console.log(v);

});

 實現斐波那契數列

遞歸

    function fib(n) {

        return fib(n) = n > 2 ?

            fib(n - 1) + fib(n - 2) :

            1

    }

尾遞歸

    function fib(n,a=1,b=1){

        if(n<=1) return b;

        return fib(n-1,b,a+b);

    }

非遞歸 動態規劃

    function fib(n){

        let a=1,

            b=1;

        for(let i=2;i<n;i++){

            const t=b;

            b=a+b;

            a=t

        }

        return b

    }

非遞歸 生成器

    function \*fib(){

        let a=1,b=1;

        yield a;

        yield b;

        while(true){

            const t=b;

            b=a+b;

            a=t;

            yield b

        }

    }

遞歸 reduce流

    function fib(n){

        return Array(n).fill().reduce((\[a,b\],\_)=>{

            return \[b,a+b\]

        },\[0,1\])\[0\]

    }

非遞歸 堆棧

    function fib(n){

        let stack=\[n\]

        while(stack.length){

            const item=stack.pop();

            if(item===1 || item===2){

                stack.push(1)

            }else{

                stack.push(item-1);

                stack.push(item-2);

            }

        }

    }

 實現快速排序

    function quickSort(arr,left,right){

        let len=arr.length,

            partitionIndex,

            left=typeof left != 'number' ? 0 : left,

            right=typeof right != 'number' ? len-1 : right;

        if(left<right){

            partitionIndex=partition(arr,left,right);

            quickSort(arr,left,partitionIndex-1);

            quickSort(arr,partitionIndex+1,right);

        }

        return arr;

    }

    function partition(arr,left,right){

        let pivot=left,

            index=pivot+1;

        for(let i=index;i<=right;i++){

            if(arr\[i\]<arr\[pivot\]){

                swap(arr,i,index);

                index++;

            }

        }

        swap(arr,pivot,index-1);

        return index-1;

    }

    function swap(arr,i,j){

        let temp=arr\[i\];

        arr\[i\]=arr\[j\];

        arr\[j\]=temp;

    }

 框架

 請簡單介紹一下React Hooks

\> Hooks是 React 16.8 中的新添加內容。它們容許在不編寫類的狀況下使用state和其餘 React 特性。使用 Hooks，能夠從組件中提取有狀態邏輯，這樣就能夠獨立地測試和重用它。Hooks 容許我們在不改變組件層次結構的狀況下重用有狀態邏輯，這樣在許多組件之間或與社區共享 Hooks 變得很容易。

  

\> 首先，Hooks 一般支持提取和重用跨多個組件通用的有狀態邏輯，而無需承擔高階組件或渲染 props 的負擔。Hooks 能夠輕鬆地操做函數組件的狀態，而不須要將它們轉換爲類組件。

  

Hooks 在類中不起做用，經過使用它們，我們能夠徹底避免使用生命週期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount。相反，使用像useEffect這樣的內置鉤子。

 如何封裝一個button？

https://www.cnblogs.com/elson...

1、效果

  

  

 2、封裝

  

複製代碼

<template>

    <button @click="ClickHandler()" :class="styles" :disabled="disabled">{{ text }}</button>

</template>

  

<script>

export default {

    name: 'sp-button',

    data() {

        return {}

    },

    props: {

        /\* 按鈕中顯示的文字 \*/

        text: {

            type: String

        },

        /\* 是否啓用按鈕 \*/

        disabled: {

            type: Boolean,

            default: false

        },

        /\* 按鈕形狀 \*/

        design: {

            type: String,

            default: 'block'

        },

        /\* 矢量圖標 \*/

        icon: String,

        /\* 內置按鈕風格 \*/

        type: {

            type: String,

            default: 'normal'

        }

    },

    methods: {

        /\* 按鈕點擊時觸發的事件，用於父組件中使用 \*/

        ClickHandler() {

            this.$emit('click')

        }

    },

    computed: {

        /\* 根據不一樣的props，展現按鈕樣式 \*/

        styles: {

            get() {

                return \['sp-button', this.design, this.icon, this.type\]

            }

        }

    }

}

</script>

  

<style scoped>

/\* 引入矢量圖標 \*/

@import '../../assets/icons/iconfont.css';

button {

    width: 100px;

    height: 30px;

    outline: none; /\*outline 去除原生的button樣式\*/

  

    /\*動畫設置\*/

    transition: border 0.8s;

    -webkit-transition: border 0.8s;

    transition: background-color 0.1s;

    -webkit-transition: background-color 0.1s;

}

/\*normal style\*/

.normal {

    border: 1px solid rgb(135, 135, 136);

    background-color: #ffffff;

    font-size: 12px;

    color: rgb(92, 90, 90);

}

.normal:hover {

    cursor: pointer;

    background-color: #F4F4F5;

}

.normal:active {

    color: #000;

    border: 1px solid rgb(135, 135, 136);

    background-color: #F4F4F5;

}

.normal:disabled {

    cursor: not-allowed;

    background-color: rgb(241, 243, 245);

    opacity: 0.8;

}

/\* primary style \*/

.primary {

    color: #ffffff;

    background-color: #3a8ee6;

    font-size: 12px;

    border: none;

}

.primary:active {

    background-color: rgb(192, 215, 250);

    color: rgb(105, 83, 233);

    border: none;

}

.primary:hover{

    cursor: pointer;

    background-color: rgb(125, 174, 248);

}

.primary:disabled{

    background-color: rgb(192, 215, 250);

    color: #3a8ee6;

    border: none;

    cursor: not-allowed;

}

/\* warning style\*/

.warning {

    color: #ffffff;

    background-color: #CF9236;

    font-size: 12px;

    border: none;

}

.warning:active {

    background-color: rgb(233, 202, 157);

    color: rgb(185, 115, 10);

    border: none;

}

.warning:hover{

    cursor: pointer;

    background-color: rgb(231, 177, 97);

}

.warning:disabled{

    background-color: rgb(233, 202, 157);

    color: rgb(185, 115, 10);

    border: none;

    cursor: not-allowed;

}

/\* error style\*/

.error {

    color: #ffffff;

    background-color: rgb(250, 96, 96);

    font-size: 12px;

    border: none;

}

.error:active {

    background-color: rgb(243, 181, 181);

    color: rgb(245, 60, 60);

    border: none;

}

.error:hover{

    cursor: pointer;

    background-color: rgb(238, 127, 127);

}

.error:disabled{

    background-color: rgb(243, 181, 181);

    color: rgb(245, 60, 60);

    border: none;

    cursor: not-allowed;

}

/\* success style \*/

.success {

    color: #ffffff;

    background-color: #5DAF34;

    font-size: 12px;

    border: none;

}

.success:active {

    background-color: rgb(185, 218, 168);

    color: rgb(70, 153, 29);

    border: none;

}

.success:hover{

    cursor: pointer;

    background-color: rgb(129, 211, 85);

}

.success:disabled{

    background-color: rgb(185, 218, 168);

    color: rgb(70, 153, 29);

    border: none;

    cursor: not-allowed;

}

/\* info style \*/

.info {

    color: #ffffff;

    background-color: #A6A9AD;

    font-size: 12px;

    border: none;

}

.info:active {

    background-color: rgb(212, 214, 218);

    color: rgb(141, 144, 146);

    border: none;

}

.info:hover{

    cursor: pointer;

    background-color: rgb(176, 178, 182);

}

.info:disabled{

    background-color: rgb(212, 214, 218);

    color: rgb(141, 144, 146);

    border: none;

    cursor: not-allowed;

}

/\* 方塊 \*/

.block {

    border-radius: 0px;

}

/\* 半圓 \*/

.oval {

    border-radius: 50px;

}

/\* 圓角 \*/

.fillet {

    border-radius: 5px;

}

/\* 圓 \*/

.circle {

    /\*寬高相等才能成爲圓,但從視覺上來看，width比height多5px更爲好看\*/

    width: 50px;

    height: 45px;

    border-radius: 50%;

}

</style>

複製代碼

 3、總結

  

　　功能很少，更多的是樣式的設計和顏色的搭配。

 如何解決首屏加載問題？

\- 配置打包工具，將組件分別打包到不一樣的js代碼塊中

 build/webpack.base.conf.js

   output:{

     path: config.build.assetsRoot,

      filename:’\[name\].js’,

     //新增

chunkFilename:」\[name\].js」,

publicPath: process.env.NODE\_ENV===」production」

  ?config.build.assetsPublicPath

  :config.dev.assetsPublicPath

}

  

\- 當路由請求到該組件時，才動態加載組件的內容

const Index=()=>import(‘@/views/Index.vue’) // 當用戶在vue中請求當前組件對應的路由地址時，由vue-router自動調用加載函數，動態請求Index.vue組件對象

  

\- 服務端渲染SSR