互聯網 - 大數據

文章出處
調試工具
iOS5 Web調試工具iWebinspector

各種前端工具

html5與css3技術應用評估

各種奇妙的hack

幾乎所有設備的屏幕尺寸與像素密度表

ios端移動設備參數速查

瀏覽器兼容表

移動設備查詢器

移動設備適配庫

viewport與設備尺寸在線檢測器

html5移動端兼容性速查

在線轉換字體

css3選擇器測試

兼容性速查表（這個非常好）

瀏覽器的一些獨特參數

各種各樣的媒體查詢收集（移動端少不了的）

css3動畫在線制作器

css3漸變在線制作器

賽貝爾曲線在線制作器

flexbox在線制作器

CSS3各種渲染效果在線工具（IE出品）

resize添加到收藏夾后，可直接在瀏覽器中出現各種分辨率的選擇工具來查看不同分辨率下的頁面效果

移動端手勢表

攜程UED團隊的樣式分析
webkit獨有的樣式分析
HTML5相關的測試站點
1、當前瀏覽器HTML5支持情況在線測試：http://www.html5test.com/
2、當前瀏覽器對HTML5、CSS3的支持情況：http://www.findmebyip.com/
3、各個瀏覽器對HTML5、CSS3支持情況大全：http://www.caniuse.com/
html5手冊
http://www.php100.com/manual/html5/
調試工具Fiddler（手機抓包與配host）
首先，保證PC和移動設備在同一個局域網下；
PC上開啟fiddler，并在設置中勾選“allow remote computers to connect”

首先，保證PC和移動設備在同一個局域網下；

PC上開啟fiddler，并在設置中勾選“allow remote computers to connect”

手機上設置代理，代理IP為PC的IP地址，端口為8888（這是fiddler的默認端口）。通常手機上可以直接設置代理，如果沒有，可以去下載一個叫ProxyDroid的APP來實現代理的設置。此時你會發現，用手機上網，走的其實是PC上的fiddler，所有的請求包都會在fiddler中列出來，配合willow使用，即可實現配host，甚至是反向代理的操作。

文章出處
https://github.com/AlloyTeam/Mars
https://github.com/hoosin/mobile-web-favorites
跨域問題
手機瀏覽器也是瀏覽器，在ajax調用外部api的時候也存在跨域問題，這時候可以讓后端加上兩個http頭

Access-Control-Allow-Origin "*"
Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

第一個頭可以避免跨域問題，第二個頭可以方便ajax請求設置content-type等配置項
 
zepto使用當中遇到的問題
Zepto 源碼中有 14 個模塊，而官網提供的標準版里面只有 7 個模塊！而且居然不包含對移動端開發非常重要的 touch 模塊（提供對觸摸事件的支持）！
所以我的建議是，不要從官網下載，而是從 Github 下載了源代碼之后自己 Build 一個版本，這樣你可以自行挑選適合的模塊，下面說說我了解的一些模塊

polyfill，zepto，detect，event，ajax，form，fx 這7個就是標準版包含的模塊

fx_methods 有了這個模塊之后，.show() .hide() 等幾個方法才能支持動畫了，比如 .show('fast')

data 提供對 .data() 方法的完整支持，像 jQuery 一樣用內存對象存儲

assets 移除 img 元素后做一些特殊處理，用來清理內存

selector 更多的選擇器的支持，后面會提到

touch 對觸摸事件的支持，比如 tap 事件

不要使用click事件而用tap事件
click 事件有 200~300 ms 的延遲，為了更快的響應，最好用 Zepto 提供的 tap 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成
zepto對css選擇器的支持遠不如jQuery
:text :checkbox :first 等等在 jQuery 里面很常用的選擇器，Zepto 不支持！原因很簡單，jQuery 通過自己編寫的 sizzle 引擎來支持 CSS 選擇器，而 Zepto 是直接通過瀏覽器提供的document.querySelectorAll 接口。這個接口只支持標準的 CSS 選擇器，而上面提到的那些屬于 jQuery 選擇器擴展，所以仔細看看這個網頁，注意一下這些選擇器。
上面提到的 selector 模塊，如果有這個模塊的話，能夠支持 部分 的 jQuery 選擇器擴展，列舉如下：

:visible :hidden

:selected :checked

:parent

:first :last :eq

:contains :has

元素的尺寸計算
Zepto 沒有 .innerHeight() .outerWidth() 等四個方法，其次，它的 .height()/.width() 方法也不完善，對于display:none 的元素，計算出的高寬都是 0
為什么jQuery能夠將display:none的元素計算出尺寸呢，查看源碼可以發現原來是jQuery會先設置其css樣式為

position: "absolute", visibility: "hidden", display: "block" 

計算完高寬后再恢復
prop方法的缺陷
以為用下面這句代碼可以實現把一個文本框設置為只讀

$('#text').prop('readonly', true)

結果卻發現只能寫成如下才能工作：

$('#text').prop('readOnly', true)

那為什么jQuery運用上面一句照樣也能工作呢，查看源碼后發現原因很簡單那就是

jQuery.each([
"tabIndex",
"readOnly",
"maxLength",
"cellSpacing",
"cellPadding",
"rowSpan",
"colSpan",
"useMap",
"frameBorder",
"contentEditable"
], function() {
jQuery.propFix[ this.toLowerCase() ] = this;
});

使用fadeIn()方法替代show方法
Zepto 的 .show() 動畫實現的很簡單，沒有高寬的變化，而是將透明度從 0 逐漸變為 1
如果沒有 fx_mehods 模塊的話，.show() 方法是不支持動畫的，不過有了這模塊后，動畫的支持還是有點小問題，所以建議使用 .fadeIn() 方法來替代 .show()
CSS 3濾鏡

