差不多快兩年沒碰過技術了，人生一直在各種試錯。不過我堅信走過更多的路，才能找到更好的自己～～

19年的第一場面試，忐忑不安，昨晚盡然還失眠了-.- 儘管面試官很和藹，但表現並不是很好，如果10分滿分那隻能給5分，回來查詢資料後發現問的都是基礎的問題，不過是換了一種形式。

記錄一下面試問題。

1、對於頁面佈局有沒有什麼比較好的地方？

說實話對於這個問題我真的是一臉懵逼，頁面佈局就頁面佈局唄，什麼叫有什麼比較好的地方？沒辦法就說了我覺得bootstrap的佈局就很不錯，都是自適應響應式的。

參考答案：
常用佈局方式
三列布局
特點
a、三列布局，中間寬度自適應，兩邊定寬；
b、中間欄要在瀏覽器中優先展示渲染；
c、允許任意列的高度最高；
d、要求只用一個額外的DIV標籤；
e、要求用最簡單的CSS、最少的HACK語句；

多欄佈局
a、欄柵格系統：就是利用浮動實現的多欄佈局，在bootstrap中用的非常多。
b、多列布局：柵格系統並沒有真正實現分欄效果（如word中的分欄），CSS3為了滿足這個要求增加了多列布局模組

彈性佈局（Flexbox）
CSS3引入了一種新的佈局模式——Flexbox佈局，即伸縮佈局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分佈一個容器裡專案佈局，即使它們的大小是未知或者動態的，這裡簡稱為Flex。

優點：Flexbox佈局常用於設計比較複雜的頁面，可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動佈局實現元素位置的定義以及重置元素的大小。

主要特點：
a、螢幕和瀏覽器視窗大小發生改變也可以靈活調整佈局；
b、可以指定伸縮專案沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮專案的大小；
c、可以指定伸縮專案沿著主軸或側軸將伸縮容器額外空間，分配到伸縮專案之前、之後或之間；
d、可以指定如何將垂直於元素佈局軸的額外空間分佈到該元素的周圍；
e、可以控制元素在頁面上的佈局方向；
f、可以按照不同於文件物件模型（DOM）所指定排序方式對螢幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文件流先後順序重排伸縮專案順序。

瀑布流佈局
瀑布流佈局是流式佈局的一種。視覺表現為參差不齊的多欄佈局，隨著頁面滾動條向下滾動，這種佈局還會不斷載入資料塊並附加至當前尾部。

優點
a、有效的降低了介面複雜度，節省了空間：我們不再需要臃腫複雜的頁碼導航連結或按鈕了。
b、對觸屏裝置來說，互動方式更符合直覺：在移動應用的互動環境當中，通過向上滑動進行滾屏的操作已經成為最基本的使用者習慣，而且所需要的操作精準程度遠遠低於點選連結或按鈕。
c、更高的參與度：以上兩點所帶來的互動便捷性可以使使用者將注意力更多的集中在內容而不是操作上，從而讓他們更樂於沉浸在探索與瀏覽當中。

缺點
a、有限的用例：
無限滾動的方式只適用於某些特定型別產品當中一部分特定型別的內容。
例如，在電商網站當中，使用者時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助使用者更穩妥和準確的回到某個特定的列表頁面當中。
b、額外的複雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產品中進行不同程度的定製化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和裝置相容性等方面的表現也參差不齊，你必須做好充分的測試與調整工作。
c、再見了，頁尾：
如果使用了比較典型的無限滾動載入模式，這就意味著你可以和頁尾說拜拜了。
最好考慮一下頁尾對於你的網站，特別是使用者的重要性;如果其中確實有比較重要的內容或連結，那麼最好換一種更傳統和穩妥的方式。
千萬不要耍弄你的使用者，當他們一次次的瀏覽到頁面底部，看到頁尾，卻因為自動載入的內容突然出現而無論如何都無法點選頁尾中的連結時，他們會變的越發憤怒。
d、集中在一頁當中動態載入資料，與一頁一頁的輸出相比，究竟那種方式更利於SEO，這是你必須考慮的問題。對於某些以型別網站來說，在這方面進行冒險是很不划算的。
e、關於頁面數量的印象：
其實站在使用者的角度來看，這一點並非負面;不過，如果對於你的網站來說，通過更多的內容頁面展示更多的相關資訊(包括廣告)是很重要的策略，那麼單頁無限滾動的方式對你並不適用。

流式佈局（Fluid）
固定佈局和流式佈局在網頁設計中最常用的兩種佈局方式。固定佈局能呈現網頁的原始設計效果，流式佈局則不受視窗寬度影響，流式佈局使用百分比寬度來限定佈局元素，這樣可以根據客戶端解析度的大小來進行合理的顯示。

