一些常见的面试题

发表于 2017-04-15 | 分类于 ReactNative

浏览器页面有哪三层构成，分别是什么，作用是什么？

构成：结构层、表示层、行为层

分别是： HTML CSS JavaScript

作用： HTML实现页面结构；CSS完成页面的表现与风格；JavaScript实现一些客户端的功能与业务。

什么是语义化的HTML？

直观的认识标签，对于搜索引擎的抓取有好处，用正确的标签做正确的事情。
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
搜素引擎的爬虫依赖标签来确定上下文和各个关键字的权重，利于SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

CSS居中（包括水平居中和垂直居中）

水平居中设置

内联元素居中

行内元素

设置 text-align:center;
Flex布局
设置display:flex; justify-content: center;(灵活运用，支持Chrome，Firefox，IE9+)
设置dispaly:table-cell 再设置 vertical-align:middle;

块级元素居中

定宽块状元素设置左右margin:auto;
不定宽块状元素
- 在元素外加入table标签（完整的，包括table,tbody,tr,td),该元素写在td内，然后设置
  margin: auto;
- 给该元素设置display: inline;
- 父元素设置position:relative和left: 50%, 子元素设置position:relative和left: 50%

垂直居中设置

使用position:absolute(fixed),设置left,top,marign-left,margin-top的属性；
使用position:fixed(absolute)属性， margin:auto这个不要忘记；
使用display: table-cell属性使内容垂直居中；
使用css3的新属性transfrom:translate(x,y)属性；
使用:before元素

CSS3有哪些新特性？

CSS3实现圆角（border-radius: 8px)，阴影（box-shadow: 10px)，对文字加特效（text-shadow），
线性渐变（gradient），变换（transform）【rotate/旋转, scale/缩放, translate/位移, skew/倾斜】

增加了更多的CSS选择器、多背景、 rgba。

事件委托是什么？

让利用时间冒泡的原理，让自己的所触发的时间，让他的父元素代替执行！

添加、删除、替换、插入到某个接点的方法

obj.appendChild()

obj.removeChild()

obj.replaceChild()

obj.insertBefore()

什么叫优雅降级和渐进增强？

优雅降级

Web站点在所有新式浏览器中都能正常工作，如果用户使用额是老式浏览器，则代码会检查以确认它们
是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些
无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强

从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面增加无害于基础
浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。

JavaScript原型，原型链？有什么特点？

原型对象也是普通的对象，是对象一个自带隐式的proto属性，原型也有可能有自己的原型，如果一个原型
对象的原型不为null的话，我们就称之为原型链
原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

如何阻止事件冒泡和默认事件

阻止冒泡

现代浏览器：e.stopPropagation();
低版本浏览器： e.cancelBubble = true;

阻止默认事件

现代浏览器： e.preventDefault();
低版本浏览器：return false;

IOS苹果和微信中音频和视频实现自动播放的方法

// 一般情况下，这样就可以自动播放了，但是一些奇葩IPone机不可以
document.getElementById('audio').play();
// 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener('WeixinJSBridgeReady',funciton () {
    document.getElementById('audio').play();
    document.getElementById('video').play();
}, false);

在GitHub上绑定域名

发表于 2017-04-15 | 分类于 GitHub

如果我们买了一个自己的域名，那么我们只需要简单的做几步就可以把我们github上的主页和我们的域名进行绑定了。

在主项目里新建一个文件CNAME，没有后缀哦，然后在里面写上自己需要绑定的域名

格式为：【自定义的名称.详细域名】
示例为： iswka.ishelloworld.cn
不要www前缀，iswka这是一个二级域名

然后去域名提供商，比如阿里云上去设置

找到域名，然后点击 “解析”
记录类型我们选择CNAME的方式，注意不要选择A记录(A记录指向的是IP) 。
然后修改主机记录
- 格式为：你的github名称
- 比如我的是 iswka
- 备注：这是我们自定义的二级域名
最后修改记录值

修改格式为：你的github名称.github.io
比如我的是：iswka.github.io
点击保存要不了10分钟就解析成功了,一般会立即生效。

访问域名