-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);

 
交叉淡變

background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

 
iphone5媒體查詢

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {/* iPhone 5 or iPod Touch 5th generation */}

使用媒體查詢，提供不同的啟動圖片：

<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

 
andriod上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

 
移動端 HTML5 input date 不支持 placeholder 問題
input type date 的 placeholder 支持性有一定問題，因為瀏覽器會針對此類型 input 增加 datepicker 模塊，看上去沒那么必要支持 placeholder。對 input type date 使用 placeholder 的目的是為了讓用戶更準確的輸入日期格式，iOS 上會有 datepicker 不會顯示 placeholder 文字
解決方法很簡單，先使其 type 為 text，此時支持 placeholder，當觸摸或者聚焦的時候，使用 JS 切換使其觸發 datepicker 功能

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date"> 

 
移動端 HTML5 audio autoplay 失效問題
由于自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發才可以播放
解決方法很簡單，先通過用戶 touchstart 觸碰，觸發播放并暫停（音頻開始加載，后面用 JS 再操作就沒問題了）

document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});

 
touchmove事件的小細節 
通常情況下我們會這樣

$('div').on('touchmove', function(){
//.….code
});

如果中間的 code 需要處理的東西多的話，FPS(FPS代表每秒鐘屏幕刷新的次數，當該參數變低時，會導致屏幕變卡、延遲出效果) 就會下降影響程序順滑度，而如果改成如下這樣會快很多（事實上你了解JS作用域鏈就會清楚原理  有興趣可以看我另外一篇博文  里面有介紹到）

$('div').on('touchmove', function(){
setTimeout(function(){
//.….code
},0);
});

 
禁止用戶選中文字

-webkit-user-select:none

 
禁止 iOS 彈出各種操作窗口

-webkit-touch-callout:none

 
禁止 iOS 識別長串數字為電話

<meta content="telephone=no" name="format-detection" />

 

使設備瀏覽網頁時對數字不啟用電話功能（不同設備解釋不同，iTouch 點擊數字為存入聯系人，iPhone 為撥打電話），忽略將頁面中的數字識別為電話號碼。

若需要啟用電話功能將 telephone=yes 即可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的鏈接會在ios設備上打開相應的程序組件。

不讓 Android 手機識別郵箱

<meta content="email=no" name="format-detection" />

 
動畫過程中動畫閃白問題
使用 CSS3 動畫的時盡量利用3D加速，從而使得動畫變得流暢。動畫過程中的動畫閃白可以通過 backface-visibility 隱藏。

-webkit-transform-style: preserve-3d;
/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-backface-visibility: hidden;
/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/

 
橫豎屏會出現字體加粗不一致問題
iOS 瀏覽器橫屏時會重置字體大小，設置 text-size-adjust 為 none 可以解決 iOS 上的問題，但桌面版 Safari 的字體縮放功能會失效，因此最佳方案是將 text-size-adjust 為 100% 。

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

 
偽類 :active 生效
要CSS偽類 :active 生效，只需要給 document 綁定 touchstart 或 touchend 事件，像如下所示：

<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener('touchstart',function(){},false);
</script>

文章出處
https://github.com/hoosin/mobile-web-favorites
總況
meta 標簽分兩大部分：HTTP 標題信息（http-equiv）和頁面描述信息（name）。
http-equiv 屬性的 Content-Type 值（顯示字符集的設定）
設定頁面使用的字符集，用以說明主頁制作所使用的文字語言，瀏覽器會根據此來調用相應的字符集顯示 page 內容。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 
name 屬性的 viewport 值（移動屏幕的縮放）
也就是可視區域。對于桌面瀏覽器，我們都很清楚 viewport 是什么，就是除去了所有工具欄、狀態欄、滾動條等等之后用于看網頁的區域，這是真正有效的區域。由于移動設備屏幕寬度不同于傳統 web，因此我們需要改變 viewport 值。

width – // viewport 的寬度 （范圍從 200 到 10,000，默認為 980 像素）

height – // viewport 的高度 （范圍從 223 到 10,000 ）

initial-scale – // 初始的縮放比例 （范圍從 > 0 到 10）

minimum-scale – // 允許用戶縮放到的最小比例

maximum-scale – // 允許用戶縮放到的最大比例

user-scalable – // 用戶是否可以手動縮放 (no，yes)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

上面代碼解釋如下：

強制讓文檔與設備的寬度保持 1:1 ；

文檔最大的寬度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；

user-scalable 定義用戶是否可以手動縮放（ no 為不縮放），使頁面固定設備上面的大小；

有些安卓系統自帶的瀏覽器并不支持這一條規則，能夠對頁面進行放大，一旦放大響應的 box 也隨之放大，導致頁面出現錯亂問題，解決方法：定義頁面的最小寬度

body {
min-width: 320px;
}

 
name 屬性的 format-detection 值（忽略頁面中的數字識別為電話號碼）

<meta name="format-detection" content="telephone=no" />

使設備瀏覽網頁時對數字不啟用電話功能（不同設備解釋不同，iTouch 點擊數字為存入聯系人，iPhone 為撥打電話），忽略將頁面中的數字識別為電話號碼。

若需要啟用電話功能將 telephone=yes 即可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的鏈接會在ios設備上打開相應的程序組件。

name 屬性的 apple-mobile-web-app-capable 值（網站開啟對 web app 程序的支持）

<meta name="apple-mobile-web-app-capable" content="yes" />

網站開啟對 web app 程序的支持。

