前端知识点2

1,将url的查询参数解析成字典对象

这个题目不约而同的出现在了多家公司的面试题中，当然也是因为太过于典型，解决方案无非就是拆字符或者用正则匹配来解决，我个人强烈建议用正则匹配，因为url允许用户随意输入，如果用拆字符的方式，有任何一处没有考虑到容错，就会导致整个js都报错。而正则就没有这个问题，他只匹配出正确的配对，非法的全部过滤掉，简单，方便。

实现代码：

function getQueryObject(url) {
    url = url == null ? window.location.href : url;
    var search = url.substring(url.lastIndexOf("?") + 1);
    var obj = {};
    var reg = /([^?&=]+)=([^?&=]*)/g;
    search.replace(reg, function (rs, $1, $2) {
        var name = decodeURIComponent($1);
        var val = decodeURIComponent($2);               
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}
getQueryObject("http://www.cnblogs.com/leee/p/4456840.html?name=1&dd=ddd**")

Object {name: "1", dd: "ddd**"}

2.console.log(1+ +”2”);输出的是3

等同于: 1+(+’2’)：
+’2’ 的 + 是一元操作符，对 ‘2’ 进行Number()操作，转为数字的2，所以等于3

1 2	console.log("A"-"B"+"2") NaN2 console.log("A"-"B"+2) NaN

3. 算法

function test(a,b){
     console.log(b);
     return{
         test:function(x){
             return test(x,a);
         }
     }
 }
 var a=test(0);a.test(1);a.test(2);a.test(3);       
 // underfined  0  0  0

4. 三次握手

第一次

第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。

第二次

第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次

第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
完成三次握手，客户端与服务器开始传送数据，在上述过程中，还有一些重要的概念：

5. http 状态码

一、HTTP状态码

如果某项请求发送到您的服务器要求显示您网站上的某个网页（例如，用户通过浏览器访问您的网页或 Googlebot 抓取网页时），服务器将会返回 HTTP 状态代码以响应请求。

此状态代码提供关于请求状态的信息，告诉 Googlebot 关于您的网站和请求的网页的信息。
一些常见的状态代码包括：
200 – 服务器成功返回网页
404 – 请求的网页不存在
503 – 服务器暂时不可用

下面提供 HTTP 状态代码的完整列表。点击链接可了解详情。您也可以访问有关 HTTP 状态代码的 W3C 网页以获得更多信息。

1xx：请求收到，继续处理
2xx：操作成功收到，分析、接受
3xx：完成此请求必须进一步处理
4xx：请求包含一个错误语法或不能完成
5xx：服务器执行一个完全有效请求失败
1xx （临时响应）
表示临时响应并需要请求者继续执行操作的状态代码。

代码说明
100（继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
101（切换协议）请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx （成功）
表示服务器成功处理了请求的状态代码。

代码说明
200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。如果针对您的 robots.txt 文件显示此状态，则表示 Googlebot 已成功检索到该文件。
201（已创建）请求成功并且服务器创建了新的资源。
202（已接受）服务器已接受请求，但尚未处理。
203（非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。
204（无内容）服务器成功处理了请求，但没有返回任何内容。
205（重置内容）服务器成功处理了请求，但没有返回任何内容。与 204 响应不同，此响应要求请求者重置文档视图（例如，清除表单内容以输入新内容）。
206（部分内容）服务器成功处理了部分 GET 请求。

3xx （重定向）
要完成请求，需要进一步操作。通常，这些状态代码用来重定向。 Google 建议您在每次请求中使用重定向不要超过 5 次。您可以使用网站管理员工具查看一下 Googlebot 在抓取重定向网页时是否遇到问题。诊断下的网络抓取页面列出了由于重定向错误而导致 Googlebot 无法抓取的网址。

代码说明
300（多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者（用户代理）选择一项操作，或提供操作列表供请求者选择。
301（永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。您应使用此代码告诉 Googlebot 某个网页或网站已永久移动到新位置。
302（暂时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。此代码与响应 GET 或 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉 Googlebot 某个网页或网站已经移动，因为 Googlebot 会继续抓取原有位置并编入索引。
303（查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。对于除 HEAD 之外的所有请求，服务器会自动转到其他位置。
304（未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。如果网页自请求者上次请求后再也没有更改过，您应当将服务器配置为返回此响应（称为 If-Modified-Since HTTP 标头）。由于服务器可以告诉 Googlebot 自从上次抓取后网页没有更改过，因此可节省带宽和开销
。
305（使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307（暂时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉 Googlebot 某个页面或网站已经移动，因为 Googlebot 会继续抓取原有位置并编入索引。

4xx（请求错误）
这些状态代码表示请求可能出错，妨碍了服务器的处理。

代码说明
400（错误请求）服务器不理解请求的语法。
401（未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403（禁止）服务器拒绝请求。如果您看到 Googlebot 在尝试抓取您网站上的有效网页时收到此状态代码（可以在 Google 网站管理员工具诊断下的网络抓取页面上看到此信息），可能是您的服务器或主机拒绝 Googlebot 访问。
404（未找到）服务器找不到请求的网页。例如，如果请求服务器上不存在的网页，服务器通常会返回此代码。如果您的网站上没有 robots.txt 文件，而您在 Google 网站管理员工具”诊断”标签的 robots.txt 页上看到此状态，那么这是正确的状态。但是，如果您有 robots.txt 文件而又看到此状态，则说明您的 robots.txt 文件可能命名错误或位于错误的位置（该文件应当位于顶级域名，名为 robots.txt）。
如果您看到有关 Googlebot 尝试抓取的网址的此状态（在”诊断”标签的 HTTP 错误页上），则表示 Googlebot 追踪的可能是另一个页面的无效链接（是旧链接或输入有误的链接）。
405（禁用的方法）禁用请求中指定的方法。
406（不可接受）无法使用请求的内容特性响应请求的网页。
407（需要代理授权）此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。如果服务器返回此响应，还会指明请求者应当使用的代理。
408（请求超时）服务器等候请求时发生超时。
409（冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。服务器在响应与前一个请求相冲突的 PUT 请求时可能会返回此代码，同时会附上两个请求的差异列表。
410（已删除）如果请求的资源已永久删除，服务器就会返回此响应。该代码与 404（未找到）代码相似，但在资源以前存在而现在不存在的情况下，有时会用来替代 404 代码。如果资源已永久删除，您应当使用 301 指定资源的新位置。
411（需要有效长度）服务器不接受不含有效内容长度标头字段的请求。
412（未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。
413（请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414（请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。
415（不支持的媒体类型）请求的格式不受请求页面的支持。
416（请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。
417（未满足期望要求）服务器未满足”期望”请求标头字段的要求。

5xx （服务器错误）
这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

代码说明
500（服务器内部错误）服务器遇到错误，无法完成请求。
501（尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502（错误网关）服务器充当网关或代理，从上游服务器收到无效响应。
503（服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
504（网关超时）服务器充当网关或代理，但没有及时从上游服务器收到请求。
505（HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

HTML+CSS

1.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

2.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?

内联内嵌外链导入
区别：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高

7.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐（Gecko）谷歌（webkit） opear(Presto)

10.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的使用display
2.3像素问题使用float引起的使用dislpay:inline -3px
3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png 透明使用js代码改
6.Min-height 最小高度！Important 解决’
7.select 在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

11.标签上title与alt属性的区别是什么?

Alt 当图片不显示是用文字代表。
Title 为该属性提供信息

12.描述css reset的作用和用途。

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

13.解释css sprites，如何使用。

Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

16.什么是语义化的HTML?

直观的认识标签对于搜索引擎的抓取有好处

17.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)

Javascript

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

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

强制（parseInt,parseFloat,number）
隐式（== – ===）

3.split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

6.IE和DOM事件流的区别

1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

7.IE和标准下有哪些兼容性的写法

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别

一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的

9.call和apply的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
obj.call(thisObj, arg1, arg2, …);
obj.apply(thisObj, [arg1, arg2, …]);
两者作用一致，都是把obj(即this)绑定到thisObj，这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。
唯一区别是apply接受的是数组参数，call接受的是连续参数。

function add(j, k){
    return j+k;
}
function sub(j, k){
    return j-k;
}

我们在控制台运行：

add(5,3); //8
add.call(sub, 5, 3); //8
add.apply(sub, [5, 3]); //8
sub(5, 3); //2
sub.call(add, 5, 3); //2
sub.apply(add, [5, 3]); //2

10.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑使用parse更靠谱
11.b继承a的方法

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}

13.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
http://www.webasily.com/?p=78 例子可见此链接

14.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）

15.如何阻止事件冒泡和默认事件
canceBubble return false

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

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

17.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作

18.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

19.document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

20.”==”和“===”的不同

前者会自动转换类型
后者不会

21.javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

22.编写一个数组去重的方法

function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
24.split

输出：
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

25. 对象创建过程

1.分配空间。要注意的是，分配空间不光是分配子类的空间，子类对象中包含的父类对象所需要的空间，一样在这一步统一分配。在分配的空间的时候，会把所有的属性设置为默认值。

2.递归的构造父类对象。

3.初始化本类属性。

4.调用本类的构造方法。

总结一下，创建B类对象的步骤一共有5步

1.分配空间

2.初始化A类属性。

3.调用A类的构造方法.

4.初始化B的属性。

5.调用B的构造方法。