pigerla.github.com/聚少成多，积小致巨.md at master · pigerla/pigerla.github.com

知识一点一滴地积累起来，就会从少变多。

此文章是记录生活中学到的点滴知识点，不成文不成章，就暂且记录在此吧。

2013-08-30

async 和 defer

在HTML 4.01中，元素<script>定义了6个属性，其中包含async和defer,我们就来说说它们两，尽管比较少用到。

async是HTML5新增的属性，可选，使用语句如<script type="text/javascript" src="demo_async.js" async="async"></script>（这是在XHTML文档中的写法，在HTML5文档中的写法是<script type="text/javascript" src="demo_async.js" async></script>``）,其中src="..."是必须的，因为async属性只对外部脚本文件有效。使用它，就可以异步加载该脚本文件，但不会阻塞其他操作，如加载html,css`等，当该脚本加载完之后就马上去解析和执行，所以最好这个脚本独立性要好，不依赖其他脚本为好，不然会容易报错。
defer可选，使用语句如<script type="text/javascript" src="demo_defer.js" defer="defer"></script>，其中src="..."也是必须的，因为defer属性也只对外部脚本文件有效。使用defer即使脚本放在head里面，它也会等待在html页面解析完毕之后再去执行，这好比把这个脚本放在了页面底部。反过来说，如果没有加defer此属性，而脚本又放置在head,结果就会导致页面一篇空白，这是多么糟糕的事情。

变量命名

类命名: 首字母大写, 驼峰式命名. 如 PigerLa, ILoveYou;
对象实例：首字母小写，驼峰式命名，如 pigerLa , iLoveYou;
函数命名: 首字母小写,驼峰式命名. 如 pigerLa , iLoveYou;
循环变量：使用i ,j , k;
临时变量：以_开始的变量，如_tmp， _pigerLa；
蛇形命名：var a_b_c_d_...;
推荐使用 var a = function(){},代替function a(){},防止同名function会被覆盖。

作用域

内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。

function是有作用域的，if()else()，for()是没有作用域的,没有作用域的意思就是里面的变量，外部也是可以访问的。
没有通过var关键字来声明变量，可作为全局变量看待。

2013-09-05

Solr , Apache属下的一个非常著名，非常快速的开源免费企业化搜索平台；为我们提供便捷的全文检索服务。全文检索好比把直接输入的字符串或者拼接起来的字符串，组合成查询语句来进行查询。

2013-09-06

基本类型不能被赋属性值。
数组：splice会截取数组，而slice则不会。
基本类型的变量赋值是值复制，引用类型（对象）的变量赋值是引用赋值。

Bootstrap图片居中

在bootstrap中如何使得不确定width和height的<img>标签的图片水平居中呢？

通常都会给<img>外层添加一层<a>链接或者<div>,这里都称为父块，解决方案就是，在父块里加如下样式可以。

display: table;      //激活table的属性
width: auto;		
margin-left: auto;
margin-right: auto;

2013-09-30

HTML5本地存储localStorage的一些基本使用

HTML5本地存储API中的localStorage和sessionStorage在使用方法上是相同的，区别就是使用sessionStorage，在关闭页面后就会被清空记录，而localStorage则会一直保存着。

接下来就以localStorage为例，会对此展开基本使用方法的介绍。

localStorage.setItem(key,value)

个人觉得localStorage API的使用方法简单易懂的，首先要知道，localStorage本地保存数据是以(key,value)（键值对）的形式来保存的。调用setItem(key,value)即可保存一个键值对数据。打开chrome的Console输入如下代码：

localStorage.setItem(8 , 24);
localStorage.setItem("Spy","pigerla.com");
localStorage.setItem("array",[1,2,3,4,5]);

然后点击Resources标签栏，再点击Local Storage后展开，即可看到保存后的数据，例子截图如下：

从上面的代码可以看到，setItem可以直接保存基本数据类型和引用数据类型。是不是很方便，而且从字面上理解set就是要设置，也即是保存；Item就是数据项，因此setItem就是保存数据的意思。

localStorage.getItem(key)

取出value的值是使用localStorage.getItem(key)的，先观察如下代码以及输出：

localStorage.getItem("array");
输出："1,2,3,4,5"

localStorage.getItem(8);
输出："24"

localStorage.getItem("Spy");
输出："pigerla.com"

localStorage.getItem(24);
输出：null

localStorage.getItem("pigerla.com");
输出：null

首先我们也很容易理解，get一词就是带有拿、取出的意思，注意的是getItem里面的参数是key,如果你输入的是value值，那只会返回null。

如何清除掉本地存储数据？

清除数据分为一次性清除和个别清除。

一次性清除：使用localStorage.clear()，使用clear()方法会所有保存数据都清除掉，因此此操作是危险性的，除非你真想这么做。
个别清除 ：使用localStorage.removeItem(key),如何个别清除？这个要看你如何去遍历数据、设定条件，然后执行此操作。

遍历保存在本地的数据

localStorage也是有长度的，如何知道呢？这里HTML5也提供的简单的接口：调用length属性即可。

localStorage.length；    //返回本地数据的长度

同时，获取第 n 个数据的 key 键值则调用key()方法：localStorage.key(n)

localStorage.key(1);
输出："Spy"

localStorage.key(0)；   
输出："8"

可以看出只能拿到key的值；需要拿到value值的话，还需要借助上面所说的getItem()。

localStorage.getItem(localStorage.key(0));
输出："24"

localStorage.getItem(localStorage.key(1));
输出："pigerla.com"

localStorage的存储大小以及溢出检测

一般来说，localStorage的存储大小为4M,相对cookies来说是大了很多很多，因此存储的数据量也就更多了。

溢出检测，采用try{ } catch{ }形式来进行捕捉：

try{
	localStorage.setItem(key,value);
}catch(oException){
	if(oException.name == 'QuotaExceededError'){
		console.log('已经超出本地存储限定大小！');
		// 可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存
		localStorage.clear();
		localStorage.setItem(key,value);
	}
}

总结

当时，我使用localStorage相关API的时候，文章HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理对我帮助很大，我也是重新按照自己的思路整理，并编写成自己的blog，同时也可以记录自己的学习过程。

pigerla.github.com/_posts/聚少成多，积小致巨.md