該 meta 可以看出內容為“蘋果設備 web 應用程序 xx”，就是說該 meta 是專門定義 web 應用的。

name 屬性的 apple-mobile-web-app-status-bar-style 值（改變頂部狀態條的顏色）

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

在 web app 應用下狀態條（屏幕頂部條）的顏色；

默認值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；

name 屬性設置作者姓名及聯系方式

<meta name="author" contect="liudanyun, liudy1024@163.com" />

 
蘋果 Web App 其他設置
配合 Web App 的 icon 和啟動界面需要額外的兩端代碼進行設定

<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />

說明：這個 link 就是設置 Web App 的放置主屏幕上 icon 文件路徑。
使用：

該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。

圖片尺寸可以設定為 57*57（px）或者 Retina 可以定為 114*114（px），iPad 尺寸為 72*72（px）

<link rel="apple-touch-startup-image" href="logo_startup.png" />

說明：這個 link 就是設置啟動時候的界面。
使用：

放置的路徑和上面一樣。

官方規定啟動界面的尺寸必須為 320*640（px），原本以為 Retina 屏幕可以支持雙倍，但是不支持，圖片顯示不出來。

 
常用meta說明

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />

第一個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽； 尤其要注意的是content里多個屬性的設置一定要用分號+空格來隔開，如果不規范將不會起作用。
其中：

width - viewport的寬度

height - viewport的高度

initial-scale - 初始的縮放比例

minimum-scale - 允許用戶縮放到的最小比例

maximum-scale - 允許用戶縮放到的最大比例

user-scalable - 用戶是否可以手動縮放 第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽； 第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式； 第四個meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼

頁面描述

<link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" />

這個屬性是當用戶把連接保存到手機桌面時使用的圖標，如果不設置，則會用網頁的截圖。有了這，就可以讓你的網頁像APP一樣存在手機里了

<link rel="apple-touch-startup-image" href="/img/startup.png" />

這個是APP啟動畫面圖片，用途和上面的類似，如果不設置，啟動畫面就是白屏，圖片像素就是手機全屏的像素

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

這個描述是表示打開的web app的最上面的時間、信號欄是黑色的，當然也可以設置其它參數，詳細參數說明在：Supported Meta Tags

<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />

這2個描述也很有用的，如果沒有它，你的web app會用safari瀏覽器打開，有了它，就會用獨立進程的無地址欄的打開，完全可以和普通的APP比擬了
下面還有個不錯的css，是用來區分視網膜屏幕的，這樣你可以在iphone這樣的手機里載入2x的圖片，就不會模糊了

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen and (min-resolution:200dpi)
{
#logo{background-image: url(logo@2x.png);}
}

 
樣式表

<link rel=”apple-touch-startup-image” href=”startup.png” /> // 設置開始頁面圖片
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在設置書簽的時候可以顯示好看的圖標
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 肖像模式樣式
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css" // 風景模式樣式
//豎屏時使用的樣式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
//橫屏時使用的樣式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>

文章出處
串的定義
串是由零個或多個字符組成的有限序列，又名叫字符串
串中的字符數目n稱為串的長度
零個字符的串稱為空串
串的抽象數據類型
串的順序存儲結構
串我鏈式存儲結構
一個結點可以存儲一個字符也可以考慮存儲多個字符，最后一個結點若是未被占滿時，可以用#或其它非串值字符補全
樸素的模式匹配算法
對主串的每一個字符作為子串開頭，與要匹配的字符進行匹配。對主串做大循環，每個字符開頭做T的長度的小循環，直到匹配成功或全部遍歷完成為止。
時間復雜度為O(n+m)

/* 返回子串T在主串S中第pos個字符之后的位置。若不存在,則函數返回值為0。 */
/* 其中,T非空,1≤pos≤StrLength(S)。 */
int Index(String S, String T, int pos) 
{
int i = pos; /* i用于主串S中當前位置下標值，若pos不為1，則從pos位置開始匹配 */
int j = 1; /* j用于子串T中當前位置下標值 */
while (i <= S[0] && j <= T[0]) /* 若i小于S的長度并且j小于T的長度時，循環繼續 */
{
if (S[i] == T[j]) /* 兩字母相等則繼續 */
{
++i;
++j; 
} 
else /* 指針后退重新開始匹配 */
{ 
i = i-j+2; /* i退回到上次匹配首位的下一位 */
j = 1; /* j退回到子串T的首位 */
} 
}
if (j > T[0]) 
return i-T[0];
else 
return 0;
}

利用上面的算法，假設我們要從主串goodgoogle中找到google，則需要下面的步驟

想想如果我們要在主串S="00000000000000000000000000000000000000000000000000001"，而要匹配的子串T=“0000000001”
也就是說T串需要在S串的前40個位置都需要判斷10次并得到不匹配的結論，直到第41位才全部匹配相等
 
因此最壞的情況的時間復雜度為O(((n-m)+1)*m)
KMP模式匹配算法原理
如果主串S="abcdefgab",要匹配的子串T="abcdex"
如果用樸素算法的話，則匹配的流程圖如下所示：
細想一下，子串T中“abcdex” 首字母a與后面的串“bcdex”中的任意一個字符都不相等，既然a不與自己后面的子串中任何一個字符相等，那么對于上圖1來說，前五個字符分別相等，意味著子串T的首字符a不可能與s串的第2位到第5位的字符相等，也就是說在上圖中2、3、4、5的判斷都是多余的。
如果子串T中有與首字符相等的字符，也是可以省略一部分不必要的判斷步驟的。
我們把T串各個位置的j值的變化定義為一個數組next，那么next的長度就是T串的長度
舉例說明next數組值推導

