试题锦集

1.什么是css sprite?优缺点？

CSS Sprite是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，这样，在访问页面时，就只需
请求一次就可以了，而不必一次次向服务器发送请求。

它的原理就是把见面中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”,”background-repeat”,
”background-position”的组合进行背景定位，实现多个位置的背景，一张图来搞定。

优点

1 减少网页的http请求，提高页面性能
2 减少图片字节
3 解决比较头疼的命名问题，以前好多张一个个想名字，现在一个名字就搞定
4 更换整个网页风格时更方便，更易维护

缺点

1 图片合并时，要把多张有序合理合并成一张，还要留好足够的空间，防止板块内出现不必要的背景，如果在宽屏，高分辨率的屏幕下的
自适应页面，图片如果不够宽，很容易出现背景断裂
2 拼合图片的时间成本加大，CSS Sprites在开发时，需要通过photoshop或其他工具测量计算每一个背景单元的精确位置
3 编码和维护的时间成本会增加，CSS Sprites在维护时，如果页面背景有少许改动，一般就要改这张合并的图片，如果在原来的地方放不
下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。相对于一个可以轻松计算出来状态位置的简单按钮来说，
大型的 sprite 会导致无尽地测试和图片状态的重新摆放。
4 不是所有图片都是背景，背景图片应该留给按钮以及用来装饰元素，而用来传达重要信息的图像应该内联在XHTML 中。


由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成。为提高页面性能目前普遍
采用的实现方式是将与页面结构相关的需要用到图片的视觉元素集中在一个PNG图片上，然后通过CSS样式将其应用到页面中，我们称这个图片
为Sprite图片。由于这个图片上经常要集中较多的视觉元素，在用PNG格式存储时难免会产生失真而影响图片质量。这个时候就需要视觉设
计师帮助前端开发工程师对Sprite图片进行优化，这样做的好处是不仅能提升图片质量，还能达到减小文件大小的效果，可谓一举两得。

Sprite图片的优化方式有很多种，比如通过索引色排序进行颜色的删减和替换，或是直接通过像素描绘进行优化。设计师可以根据具体的场景进行选择和处理。

2.

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

输出结果:10个10
原因：由于setTimeout是异步的, 因此我们将这个for循环拆成2个部分， 第一个部分专门处理 i 值的变化, 第二个部分专门来做setTimeout。
由于循环中的变量 i 一直在变, 最终会变成10, 而循环每每执行setTimeout时, 其中的方法还没有真正运行, 等真正到时间执行时, 

i 的值已经变成 10 了! i 变化的整个过程是瞬间完成的, 总之比你异步要快, 就算你setTimout是0毫秒也一样, 会先于你执行完成.

那么为什么setTimeout中匿名function没有形成闭包呢?因为setTimeout中的匿名function没有将 i 作为参数传入来固定这个变量的值, 
而是直接引用了外部作用域中的 i， 因此如果我们定义一个外部函数, 让 i 作为参数传入即可"闭包"我们要的变量了!!

3.阶乘函数

function factorial(num){
            if(num<=1){
               return 1;
            }else{
               return num*arguments.callee(num-1);
            }
}

函数内部有两个特殊对象，arguments和this，arguments包含传入函数中的所有参数，并且有callee的属性，是个指针，指向拥有这个arguments对象的函数

阿里航旅事业部的面试题
1.CSS 盒子模型，绝对定位和相对定位

1）清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

清除浮动可以理解为打破横向排列。
浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，
    当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容
的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动的关键字是clear，官方定义如下：
语法：
   clear : none | left | right | both
   取值：
   none  :  默认值。允许两边都可以有浮动对象
   left  :  不允许左边有浮动对象
   right :  不允许右边有浮动对象
   both  :  不允许有浮动对象

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。
建议使用相对完美的:使用:after伪类动态的嵌入一个用于清除浮动的元素，文档结构更加清晰。