響應式佈局
一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。

優點
a、面對不同解析度裝置靈活性強
b、能夠快捷解決多裝置顯示適應問題

缺點
a、相容各種裝置工作量大，效率低下
b、程式碼累贅，會出現隱藏無用的元素，載入時間加長
c、其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
d、一定程度上改變了網站原有的佈局結構，會出現使用者混淆的情況

固定佈局
也就是positon：absolute的情況

2、頁面之間是如何傳遞引數的（上一頁的引數傳遞到下一頁）

這個其實就是cookie和weblStorage的東西，複習的時候看過，不過看的是他們之間的區別，沒想到換了一種方式來問，哎。

1、url攜帶引數

優點：取值方便，可以跨域，利於頁面分享，沒有環境限制。
缺點：url攜帶引數值的長度有限制。

2、cookie

cookie能夠儲存少量資料到客戶端的磁碟中，特定的網頁之間是可以共享cookie中的資料。

優點：可以在同源內的的任意網頁中訪問，儲存資料的週期可以自由設定。
缺點：有長度限制。

3、H5中的localStorage物件

優點：儲存空間大，有5M儲存空間。
缺點：不是所有瀏覽器都支援。

4、設定視窗之間的父子關聯關係

window.open可以開啟一個新的頁面，在新的頁面中可以通過window.opener獲取父頁面的視窗物件，從而可以獲取父視窗中的引數。

優點：取值方便.只要window.opener指向父視窗,就可以訪問所有物件.不僅可以訪問值,還可以訪問父視窗的方法.值長度無限制。

缺點:兩視窗要存在著關係.就是利用window.open開啟的視窗。不能跨域。

3、頁面是如何換禎的？比如中英文版本的切換，網站整體色調的切換是如何實現的？

不是很清楚，就隨便說的，我回答的是寫兩套css方案，使用者選擇不同色調的時候呼叫不同的js來選擇不同的css。翻譯的話我說的是js裡有可以直接翻譯-.- 其實早知道說用外掛就可以實現好了-.-

翻譯：
1、使用谷歌整站翻譯Api
2、使用js動態替換內容
1）在使用者點選切換語言後，把選擇的語言版本儲存在cookie中
2）在包含靜態文字的標籤中，新增一個屬性：set-lan=”html:name”
屬性值中的html代表內容的位置，name代表要替換的文字的標識
3）定義3個語言的標識+內容的json字串
4）遍歷帶set-lan屬性的標籤，進行文字替換
3、使用外掛

換膚：
思路：載入對應的css，後加載的css覆蓋預設顯示樣式，即可達到換主題的目的。可以先將預設主題寫到頁面中，然後通過js觸發事件載入其他主題的css。後加載的css會覆蓋之前樣式從而達到切換主題的效果。利用cookie保持選中的cookie避免切換到其他頁面時又變回預設主題。
1）準備兩份不同主題的css
2）使用js實現切換(載入)css的方法
生成不同主題的css：
最簡單的調整顏色的方法是使用適當的工具來生成css，比如less，scss等

4、你瞭解過xml嗎？json與xml有什麼區別？json的格式是什麼？用json有什麼好處？對於後臺返回的json資料如何處理，如何取到返回值中的資料？

複習的時候看過，有點緊張，只說了json比較小，效率比較高-.-

xml：指可擴充套件標記語言，被設計用來傳輸和儲存資料。

xml格式：樹形結構

json：是儲存和交換文字資訊的語法，是輕量級的文字資料交換格式。

json格式：以鍵值對的形式存在，key:value 使用冒號分隔，使用逗號分隔，括號儲存物件，括號儲存陣列，如：{“age”:“12”, “name”:“back”,“phone”};

用 json有什麼好處：json 比 xml 更小、更快，更易解析
對於後臺返回的json資料如何處理。json是輕量級的，檔案都是壓縮的，佔用寬頻小，二xml是重量級的。

對於後臺返回的json資料如何處理：json 文字格式在語法上與建立 javascript物件的程式碼相同。由於這種相似性，無需解析器，javascript 程式能夠使用內建的 eval() 函式，用 json 資料來生成原生的 javascript 物件。

如何取到返回值中的資料：其實我覺得是沒啥處理的，因為javascript能夠使用內建的eval()函式，使json資料直接生成原生的javascript物件。

分別在哪裡用到了json和xml：一般現在移動APP介面都採用JSON，因為json佔寬頻小，在微信開發裡，微信介面都是JSON格式的， 微信事件推送是XML。

5、對於vue的model的使用有沒有什麼注意事項？

答：不太清楚****（心想本次面試以失敗告終）

暫時沒找到答案，找到後更新。