继续 上一节：面试阿里、网易、滴滴前端碰到的问题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
jsonp原理、postMessage原理
- jsonp原理：通过script动态插入发起请求
- postMessage :http://www.webhek.com/post/window-postmessage-api.html
网友评论