KMP模式匹配算法實現代碼

/* 通過計算返回子串T的next數組。 */
void get_next(String T, int *next) 
{
int i,j;
i=1;
j=0;
next[1]=0;
while (i<T[0]) /* 此處T[0]表示串T的長度 */
{
if(j==0 || T[i]== T[j]) /* T[i]表示后綴的單個字符，T[j]表示前綴的單個字符 */
{
++i; 
++j; 
next[i] = j;
} 
else 
j= next[j]; /* 若字符不相同，則j值回溯 */
}
}
/* 返回子串T在主串S中第pos個字符之后的位置。若不存在，則函數返回值為0。 */
/* T非空，1≤pos≤StrLength(S)。 */
int Index_KMP(String S, String T, int pos) 
{
int i = pos; /* i用于主串S中當前位置下標值，若pos不為1，則從pos位置開始匹配 */
int j = 1; /* j用于子串T中當前位置下標值 */
int next[255]; /* 定義一next數組 */
get_next(T, next); /* 對串T作分析，得到next數組 */
while (i <= S[0] && j <= T[0]) /* 若i小于S的長度并且j小于T的長度時，循環繼續 */
{
if (j==0 || S[i] == T[j]) /* 兩字母相等則繼續，與樸素算法增加了j=0判斷 */
{
++i;
++j; 
} 
else /* 指針后退重新開始匹配 */
j = next[j];/* j退回合適的位置，i值不變 */
}
if (j > T[0]) 
return i-T[0];
else 
return 0;
}

上面get_next的時間復雜度為O(m)，而index_KMP中while循環的時間復雜度為O(n)，所以整個算法的時間復雜度為O(n+m)
KMP模式匹配算法改進
比如主串S="aaaabcde"，子串T="aaaaax",那么next數組值分別為012345
利用KMP算法比較的過程如下圖所示：
當i=5,j=5時,b與a不相等，如上圖1
j=next[5]=4，如上圖2，b與第四個位置的a依然不等
j=next[4]=3，如上圖3,...
細想一下，2、3、4、5步驟都是多余的，因為T串的第二、三、四、五位置的字符都與首位a相等，那么可以利用首位的next[1]的值去取代與它相等的字符后續的next[j]的值
改良版的KMP算法實現代碼

/* 求模式串T的next函數修正值并存入數組nextval */
void get_nextval(String T, int *nextval) 
{
int i,j;
i=1;
j=0;
nextval[1]=0;
while (i<T[0]) /* 此處T[0]表示串T的長度 */
{
if(j==0 || T[i]== T[j]) /* T[i]表示后綴的單個字符，T[j]表示前綴的單個字符 */
{
++i; 
++j; 
if (T[i]!=T[j]) /* 若當前字符與前綴字符不同 */
nextval[i] = j; /* 則當前的j為nextval在i位置的值 */
else 
nextval[i] = nextval[j]; /* 如果與前綴字符相同，則將前綴字符的 */
/* nextval值賦值給nextval在i位置的值 */
} 
else 
j= nextval[j]; /* 若字符不相同，則j值回溯 */
}
}

 
nextval數組值推導
（具體分析圖如下所示：
）
另外一個例子（看看你推導正確了沒）

文章出處
看了湯姆大叔的“你真懂JavaScript嗎？”,里面有5道題目，我都一一作了，然后在chrome的控制臺里面運行了一遍，雖然只錯了一道，但還是細細讀了下答案，在此總結一下，看看是否對大家對這些JavaScript底層的原理都懂了。
題目一（所有全局變量都是window的屬性、變量聲明提前、變量賦值不會提前）

if (!("a" in window)) {
var a = 1;
}
alert(a);

因為在JavaScript在變量聲明提前的特性，所以事實上上述代碼相當于下面所示：

 var a;
if (!("a" in window)) {
a = 1;
}
alert(a);

因為所有的全局變量都是window的屬性，所以不會進入循環體內也就不會執行a=1 這也就是為什么答案是undefined
題目二（函數聲明提前、函數表達式相當于變量賦值所以不會提前、函數聲明會覆蓋變量聲明，但不會覆蓋變量賦值）

var a = 1,
b = function a(x) {
x && a(--x);
};
alert(a);

這個題目的答案是1。事實上上述代碼的相當于下而的代碼

var a = 1,
b = function(x) {
x && b(--x);
};
alert(a);

原題目第二行代碼中，b和a同時指向一個地方也就是函數的入口，但是a和b唯一不同的地方在于函數定義結束也就是};后，a就引用不到了，也就是說a的作用域只在函數體內，而b的作用域卻在整個全局范圍內。看圖說話
這里面還有一個重要的概念就是：函數聲明會覆蓋變量聲明，但不會覆蓋變量賦值。看下面的例子：

function value(){
return 1;
}
var value;
alert(typeof value); //"function"

盡快變量聲明在下面定義，但是變量value依然是function，也就是說這種情況下，函數聲明的優先級高于變量聲明的優先級，但如果該變量value賦值了，那結果就完全不一樣了：

function value(){
return 1;
}
var value = 1;
alert(typeof value); //"number"

 
題目三（遇到同名的函數聲明，函數變量不會重新定義）

function a(x) {
return x * 2;
}
var a;
alert(a);

相信你看懂了題目二的注釋之后，這題肯定會了，把答案貼一下。
題目四（callee和caller及函數參數的一些關系）

function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);//結果是10

