javascript中的一些核心知识点以及需要注意的地方

前言

近期杂事甚多，这些事情的积累对知识体系的提升有好处，但是却不能整理出来，也整理不出来

比如说我最近研究的Hybrid在线联调方案便过于依赖于业务，就算分享也不会有人读懂，若是抽一点来分享又意义不大

又拿最近做webapp view 转场动画研究，就是几个demo不断测试，感觉没有什么可说的

最后甚至对webapp中的History的处理方案也是有一些心得，一点方案，但是依旧难以整理成文，于是便开始文荒了

这个时候不妨便温故知新吧，对javascript的一些老知识点进行整理回顾，之后有大动作再说吧！

文中知识仅是个人积累总结，有误请指出

闭包

作用域链

闭包是javascript中一个重要知识点，也是javascript中一块魔法，我们在不熟悉他的情况下可能便经常使用了，熟悉他了解他是从初级至中级的一个标志

要真正了解闭包，就得从作用域链说起

javascript中，作用域链的作用是控制变量的访问顺序，仅此而已

首先，javascript在运行时需要一个环境，这个环境便是我们所谓执行上下文（execution context）

执行上下文决定了变量或者函数有权利访问其它数据，每个执行环境都有一个与之关联的变量对象，用于存储执行上下文中定义的变量或者函数

一般情况下我们所处的全局执行上下文便是window对象，所以全局范围内创建的所有对象全部是window的属性或者方法

函数的变量对象一般是其活动对象（activation Object）

其次，javascript没有块级作用域的概念，但是每个函数有自己的执行上下文，这个便是变相的块级作用域

每执行一个函数时，函数的执行上下文会被推入一个上下文栈中，函数若执行结束，这个上下文栈便会被弹出，控制权变回之前的执行上下文

当代码在执行上下文中执行时，变回创建一个作用域链，这个作用域链控制着执行上下文数据访问顺序

function test() {
var a = 2;
console.log(a);
}
var a = 1;
test();

在这里便具有两个执行上下文，一个是window，一个是test函数

首先，在test执行之前，我们全局执行上下文已经存在，他便是window，这个时候我们会有a与test在作用域最前端

执行test时候，形成test执行上下文，于是最前端的执行上下文变成了test，这个时候会先形成活动对象，包括arguments以及a

在console.log时，会访问作用域链最近的a变量，也就是2，这个是打印出2的根本原因，若是没有作用域链这个顺序就坏了

下面是test执行时候的图示：

.on('touchend MSPointerUp pointerup', function(e){
if((_isPointerType = isPointerEventType(e, 'up')) &&
!isPrimaryTouch(e)) return
cancelLongTap()

// swipe
if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||
(touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))

swipeTimeout = setTimeout(function() {
touch.el.trigger('swipe')
touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
touch = {}
}, 0)

// normal tap
else if ('last' in touch)
if (deltaX < 30 && deltaY < 30) {
tapTimeout = setTimeout(function() {

var event = $.Event('tap')
event.cancelTouch = cancelAll
touch.el.trigger(event)

if (touch.isDoubleTap) {
if (touch.el) touch.el.trigger('doubleTap')
touch = {}
}
else {
touchTimeout = setTimeout(function(){
touchTimeout = null
if (touch.el) touch.el.trigger('singleTap')
touch = {}
}, 250)
}
}, 0)
} else {
touch = {}
}
deltaX = deltaY = 0
})

View Code
比较狗血的是，他在tap这里使用了settimeout，导致了一个延时，这个延时效果直接的影响便是其event参数失效

也就是这里，touchend时候传入的event参数不会被tap事件用到，什么e.preventDefault之类的操作便于tap无关了，此类实现至今未改

其它

localstorage

localstorage的使用在我厂webapp的应用中，达到了一个前所未有的高度，我们惊奇的发现，其真实容量是：

localstorage 的最大限制按字符数来算，中英文都是最多500多万个字符，webkit为5242880个

于是很多时候，localstorage的滥用便会引发localstorage存储失效，导致业务错误

并且localstorage的滥用还表现在存储业务关键信息导致url对外不可用的情况，所以使用localstorage的朋友要慎重！

其它

......

结语

今天我们花了一点时间回顾了一些javascript的核心知识点，希望对各位有用，我这里先撤退了，文中理解有误请提出