HTML CSS
CSS hack原理及常用hack技巧
原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1）属性hack。2）选择器hack。3）IE条件注释
- IE条件注释：适用于[IE5, IE9]常见格式如下
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
- 选择器hack：不同浏览器对选择器的支持不一样
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
- 属性hack：不同浏览器解析bug或方法
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
JavaScript
Cookie, LocalStorage 与 SessionStorage异同
HTTP Cookie（也叫Web cookie或者浏览器Cookie）是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。比较经典的，可以它用来确定两次请求是否来自于同一个浏览器，从而能够确认和保持用户的登录状态。Cookie的使用使得基于无状态的HTTP协议上记录稳定的状态信息成为了可能
不同
- cookie由服务端生成，用于标识用户身份；而两个storage用于浏览器端缓存数据
- 一般情况下浏览器端不会修改 cookie，但会频繁操作两个storage
cookie有path概念，子路径可以访问父路径 cookie，父路径不能访问子路径 cookie - 有效期： cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
- 浏览器不能保存超过300个 cookie，单个服务器不能超过20个，每个 cookie不能超过4k。web storage大小支持能达到5M
- 共享：sessionStorage不能共享，localStorage在同源文档之间共享， cookie在同源且符合path规则的文档之间共享
如果保存了 cookie的话，http请求中一定会带上；而两个storage可以由脚本选择性的提交 - 安全性方面， cookie中最好不要放置任何明文的东西。两个storage的数据提交后在服务端一定要校验
相同
三者都是键值对的集合
都会在浏览器端保存，有大小限制，同源限制
什么闭包,闭包有什么用
- 1.闭包是在某个作用域内定义的函数，它可以访问这个作用域内的变量。2.闭包是指可以访问另一个函数作用域中变量的函数
闭包作用域链通常包括三个部分：
函数本身作用域。
闭包定义时的作用域。
全局作用域。 - 闭包常见用途：
创建特权方法用于访问控制
事件处理程序及回调
创建私有变量,避免变量的全局污染,让一个变量驻扎在内存中,私有成员的存在 可以读取函数内部的变量
!function(){
var lives = 50
window.奖励一条命 = function(){
lives += 1
}
window.死一条命 = function(){
lives -= 1
}
}();
function a(){
var a=1;
a++;
console.log(a); //2 2 2
}
!function aa(){
var a=1;
return function(){
a++;
console.log(a); //2 3 4
}
}();
var c=(function(){
var a=1;
function bb(){
a++;
console.log(a);
}
function cc(){
a++;
console.log(a);
}
return {
bb:bb,
cc:cc
}
})();