其實arguments跟數組類似，可以通過方括號語法訪問它的每一個元素，另外arguments和命名參數可以一起使用，它們是共享的，但是這個共享其實不是真正的共享一個內存地址，而是2個不同的內存地址，使用JavaScript引擎來保證2個值是隨時一樣的，所以修改了arguments的值同時也會體現在命名參數上，當然這也有一個前提，那就是這個索引值要小于你傳入的參數個數，也就是說如果你只傳入2個參數，而還繼續使用arguments[2]賦值的話，就會不一致，看如下代碼：

function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2);//這時候因為沒傳遞第三個參數a，所以賦值10以后，alert(a)的結果依然是undefined，而不是10，但如下代碼彈出的結果依然是10，因為和a沒有關系。

 

function b(x, y, a) {
arguments[2] = 10;
alert(arguments[2]);
}
b(1, 2);//結果依然是10

不過在嚴格模式下是不允許修改arguments的值
嚴格模式對如何使用 arguments 對象做出了一些限制。首先,像前面例子中
arguments[2] = 10;
的賦值會變得無效。也就是說,即使把 arguments[2]設置為 10,y 的值仍然不會變成10。其次,重寫 arguments 的值會導致語法錯誤(代碼將不會執行)。
題目五（this的相關概念）

function a() {
alert(this);
}
a.call(null);

 this說直白一點就是當前調用的對象，也就是說如果方法是某個對象的屬性的話，那在該方法內的this就指向這個對象，this指向的是運行時的當前對象。如果某方法是全局函數的話，那該方法內的this就指向window
call方法主要是用來改變作用域鏈的，call方法作為一個function執行代表該方法可以讓另外一個對象作為調用者來調用，call方法的第一個參數是對象調用者，隨后的其它參數是要傳給調用method的參數（如果聲明了的話），根據ECMAScript262規范規定：如果第一個參數傳入的對象調用者是null或者undefined的話，call方法將把全局對象（也就是window）作為this的值。所以，不管你什么時候傳入null，其this都是全局對象window。
所以這題目的答案是[object Window]

文章出處
$
$_命令返回最近一次表達式執行的結果，功能跟按向上的方向鍵再回車是一樣的，但它可以做為一個變量使用在你接下來的表達式中。

$0~$4則代表了最近5個你選擇過的DOM節點。在頁面右擊選擇審查元素，然后在彈出來的DOM結點樹上面隨便點選，這些被點過的節點會被記錄下來，而$0會返回最近一次點選的DOM結點，以此類推，$1返回的是上上次點選的DOM節點，最多保存了5個，如果不夠5個，則返回undefined。
 
Chrome 控制臺中原生支持類jQuery的選擇器，也就是說你可以用$加上熟悉的css選擇器來選擇DOM節點
$(selector)返回的是滿足選擇條件的首個DOM元素。剝去她偽善的外衣，其實$(selector)是原生JavaScript document.querySelector() 的封裝。
同時另一個命令$$(selector)返回的是所有滿足選擇條件的元素的一個集合，是對document.querySelectorAll() 的封裝。
Copy
通過此命令可以將在控制臺獲取到的內容復制到剪貼板
因為我剛剛利用控制臺選擇了一個元素的ID，所以我就用$_，雖然控制臺里面輸出的是undefined，但是你新建一個記事本，ctrl+c試試，很神奇吧
keys&values
keys返回傳入對象所有屬性名組成的數據
values返回所有屬性值組成的數組

monitor&unmonitor
monitor(function)，它接收一個函數名作為參數，每次函數被執行時都會在控制臺輸出一條信息，里面包含了函數的名稱及執行時所傳入的參數。
而unmonitor(function)便是用來停止這一監聽。

 
 

 

文章出處
用typeof 來檢測數據類型
Javascript自帶兩套類型：基本數據類型（undefined，string，null，boolean，function，object）和對象類型。
但是如果嘗試用typeof 來檢測對象類型都一律返回"object"并不能加以區分

typeof null // "object"
typeof [] // "object"
typeof document.childNodes //"object"
typeof /\d/ //"object"
typeof new Number() //"object"

 
用 constructor 屬性來檢測類型的構造函數

[].constructor === Array //true
document.childNodes === NodeList //true
/\d/.constructor === RegExp //true
function isRegExp(obj) {
return obj && typeof obj === "object" && obj.constructor === RegExp;
} //檢測正則表達式對象
function isNull(obj){
return obj === null;
}

用construct檢測可以完成大多數的類型檢測，null特殊直接比較。然而iframe中的數組類型確無法檢測出正確類型，這是用construct檢測的一個缺陷；同時在舊版本IE下DOM和BOM的construct是無法訪問的
利用 Object.prototype.toString 來判斷

Object.prototype.toString.call([]) //"[object Array]"
Object.prototype.toString.call(/\d/) // "[object RegExp]"
Object.prototype.toString.call(1)//"[object Number]"

來看看jQuery源碼中是如何使用toString方法的

/*
* jQuery JavaScript Library v1.11.2
*/
var class2type = {}; //用來保存js數據類型

jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {//構造class2type存儲常用類型的映射關系，遍歷基本類型并賦值，鍵值為 [object 類型]
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
type: function( obj ) {
if ( obj == null ) {//首先如果是null則返回null字符串
return obj + "";
}
//接著判斷給定參數類型是否為object或者function，是的話在映射表中尋找 toString后的鍵值名稱并返回，不是的話利用typeof就可以得到正確類型。
return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call(obj) ] || "object" :
typeof obj;
},
/****************************/ 
jQuery.type(/\d/) //"regexp"
jQuery.type(new Number()) //"number"

