前端碎片知識儲備

Markdown語法說明：http://www.appinn.com/markdown/

一、前端碎片知識總結篇

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像素甚至在默認狀態下就至關於多個物理像素的尺寸。

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 六、七、8*/
    +background-color:#CDCDCD; /* ie 六、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]-->

4 開發工具

4.1 相關書籍

5 前端性能與優化