摘要：中的代碼中的代碼除外都可識(shí)別所有的可識(shí)別只有可以識(shí)別僅與可以識(shí)別以及以上版本都可以識(shí)別僅可識(shí)別以及以下版本可識(shí)別以及以上版本可識(shí)別僅可識(shí)別以及以下版本可識(shí)別以及以上版本可識(shí)別開發(fā)工具相關(guān)書籍前端性能與優(yōu)化

Markdown語(yǔ)法說明：http://www.appinn.com/markdown/

IE的內(nèi)核是Trident、Mozilla的內(nèi)核是Gecko、Chrome的內(nèi)核是Blink（Webkit的一個(gè)分支，谷歌和Opera合作推出）、Opera的內(nèi)核是Blink（原內(nèi)核是Presto，現(xiàn)已廢棄。）

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

這里的this其實(shí)是一個(gè)Html 元素(textbox)，textbox有text屬性，所以這樣寫是完全沒有什么問題的。
但是如果將this換成$(this)就不是那回事了，Error–報(bào)了。this與$(this)的區(qū)別在此。

錯(cuò)誤代碼：

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

這里的$(this)是一個(gè)JQuery對(duì)象，而jQuery對(duì)象沒有title 屬性，因此這樣寫是錯(cuò)誤的。

JQuery擁有attr()方法可以get/set DOM對(duì)象的屬性，所以正確的寫法應(yīng)該是這樣：

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

請(qǐng)看下面一段代碼：

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

這就是一個(gè)典型的閉包

定義匿名函數(shù)后立刻執(zhí)行，并且不會(huì)引起window屬性的變化，例如：

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

換成匿名函數(shù)調(diào)用，如下代碼：

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

這樣子就不會(huì)引起window屬性的增加。

http://jquery.org.cn/jqapi

/***************************************
***********查詢字符串參數(shù)****************
***************************************/
function getQueryStringArgs(){
    //取得查詢字符串并去掉開頭的問號(hào)
  var gs = (location.search.length > 0 ?location.search.substring(1) : ""),
   //substring(start,stop) 查詢字符串介于兩個(gè)指定下標(biāo)之間的字符
  //保存數(shù)據(jù)的對(duì)象
  args = {},
  //取得每一項(xiàng)
  items = gs.length ? gs.split("&") : [],//split("&") 將字符串分隔成字符串?dāng)?shù)組
  item = null,
    name = null,
    value = null,
  //for循環(huán)中使用
  i = 0,
  len = items.length;
  //逐個(gè)將每一項(xiàng)添加到args對(duì)象中去
  for (i=0; i
1.6 居中顯示的一些方法

1.6.1 寬高固定的盒子居中
結(jié)構(gòu):


    


樣式：
/*寬高固定 居中顯示核心代碼*/
.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%);
}
因?yàn)槭褂冒俜直戎刀ㄎ唬瑓⒖键c(diǎn)在盒子的中心。
寬高未知的情況下，由此方法可延伸，使用javascript動(dòng)態(tài)獲取。
1.6.2 模板化居中顯示：(以下方法可供模板化的CSS class)
結(jié)構(gòu)：

    

        

            <--! you Code...  -->
        

    



樣式：
.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 高級(jí)程序設(shè)計(jì)》的一些代碼
/***************************************
***********查詢字符串參數(shù)****************
***************************************/
function getQueryStringArgs(){
    //取得查詢字符串并去掉開頭的問號(hào)
  var gs = (location.search.length > 0 ?location.search.substring(1) : ""),
   //substring(start,stop) 查詢字符串介于兩個(gè)指定下標(biāo)之間的字符
  //保存數(shù)據(jù)的對(duì)象
  args = {},
  //取得每一項(xiàng)
  items = gs.length ? gs.split("&") : [],//split("&") 將字符串分隔成字符串?dāng)?shù)組
  item = null,
    name = null,
    value = null,
  //for循環(huán)中使用
  i = 0,
  len = items.length;
  //逐個(gè)將每一項(xiàng)添加到args對(duì)象中去
  for (i=0; i
2 關(guān)于移動(dòng)Web開發(fā)：
2.1 關(guān)于PPI
　PPI全稱為Pixel Per Inch，譯為每英寸像素取值，更確切的說法應(yīng)該是像素密度，也就是衡量單位物理面積內(nèi)擁有像素值的情況。PPI中的pixel指的應(yīng)該是物理像素。
顯示器上的像素我們就稱之為物理像素(physical pixel)或者設(shè)備像素(device pixel)。
CSS像素從來都只是一個(gè)相對(duì)值。在高PPI的設(shè)備上，CSS像素甚至在默認(rèn)狀態(tài)下就相當(dāng)于多個(gè)物理像素的尺寸。

2.2 webkit內(nèi)核中的一些私有的meta標(biāo)簽








2.3 CSS基礎(chǔ)交互
設(shè)置全局的CSS樣式，避免圖中的長(zhǎng)按彈出菜單與選中文本的行為
69b05e0ajw1evlphajoosj20hs0qoadd.jpg
代碼如下：
a, img {
    -webkit-touch-callout: none;  /* 禁止長(zhǎng)按鏈接與圖片彈出菜單 */
}
html, body {
    -webkit-user-select: none;  /* 禁止選中文本（如無文本選中需求，此為必選項(xiàng)） */
    user-select: none;
}
img {
    vertical-align：bottom;  /* 解決移動(dòng)端圖片的父元素高度多出3.5px */
}
3 關(guān)于前端兼容性的儲(chǔ)備
3.1 一句話儲(chǔ)備：

瀏覽器默認(rèn)的margin值和padding值等不統(tǒng)一樣式，可以使用重置樣式，如*{margin:0;*padding:0;}

PNG24位圖片在IE6瀏覽器上出現(xiàn)背景，可使用PNG8位來替代，或使用成熟js濾鏡方案。

IE6元素在浮動(dòng)后產(chǎn)生雙邊距問題，在浮動(dòng)后添加 _display:inline,使該元素轉(zhuǎn)換成行內(nèi)元素。



3.2 css中的hack代碼
.hack {
    background-color:red