這里能夠使用toString方法來檢測是因為不同對象都會重新定義自己的toString方法
說說一些特殊類型的檢測
上述調試是在IE8中進行的，因為undefined 在javascript中并不是關鍵字，在IE8以下（之后的版本不可以賦值）是可以賦值的，查看jQuery.type源碼可知，對于undefined檢測由是 typeof undefined完成的。jQuery.type并不能在舊的IE中檢測出undefined的正確性。想要獲得純凈的undefined可以使用void 0 
另外，對于DOM，BOM對象在舊的IE中使用Objec.prototype.toString檢測出來的值均為 “[object Object]”
但是在chrome下的結果卻完全不同（chrome可以檢測出真實類型）
了解一下jQuery檢測特殊類型

isWindow: function( obj ) {//ECMA規定window為全局對象global，且global.window === global
return obj != null && obj == obj.window;
},
isPlainObject: function( obj ) {
var key;
if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
return false;
}
try {//判斷它最近的原形對象是否含有isPrototypeOf屬性
if ( obj.constructor &&
!hasOwn.call(obj, "constructor") &&
!hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
return false;
}
} catch ( e ) {
return false;
}
if ( support.ownLast ) {
for ( key in obj ) {
return hasOwn.call( obj, key );
}
}

 
mass Framework相對jQuery中改善的地方

var class2type = {//將可能出現的類型都映射在了class2type對象中，從而減少isXXX函數
"[object HTMLDocument]": "Document",
"[object HTMLCollection]": "NodeList",
"[object StaticNodeList]": "NodeList",
"[object DOMWindow]": "Window",
"[object global]": "Window",
"null": "Null",
"NaN": "NaN",
"undefined": "Undefined"
};
type: function(obj, str) {
var result = class2type[(obj == null || obj !== obj) ? obj : serialize.call(obj)] || obj.nodeName || "#"; //serialize == class2type.toString
if (result.charAt(0) === "#") { //兼容舊式瀏覽器與處理個別情況,如window.opera
//利用IE678 window == document為true,document == window竟然為false的神奇特性
if (obj == obj.document && obj.document != obj) {//對DOM，BOM對象采用nodeType（單一）和item（節點集合）進行判斷
result = "Window"; //返回構造器名字
} else if (obj.nodeType === 9) {
result = "Document"; //返回構造器名字
} else if (obj.callee) {
result = "Arguments"; //返回構造器名字
} else if (isFinite(obj.length) && obj.item) {
result = "NodeList"; //處理節點集合
} else {
result = serialize.call(obj).slice(8, -1);
}
}
if (str) {
return str === result;
}
return result;
}

 
類數組
類數組是一類特殊的數據類型存在，他們本身類似Array但是又不能使用Array的方法，他們有一個明顯的特點就是含有length屬性，而且鍵值是以整數有序的排列的。這樣的數組可以通過 Array.slice() 這樣的方法轉換成真正的數組，從而使用Array提供的方法。
常見類數組：arguments，document.forms，document.getElementsByClassName(等一些列節點集合NodeList，HTMLCollection)，或者是一些特殊對象，如下所示：

var arrayLike={ 
0:"a", 
1:"b", 
2:"c", 
length:3 
} 

通常情況下通過Array.slice.call既可以轉換類數組，但是舊IE的HTMLCollection，NodeList不是Object的子類，不能使用該方法，這時候需要構建一個空數組，然后將遍歷節點push就如空數組中，返回新生成的數組即可，同時要區別出window 和 string對象，因為這類的對象同樣含有length>=0（length不可被修改），但是不是類數組。
 
jQuery如何處理類數組的

makeArray: function( arr, results ) {
var ret = results || [];
if ( arr != null ) {
if ( isArraylike( Object(arr) ) ) {
jQuery.merge( ret,
typeof arr === "string" ?
[ arr ] : arr
); //jQuery.merge 合并數組 ，若是字符串則封裝成數組河濱，不是則世界合并
} else {
push.call( ret, arr );
}
}
return ret;
}

 
Ext.js是如何處理類數組的

toArray: function(iterable, start, end) {
if (!iterable || !iterable.length) {
return []; //非類數組類型直接返回[]
 }
if (typeof iterable === 'string') {
iterable = iterable.split(''); //分解字符串
 }
if (supportsSliceOnNodeList) {
return slice.call(iterable, start || 0, end || iterable.length); //對于NodeList支持
 }
var array = [],
i;
start = start || 0;
end = end ? ((end < 0) ? iterable.length + end : end) : iterable.length;
for (i = start; i < end; i++) {
array.push(iterable[i]);
}
return array;
}

 
mass Framework.js是如何處理類數組的

slice: W3C ? function(nodes, start, end) { //var W3C = DOC.dispatchEvent; IE9開始支持W3C的事件模型
return factorys.slice.call(nodes, start, end);
} : function(nodes, start, end) {
var ret = [],
n = nodes.length;
if (end === void 0 || typeof end === "number" && isFinite(end)) {
start = parseInt(start, 10) || 0;
end = end == void 0 ? n : parseInt(end, 10);
if (start < 0) {
start += n;
}
if (end > n) {
end = n;
}
if (end < 0) {
end += n;
}
for (var i = start; i < end; ++i) {
ret[i - start] = nodes[i];
}
}
return ret;
}

文章出處
大家都知道JavaScript的專長就是處理客戶端也就是與瀏覽器打交道了，所有的與服務器端的交互必須交給后臺語言處理程序去做，基于JavaScript不能與服務器進行直接交互這樣一個現狀，Ryan Dahl決定使用V8引擎來創建JavaScript服務器環境。在此簡單敘述一下這樣做的原因：

V8引擎很快

V8專注Web，所以在處理HTTP，DNS，TCP等方面特別擅長

大多數Web開發人員都會JavaScript

