本篇是基於《JS修煉之道》的記錄性與總結性的文章，這本書從多種框架的角度，講述了JS開發中的一些實用技巧。
比如Prototype，JQuery，Mootools，YUI，Dojo，Ext，不過我個人僅僅會點JQuery而已，因此也就專門只看JQuery的部分了。
任務1 動態選擇方法及屬性
由於方法在js中也是一種屬性，因此可以使用屬性的方法來調用方法：
var test = {a:func,b:20}; test.a(); test.b; 或者 test[a](); test[b];
使用下面的方式的好處是，如果需要做邏輯判斷，可以直接在下標中進行：
if(isTrue){ test.a(); }else{ test.b(); } 可以直接寫成： test[isTrue?a:b]();
是不是很簡潔呢？
任務2 通過模塊實現代碼訪問控制
由於JS中未使用var聲明的變量都會自動提升為全局變量，為了避免全局變量過多導致的性能問題，可以使用模塊化的方法，把變量聲明在某個匿名函數中，由於變量都是函數級別提升的，因此不會溢出到全局。
(function(){ //這里聲明的變量只有該函數才能訪問 })();
任務3 使用可選、可變、命名參數
在JS中參數的定義是很隨意的，既無需定義類型的定義，也不需要在使用時按照規定的參數進行設置。
因為JS中使使用arguments對象保存參數，如果在函數聲明的時候，添加了參數，就相當於多了一個參數的引用而已。
function xxx(a,b){ for (var index = 1, len = arguments.length; index < len; ++index) { alert(arguments[index]); } } //可以這樣使用 xxx(a,b,c); //參數c在函數內部，可以通過遍歷arguments得到。 //當然xxx(a)，也不會出錯....只是c是undefined而已
任務4 獲得DOM元素的引用
ES中已經定義了一些關於元素引用的方法，比如document.getElementById()，但是這種風格顯得有些冗長，因此很多的框架都提供了元素引用的封裝，就拿Jquery來說，就提供了：
基於ID的引用、基於CLASS的引用、基於標簽的引用 以及 基於前三種的查找引用等等。
任務5 動態修飾內容
很多框架都封裝了一些基於CSS的修改方法，比如Jquery支持css或者attr等來修改DOM元素的樣式。
任務6 修改元素的內容
原生的JS支持InnerHtml和outHtml等方法，Jquery也對其進行封裝：
比如
val()可以獲得控件的值
html()可以獲得內部的Html
text()可以獲得文本
等等
任務7 DOM加載完成后加載腳本
window.load()方法會在DOM加載全部加載完成后執行，包括圖片等文件，這就會導致加載的時間很長。而且該方法之能定義一次，這對於用戶來說是不能滿足需求的。
因此很多框架都提供了相應的方法，比如jquery:
$(function(){})或者$.ready(function(){})
任務8 監聽以及停止監聽事件
多數的框架都提供了事件監聽的機制，比如on進行監聽，off接觸監聽。以前的Jquery版本使用的是bind和unbind。
還有live對未來將會出現的元素事件進行監聽。
任務9 利用事件委托
在編寫前端代碼時，應該盡量優先使用事件委托機制，而且是相對最近的事件委托。
由於事件的綁定都是消耗性能的，如果你有一個表格，想要給表格中的每一行綁定事件，難道要循環給每個tr綁定事件？那么未來添加一行，再綁定一個事件？
這樣做肯定是不可取的，此時就應該使用事件委托，給父級的元素綁定事件，然后捕獲event.target
$('父級').click(function(e){
//e.target是真正的觸發元素}
)
需要注意的是，並不是所有的事件都能冒泡，比如blur和focus就無法冒泡。（自己踩過的坑，只怪基礎不扎實）
任務10 將行為和自定義事件解耦
最好將事件與DON元素分離，然后通過bind等方式進行綁定。
這樣既方便管理代碼，也使得事件的綁定更為靈活。
任務11 模擬后台處理
由於JS是單線程的，可以通過setTimeout()和clearTimeout()模擬多線程。
比如一個方法要執行很長的時間，如果不采取任何的行動，可能會造成頁面的卡頓。那么就可以把任務拆分成多個部分，使用setTimeout()進行分段執行，這樣在每段的間隙，還可以處理其他的請求。
相當於模擬了多線程機制。
任務12 打造漂亮的tooltip
這個屬於易用性的技巧了，tooltip現在也有很多開源的UI框架，沒必要自己再去寫了。
任務13 制作友好的彈窗
個人感覺Bootstrap就足夠用了。
任務14 預載入圖片
預載入圖片有很多中方法：
1 使用動態的js腳本加載圖片
2 使用CSS先隱藏已經加載的圖片
任務15 創造光箱效果
這種特效在很多網站中還是很常用的，Jquery中的FancyBox可以幫助你快速的達到目的
任務16 實現無限翻頁
前兩天剛剛總結並且實踐了下無限翻頁，最主要的還是要理解各種高度和寬度。
任務17 在載入時保持顯示區域
這就需要保證滾動條想對的位置了
任務18 暫時禁用提交按鈕
有的時候表單的數據需要一定的時間准備，此時用戶如果點擊提交可能會造成重復提交，或者一次提交出錯。
為了避免這些問題，在表單沒有完成必填項時，應該禁用提交按鈕
任務19 提供輸入長度反饋
如果輸入框使用了maxlength屬性心智，那么長度就是有限制的，因此最好是在用戶輸入時，提供一個實時的長度反饋，這點效果可以參考微博等。
任務20 同時選擇或者反選多個checkBox
一般來說提供一些批量操作對於易用性還是有不少幫助的。
比如：
<input type="checkbox" name="items" alue="1" /> 1 <input type="checkbox" name="items" alue="2" /> 2 <input type="checkbox" name="items" alue="3" /> 3 <input type="checkbox" name="items" alue="4" /> 4
對應的的操作為：
//全選 $(xx).click(function(){ $("[name=items]:checkbox").attr("checked",true); }) //全不選 $(xx).click(function(){ $("[name=items]:checkbox").attr("checked",false); }) //取反 $(xx).click(function{ $("[name=items]:checkbox").each(function(){ this.checked = !this.checked; }) })
任務21 表單的驗證
CSS屬性中有required，給必填項添加樣式。
任務22 表單驗證：進階技巧
對於更復雜的一些表單控件，比如數字和郵箱，可以通過正則進行校驗
任務23 表單驗證：高級技巧
利用Ajax可以實時的對表單進行校驗，、
任務24 在表單中提供tooltip
任務25 自動完成輸入
這需要在控件初始化前，提供一些預設的值，實現的方式可以是在頁面加載的時候請求控件的對應的信息，也可以請求某個json文件，把提示的信息存儲在JSON中。
任務26 使用動態多文件上傳
書中給出的方式是單個文件上傳按鈕上傳后，隱藏對應按鈕。然后添加下一個文件....最后搜集所有的上傳信息統一提交。
任務27 讀取以及寫入cookie
cookie是保存在客戶端的一些信息，因此存在一定的風險。
它不適合保存過於重要的數據，（否則你應該使用一些加密手段）
它保存的數據量比較小，只能有4KB的大小。
它有時候可能不可用，因為受制於瀏覽器的限制，有的瀏覽器可能設置了cookie相關的限制。
一般框架都會提供相應的操作
任務28 通過ajax加載內容
異步變成給瀏覽器帶來了一次歷史性的變革。而原生的ajax瀏覽器兼容並不好，可以直接使用框架封裝的ajax，方便又快捷。
例如Jquery的$.ajax();
任務29 使用JSON
JSON是一種基於js的文檔型數據類型，它扁平化沒有任何固定的閑置。現在很多的框架都把它作為數據傳輸的基本格式，比如ES。
任務30 使用JSON-P
由於普通的ajax請求會出現一些跨域問題，使用JSON-P可以有效的解決跨域限制。
看過一篇講解JSON-P非常好的文章:有空可以多看看
其他的任務時關於第三方接入的，沒啥實際的作用，就不做總結了。