通过 “你的github名称.你的主域名”
比如我的 iswka.ishelloworld.cn 就可以访问我们自己的主页了。
备注：如果你访问的是github的地址(比如：http://iswka.github.io/)，那么也会跳转到你刚刚绑定的域名地址。

一些面试题01

发表于 2017-04-15 | 分类于 JavaScript

#####

1. var a = [];
a[0] = 0;
a[1] = 1;
a[4] = 4;
请问a.length的值是多少？a[3]的输出结果是什么？

答： 5 undefined

#####

2. function Foo() {
    var i = 0;
    return function () {
        console.log(i++);
    }
}
var f1 = Foo();
f2 = Foo();
f1();
f1();
f2();
console.log(i);
请问打印输出的结果是多少？

答： 0  // f1 = Foo()相当于f1赋值为函数Foo()的返回值f1 = function() {
    console.log(i ++);
    }

    1  // 因为f1在上一次的基础上又执行了一次函数，i ++ ,是在同一块内存中。

    0  

    报错  // i 为 Foo内部的变量，全局不可访问，全局中没有i变量所以会报错。

请解释GET/POST的区别

GET请求：请求的数据会附加在URL之后，以？分割URL和传输数据，多个参数用&链接。
URL的拜年吗格式采用的ASCLL编码，而不是Unicode，即事说所有的非ASCLL字符都要编码
之后再传输。

POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是
实际的传输数据。

因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。

传输数据的大小

在HTTP规范中，没有URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的
浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。

对于POST，由于不是URL传值，理论上是不会受到限制的，但是实际上各个服务器会规定对POST提交数据
大小进行限制，Apache、IIS都有各自的配置。

安全性

GET是Form的默认方法，安全性相对比较低。

请你描述一下cookies, sessionStorage 和 localStorage 的区别？

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求
之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器之间不必要地来回传递。

sessionStorage、 localStorage、 cookie 都是浏览器端存储的数据，其中 sessionStorage的
概念很特别，引入了一个”浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在
的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口
后，sessionStorage即被销毁。同时”独立”打开的不同窗口，即使是同一页面，sessionStorage对象也
是不同的。

cookies会发送到服务器端。其余两个不会。

Microsoft指出 Internet Explorer 8 增加 cookie 限制为每个域名50个，但IE7似乎也允许每个域名50个
cookie。 Firefox每个域名cookie限制为50个。Opera每个明月cookie限制为30个。Firefox和Safari
允许cookie多达4097个字节，包括名（name）、值（value）和等号。Opera允许cookie多达4096个字节，
包括名（name）、值（value）和等号。Internet Explorer允许 cookie多达4095个字节，包括：名（name）、
值（value）和等号。

Cookie

每个域名存储量比较小（各浏览器不同，大致4K)

所有域名的存储量有限制（各浏览器不同，大致4K)

有个数限制（各浏览器不同)

会随请求发送到服务器。

LocalStorage

永久存储

单个域名存储量比较大（推荐5MB，各浏览器不同）

总体数量无限制

SessionStorage

只在Session内有效

存储量更大（推荐没有限制，但实际上各浏览器也不同）

image 和 canvas 在处理图片的时候有什么区别？

image 是通过对象的形式描述图片的

canvas 通过专门的API将图片绘制在画布上

响应式布局的时候，轮播图使用两张不同的图片去适配大屏幕和超小屏幕，还是一张图片进行压缩适配不同终端，说明原因？

最好使用两张不同大小的图片去适配大屏幕和超小屏幕，这样可以针对不同设备的屏幕大小，来加载相应的图片，
减少超小屏幕设备的网络流量消耗，加快相应速度，同时防止图片在大屏幕下分辨率不够导致失真的问题。

例举3种强制类型转换和2种隐式类型转换

强制（ parseInt parseFloat Number)

隐式（ == ===)

ajax请求时，如何解析JSON数据

JSOn.parse
eval()
new Function()

CSS 清除浮动的几种方法

使用带clear属性的空元素
使用CSS的overflow属性
使用CSS的:after伪元素
使用邻接元素处理

封装一个方法实现获取样式的兼容写法

function getStyle(ele, style) {
    if (window.getComputedStyle) {
        return getComputedStyle(ele, null)[style];
    } else {
        return obj.currentStyle(style);
    }
}

王康

你若安好，便是晴天

GitHub Weibo