Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
163 lines (93 sloc) 7.43 KB

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

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

2013-08-30


async 和 defer

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

  • asyncHTML5新增的属性,可选,使用语句如<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中如何使得不确定widthheight<img>标签的图片水平居中呢?

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

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

2013-09-30


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

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

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

localStorage.setItem(key,value)

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

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

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

localStorage.setItem()后效果截图

从上面的代码可以看到,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

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

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

  1. 一次性清除:使用localStorage.clear(),使用clear()方法会所有保存数据都清除掉,因此此操作是危险性的,除非你真想这么做。
  2. 个别清除 :使用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,同时也可以记录自己的学习过程。