學習的前端技術棧與面試雜記

時間 2019-11-20

原文原文鏈接

將來將要學習的技術棧：

Vue （必修先學）
React（能夠晚點學）
react-native（能夠最後學）
Node.js（加分項先學）
angluar（能夠最後學）
Webpack（要學）
微信小程序開發（必修先學）

之前在公司雖然算的上是全棧，可離職以後發現這個社會更須要的是在一方面頂尖的人才，流水線式的生產，會的多而不精反而成了劣勢，從今年開始就從Web前端開始再來一遍，學精在邁下一步，把PHP先放下，Java放下，那些後端語言統統放下，從HTML5，CSS3最簡單的開始從頭來過，加油。javascript

如今Web面試常見問題：

3月15日今年面試開始的第一天css

ES6,7,8,9 的新特性，和經常使用技術html

JS 封裝繼承多態前端

JS 原型鏈，閉包，生命週期vue

Vue 的生命週期java

前端頁面的兼容問題與方法node

JS面向對象編程思想react

Ajax的運行原理和協議jquery

前端開發裏的設計模式（大佬級面試秒跪的那種，不必如今就研究）git

箭頭函數的this 始終指向全局對象（window）

SEO 優化

盒模型

Position屬性四個值：static、fixed、absolute和relative的區別和用法

vue生命週期圖表：

vue路由的鉤子函數

首頁能夠控制導航跳轉，beforeEach，afterEach等，通常用於頁面title的修改。一些須要登陸才能調整頁面的重定向功能。

beforeEach主要有3個參數to，from，next：

to：route即將進入的目標路由對象，

from：route當前導航正要離開的路由

next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉。

var obj = str.parseJSON(); //由JSON字符串轉換爲JSON對象

var obj = JSON.parse(str); //由JSON字符串轉換爲JSON對象

var last=obj.toJSONString(); //將JSON對象轉化爲JSON字符

var last=JSON.stringify(obj); //將JSON對象轉化爲JSON字符

GET 請求：通常用來進行查詢操做，url地址有長度限制，

請求的參數都暴露在url地址當中，若是傳遞中文參數，須要本身進行編碼操做，安全性較低。

POST 請求：沒法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

AJAX技術體系的組成部分：

HTML，css，dom，xml，xmlHttpRequest，javascript

JavaScript 的同源策略：

防止某個文檔或腳本從多個不一樣源裝載。所謂同源指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

搜索引擎優化

1、內部優化

（1）META標籤優化：例如：TITLE，KEYWORDS，DESCRIPTION等的優化；

（2）內部連接的優化，包括相關性連接（Tag標籤），錨文本連接，各導航連接，及圖片連接；

（3）網站內容更新：天天保持站內的更新(主要是文章的更新等)。

2、外部優化

（1）外部連接類別：友情連接、博客、論壇、B2B、新聞、分類信息、貼吧、知道、百科、站羣、

相關信息網等儘可能保持連接的多樣性；

（2）外鏈運營：天天添加必定數量的外部連接，使關鍵詞排名穩定提高；

（3）外鏈選擇：與一些和你網站相關性比較高,總體質量比較好的網站交換友情連接,鞏固穩定關鍵詞排名。

ajax的缺點：

一、ajax不支持瀏覽器back按鈕。

二、安全問題 AJAX暴露了與服務器交互的細節。

三、對搜索引擎的支持比較弱。

四、破壞了程序的異常機制。

五、不容易調試。

Position屬性四個值

一、static（靜態定位）：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

二、relative（相對定位）：生成相對定位的元素，經過top,bottom,left,right的設置相對於其正常（原先自己）位置進行定位。
可經過z-index進行層次分級，默認參照父級的原始點爲原始點，無父級則以文本流的順序在上一個元素的底部爲原始點。

三、absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
元素的位置經過 "left","top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。

四、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。

instanceof用於判斷引用類型屬於哪一個構造函數的方法

var arr=[];
arr instanceof Array //true
typeof arr //object, typeof是沒法判斷是不是數組的

事件委託 :

Jquery版：

$("目標們的父元素").on("click","目標對象",function(event){
               var target = $(event.target);
               something....
});

Js原生版：

window.onload = function(){
            var obj = document.getElementById("目標ID");
            obj.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                something......
            } 
        }

改進版：
   
 var lists = document.getElementById("lists");
         lists.addEventListener("click",function(event){
             var target = event.target;
             //防止父元素ul也觸發事件(防冒泡)
             if(target.nodeName == "LI"){
                something......
             }
        })

什麼是現實！這就是現實

「原生JavaScript精通麼？Jquery熟練麼？能用上面的兩個作出業務框架麼？常見的UI框架能不能快速上手？Ajax熟練麼？分得清同步異步適用的場景麼？HTTP協議瞭解麼？能用這個分析Ajax的應用麼？XML、Json會麼？被吹上天的react angular Vue會一個麼？前端自動化模塊化會麼？後端的語言你總得會一個吧，否則怎麼用接口？若是不會，孩子，說實話北京不缺這樣水平的，你找不到工做的。」

從此的人生一步也不能鬆懈了！

2019年3月16號

鵝廠：

window的onload事件和domcontentloaded誰先誰後？

new和instanceof的內部機制

flex佈局

瀏覽器緩存,HTTP緩存

typeof和instanceof的區別

從輸入URL到頁面加載發生了什麼？

URL到頁面加載：

一、瀏覽器的地址欄輸入URL並按下回車。

二、瀏覽器查找當前URL是否存在緩存，並比較緩存是否過時。

