今天又經歷了兩場面試，先說說感受，比想象中的簡單。

第一家公司做了一套題目，面聊基本沒問技術，只是展示了一些線上作品，當場給的offer，只是期望薪資略高，hr說需要去申請，如果能申請下來下週三就可以入職啦。第二家公司簡單聊了聊簡歷上的專案，問了一些很基礎的問題，不過他們公司使用angular做的，而我只用過vue，雖然CTO說感覺差不多，不過覺得他們應該更希望找到一個有過angular經驗的人。

下面來說說關於筆試和麵試題目。

第一家公司筆試題如下：

1、js中阻止事件冒泡方式及區別

     方法1: 使用event.stopPropagation( )阻止事件冒泡。(對於IE瀏覽器，使用event.cancelBubble = true)

     方法2: 使用 event.target判斷當前點選的元素是否為this，通過this匹配只觸發所點選元素。

     方法3: 使用 event.preventDefault()取消預設事件

2、解釋說明jsonp的工作原理

       ajax請求受同源策略影響，不允許進行跨域請求，而script標籤src屬性中的連結卻可以訪問跨域的js指令碼，利用這個特性，服

務端不再返回JSON格式的資料，而是返回一段呼叫某個函式的js程式碼，在src中進行了呼叫，這樣實現了跨域。

3、一個URL，用js獲取引數的值，寫出例項

function getParse(){

       var url = window.location.href();

       var str =  url.split("?")[1]; //找到一個數組，通過?分割，取?後面的引數

       var items = str.split("&");//通過&分割成陣列

       var arr,name,value;

       for(var i=0;i<items.length,i++){ 

           arr = items[i].split("=");

           name = arr[0];

           value = arr[1];

           this[name] = value;

          } 

    }
 

4、Call() 和 Play() 的區別

       相同點：兩個方法產生的作用是完全一樣的，都用來改變當前函式呼叫的物件。

       不同點：呼叫的引數不同 ，apply最多隻能有兩個引數——this物件和一個數組，call可以接受多個引數，第一個引數與apply一樣，後面則是一串引數列表。

      總結： foo.call(this,arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

5、JQuery外掛的寫法，寫一個驗證表單輸入合法性的外掛，要求輸入以英文單詞開頭，數字結尾（要求正則進行匹配）

 (function($){

      var reg = /^[a-zA-Z].*\d$/; 

      var test = "[email protected]";

      reg.test(str);

})(jQuery)

6、var test =[["北京","上海","深圳"],["南京","無錫","蘇州"],["杭州","金華","上海"]]，把該函式組去重

function cutname(){

        var temp = [];

        for(vari=0;i<test.length:i++){
          var items[] = test[i].split(",");
              for(var j=0;j<items.length,j++){
                if(temp.indexOf(items[j]==-1)){
                  temp.push(items[i]);      
                 }
            }
         }
        return temp;
    }  

第二家公司面試問題：

1、display：none與visibility：hidden的區別

       display:none;會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間；

       visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見;

       display: none;是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；

       visibility: hidden;是繼承屬性，子孫節點消失由於繼承了hidden，通過設定visibility: visible;可以讓子孫節點顯示;

      修改常規流中元素的display通常會造成文件重排。修改visibility屬性只會造成本元素的重繪。

      讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

2、display的引數block、inline、inline-block、Flexible Box的區別

        1）display：block
        block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度。

        block元素可以設定width,height屬性。塊級元素即使設定了寬度,仍然是獨佔一行。

       block元素可以設定margin和padding屬性。
        2）display：inline

         inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。

        inline元素設定width,height屬性無效。

        inline元素的margin和padding屬性，水平方向的 margin-left, margin-right 會產生邊距效果；但豎直方向的 margin-top, margin-bottom 不會產生邊距效果。padding 屬性會產生邊距效果。

      3）display：inline-block

       簡單來說就是將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。

       比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

      4）Flexible Box

       意為"彈性佈局"，用來為盒狀模型提供最大的靈活性。設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。它即可以應用於容器中，也可以應用於行內元素。

3、對於響應式佈局有沒有什麼需要注意的地方

4、怎樣讓元素一個一個的橫著排列

         1）使用float浮動

         2）使用絕對定位

5、說說瀏覽器的相容性問題

         列舉幾個例子就ok

6、你知道你們後臺用的是什麼框架嗎？或者說整體用的是什麼框架？

        開放式題目，用的什麼答什麼就OK。