搭建

用HTML5+APICloud做客戶端，Websocket與Python伺服器Twisted通訊，Sqlite3做資料庫

方案一：用多個HTML頁面

每個頁面作為一個Frame有不同功能，一個底部導航切換多個Frame，結果沒解決多個頁面共用一個WebSocket的問題。

方案二：用一個iframe改變src

聽說iFrame中src不同html路徑可以解決多個html共用一個WebSocket通訊問題，結果每個html頁面單獨的js程式碼與主頁js程式碼衝突，即只能所有程式碼都寫到主頁面，然後用父iFrame控制子iFrame的標籤，這樣又會出很多未知問題。

方案三：每個頁面放到一個DIV中，然後js控制display:none/block

最後只能用這種辦法了，不過一下子各種通訊錯誤找不到標籤問題都沒了，就是一個頁面內容多了點。

        function tab(id)
        {
            $(".panel_slider").css("display", "none");
            $("#"+id).css("display", "block");
        }
        或者
        function randomSwitchBtn(tag)
        {
            if(tag == "world")
            {
                $("#person"
 
).css("display","none");
                $("#world").css("display","block");;
            }
            else if(tag == "person")
            {
                $("#world").css("display","none");
                $("#person").css("display","block");
            }
        }

伺服器資料解析

伺服器傳出的資料都是JSON和[String Object]形式的，需要判斷清楚，可以都進行JSON解析，然後try{}，在catch裡用其他方式解析，因為既然報錯了就說明不是Json形式。如下：

        var decodeData;
        //是JSON串解碼，不是則賦值
        try{
            decodeData = JSON.parse(inputJsonData);
        }
        catch(e){
            decodeData = inputJsonData;
        }

佈局

屬性展示和功能按鍵佈局主要用Table，這樣看起來整齊，那種類似控制檯可以不斷滾動出一條條的內容的用div，設定成帶滾動條和自動定位到最新輸出資訊。

樣式

css可以把很多類似的div用同一個class名字，設定共有的樣式，然後在給這些div分別設定id，再給每個id設定如weith，height這樣的私有的樣式。類似下面這樣

/*panel*/
        .panel{border:2px solid #fff;font-size:12px; line-height:24px; word-wrap:break-word; overflow:auto;   word-break:break-all;}            

        /*news panel*/
        #panel_news{width:auto;height:180px;}   
        /*describe panel*/      
        #panel_describe{ width:auto;height:70px;position:relative; top:15px;}

彈窗

想要開啟新視窗可以這樣

<div id="win_thingsShow" style="text-align:center; border:1px red solid; width:60%; height:50%;position: absolute;top:25%;left:20%;display: none;">
    <!--title-->
    <div style="background-color: blue;color: red;">
        <!--close-->
        <span id="win_thingsShow_title"style="margin:auto;color:red;">標題文字</span>
        <span id="win_thingsShow_close"style="margin-left: 95%;color:red;cursor: pointer;"onclick='hideWin()'>X</span>
    </div>
    <!--desc-->
    <div id="win_thingsShow_desc"style="background-color:#0099FF;color: red;">我是描述</div>
    <!--context-->
    <div id="win_thingsShow_context"style="background-color:#0099FF;color: red;">
    </div>
</div>

//js程式碼
   function openWin()
   {
        $("#win_thingsShow").css("display","block")
   }
   function hideWin()
   {
        $("#win_thingsShow").css("display","none")
        $("#win_thingsShow_context").html("");
   }

寬度和高度很多可以用xx%代替具體數值，想要div居中，主要是父DIV’text-aline:center’，該DIV margin:auto，居於底部的話` position: fixed;bottom: 0px; 。

資料的接收設計

做了一個xxxModel和一個xxxProcess，xxx是接受的JSON資料的key，然後用類似於簡單工廠+反射的效果，websocked收到的JSON資料觸發方法，方法裡xxx自動變成的key，然後簡單工廠建立keyModel資料模型物件，和先編寫好keyProcess方法，再反射實現它，js可以這樣實現：

dataModel = new window[type+"Model"](context);//類似與簡單工廠
eval("this."+type+"Process"+"()");//類似於反射

可以try包住上面那兩句話
catch(error) {
alert(type+"Model資料模型不存在");
}

catch(error) {
alert(type+"Process處理程式不存在");
}
然後根據提示再填充資料模型物件與處理方法，每當從伺服器收到新型別的資料都會觸發提示，然後我們再根據提示編寫完善程式。