人人網面試經驗

時間  2019-11-06
標籤 人網 面試 經驗 欄目 快樂工作 简体版
原文   原文鏈接

 

人人公司的一面仍是比較而基礎的，基本上都是以前已經複習好到了的知識點（可是因爲個人簡歷上寫了熟悉c++和sql，因此對於這兩點沒有作準備，而後面試完就把簡歷上這兩條給刪了）javascript

 

js設計模式（這點我在簡歷上寫了）

以前有看過js設計模式這本書，因此仍是記得幾種設計模式，如今列舉以下css

正如您在閱讀的這份文檔，它使用簡單的符號標識不一樣的標題，將某些文字標記爲粗體或者斜體，建立一個連接或一個腳註[^demo]。下面列舉了幾個高級功能，更多語法請按Ctrl + /查看幫助。html

工廠模式

工廠模式在《JavaScript高級程序設計》中，被列爲是第一種構造對象實例的方法，代碼以下：html5

function CreatePerson(name,age,sex) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sex = sex;
    obj.sayName = function(){
        return this.name;
    }
    return obj;
}

工廠模式是爲了解決多個相似對象聲明的問題;也就是爲了解決實列化對象產生重複的問題 
優勢：能解決多個類似的問題。 
缺點：不能知道對象識別的問題(對象的類型不知道)。java

單體（單例）模式

單例模式是指在實例不存在的時候，能夠經過一個方法建立一個類來實現建立類的新實例，可是若是該實例已經存在，它只會返回該對象的引用jquery

基本的代碼模式以下：c++

// 單體模式
var Singleton = function(name){
    this.name = name;
    this.instance = null;
};
Singleton.prototype.getName = function(){
    return this.name;
}
// 獲取實例對象
function getInstance(name) {
    if(!this.instance) {    //這裏是關鍵，經過這個來限制單體
        this.instance = new Singleton(name);
    }
    return this.instance;
}
// 測試單體模式的實例
var a = getInstance("aa");
var b = getInstance("bb");

模塊模式

模塊模式是使用閉包封裝「私有」狀態和組織。它提供了一種包裝混合公有/私有方法和變量的方式，防止其泄露至全局做用域，並與別的開發人員的接口發生衝突。經過該模式，只需返回一個公有的API，而其餘的一塊兒都維持在私有閉包中面試

基本代碼以下sql

var singleMode = (function(){
    // 建立私有變量
    var privateNum = 112;
    // 建立私有函數
    function privateFunc(){
        // 實現本身的業務邏輯代碼
    }
    // 返回一個對象包含公有方法和屬性
    return {
        publicMethod1: publicMethod1,
        publicMethod2: publicMethod1
    };
})();

注意：最後只容許經過singleMode這個變量訪問裏面的私有變量json

觀察者模式

觀察者模式( 又叫發佈者-訂閱者模式 )是指一個對象維持一系列依賴於它（觀察者）的對象，將有關狀態的任何變動自動通知給它們，下面是在jquery中的實現：

(function ($) {

    var o = $({});

    $.subscribe = function () {
        o.on.apply(o, arguments);
    };

    $.unsubscribe = function () {
        o.off.apply(o, arguments);
    };

    $.publish = function () {
        o.trigger.apply(o, arguments);
    };

} (jQuery));

詳細的能夠了解《javascript設計模式》中的第9章第五小節，還能夠戳連接 
優勢：（1）支持簡單的廣播通訊，自動通知全部已經訂閱過的對象； 
（2）頁面載入後發佈者很容易與訂閱者存在一種動態關聯，增長了靈活性； 
（3）發佈者與訂閱者之間的抽象耦合關係可以單獨擴展以及重用。 
缺點：（1）建立訂閱者自己要消耗必定的時間和內存，並且當你訂閱一個消息後，也許此消息最後都未發生，但這個訂閱者會始終存在於內存中； 
（2）雖然能夠弱化對象之間的聯繫，但若是過分使用的話，對象和對象之間的必要聯繫也將被深埋在背後，會致使程序難以跟蹤維護和理解。

裝飾者模式

一般，裝飾者提供了將行爲動態添加至系統的現有類的能力，其想法是，裝飾自己對於類原有的基本功能來講並非必要的，不然，它就能夠被合併到超類自己了

function ABicycle(){ }
ABicycle.prototype = {
    wash : function(){ },
    ride : function(){ },
    getPrice : function(){ 
        return 999; 
    }
}
function bicycleBell( bicycle ){
    var price= bicycle.getPrice();

    bicycle.bell = function(){
        console.log("ding! ding! ding!");
    };

    bicycle.getPrice = function(){   //從新裝飾了該對象
            return price + 100;
    };
    return bicycle;
}
var bicycleA = new ABicycle();
bicycleA = bicycleBell( bicycleA );

