对js闭包的一些理解 对 js 的闭包看了很多遍，只是每次都没有进行深入的了解，过去了就忘了。这次也算比较深入的了解了一下吧，不过应该也有很多不足的地方，嘿嘿！ 1. 了解闭包前必要知道的概念 # 在我们开始探索闭包前，我们首先应该理解清楚一些必要的概念，这样对我们之后理解闭包有很大的帮助。每个变量都有其作用的范围，全局变量全局有效，会一直驻扎在内存中；局部变量一般情况下会在函数执行完毕之后，就会销毁。这里要提到一个作用域链的重要概念，作用域链是当代码在一个环境中执行时创建的，作用域链的用途就是要保证执行环境中能有效有序的访问所有变量和函数。作用域链的最前端始终都是当前执行的代码所在环境的变量对象，下一个变量对象是来自其父亲环境，再下一个变量对象是其父亲的父亲环境，直到全局执行环境。其实，通俗的理解就是：在本作用域内找不到变量或者函数，则在其父亲的作用域内寻找，再找不到则到父亲的父亲作用域内寻找，直到在全局的作用域内寻找！一般情况下呢，当函数执行完毕后，局部变量就会被销毁，内存中仅保存这全局作用域。这里也涉及到了 js 的垃圾回收机制，在 js 中有两种垃圾收集的方式：标记清除和引用计数。标记清除：垃圾收集器在运行时会给存储在内存中的所有变量都加上标记（具体的标记方式暂时就不清楚了），待变量已不被使用或者引用，去掉该标记或添加另一种标记。最后，垃圾收集器完成内存清除工作，销毁那些已无法访问到的这些变量并回收他们所占用的空间。不过，闭包可不是说函数执行完了，变量就回收了。 2. 闭包的简要解释 # 这里简单解释一下闭包的概念：闭包使之有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数的内部创建另一个函数。首先我们看一个简单的例子。function createA() { var c = 0; return function () { c++; return c; }; } 这就是一个简单的闭包了: var func = createA(); 从代码中可以看出，func 是一个 Function 类型的变量，让我们执行以下：func();结果会发现输出了 1。多次执行以下 func()函数，发现输出的结果一直在增长。这就说明，在 func()执行之后，变量 c 依然保存在内存中，没有被释放掉。在 return 的 function 中能够使用变量 c 我们能够理解，因为变量 c 是其父亲环境中的变量，在本环境中找不到变量 c 时就会去父亲环境中寻找。再来看一个例子：function createB() { var result = []; for (var i = 0; i < 10; i++) { result[i] = function () { return i; }; } return result; } var result = createB(); 我们期望的是执行result[0]()能够返回 0，执行result[1]()能够返回 1，以此类推。可是实际上呢，每个函数返回的都是 10.这是因为每个函数的作用域链中都保存着 createB()函数的活动对象，所以它们引用的都是同一个变量 i。当 createB()函数返回后，变量 i 的值是 10，此时每个函数都引用着保存变量 i 的同一个变量对象，所以每个函数内部 i 的值都是 10.不过我们可以通过这样的设定来让闭包的行为符合我们的预期。function createB() { var result = []; for (var i = 0; i < 10; i++) { result[i] = (function (num) { return function () { return num; }; })(i); } return result; } var result = createB(); 3. 闭包的应用场景 # 在内存中维持一个变量。比如前面讲的小例子，由于闭包，函数 createA 中的 c 会一直存在于内存中，因此每次执行 func()，都会给变量 c 加 1. 保护函数内的变量安全。还是以最开始的例子，函数 createA()中的变量 c 只有内部的函数才能访问，而无法通过其他途径访问到，因此保护了变量 c 的安全。 实现面向对象中的对象。javascript 并没有提供类这样的机制，但是我们可以通过闭包来模拟出类的机制，不同的对象实例拥有独立的成员和状态。 这里我们看一个例子：var student = (function () { var name = 'bing'; var score = 80; return { getName: function () { return name; }, setName: function (thisName) { name = thisName; }, }; })(); 分别执行下面的语句：student.name; student.getName(); student.setName('zhongguo'); student.getName(); 可以看到，变量 student 是不能直接访问变量 name 的。只能通过 getName 和 setName 来对变量 name 进行读写操作。针对第三点，我们看这样的一个例子。function Student() { var name = 'bing'; return { getName: function () { return name; }, setName: function (thisName) { name = thisName; }, }; } 分别创建两个对象 stu1,stu2:var stu1 = Student(); stu1.setName('beijing'); stu1.getName(); var stu2 = Student(); stu2.setName('shanghai'); stu2.getName(); stu1.getName(); 输出的结果分别是："beijing", "shanghai", "beijing"。可以发现 stu1,stu2 这两个对象之间相互独立，互不影响。 4. 闭包的另一种写法 # 在 jQuery 中我们经常见这样的写法：(function (x, y) {})(3, 5); 这是立即执行的匿名函数，匿名函数也是一种闭包。我们来看这个：for (var i = 0; i < 10; i++) { (function (i) { setTimeout(function () { console.log(i); }, i * 1000); })(i); } 这段代码是每隔 1000ms 依次输出：0, 1, 2, 3, 4, 5, 6, 7, 8, 9如果我们不使用匿名函数，直接在 for 循环里写 setTimeout 会是什么结果呢，这就回到了第二部分讨论的问题，setTimeout 也是一个函数呀，他使用了外部环境的变量 i，因此每隔 1000ms 输出一个 10，最后输出十个 10。