用一句話來說就是Node.js是一個事件驅動的服務器端JavaScript環境。
也許有人會問了，什么是服務器端的JavaScript？
JavaScript與Web頁面交互就是通常所稱的客戶端JavaScript，因為它發生在瀏覽器或者說客戶端。服務器端JavaScript發生在把頁面發送給瀏覽器之前的服務器上。
安裝Node.js
（因為我的電腦win7，個人比較窮，也沒有蘋果電腦，后臺開發能力也只能說略懂，也沒有在Unix操作系統上測試過，所以在此申請一下，我的操作全部都是在微軟平臺上。不好意思啊）
到nodejs官網首頁 下載相應的版本安裝即可，很簡單的
驗證Node.js是否安裝正確

打開Node.js命令提示窗口

輸入1+1

看一下是否界面顯示2

第一個簡單demo
1、創建server.js，代碼如下

var http = require('http');
http.createServer(function (request, response) {//創建服務器
response.writeHead(200, { 'Content-Type': 'text/plain' });//回傳到客戶端的頭信息
response.end('Hello World! ');//回傳到客戶端的信息
}).listen(3000,'127.0.0.1');//第一個參數為端口 第二個參數為主機地址

console.log('server running at http://127.0.0.1:3000');

2、開始--運行 cmd(也就是打開命令提示符窗口)  把當前路徑cd轉到server.js所在的目錄
3、執行node server(本來是執行node server.js  但因為是js文件，所以默認可以省略.js)

4、打開瀏覽器，輸入網址：http://127.0.0.1:3000  會發現瀏覽器顯示hello world
在此備注一下：

即使你只是修改js里面的哪怕一個字符，如果你想看到修改后的效果，那就必須得重新編譯也就是說重新運行node命令

要想停止服務器運行并返回終端，可以按ctrl+c（這個命令很方便的）

Node.js是運行的v8引擎上的，v8是同Google開發的開源的JavaScript引擎。事實上Node.js是個編程平臺

關于Node.js，并發的含義是一次做多件事件的能力

NPM(Node Package Manager)Node包管理器
npm允許開發人員在應用程序中創建、共享、重用模塊。說句通俗一點的話，包就是一個功能模塊，也確實是node.js的一個很有特色的地方，為開發人員提供了很多便利。
通過使用模塊可以快速的給應用程序添加許多功能。模塊通常可以為開發人員除去常見的困難。
模塊就是可重用的代碼庫
模塊相關demo
安裝模塊
npm install [module_name]
使用模塊 
var module=require('module');
 
 
demo具體步驟：
1、創建foo.js，代碼如下

var _ = require('underscore');
_.each([1, 2, 3], function (num) {
console.log('underscore.js says ' + num);
});

 
2、打開命令提示符，將目錄轉到foo.js所在目錄（文章下面的demo  這個步驟也是必須的 但我省略不寫了哦）
3、運行npm install underscore  安裝underscore包之后命令提示符中將顯示相應的信息 并且在foo.js所在的目錄下多一個node_modules文件夾，node_modules文件夾下有underscore包文件
4、運行node foo

如何找模塊
在終端直接使用npm命令行工具來搜索 也就是npm search [模塊的名稱] 如果有多個關鍵字的話可用空格分開
提示：因為node.js允許大家只有有一個賬戶就可以上傳包，也就是說任何人都可以是node.js模塊的作者，所以盡管模塊可通過npm獲得，但并不代表它是得到良好測試或者說是穩定的，請使用模塊的下載量和項目的問題數量作為模塊的可靠性和成熟度的大致指南。
模塊的安裝方式
有兩種方式

本地安裝  npm install [module_name]

全局安裝 npm install -g  [module_name]

全局安裝意味著可以在文件系統的任何位置運行它。
本地安裝模塊意味著模塊會被安裝在項目內名為node_modules的文件夾中，而且它只可在該項目中使用。
全局安裝模塊意味著模塊可在系統的任何一個地方使用。
作為 一條經驗法則，請本地安裝Node.js模塊。
如何找模塊文件
命令：npm docs [module_name]
這個命令執行之后會打開瀏覽器并進入模塊作者所提供的文檔頁面，不信你可以在終端執行
 

npm docs underscore

 
通過運行如下命令查看項目的bug，這會打開瀏覽器并進入模塊作者所提供的問題頁面

npm bugs underscore

事實上還有一條查看源碼命令(但是我電腦老是沒法打開 提示說權限不夠)

npm edit underscore

package.json
在C#中使用using來引用外部程序集，而在node.js中是使用package.json來指定依賴關系。npm允許開發人員使用package.json文件來指定在應用程序中要用的模塊，并且通過單個命令來安裝它們：npm install
可想而知這樣的方式有哪些好處：

無需一個一個地安裝模塊

其實開發人員可以很容易的安裝你的應用程序

應用程序的依賴關系存儲在一個單一的地方

package.json相關demo
1、建立一個foo.js文件，代碼如下所示：

var _ = require('underscore');
_.each([1, 2, 3], function (num) {
console.log('underscore.js says ' + num);
});

2、在foo.js同目錄下建立一個package.json的文件，代碼如下所示

{
"name":"example02",
"version":"0.0.1",
"dependencies":{
"underscore":"~1.2.1"
}
}

 3、在終端執行npm install 這時候將會看到underscore庫安裝在node_modules文件夾下
 建議：即使應用只需要安裝一個模塊，還是強烈建議使用package.json文件來管理Node.js模塊
 
未完待續（考慮到篇幅太長的問題  后續文章將繼續探討）
 

