前一陣子折騰了一個主要使用JSONP 來實現跨域動態數據的項目。
今天整理一下其中遇到的問題。
先看一下使用場景：
http://so.360.cn/s?ie=utf-8&src=hao_phome&q=%E5%AE%89%E5%8D%93%E8%BD%AF%E4%BB%B6
這是一個嵌入到其他域名的一段HTML 代碼，需要實現兩層TAB 切換，以及軟件TIPS 滑過展示等功能。
考慮到接入的速度，在原始展示的時候只展示必須的數據，也就是第一屏的數據。
在TAB 切換的時候，通過JSONP 接口調取相應的數據，並做展示切換。
在鼠標滑過圖標的時候，同JSONP 接口獲取相應圖標的軟件介紹，並展示TIPS。
這是原始的設計。看起來合情合理，但是在實現的時候遇到兩個嚴重的問題：
一、網速變慢的時候，會出現某個TAB 對應的數據錯誤的插入到其他TAB 對應的容器中。
原因：數據和表現沒有分離開，以點擊的元素序列作為訪問接口的URL參數，取回來的數據仍然根據鼠標點擊序列來確定該屬於哪一個容器。
這樣造成的結果，當數據訪問慢，返回的時候鼠標已經點擊了其他序列。導致數據插入到別的容器。
解決：數據和切換表現分離開，將JSONP接口返回的數據自帶序列標記
返回格式示例 ： jsonpCallBack({'index':'1-2','data':{......}}); 這樣每個返回的數據會以自帶序列為標准計算自己應處於的位置.
二、滑過圖標獲取軟件詳情標簽內容的處理，當快速滑過時，某些軟件的信息總是無法展示。
原因：通過mouseover 的方式頻繁申請jsonp請求，造成回調函數執行過於密集，造成回調函數不穩定，無法達到預期目標
如 無法正確緩存JSONP里面的數據到本地等。
jsonp是一份自帶回調的數據，是使用 script 標簽的跨域屬性動態創建script標簽 調用服務器端生成的動態腳本來實現的跨域數據傳遞
當頻繁調用的時候，不同瀏覽器下無法保證這個動態腳本的運行穩定
當然可以采取延時的方式來減少請求發送的頻繁度，但是，仍然無法避免多個請求幾乎同時到達需要客戶端處理的情形（試想一個請求50毫秒延遲發出，而這個請求是異步的，很可能它的返回剛好趕上另一個請求的返回）。
解決方式： 盡量不適應滑過獲取數據的方式，尤其是批量相應滑過獲取數據的應用場景（比如密集的圖標）。
合並數據接口，只在點擊TAB的時候加載數據，點擊TAB加載過來的數據帶着TIPS 需要的數據。
這樣做也許有點浪費，但是穩定性要比滑過獲取數據穩定性要高的多。通過點擊獲取數據比滑過獲取數據要靠譜的多。
其他的一點經驗：
一、 使用jQuery 的 data 方法獲取和設置附加在元素上的數據。支持JSON格式
設置： <li data-sinf='{\"soft_id\":\"100432\",\"soft_name\":\"\\u6781\\u901f\\u98de\\u8f66\",\"vote_scores\":\"6.4\",\"apk_sizes\":\"182MB\",\"is_authority\":\"1\",\"download_times\":\"250755\",\"soft_brief\":\"\\u300a\\u6781\\u901f\\u98de\\u8f66\\uff08Mini Motor Racing\\uff..cb\\u8f6...\",\"category_name\":\"\\u4f53\\u80b2\\u7ade\\u901f\"}'>
獲取： $('li').data('sinf');
注意：此方法獲取的屬性已經是JSON格式，無需在使用JSON.parse 或者 $.JSON.parse 去處理，否則會出錯。
二、發送JSONP請求的代碼：
var href = this.url + 'cid=' + cid + '&csid=' + csid ;
url : href,
type : 'GET',
cache : true, //如果你的數據並不是實時變化的，請開啟緩存，否則jQuery會以時間戳的方式穿透CDN
dataType : 'jsonp',
jsonpCallback : 'mobileHelperJSONer' //用此屬性明確指定回調函數名，否則jQuery會自己附加一個隨機的再請求里面
});
總結：數據，表現，控制要分離。
減少頻繁調用接口的機會。