http协议报头详解 1. http 协议简介 # HTTP 是 Hyper Text Transfer Protocol（超文本传输协议）的缩写。它的发展是万维网协会（World Wide Web Consortium）[5]和 Internet 工作小组 IETF（Internet Engineering Task Force）合作的结果，（他们）最终发布了一系列的 RFC，RFC 1945 定义了 HTTP/1.0 版本。其中最著名的就是 RFC 2616。RFC 2616 定义了今天普遍使用的一个版本——HTTP 1.1。为纪念 Tim Berners-Lee 提出 HTTP 后对互联网发展的贡献，万维网协会保留有他最原始提交的版本。HTTP 协议（HyperText Transfer Protocol，超文本转移协议）是用于从 WWW 服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。HTTP 是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP 是一个无状态的协议。 （引自百度百科） 2. http 报头举例 # 这里我们就用常用的百度搜索举例吧，虽然很多程序员看不起百度搜索！Remote Address:61.135.169.125:80 Request URL:http://www.baidu.com/ Request Method:GET Status Code:200 OK Request Headersview source Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Encoding:gzip,deflate,sdch Accept-Language:zh-CN,zh;q=0.8,en;q=0.6 Cache-Control:max-age=0 Connection:keep-alive Cookie:BDUT=eiceD23DDBB7D809C94A0E669E114AB2FAA613c5bfe280c0; SSUDBTSP=1374456410; Host:www.baidu.com Referer:http://tieba.baidu.com/ User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36 Response Headersview source BDPAGETYPE:2 BDQID:0xa86e37090000192c BDUSERID:263345794 Cache-Control:private Connection:Keep-Alive Content-Encoding:gzip Content-Type:text/html Date:Fri, 30 May 2014 06:07:20 GMT Expires:Fri, 30 May 2014 06:07:19 GMT Server:BWS/1.1 Set-Cookie:H_PS_PSSID=6225_5230_1461_5224_6553_6506_4759_6018_6676_6698_6441_6774_6502_6819_6838; path=/; domain=.baidu.com Set-Cookie:BDSVRTM=133; path=/ Transfer-Encoding:chunked 3. http 报头详解 # 这里我就根据上面的那个例子把所有的字段说一下，当然，有的字段，我们通过他的名字就已经知道大概的意思了！有链接的字段，我们在下面进行了更详细的讲解！表 1 公共头部 字段 说明 Remote Address 请求的远程地址 Request URL 请求的域名 Request Method 页面请求的方式：GET/POST Status Code 请求的返回状态 表 2 请求头 字段 说明 Accept 表示浏览器支持的 MIME 类型 Accept-Encoding 浏览器支持的压缩类型 Accept-Language 浏览器支持的语言类型，并且优先支持靠前的语言类型 Cache-Control 指定请求和响应遵循的缓存机制 Connection 当浏览器与服务器通信时对于长连接如何进行处理：close/keep-alive Cookie 向服务器返回 cookie，这些 cookie 是之前服务器发给浏览器的 Host 请求的服务器 URL Referer 该页面的来源 URL User-Agent 用户客户端的一些必要信息 表 3 返回头 字段 说明 Cache-Control 告诉浏览器或者其他客户，什么环境可以安全地缓存文档 Connection 当 client 和 server 通信时对于长链接如何进行处理 Content-Encoding 数据在传输过程中所使用的压缩编码方式 Content-Type 数据的类型 Date 数据从服务器发送的时间 Expires 应该在什么时候认为文档已经过期，从而不再缓存它？ Server 服务器名字。Servlet 一般不设置这个值，而是由 Web 服务器自己设置 Set-Cookie 设置和页面关联的 cookie Transfer-Encoding 数据传输的方式 4. 几个字段的说明 # 4.1 Accept # 例子中的 Accept 字段是这样子的：Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8。意思是：浏览器支持的 MIME 类型分别是 text/html、application/xhtml+xml、application/xml 和*/*，优先顺序是它们从左到右的排列顺序。Accept 表示浏览器支持的 MIME 类型；MIME 的英文全称是 Multipurpose Internet Mail Extensions（多功能 Internet 邮件扩充服务），它是一种多用途网际邮件扩充协议，在 1992 年最早应用于电子邮件系统，但后来也应用到浏览器。text/html,application/xhtml+xml,application/xml 都是 MIME 类型，也可以称为媒体类型和内容类型，斜杠前面的是 type（类型），斜杠后面的是 subtype（子类型）；type 指定大的范围，subtype 是 type 中范围更明确的类型，即大类中的小类。Text：用于标准化地表示的文本信息，文本消息可以是多种字符集和或者多种格式的；text/html 表示 html 文档；Application：用于传输应用程序数据或者二进制数据；application/xhtml+xml 表示 xhtml 文档；application/xml 表示 xml 文档。 4.2 Cache-Control # Cache-Control 指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control 并不会影响到另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括：no-cache, no-store, max-age, max-stale, min-fresh, only-if-cached。响应消息中的指令包括：public, private, no-cache, no-store, no-transform, must-revalidate, proxy-revalidate, max-age。各个指令的含义： Public：指示响应可被任何缓存区缓存。 Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当前用户的部分响应消息，此响应消息对于其他用户的请求无效。 no-cache：指示请求或响应消息不能缓存 no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。 min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。 max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定 max-stale 消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。 4.3 User-Agent # User-Agent 的值是：用户使用的客户端的一些必要信息，比如操作系统、浏览器及版本、浏览器渲染引擎等。 4.4 Transfer-Encoding # transfer-encoding 的可选值有：chunked,identity，从字面意义可以理解，前者指把要发送传输的数据切割成一系列的块数据传输，后者指传输时不做任何处理，自身的本质数据形式传输。举个例子，如果我们要传输一本“红楼梦”小说到服务器，chunked 方式就会先把这本小说分成一章一章的，然后逐个章节上传，而 identity 方式则是从小说的第一个字按顺序传输到最后一个字结束。 5. 总结 # http 报头让客户端和服务器之间传递了更多的信息，服务器能够发送过来的报头了解到用户的一些必要信息，服务器传回的报头，让客户端更好的理解和解析。 6. 参考文章 # http://www.cnblogs.com/jcli/archive/2012/10/19/2730440.html http://hi.baidu.com/ah__fu/item/1b8c6e6c5e78950da0cf0f53 http://jingyan.baidu.com/article/375c8e19770f0e25f2a22900.html http://blog.csdn.net/wiwipetter/article/details/4559183 http://baike.baidu.com/view/293520.htm#5

