前段时间有个项目需要在页面上使用视差效果，第一时间就想到了老牌的skrollr.js，虽然作者在2014年就已经不在更新的，不过放到现在依旧是比较好用的一款，然而在应用中着实被anchors的relative mode坑了一小下，记录下。
absolute mode的代码格式为data-[offset]-[anchor]
relative mode的代码格式为data-[offset]-(viewport-anchor)-[element-anchor]
在项目中吧viewport和element搞反了，盯了半天才找到原因。顺便放下官方的anchor-position示意图
PS：最近在研究JavaScript的模块化，随手做些笔记吧。
模块化首先要了解两个概念，那就是闭包（closure）和匿名函数（anonymous function）。
关于闭包，网上文章非常多，有位牛人的这篇文章《闭包漫谈（从抽象代数及函数式编程角度）》写的很全面。话说数学相关的知识全都还给大学老师了，好多看不懂。
百度百科的解释：
闭包是可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义。“闭包” 一词来源于以下两者的结合：要执行的代码块（由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放）和为自由变量提供绑定的计算环境（作用域）。
话说百科的东西都是文字绕呀绕，把你绕糊涂位置，不看也罢。JavaScript的闭包官方解释：指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。一样文绉绉的，不解其意。套用网络通俗的解释就是“闭包就是能够读/写函数内部的某些变量的子函数,并将这些变量保存在内存中。”，其中两个效果，一是读写函数内部变量，二是常驻内存。
匿名函数是指那些无需定义函数名的函数。匿名函数与 Lambda 表达式（拉姆达表达式）是一回事。唯一的不同——语法形式不同。Lambda 表达式更进一步。本质上，它们的作用都是：产生方法——内联方法，也就是说，省去函数定义，直接写函数体。
引用网络上面一个例子
var baz;
(function() {
var foo = 10;
var bar = 2;
baz = function() {
return foo * bar;
};
})();
baz();
尽管在匿名函数外执行，但 baz 仍然可以访问 foo 和 bar。
1，第 1 行，baz 是全局变量；
2，第 2 ～第 8 行，定义一个匿名函数；
3，第 3 和 4 行，foo 和 bar 是匿名函数内的局部变量；第 5 ～ 7 行，在匿名函数内定义一个匿名函数，并将其赋值给全局变量 baz；
4，第 9行，调用 baz。若改成 “alert(baz());”，将显示 20；
5，按理说，在匿名函数外不能访问 foo 和 bar，但是现在可以。
要注意的是，函数内部声明变量时，一定要使用 var 关键字，否则，声明的是一个全局变量。最早自己写代码很少注意这个，也出现过变量被修改的混乱情况。
闭包常用于两种情况，一个是保护函数内的变量安全。函数中foo和bar只有函数baz才能访问，而无法通过其他途径访问到，因此保护了变量的安全性。另一个是在内存中维持一个变量。依然如前例，由于闭包，函数中foo和bar一直存在于内存中。
由于闭包的维持占用内存的特性，频繁使用会大量消耗内存，引起内存泄露。如无特殊需要，尽量不适用闭包，如果使用，当使用完毕后，要记得释放占用的内存。
前段时间在cnblogs看到一道有意思的题目，传送门地址。题面很简单：将一段数字从右到左每隔三位插入一个逗号 ，也就是通常说的插入千分位符，使用javascript实现，据说是某大公司的面试题。动态语言就没有什么难点了，现成的函数都有。我第一反应也就是把类似字符串倒转原理的操作，只不过不是一位一位，是三位三位，然后用分号连接起来。各式各样的解答和效率测试就不多说了，源地址的博客中都有说明。单单说下其中的一个解答，如下：
var cuter2 = function( str ){//abcd
return str.replace( /\B(?=(?:\d{3})+$)/g, ',' );
};
看到这个解答很神奇，单单一句正则就搞定，虽然效率一般，在页面大量需要此操作的情况下并不是很适用。
老实说正则也写过不少，以前做页面抓取，各式各样的匹配也写过，但是这个正则表达式基本理解不能。幸好手上有正则利器，一个叫“Regex Match Tracer”的小工具（我就不贴下载地址，可自行搜索），可以分解测试正则表达式。去掉/g全局参数和开头的/，正则的结构分解的很清楚，见右图。其中有两个词倒是第一次见，一个是零宽度断言，另一个就是非捕捉组。网上搜索一下，明了很多。
先说非捕捉组，这个很好理解，用法(?:Expression)。非捕捉组主要是整体效率的考虑，因为并不是所有的捕捉组都是我们需要的，有一些为了方便分割，有一些是必须使用捕捉组的形式，往往并不关心捕捉组的具体内容，每一个捕捉组都会消耗一部分内存，当一个很长或者重复很多的时候，这些捕捉组消耗的内存就不是个小数目了。
再说说断言，这个比较难理解，先引用网上搜索到的说明：
元字符/b、^、$都匹配一个位置，且这个位置满足一定的条件。在此，把满足这一个条件称为断言或零宽度断言。
表达式(?=experssion)、(?!experssion)、(?<=experssion)和(?<!experssion)都是匹配一个位置。
(?=experssion)又称为零宽度正预测先行断言，它断言自身位置的后面能够匹配表达式experssion。
(?<=experssion)又称为零宽度正回顾后发断言，它断言自身位置的前面能够匹配表达式experssion。
(?!experssion)又称为负向零宽度断言或者零宽度负预测先行断言，它断言自身位置的后面不能匹配字符串experssion。
(?<!experssion)又称为零宽度负回顾后发断言，它断言自身位置的前面不能匹配字符串experssion。
说明比较绕口，个人理解为一般的正则是匹配字符或者字符串，而断言是匹配符合一定条件的位置，就拿上面那个正则说明（个人理解）：\d{3}是三位数字组，(?:\d{3})非捕捉组，(?:\d{3})+贪婪模式，一个或者多个三位数字组合，(?=(?:\d{3})+$)断言，以一个或者多个3位数字组合结尾的那个位置，最后前面的/B是匹配不是在字符的开始或结束位置，防止字符串正好是3的倍数，千分号打在最开头。/g全局模式，因为一次只能将一个位置替换成逗号。其实弄清楚了每一小部分，整个正则还是很好理解的。主要就是能不能想到这个方法。
最后再多说一些，随着javascript的框架应用层出不穷，很多做前端的为了开发效率考虑，直接就使用框架来开发，在这个速成的时代，甚至有些前端只会使用框架写法，基本的javascript都写不出几行出来。这是一个很恐怖的事情，就好比一个学步的人，天天使用代步工具，汽车、飞机、甚至电动轮椅，一旦脱离这些东西，这个人将寸步难行。框架也是同样的原理，不管什么语言的框架，都是为了更高的开发效率，但是框架的实现原理也需要研究弄懂的，大部分框架都是开源的，花些时间研究并不是很困难的事情，一方面可以巩固自身的语言基础用法，最重要的是从架构上理解开发者为什么要这样部署框架结构，框架运行思想，也能从中发现存在的瑕疵或者不适应自身项目的地方，加以完善或者改进调整，同时也能为自身在系统架构认识上面，增加不少的经验。