文章出處
先從一個簡單的demo說起，用cmd打開命令提示符，輸入echo Hello，大家是不是看到終端上顯示出了Hello字樣，事實上這就是一個簡單的事件。
回到正題，相信提到node.js，免不了讓人想起非阻塞、回調、事件循環、并發、網絡編程等。（在此強調一下并發：許多人同時嘗試做同樣的事情），下面將主要介紹一下node.js的特色功能！
回調
相信大家到回調應該不陌生，簡單一點的說就是函數可以作為參數傳遞給另外一個函數中，然后被調用。我們來看看node.js是如何使用回調的，用例子說話！（哈哈）

var fs = require('fs');
fs.readFile('somefile.txt', 'utf8', function (err, data) {
if (err) {
throw err;
}
console.log(data);
});

回調函數中的第一個參數err,用于保存在讀取文件時返回的錯誤。
回調函數中的第一個參數err,用于保存讀取文件所返回的數據。
 
Node.js以提供一個創建聯網應用程序的平臺為目標，回調是Node.js實現網絡編程的關鍵方法，因為回調讓代碼在其事件發生的時候才能運行。基于網絡的I/O是不可預測的，事件驅動編程是處理不可預測性的極佳方式，回調產生是負責解決不可預測性的方法，它也是處理并發的高效方法。
回調的相關Demo
1、建立一個app.js，代碼如下

var http = require('http'),
urls = ['shapeshed.com', 'www.bbc.co.uk', 'edition.cnn.com'];
function fetchPage(url) {
var start = new Date();
http.get({ host: url }, function (res) {
console.log('Got response from:' + url);
console.log('Request took:' + (new Date() - start) + 'ms');
});
}
for (var i = 0; i < urls.length; i++) {
fetchPage(urls[i]);
}

2、運行 node.app   多執行幾次  仔細看結果 從這個例子中我相信你應該能夠體會基于網絡的I/O是不可預測的，事件驅動編程是處理不可預測性的極佳方式，回調產生是負責解決不可預測性的方法，它也是處理并發的高效方法。
事件循環
Node.js運行在單一的進程中并且要求開發人員使用異步編碼風格。（同步和異步的概念在此不贅述了）
網絡經常不是開發人員所能控制的，我們可能要從不屬于我們的遠程服務器獲取代碼并處理，通過使用異步風格可以讓腳本在網絡事件返回時響應。
事件循環使得系統可以將回調函數先保存起來，而后當事件在將來發生時再運行。
事件循環的關鍵思想是將代碼圍繞著事件來構架而不是按照期待中的輸入順序來構架，由于事件循環以單一進程為基礎，所以為了確保高性能，需要遵循以下一些規則：

函數必須快速返回

函數不得阻塞

長時間運行的操作必須移到另一個進程中

HTTP
網絡編程免不了要了解一下HTTP，事實上它定義了服務器與客戶端在通信時應該如何發送和接收數據。通過使用HTTP模塊的低級應用程序編程接口，Node.js既允許我們創建服務器也允許我們創建客戶端。
講到http，大家自然而然的會想到URL。看一段代碼。

var http = require('http'),
url = require('url');
http.createServer(function (request, response) {
var pathname = url.parse(request.url).pathname;
if (pathname === '/') {
response.writeHead(200, { 'Content-Type': 'text/plain' });
response.end('Home Page ! ');
} else {
if (pathname === '/about') {
response.writeHead(200, { 'Content-Type': 'text/plain' });
response.end('About Us ! ');
} else {
if (pathname === '/redirect') {
response.writeHead(301, { 'Location': '/' });
response.end();
} else {
response.writeHead(404, { 'Content-Type': 'text/plain' });
response.end('Page not found ! ');
}
}
}
}).listen(3000, '127.0.0.1');
console.log(' change!');

運行之后，打開瀏覽器訪問http://127.0.0.1:3000
　　　　　　　　　　　　http://127.0.0.1:3000/about
　　　　　　　　　　　　http://127.0.0.1:3000/redirect
　　　　　　　　　　　　http://127.0.0.1:3000/hello
看到的結果各不一樣，這就是路由起的效果。
在大家眼里，似乎HTML客戶端就是瀏覽器，事實上HTML客戶端可以是任何對服務器請求響應的東西。
看了上面的代碼可能大家會很困惑，我用Node.js需要了解那么多HTTP里面的細節，會不會太麻煩了，下面Express粉墨登場了。
Express
簡單一點的一句話介紹Express就是Node.js的一個Web框架。
使用npm install -g express命令來安裝Express（友情提示：這里使用了-g是因為我們是用的全局安裝）
創建一個基礎的Express站點
1、打開終端，輸入express [siteName]（注意這里的siteName是你自定義的網站名稱）
2、cd siteName && npm install
3、node app
4、打開web瀏覽器，輸入http://127.0.0.1:3000/

文章出處
寫在前面
寫了一遍又一遍，網頁老卡住，沒保存下來，不寫了。
時間轉換代碼

 //獲得北京時間
Date.prototype.getBJDate = function () {
//獲得當前運行環境時間
var d = new Date(), currentDate = new Date(), tmpHours = currentDate.getHours();
//算得時區
var time_zone = -d.getTimezoneOffset() / 60;
//少于0的是西區 西區應該用時區絕對值加京八區 重新設置時間（西區時間比東區時間早 所以加時區間隔）
if (time_zone < 0) {
time_zone = Math.abs(time_zone) + 8; currentDate.setHours(tmpHours + time_zone);
} else {
//大于0的是東區 東區時間直接跟京八區相減
time_zone -= 8; currentDate.setHours(tmpHours - time_zone);
}
return currentDate;
}