汉诺塔算法演示 工作之余闲来无聊，于是就有了用JS来实现算法演示的想法，很久以前用JS实现过选择排序，不过源程序找不到了！汉诺塔的递归算法：void move(int n,char a,char b,char c){ if(n==1) printf("\t%c->%c\n",a,c); //当n只有1个的时候直接从a移动到c else { move(n-1,a,c,b); //第n-1个要从a通过c移动到b printf("\t%c->%c\n",a,c); move(n-1,b,a,c); //n-1个移动过来之后b变开始盘，b通过a移动到c，这边很难理解 } } 在上面的递归算法中，printf函数可以换成我们JS的动画处理函数。我也是受到了其他人写的汉诺塔算法演示的启发：先在算法执行完成以后， 才开始执行动画效果。【代码演示】在代码中，在init()这个方法里我们可以看：// 初始化 Hnt.init = function(opt){ $("#block").html(''); Hnt.movie = []; Hnt.options = $.extend(Hnt.options, opt); Hnt.A.num = Hnt.options.n; Hnt.B.num = 0; Hnt.C.num = 0; Hnt.initBlock(Hnt.options.n); Hnt.move(Hnt.options.n, "A", "B", "C"); Hnt.start(); } 前半部分是将使用到变量重新初始化。后半部分：initBlock();　　// 初始化盘子 move();　　　 // 汉诺塔算法的执行，仅仅是执行算法，在这个过程中保存盘子移动的路径，但是不执行动画 start(); 　　// 执行动画效果。 后话：现在仅仅是用js简单地实现了汉诺塔的演示过程，下一步打算从流程上和界面上进行优化，也希望能够学习一些其他的东西。比如：html5的dnd，audio，woker，localstorage，还有jQueryMobile的框架

jQuery中兄弟元素、子元素和父元素的获取 我们这里主要总结 jQuery 中对某元素的兄弟元素、子元素和父元素的获取，原声的 Javascript 代码对这些元素的获取比较麻烦一些，而 jQuery 正好对这些方法进行封装，让我们更加方便的对这些元素进行获取和操作。 1. jQuery 提供的方法 # 上来就把 jQuery 提供的方法摆在这里是不是有点不好呀，不过，我们从 jQuery 的方法名称上就能知道这些方法是干嘛的了。 parent(selector) 查找父元素，可传入selector进行过滤(下同) parents(selector) 查找所有的祖先节点 children(selector) 返回所有的子节点，不过该方法只会返回直接的子节点，不会返回所有的子孙节点 prev() 返回该节点的上一个兄弟节点 prevAll() 返回该节点之前所有的节点 next() 返回该节点的下一个兄弟节点 nextAll() 返回该节点之后所有的节点 siblings() 返回该节点所有的兄弟节点，不分前后 find(selector) 返回该节点所有的子孙节点 看完所有的方法之后，我们可以发现：children()只能获取直接的子节点；而 find 能获取所有的子孙节点，当然也包括直接的子节点。让我们通过一个直观的例子来看看这些方法是怎么使用的，【狠狠点击这里>>】从实例中我们能够很清楚的看到这些方法都是获取的哪些元素，比如 parent()是获取当前元素的直接父亲元素，而 parents()是获取所有的父亲元素（也包括其直接父元素）。前面的那些方法使用起来都比较简单，不过这里还是要多说一句：所有的方法都能接收一个 selector 参数来对获取到的结果集进行过滤，来真正的获取我们想要的元素。find()方法的使用是我们这里重点要讲的。 2. find(selector)方法的讲解 # 官方文档的解释：通过一个选择器、jQuery 对象或元素过滤，得到当前匹配的元素集合中每个元素的后代。我们通过这样的代码来更加清晰地了解这句话的意思：$("#main").find(".list"); // 选择器过滤 var $span = $("span"); $("#main").find($span); // jQuery对象过滤 var span = $("span")[0]; $("#main").find(span); // DOM元素过滤 从上面的代码中我们可以看到三种方式都能从$main的所有子孙元素中获取相应的元素。而且find()方法获取子孙元素时采用的时深度搜索优先的策略进行检索的。还是拿我们上面的实例来举例，$('.current')就是当前的元素，然后用 find()获取该元素所有的子孙元素：从上面的图中我们可以看到，find()先找到第一个.item 元素，然后开始检索.item 里的子元素.s；.item 里的子元素检索完成以后，开始寻找第二个.item 元素，然后接着检索第二个.item 里的子元素；第二个.item 检索完成后，开始进行第三个。深度优先的策略就是：先闷头一直往下找，下一个没有元素时再确认是否有 next()兄弟元素，如果没有兄弟元素，那么再往上返回一级，确认这个元素有没有兄弟元素，直到第一级的子元素；如果当前元素有兄弟元素，那么就从这个兄弟元素开始往下执行深度搜索。待所有的子元素检索完毕后，find()方法结束。

修改git提交历史中的姓名和email 1. 起因 # 前几天用公司的电脑提交几回代码，也没怎么注意。后来回家之后使用git log查看提交历史时，发现 author 里保存着一些重要的信息。我该怎么办呢，怎么不让别人看到呢，虽然目前这些东西就我一个人用，万一被别人看到了呢，毕竟是放在全世界最流行的代码托管网站。 2. 解决过程 # 在网上倒是找了一些很多的方案，可是因为对 git 命令还不是很熟悉的前提下，即使人家给出了答案都不知道怎么用，比如下面的这几个博文里讲解的：Git 修改提交的用户名和 Emailgit 修改历史提交批量修改 git log 的内容不过都没有解决我的问题，主要还是我学的不多，看不懂，汗。 3. 最终解决方案 # 最后在一个网站找到了一条命令，把里面的参数修改为自己的，回车运行即可$git filter-branch -f --env-filter "GIT_AUTHOR_NAME='Newname'; GIT_AUTHOR_EMAIL='newemail'; GIT_COMMITTER_NAME='Newname'; GIT_COMMITTER_EMAIL='newemail';" HEAD 具体操作过程： 进入到你的文件目录里 先敲一个命令：git --version 修改这条命令里的 newname 和 newemial，如我后面修改的命令: git filter-branch -f --env-filter "GIT_AUTHOR_NAME='wenzi'; GIT_AUTHOR_EMAIL='xxx@gmail.coml'; GIT_COMMITTER_NAME='wenzi'; GIT_COMMITTER_EMAIL='xxx@gmail.com';" HEAD 回车执行 做完上面这几步后，就能看到我们的命令正在执行！完毕！如果你还有什么不明白的，欢迎留言讨论。