preInterview_javaScript

地图: 问内层机制。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

var foo=function(){}称之为函数表达式定义函数，必须执行后面语句后才会对foo添加调用。

function foo(){}称之为函数语句定义函数。会预先编译.

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

事件代理（Event Delegation），又称之为事件委托。是JavaScript 中常用绑定事件的常用技巧。“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。

为什么要这样做呢？

众所周知，DOM操作是十分消耗性能的。所以重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是通过尽量少的绑定，去监听尽量多的事件。

下面将会用 Zepto 为大家演示怎么实现事件代理。

Zepto is a minimalist JavaScript library for modernbrowsers with a largely jQuery-compatible API. If you use jQuery, you alreadyknow how to use Zepto.

 

由于API是兼容 jQuery 的，熟悉jQuery的童鞋使用 Zepto 几乎无需学习成本。演示代码实际上也能在 jQuery 上正常运行。而目前 Zepto 的适用场景更多是在移动端，一个远离旧版IE的世界。

那为什么直接用jQuery？

因为下文会简要分析源码，但jQuery里面为了兼容旧版IE做了很多妥协，源码十分不直观。而 Zepto 是面向现代浏览器设计的，所用到的API绝大多数都符合W3C标准，分析起来更加直观。

 

以这个HTML结构为例：

 <ulclass="list">

   <li class="list_items">000</li>

   <li class="list_items">111 <a href="javascript：void(0);">link</a></li>

   <li class="list_items">222 <i>italic斜体的意思</i></li>

   <li>333</li>

</ul>

 

 

一般情况下，会这样绑定事件：

 

$('.list_items').on('click', function (e) {

   console.log(e.target.tagName);

   console.log(this.tagName);

});

Deom>>

 

 

 

打开浏览器的 Console 看一下，会发现每一个 .list_items 元素都被绑定了click事件，并且绑定的对象是 li.list_items 。

这意味着，Zepto的实际上是遍历了所有 .list_items 元素，并逐个绑定 click 事件。

实现思路和下面这段原生 JavaScript 代码相同：

 [].forEach.call(document.querySelectorAll('.list_items'), function (elem){

 elem.addEventListener('click',function (e){

    console.log(e.target.tagName);

    console.log(this.tagName);

  }, false);

} );

这样的做法，当遇到数量超长的列表(ul)和表格(table)时性能开销非常大。

例如：ul 中有1000个 li 时，就需要进行1000次的事件绑定。而事件代理，就是应用于这种场景的。

 我们先看一下Zepto官方的API文档：

on 方法还支持在 回调函数前传入一个[selector] 的值，而这个 [selector] 就是实际需要监听事件的的元素。

 

看看实际例子：

$('.list').on('click', '.list_items', function (e) {

   console.log(e.target.tagName);

   console.log(this.tagName);

});

Demo>>

通过 on 方法把 click事件代理在 ul.list 元素上，监听其所有 .list_items 的子元素的点击操作。

虽然提示每个 .list_items 都有事件监听，但它们的绑定对象都是指向 ul.list 。

 

 

 

事件代理是通过什么机制实现的？

 

这其中的核心思想是事件冒泡(Event Bubble) 。JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。

 

它是怎么运作的呢？

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。

 

　　这对我有什么好处呢？

想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击某一单元格的时候做点什么。比如说有一次我就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格将会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。

 

　　用代码写出来的话是什么样呢？

 

　　代码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table来的事件的目标元素。考虑到我们要写的函数中可能会重复用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中：

 

function getEventTarget(e) {

　e = e || window.event;

　return e.target || e.srcElement;

}

 

　　e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回目标元素。在IE里目标元素放在srcElement属性中，而在其它浏览器里则是target属性。

 

　　接下来就是editCell函数了，这个函数调用到了getEventTarget函数。一旦我们得到了目标元素之后，剩下的事情就是看看它是否是我们所需要的那个元素了。

 

function editCell(e) {

　var target = getEventTarget(e);

if(target.tagName.toLowerCase()=== 'td') {//如果类型不同，其结果就是不等

// DO SOMETHING WITH THECELL

}

}

 

　　在editCell函数中，我们通过检查目标元素标签名称的方法来确定它是否是一个表格的单元格。这种检查也许过于简单了点；如果它是这个目标元素单元格里的另一个元素呢？我们需要为代码做一点快速修改以便于其找出我们所需要的那个父级的td元素。如果说有些单元格不需要被编辑怎么办呢？此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称，然后在把单元格变成可编辑状态之前先检查它是否不包含那个样式名称。选择总是多样化的，你只需找到适合你应用程序的那一种就可以了。

 

　　有哪些优点和缺点呢？

 

　　JavaScript事件代理带来的好处有：

◆那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点，我们得到了性能上的提升，同时降低了崩溃的风险。

◆在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的，比如说通过Ajax，你不需要再在元素被载入或者卸载的时候来添加或者删除事件处理器了。

 

◆潜在的问题也许并不那么明显，但是一旦你注意到这些问题，你就可以轻松地避免它们：

◆你的事件管理代码有成为性能瓶颈的风险，所以尽量使它能够短小精悍。

◆不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在非IE的浏览器中），不过我们改天再说这个吧。

◆在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发得非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

总结

已经有一些使用主流类库的事件代理示例出现了，比如说用jQuery、Prototype以及Yahoo! UI的。你也可以找到那些不用任何类库的例子，比如说Usable Type blog上的这一个。

。。。。。。。。。。。。。。。。。。。。。。。

浏览器可以分为两部分，shell+内核。其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。

IE内核实际上不是以IE为内核, 而是以微软操作系统的webcontrol控件为内核, IE浏览器本身也是以webcontrol控件为内核的,         安装新版IE时, 会更新此文件C:\WINDOWS\system32\mshtml.dll,而此文件就是webcontrol的载体, 同时也安装了IE: C:\Program Files\Internet Explorer\iexplore.exe, 如果删除IE浏览器, 只是删除了C:\ProgramFiles\Internet Explorer, 并不是删除C:\WINDOWS\system32\mshtml.dll,因为它已经是操作系统的一部分了.

内核.Trident由于IE版本的原因,所以更新和研发都比较缓慢,尤其在老版本的IE上与W3C的标准严重脱节,并且存在很多严重BUG.比较典型的就是在中国还有大量市场的IE6和IE8,它们本身存在一些缺陷导致性能和兼容上存在问题.比如IE8的Javascript引擎是Jscript,IE9开始用Chakra查克拉（速度和标准化都很出色）,这两个版本的区别就很大,所以一些我们在IE8上运行有卡顿的JS特效可能在IE9上就比较流畅.

。。。。。。。。。。。。。。。。。。。。。。。

ajax验证原理

。。。。。。。。。。。。。。。。。。。。。。。