三、DNS解析URL對應的IP。

四、根據IP創建TCP鏈接（三次握手）。

五、HTTP發起請求。

六、服務器處理請求，瀏覽器接收HTTP響應。

七、渲染頁面，構建DOM樹。

八、關閉TCP鏈接（四次揮手）。

Javascript異步編程的4種方法：

1、回調函數

這是異步編程最基本的方法。

假定有兩個函數f1和f2，後者等待前者的執行結果。

　f1();

　　f2();

若是f1是一個很耗時的任務，能夠考慮改寫f1，把f2寫成f1的回調函數。

　　function f1(callback){

　　　　setTimeout(function () {

　　　　　　// f1的任務代碼

　　　　　　callback();

　　　　}, 1000);

　　}

執行代碼就變成下面這樣：

　　f1(f2);

採用這種方式，咱們把同步操做變成了異步操做，f1不會堵塞程序運行，至關於先執行程序的主要邏輯，將耗時的操做推遲執行。

回調函數的優勢是簡單、容易理解和部署，缺點是不利於代碼的閱讀和維護，各個部分之間高度耦合（Coupling），流程會很混亂，並且每一個任務只能指定一個回調函數。

2、事件監聽

另外一種思路是採用事件驅動模式。任務的執行不取決於代碼的順序，而取決於某個事件是否發生。

仍是以f1和f2爲例。首先，爲f1綁定一個事件。

　　f1.on('done', f2);

上面這行代碼的意思是，當f1發生done事件，就執行f2。而後，對f1進行改寫：

　　function f1(){

　　　　setTimeout(function () {

　　　　　　// f1的任務代碼

　　　　　　f1.trigger('done');

　　　　}, 1000);

　　}

f1.trigger('done')表示，執行完成後，當即觸發done事件，從而開始執行f2。

這種方法的優勢是比較容易理解，能夠綁定多個事件，每一個事件能夠指定多個回調函數，並且能夠「去耦合」（Decoupling），有利於實現模塊化。缺點是整個程序都要變成事件驅動型，運行流程會變得很不清晰。

3、Promises對象

Promises對象是CommonJS工做組提出的一種規範，目的是爲異步編程提供統一接口。

簡單說，它的思想是，每個異步任務返回一個Promise對象，該對象有一個then方法，容許指定回調函數。好比，f1的回調函數f2,能夠寫成：

　　f1().then(f2);

f1要進行以下改寫（這裏使用的是jQuery的實現）：

　　function f1(){

　　　　var dfd = $.Deferred();

　　　　setTimeout(function () {

　　　　　　// f1的任務代碼

　　　　　　dfd.resolve();

　　　　}, 500);

　　　　return dfd.promise;

　　}

這樣寫的優勢在於，回調函數變成了鏈式寫法，程序的流程能夠看得很清楚，並且有一整套的配套方法，能夠實現許多強大的功能。

好比，指定多個回調函數：

　f1().then(f2).then(f3);

再好比，指定發生錯誤時的回調函數：

　f1().then(f2).fail(f3);

並且，它還有一個前面三種方法都沒有的好處：若是一個任務已經完成，再添加回調函數，該回調函數會當即執行。因此，你不用擔憂是否錯過了某個事件或信號。這種方法的缺點就是編寫和理解，都相對比較難。

4、發佈/訂閱

上一節的"事件"，徹底能夠理解成"信號"。

咱們假定，存在一個"信號中心"，某個任務執行完成，就向信號中心"發佈"（publish）一個信號，其餘任務能夠向信號中心"訂閱"（subscribe）這個信號，從而知道何時本身能夠開始執行。這就叫作"發佈/訂閱模式"（publish-subscribe pattern），又稱"觀察者模式"（observer pattern）。

這個模式有多種實現，下面採用的是Ben Alman的Tiny Pub/Sub，這是jQuery的一個插件。

首先，f2向"信號中心"jQuery訂閱"done"信號。

　　jQuery.subscribe("done", f2);

而後，f1進行以下改寫：

　　function f1(){

　　　　setTimeout(function () {

　　　　　　// f1的任務代碼

　　　　　　jQuery.publish("done");

　　　　}, 1000);

　　}

jQuery.publish("done")的意思是，f1執行完成後，向"信號中心"jQuery發佈"done"信號，從而引起f2的執行。

此外，f2完成執行後，也能夠取消訂閱（unsubscribe）。

jQuery.unsubscribe("done", f2);

這種方法的性質與"事件監聽"相似，可是明顯優於後者。由於咱們能夠經過查看"消息中心"，瞭解存在多少信號、每一個信號有多少訂閱者，從而監控程序的運行。

異步編程概況：

回調函數：

優勢：簡單、容易理解

缺點：不利於維護，代碼耦合高

事件監聽(採用時間驅動模式，取決於某個事件是否發生)：

優勢：容易理解，能夠綁定多個事件，每一個事件能夠指定多個回調函數

缺點：事件驅動型，流程不夠清晰

發佈/訂閱(觀察者模式)：

相似於事件監聽，可是能夠經過‘消息中心’，瞭解如今有多少發佈者，多少訂閱者。

Promise對象

優勢：能夠利用then方法，進行鏈式寫法；能夠書寫錯誤時的回調函數；

缺點：編寫和理解，相對比較難

Generator函數

優勢：函數體內外的數據交換、錯誤處理機制

缺點：流程管理不方便

async函數

優勢：內置執行器、更好的語義、更廣的適用性、返回的是Promise、結構清晰。

缺點：錯誤處理機制