前端碎片知识储备

Markdown语法说明：http://www.appinn.com/markdown/

1、前端碎片知识总结篇

1.1 关于浏览器

IE的内核是Trident、Mozilla的内核是Gecko、Chrome的内核是Blink（Webkit的一个分支，谷歌和Opera合作推出）、Opera的内核是Blink（原内核是Presto，现已废弃。）

1.2 jQuery中this与$(this)的区别是什么？

$(#textbo.hover(){
    function() {
           this.title = "Test";
      },
      fucntion() {
          this.title = "OK”;
      }
})

这里的this其实是一个Html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了，Error–报了。this与$(this)的区别在此。

错误代码：

//Error Code：
$("#textbox").hover(
   function() {
      $(this).title ＝ "Test";
   },
   function() {
      $(this).title = "OK";
   }
);

这里的$(this)是一个JQuery对象，而jQuery对象沒有title 属性，因此这样写是错误的。

JQuery拥有attr()方法可以get/set DOM对象的属性，所以正确的写法应该是这样：

$("#textbox").hover(
  function() {
     $(this).attr(’title’, ‘Test’);
  },
  function() {
     $(this).attr(’title’, ‘OK’);
  }
);

1.3 有关于闭包的理解。

请看下面一段代码：

(function(x){
    return function(y){
        return function(z){
            alert(123);
            return x+y+z;//结果弹出123，并返回6
        }  
    } 
}(1)(2)(3));

这就是一个典型的闭包

定义匿名函数后立刻执行，并且不会引起window属性的变化，例如：

for (var i=0; i<10; i++) {
 alert(window.i); // window.i=10
}

换成匿名函数调用，如下代码：

(function(){
for (var i=0; i<10; i++) {}
alert(window.i); // window.i = undefined
})();

这样子就不会引起window属性的增加。

1.4 Jquery 中文Api 地址：

http://jquery.org.cn/jqapi

1.5 查询字符串参数

/***************************************
***********查询字符串参数****************
***************************************/
function getQueryStringArgs(){
    //取得查询字符串并去掉开头的问号
  var gs = (location.search.length > 0 ?location.search.substring(1) : ""),
   //substring(start,stop) 查询字符串介于两个指定下标之间的字符
  //保存数据的对象
  args = {},
  //取得每一项
  items = gs.length ? gs.split("&") : [],//split("&") 将字符串分隔成字符串数组
  item = null,
    name = null,
    value = null,
  //for循环中使用
  i = 0,
  len = items.length;
  //逐个将每一项添加到args对象中去
  for (i=0; i<len; i++){
    item = items[i].split("=");
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);
    if(name.length){
      args[name] =value;
    }
  }
  return args;
}
var a = getQueryStringArgs();
console.log(a);

1.6 居中显示的一些方法

1.6.1 宽高固定的盒子居中

结构:

<div class="sl-hvalign">
    <div class="sl-hvalign-inner"></div>
</div>

样式：

/*宽高固定 居中显示核心代码*/
.sl-hvalign{position:relative}
.sl-hvslign-inner {
    width: 530px;
  height: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -160px 0 0 -265px; /* 向上偏移高度1/2 向左偏移宽度1/2 */
}

也可以使用 transform 偏移，样式:

.sl-hvslign-inner{
    transform: translate(-50%, -50%);
}

因为使用百分比值定位，参考点在盒子的中心。
宽高未知的情况下，由此方法可延伸，使用javascript动态获取。

1.6.2 模板化居中显示：(以下方法可供模板化的CSS class)

结构：

<div class="sl-hvalign"><!--该层需要设定宽度-->
    <div class="sl-hvalign-cnt">
        <div class="sl-hvalign-cnt-inner">
            <--! you Code...  -->
        </div><!-- sl-hvalign-cnt-inner end-->
    </div><!-- sl-hvalign-cnt end-->
</div><!-- sl-hvalign end-->

样式：

.sl-hvalign{
    display:table;
    overflow:hidden;
    margin:0 auto;
    height:100%;
    *position:relative
}
.sl-hvalign-cnt{
    dispaly:table-cell;
    vertical-align:middle;
    *position:absolute;
    top:50%
}
.sl-hvalign-cnt-inner{
    *position:absolute;
    *top:-50%
}

来自：饿了么前端工程师 sofish

1.7 《javascript 高级程序设计》的一些代码

/***************************************
***********查询字符串参数****************
***************************************/
function getQueryStringArgs(){
    //取得查询字符串并去掉开头的问号
  var gs = (location.search.length > 0 ?location.search.substring(1) : ""),
   //substring(start,stop) 查询字符串介于两个指定下标之间的字符
  //保存数据的对象
  args = {},
  //取得每一项
  items = gs.length ? gs.split("&") : [],//split("&") 将字符串分隔成字符串数组
  item = null,
    name = null,
    value = null,
  //for循环中使用
  i = 0,
  len = items.length;
  //逐个将每一项添加到args对象中去
  for (i=0; i<len; i++){
    item = items[i].split("=");
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);
    if(name.length){
      args[name] =value;
    }
  }
  return args;
}
var a = getQueryStringArgs();
console.log(a);

2 关于移动Web开发：

2.1 关于PPI

　PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。PPI中的pixel指的应该是物理像素。
显示器上的像素我们就称之为物理像素(physical pixel)或者设备像素(device pixel)。
CSS像素从来都只是一个相对值。在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。

PPI示意图

2.2 webkit内核中的一些私有的meta标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<!--强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iPhone设备中的safari私有meta标签，表示允许全屏模式浏览-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--iPhone的私有标签，它指定的iPhone中safari顶端的状态条的样式-->
<meta content="telephone=no" name="format-detection">
<!--忽略将页面中的数字识别为电话号码-->

2.3 CSS基础交互

设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为
69b05e0ajw1evlphajoosj20hs0qoadd.jpg

代码如下：

a, img {
    -webkit-touch-callout: none;  /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;  /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
img {
    vertical-align：bottom;  /* 解决移动端图片的父元素高度多出3.5px */
}

3 关于前端兼容性的储备

3.1 一句话储备：

浏览器默认的margin值和padding值等不统一样式，可以使用重置样式，如*{margin:0;*padding:0;}
PNG24位图片在IE6浏览器上出现背景，可使用PNG8位来替代，或使用成熟js滤镜方案。
IE6元素在浮动后产生双边距问题，在浮动后添加 _display:inline,使该元素转换成行内元素。

3.2 css中的hack代码

.hack {
    background-color:red\0; /* ie 8/9*/
    background-color: blue\9\0; /* ie 9*/
    background-color: blue\9; /* ie 6、7、8*/
    +background-color:#CDCDCD; /* ie 6、7*/
    *background-color:#dddd00; /* ie 7*/
    _background-color:#CDCDCD; /* ie 6*/
}

3.3 html中的hack代码

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->