trance

前一陣子折騰了一個主要使用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 ;

 總結：數據，表現，控制要分離。

  減少頻繁調用接口的機會。