注意：裝飾者模式有以下特色： 
1. 不修改原對象的本來結構來進行功能添加。 
2. 裝飾對象和原對象具備相同的接口，可使客戶以與原對象相同的方式使用裝飾對象。 
3. 裝飾對象中包含原對象的引用，即裝飾對象爲真正的原對象在此包裝的對象。

跨域的幾種方式

這個基本上是耳熟能詳的面試題了，詳細能夠戳連接 
面試官具體問了jsonp的優缺點，總結以下：

優勢是：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都 能夠運行，不須要XMLHttpRequest或ActiveX的支持；而且在請求完畢後能夠經過調用callback的方式回傳結果。

點則是：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題。

對html5的理解

這個比較寬泛，我的以爲就是從html5的語義化和新增特性入手，這裏有一個連接 是介紹html5的新特性的

如何讓一個div實現水平垂直居中

文字，圖片以及內聯元素

span{
      text-align:center;
    }

對於已經設置寬高的元素

div{
    margin:0 auto;
    height:200px; 
    width:200px;
    line-height:200px; //和height同樣
   }

多行文字

p{
     width:200px;
    height:200px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

浮動元素

<div class="parent">
        <div class="child"></div>
   </div>

能夠設置css樣式以下：

.parent{  //不須要設置父元素的寬高
    position:relative; 
    float:left;
    left:50%;
 }
 .child{
    heigth:200px;
    width:200px;
    float:left;
    left:50%;
    position:relative;
  }

絕對定位和fixed定位的元素

有以下兩種方式：

.one{
               position:absolute;
               width:200px;
               height:200px;
               top:50%;
               left:50%;
               margin-left:-100px;  //寬度的一半
               margin-top:-100px;  //高度的一半
           }
        //第二種方式
        .two{
               position:absolute/fixed;
               width:140px;
               height:140px;
               top:0;
               left:0;
               bottom:0;
               right:0;
               margin:auto;
            }

行內元素和塊級元素的區別

行內元素與塊級元素直觀上的區別

(1) 行內元素會在一條直線上排列，都是同一行的，水平方向排列 
塊級元素各佔據一行，垂直方向排列。塊級元素重新行開始結束接着一個斷行。 
(2) 塊級元素能夠包含行內元素和塊級元素。行內元素不能包含塊級元素。 
(3) 行內元素與塊級元素屬性的不一樣，主要是盒模型屬性上

jquery中的選擇器

當咱們使用選擇器的時候$(selector,content)，就會執行init(selectot,content)，咱們看看inti中是怎樣執行的：

if ( typeof selector == "string" )
{
    //正則匹配，看是否是HTML代碼或者是#id
    var match = quickExpr.exec( selector );
    //沒有做爲待查找的 DOM 元素集、文檔或 jQuery 對象。
    //selector是#id的形式
    if ( match && (match[1] || !context) )
    {
        // HANDLE: $(html) -> $(array)
        //HTML代碼,調用clean補全HTML代碼  
         if ( match[1] ){
            selector = jQuery.clean( [ match[1] ], context );
        }
        // 是: $("#id")
        else {
            //判斷id的Dom是否是加載完成
            var elem = document.getElementById( match[3] );
            if ( elem ){
                if ( elem.id != match[3] )
                return jQuery().find( selector );
                return jQuery( elem );//執行完畢return
            }
            selector = [];
        }
        //非id的形式.在context中或者是全文查找
    }
    else{
        return jQuery( context ).find( selector );
    }
}

這裏就說明只有選擇器寫成

$('#id')的時候最快，至關於執行了一次getElementById，後邊的程序就不用再執行了。固然每每咱們須要的選擇器並非這麼簡單，好比咱們須要id下的CSS爲className， 有這樣的寫法$('#id.className')和$('#id').find('.className');這兩種寫法的執行結果都是同樣的，好比<div id=」id」><span class=」className」></span></div>，返回的確定都是<span class=」className」></span>，可是執行的效率是徹底不同的。

在分析一下上邊的代碼，若是不是$(‘#id’)這樣的簡單選擇器的話，都會執行find函數，那咱們再看看find究竟是作用的：

find: function( selector ) {
    //在當前的對象中查找
    var elems = jQuery.map(this, function(elem){
        return jQuery.find( selector, elem );
    });
    //下邊的代碼能夠忽略，只是作一些處理
    //這裏應用了js的正則對象的靜態方法test
    //indexOf("..")須要瞭解一下xpath的語法,就是判斷selector中包含父節點的寫法
    //本意就是過濾數組的重複元素
    return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?
        jQuery.unique( elems ) :
        elems );
}

詳細請看連接

localstorage 和cookie的區別

這個也是老生常談的話題了，在這裏不列出了，詳細看連接

此次的面試感受仍是沒有問得太深，都是以前複習過的，只有設計模式還有jquery選擇器這二者以前沒有怎麼看過

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程