方法一：使用带clear属性的空元素：
     在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
     优点：简单，代码少，浏览器兼容性好。缺点：代码不够优雅，后期不容易维护。

    .news {
      background-color: gray;
      border: solid 1px black;
      }
    .news img {
      float: left;
      }
    .news p {
      float: right;
      }
    .clear {
      clear: both;
      }
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>
    </div>

方法二：使用CSS的overflow属性
    通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，
    达到了清理浮动的效果。缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；

    .news {
      background-color: gray;
      border: solid 1px black;
      overflow: hidden;
      *zoom: 1;
      }
    .news img {
      float: left;
      }
    .news p {
      float: right;
      }
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>

方法三：使用CSS的:after伪元素
      给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

    .news {
      background-color: gray;
      border: solid 1px black;
      }
    .news img {
      float: left;
      }
    .news p {
      float: right;
      }
    .clearfix:after{
      content: "020"; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;  
      }
    .clearfix {
      /* 触发 hasLayout */ 
      zoom: 1; 
      }
    <div class="news clearfix">
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>

方法四：使用邻接元素处理，什么都不做，给浮动元素后面的元素添加clear属性。

    .news {
      background-color: gray;
      border: solid 1px black;
      }
    .news img {
      float: left;
      }
    .news p {
      float: right;
      }
    .content{
      clear:both;
      }
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="content"></div>
    </div>

方法五：给浮动的元素的容器添加浮动
     给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

2）如何保持浮层水平垂直居中

通过使用百分比绝对定位,与外补丁负值的方法，负值的大小为其自身宽度高度的一半
例如，如果某div高度为200px，要使得该div垂直居中，只要设置"position:absolute;top:50%;margin-top:-100px"

3）position 和 display 的取值和各自的意思和用法

position：
static（默认值）——没有定位，元素出现在正常的流中
absolute（绝对定位）——参照浏览器的左上角通过top,right,bottom,left（简称TRBL）定位。可以选取具有定位的父级对象或者body坐标原点进行定位，
也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。
relative（相对定位）——相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位
置，只是视觉上相对原来的位置有移动。
fixed——相对于浏览器窗口进行定位。
inherit——从父元素继承 position 属性的值。

display：
none——此元素不会被显示。
block——此元素将显示为块级元素，此元素前后会带有换行符。
inline——默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block——行内块元素
inherit——从父元素继承 display 属性的值。

4）样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验

CSS样式的优先级别：
优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式
优先原则二：id声明（#开头的样式）> class声明（.开头的样式）>标签声明(类似p开头)
优先原则三：数量取胜。如果同一个样式声明即一个大括号{}由多个# .或 div组成，则权重按出现符号的量级增加
优先原则四：‘!important’表示某条属性（声明）具体最高的优化级。相当于无限重量
优先原则五：近水楼台。行间样式优先级最大
http://www.cnblogs.com/qieqing/articles/1224085.html

在做页面布局时，为了解决css的冲突，我们可以根据样式引入的顺序，来解决css冲突。新添加的样式可使用 ！important，以覆盖前面的样式。

我们知道，一个成熟的网站需要有统一的风格，一致的用户体验，比如：网站的配色，字体的大小，交互行为一致等应该在设计之初就得到确定，而不是由个体开发者
来自由的定义。网站同时应存在可以提取出来公用的样式部分（如人人网中个人主页右侧的"最近来访"，"推荐"等处的容器和标题都是相同的展示效果）。那么我们就
可以把网站的字体大小，公共控制，共用模块的样式都抽离出来，作为单独的模块来处理。以此提高代码的重用率。

我认为一个项目的CSS可以拆分成2部分：公共CSS和业务CSS。我们在项目中抽出的这部分可以模块化的CSS就可以归类为公共CSS。这部分的代码命名不应涉及
到具体的业务，只应对其在模块中负责的具体逻辑负责。
对于业务CSS，我们需要有统一的命名。如一个网站中有如下几个栏目：文件，社区，社交关系等，在项目规划时，就需要把这块模块的名称定好，比如 文件-files,
社区-cmty(community简写)，这样开发人员在写样式时，就可以使用公用的前缀，.cmty-cmtydetail，而不会根据各自的想法，写成.community或
是.commu，这一点对于统一风格是尽为重要的，也方便备用人员接手工作。

