更好的webAPP

移动端的javascript

首先，移动端的性能与PC端的性能完全不在一个数量级上，比如，我做过一个测试，使用innerHTML绘制大段，之后想获取HTML的ID节点，事实上是获取不到的，这种问题在单页模拟多页，动态创建DOM会经常发生，

例如：

var element   = $('<div id = "test">...大量结构...</div>');

$(root).html(element)

$('#test)  //为空

webapp的模式，完全依赖于浏览器的垃圾回收，基本就是作死，因为传统页面一旦刷新页面整个资源完全释放，而webapp没有刷新这类操作，只有一个状态到两一个状态，不相关的内存会保留，资源必须手动释放，或者说，框架必须提供垃圾释放的机制。

webapp资源释放

无论是view还是UI组件我们得提供统一的destroy接口，以便让用户继承释放资源。

若是view的资源得不到释放导致heap值过高，webapp模式的网站其价值大减。这里有几点可以考虑：

l  webapp中view实例保存不超过5个，多了便释放dom结构以及内存引用（临界值自己判断最优）

l  view隐藏时释放内部资源，解除DOM事件句柄

l  UI组件与view相同，需要统一释放机制

但是单页应用由于页面不会刷新，总有一些资源得不到释放，此问题任重道远，平时编写过程可以做以下优化：

l  使用函数替换逻辑

让我们的函数产生一个返回值替换函数中的大段逻辑，这样的第一个好处便是逻辑清晰，第二个好处是这些函数在不同的函数中，这个函数被使用后便会自动得到释放。

l  清理闭包引用

当一个闭包函数或者什么使用结束后，若不会再使用，便需要手动清理该变量，以便解除闭包之间的引用关系，从而释放资源。

l  使用对象属性或者方法

一个对象可以引用其他对象的属性或者方法，比如obj.foo = thatObj;这种情况下，我们可以随时删除对象解除引用关系，然后便可以清理资源。

PC与移动端鼠标事件差异

changedTouches/touches/targetTouches

touches：为屏幕上所有手指的信息

PS：因为手机屏幕支持多点触屏，所以这里的参数就与手机有所不同

targetTouches：手指在目标区域的手指信息

changedTouches：最近一次触发该事件的手指信息

比如两个手指同时触发事件，2个手指都在区域内，则容量为2，如果是先后离开的的话，就会先触发一次再触发一次，这里的length就是1，只统计最新的

PS：一般changedTouches的length都是1

***

touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息