面试阿里、网易、滴滴前端碰到的问题2

继续 上一节：面试阿里、网易、滴滴前端碰到的问题1: http://www.jianshu.com/p/e593fbb36ab1

CSS

** 对栅格的理解**
一个栅格布局需要3部分组成——容器（container），行（row），列（column，也可称为栅),例如bootstrap中就包含了这三部分

<div class="container-fluid">
  <div class="row">
          <div class="col-md-8">.col-md-8</div>
　　      <div class="col-md-4">.col-md-4</div>
  </div>
</div>

• 每一个“row”代表一行，而内部的“col-md-数字”代表一个单元格；
  Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；
  合理的选择单元格的数字配置，再往单元格中添加我们想要的内容，这样一个栅格系统就完成了！
• 可以用bootstrap的删格系统实现响应式开发

.col-xs-　　无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
.col-sm-　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
.col-md-　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
.col-lg-　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；

（水平）居中有哪些实现方式

• CSS实现水平和垂直居中
  要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
• jQuery实现水平和垂直居中：一样的原理

$(window).resize(function(){ 
     $(".mydiv").css({ 
         position: "absolute", 
         left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
     });        
}); 

移动端1像素边框问题

由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点；
所以 border: 1px 在移动端会渲染为 2px 的边框；

• 第一种：transform:scale
  使用伪类 :after 或者 :before 创建 1px 的边框，然后通过 media 适配不同的设备像素比，然后调整缩放比例，从而实现一像素边框
• 这种办法的边框并不是真正的 border，而是高度或者宽度为 1px 的块状模型，所以这种办法不能做出圆角，一般都用来画分割线

//首先用伪类创建边框
.border-bottom{
    position: relative;
    border-top: none !important;
}

.border-bottom::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
//然后通过媒体查询来适配
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

• 第二种：viewport
  网页的内容都渲染在 viewport 上，所以设备像素比的差异，直接影响的也是 viewport 的大小；
  通过 js 获取到设备像素比，然后动态添加 <meta> 标签

<script type="text/javascript">
   (function() {
       var scale = 1.0;
       if (window.devicePixelRatio === 2) {
           scale *= 0.5;
       }
       if (window.devicePixelRatio === 3) {
           scale *= 0.333333;
       }
       var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
       document.write(text);       
    })();
</script>

JavaScript

图片懒加载

• 图片懒加载几步：
  • 把真正的图片地址存在自定义属性上
  • 当图片满足加载条件的时候，创建临时的img对象校验图片地址的正确性；
  • 地址正确，进入onload事件，把正确地址赋值src；不正确，进入onerr;
  • 注意性能优化：释放没用的临时图片对象

实现页面加载进度条

我的实现原理：记录下当前页面需要加载哪些图片和js；分别在每个加载js和图片的完成后，刷新一次进度条；

num++;
self.loadBar.css("width",num/loadData.length*100+"%");

事件委托

• 如果同一个容器中，有n多个元素都要发生某个行为，我们可以把这个行为委托给他们共同的父级； 事件委托是对事件冒泡的运用；
• 作为的例子：
  • 删除留言
  • 多级菜单
  • 百度搜索等

实现extend函数

• 本质：对象的遍历和克隆

为什么会有跨域的问题以及解决方式

• 为什么会有跨域：简单地理解就是因为JavaScript同源策略的限制。
  如 a.com 下的js 无法和b.com 的js通信。这是浏览器为了安全而设定的策略；
• 只有域名相同才不会有跨域的情况。
• 常见的解决方案：
  • jsonp 跨域访问接口：需要后台提供jsonp接口
  • Access-Control-Allow-Origin

//js部分
$.ajax({  
    url: "http://192.168.2.229:8091/myTest/hellow/index",  
    type: "POST",  
    crossDomain: true,  
    dataType: "json",  
    success: function(result) {  
        alert(JSON.stringify(result));  
    },  
    error: function(xhr, status, error) {  
    alert(status);  
    }  
});  
//服务器端
response.addHeader( "Access-Control-Allow-Origin", "http://192.168.2.229:8020" )  

• 使用HTML5 postMessage http://www.webhek.com/post/window-postmessage-api.html

• 更多解决方案： 参考文献：http://www.jianshu.com/p/01654a4da9e5

jsonp原理、postMessage原理

• jsonp原理：通过script动态插入发起请求
• postMessage :http://www.webhek.com/post/window-postmessage-api.html