2 . JavaScript 基础

1）JavaScript 里有哪些数据类型，解释清楚 null 和 undefined，解释清楚原始数据类型和引用数据类型。比如讲一下 1 和 Number(1) 的区别

1.数值型（Number）：包括整数、浮点数。
2.布尔型（Boolean）
3.字符串型（String）
4.对象（Object）
5.数组（Array）

6.空值(Null)
7.未定义（Undefined）

null 表示无值。这是一个对象，但是为空，typeof null 返回 'object' 。null 参与数值运算时其值会自动转换为 0
undefined : 表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性。 

原始数据类型和引用数据类型：ECMAScirpt 变量有两种不同的数据类型：基本类型，引用类型。也有其他的叫法，比如原始类型和对象类型。
基本的数据类型有：`number，boolean，string，undefined，null.（1）基本类型的访问是按值访问的，任何方法都无法改变一个基本类型的值
(2)比较是值的比较,只有在它们的值相等的时候它们才相等。
(3)基本类型的变量是存放在栈区的（栈区指内存里的栈内存）
.引用类型是数组和对象。引用类型可以拥有属性和方法，属性又可以包含基本类型和引用类型
(1)引用类型的值是可变的(2)引用类型的值是同时保存在栈内存和堆内存中的对象.*（3）引用类型的比较是引用的比较，换句话说就是比较两个对象的堆内存中的地址是否相同
在从一个变量向另一个变量赋值基本类型时，会在该变量上创建一个新值，然后再把该值复制到为新变量分配的位置上；当从一个变量向另一个变量赋值引用类型的值时，`var a = {}; var b = a;`同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中。引用类型的赋值其实是对象保存在栈区地址指针的赋值，因此两个变量指向同一个对象，任何的操作都会相互影响。

2）讲一下 prototype 是什么东西，原型链的理解，什么时候用 prototype

prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。
原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链, 我们称之为原型链. 原型链就是指对象上的proto链，
用 prototype 属性提供对象的类的一组基本功能。对象的新实例“继承”赋予该对象原型的操作。

3）函数里的this什么含义，什么情况下，怎么用。
this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）。
只能在函数内部使用

4）apply 和 call 什么含义，什么区别？什么时候用。
call, apply都属于Function.prototype的一个方法，相同点:两个方法产生的作用是完全一样的；
不同点:方法传递的参数不同，从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递；
当参数明确时可用call, 当参数不明确时可用apply给合arguments（所有的函数都有属于自己的一个arguments对象，它包括了函所要调用的参数。）

function print(a, b, c, d){
alert(a + b + c + d);
}

function example(a, b , c , d){
print.call(this, a, b, c, d);
print.apply(this, arguments);
print.apply(this, [a, b, c, d]);
}

example(”A” , “B” , “C”, “D”);

5）数组和对象有哪些原生方法，列举一下，分别是什么含义，比如链接两个数组用哪个方法，删除数组的质定项。

1.检测数组：Array.isArray(value) 支持IE9+，FF4，Safari5+，Opera 10.5+，Chrome 
2.转换方法：toString（），valueOf（） 
3.栈方法：后进先出，push()把参数添加到数组末尾，pop()方法从数组末尾移除最后一项并返回该项 
4.队列方法：先进先出，push()把参数添加到数组末尾，shift（）移除数组中的第一项并返回该项 
5.重排序方法： reverse()反转数组项顺序 ，sort()默认按升序排列数组项，
concat()连接两个或更多的数组
slice()基于当前数组中的一个或多个项创建一个新数组
splice()方法：向数组中部插入项，重要！！ 
   删除：splice（index，num） 要删除的第一项的位置和要删除的项数 
   插入：splice（index，0，）起始位置，要删除的项数0和要插入的项 
   替换：splice（index，num，）起始位置，要删除的项数，和替换的项 
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。arrayObject.join(分隔符)
indexOf（）从数组的某个位置开始向后查找，可返回某个指定的字符串值在字符串中首次出现的位置：stringObject.indexOf(substring, startpos)

3 . JavaScript 的面向对象

1）JS 模块包装格式都用过哪些，CommonJS、AMD、CMD、KMD。定义一个JS 模块代码，最精简的格式是怎样。

2）JS 怎么实现一个类。怎么实例化这个类。
基础的实现类的方法有：工厂方式（new Object），构造函数方法function Car(sColor, iDoors, iMpg) ，原型方式

function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors= 4;
Car.prototype.mpg= 23;
Car.prototype.showColor = function(){
   alert(this.color);
}

常用的两种方法：
（1）、混合的构造函数/原型方式

//创建对象
function Card(sID,ourName){
    this.ID = sID;
    this.OurName = ourName;
    this.Balance = 0;
}

Card.prototype.SaveMoney = function(money){
    this.Balance += money;
};

Card.prototype.ShowBalance = function(){
    alert(this.Balance);
};

//使用对象
var cardAA = new Card(1000,'james');
var cardBB = new Card(1001,'sun');

cardAA.SaveMoney(30);
cardBB.SaveMoney(80);

cardAA.ShowBalance();
cardBB.ShowBalance();    

（2）动态原型方法
动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。

//创建对象
function Card(sID,ourName){
    this.ID = sID;
    this.OurName = ourName;
    this.Balance = 0;
    if(typeof Card._initialized == "undefined"){
        Card.prototype.SaveMoney = function(money){
            this.Balance += money;
        };

        Card.prototype.ShowBalance = function(){
            alert(this.Balance);
        };
        Card._initialized = true;
    }
}

//使用对象
var cardAA = new Card(1000,'james');
var cardBB = new Card(1001,'sun');

cardAA.SaveMoney(30);
cardBB.SaveMoney(80);

cardAA.ShowBalance();
cardBB.ShowBalance();

new操作符紧跟你所定义的函数来创建一个新的类的实例，
更多见：http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html

3）是否了解自定义事件。jQuery里的fire函数是什么意思，什么时候用。
当代码中存在多个部分在特定时刻交互的情况下，自定义事件就非常有用了，实现了一种灵活的可扩展编程接口，使用自定义事件有助于解耦相关事件，保持功能的隔绝。

4）说一下了解的js 设计模式，解释一下单例、工厂、观察者。
单例模式的定义是产生一个类的唯一实例，它用来划分命名空间。使用单体的方法就是用一个命名空间包含自己的所有代码的全局对象

工厂就是把成员对象的创建工作转交给一个外部对象，简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 举个例子：你有一个大的功能要做，其中有一部分是要考虑扩展性的，那么这部分代码就可以考虑抽象出来，当做一个全新的对象做处理。好处就是将来扩展的时候容易维护 - 只需要操作这个对象内部方法和属性，达到了动态实现的目的。非常有名的一个示例 - XHR工厂

观察者（Observer）模式：定义对象间的一种一对多的依赖关系，以便当一个对象的状态发生 改变时，所有依赖于它的对象都得到通知并自动刷新。 观察者模式中存在两个角色,观察者和被观察者。在DOM的编程环境中的高级事件模式中，事件监听器说到底就是一种内置的观察者。事件处理器(handler)和时间监听器(listener)并不是一回事，前者就是一种把事件传给与其关联的函数的手段，而在后者中，一个时间可以与几个监听器关联，每个监听器都能独立于其他监听器而改变

5）ajax 跨域有哪些方法，jsonp 的原理是什么，如果页面编码和被请求的资源编码不一致如何处理？