人人网面试经验

时间  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教程