【單頁應用】關於博客園的補發（高清有碼）。。。

前言

上周的時候，做了一點單頁應用的研究，但是給斷了，本來說最近繼續的，但是最近有點其它事情給耽擱了，就給忘了。

PS：其實是師傅（http://www.cnblogs.com/aaronjs/）叫我讀jquery源碼，我給讀跪了。。。

最近兩天又朋友問怎么還沒寫，所以有了今天的東西。

這個單頁應用的框架問題很多，就是個簡單的demo，喜歡的朋友就看看吧，需要源碼的可以下載，但是里面的圖片資源文件我給刪除了，需要的就留言吧。

這次代碼增加了本地存儲的應用，將model搞出來了，但是不太完善，過段時間再更新吧。

關於博客園

我想說博客園的接口很難用嗎？？？而且全部是xml的，我這里還寫了一個后端程序作為轉換呢：

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Net;
using System.IO;
using System.Text;
using System.Collections;
using System.Xml;



public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string url = context.Request["url"] != null ?  context.Request["url"].ToString() : ""; 
        string sException = null;
        string sRslt = null;
        WebResponse oWebRps = null;
        WebRequest oWebRqst = WebRequest.Create(url);
        oWebRqst.Timeout = 50000;
        try
        {
            oWebRps = oWebRqst.GetResponse();
        }
        catch (WebException ex)
        {
            sException = ex.Message.ToString();
            context.Response.Write(sException);
        }
        finally
        {
            if (oWebRps != null)
            {
                StreamReader oStreamRd = new StreamReader(oWebRps.GetResponseStream(), Encoding.GetEncoding("utf-8"));
                sRslt = oStreamRd.ReadToEnd();
                oStreamRd.Close();
                oWebRps.Close();
            }
        }

        XmlDocument doc = new XmlDocument();
     
        doc.InnerXml = sRslt;
        // Convert XML to a JSON string
        string JSON = XmlToJSON(doc);

        // Replace \ with \\ because string is being decoded twice
        //JSON = JSON.Replace(@"\", @"\\");

        context.Response.Write(JSON);
        
    }
    private static string XmlToJSON(XmlDocument xmlDoc)
    {
        StringBuilder sbJSON = new StringBuilder();
        sbJSON.Append("{ ");
        XmlToJSONnode(sbJSON, xmlDoc.DocumentElement, true);
        sbJSON.Append("}");
        return sbJSON.ToString();
    }

    //  XmlToJSONnode:  Output an XmlElement, possibly as part of a higher array
    private static void XmlToJSONnode(StringBuilder sbJSON, XmlElement node, bool showNodeName)
    {
        if (showNodeName)
            sbJSON.Append("\"" + SafeJSON(node.Name) + "\": ");
        sbJSON.Append("{");
        // Build a sorted list of key-value pairs
        //  where   key is case-sensitive nodeName
        //          value is an ArrayList of string or XmlElement
        //  so that we know whether the nodeName is an array or not.
        SortedList childNodeNames = new SortedList();

        //  Add in all node attributes
        if (node.Attributes != null)
            foreach (XmlAttribute attr in node.Attributes)
                StoreChildNode(childNodeNames, attr.Name, attr.InnerText);

        //  Add in all nodes
        foreach (XmlNode cnode in node.ChildNodes)
        {
            if (cnode is XmlText)
                StoreChildNode(childNodeNames, "value", cnode.InnerText);
            else if (cnode is XmlElement)
                StoreChildNode(childNodeNames, cnode.Name, cnode);
        }

        // Now output all stored info
        foreach (string childname in childNodeNames.Keys)
        {
            ArrayList alChild = (ArrayList)childNodeNames[childname];
            if (alChild.Count == 1)
                OutputNode(childname, alChild[0], sbJSON, true);
            else
            {
                sbJSON.Append(" \"" + SafeJSON(childname) + "\": [ ");
                foreach (object Child in alChild)
                    OutputNode(childname, Child, sbJSON, false);
                sbJSON.Remove(sbJSON.Length - 2, 2);
                sbJSON.Append(" ], ");
            }
        }
        sbJSON.Remove(sbJSON.Length - 2, 2);
        sbJSON.Append(" }");
    }

    //  StoreChildNode: Store data associated with each nodeName
    //                  so that we know whether the nodeName is an array or not.
    private static void StoreChildNode(SortedList childNodeNames, string nodeName, object nodeValue)
    {
        // Pre-process contraction of XmlElement-s
        if (nodeValue is XmlElement)
        {
            // Convert  <aa></aa> into "aa":null
            //          <aa>xx</aa> into "aa":"xx"
            XmlNode cnode = (XmlNode)nodeValue;
            if (cnode.Attributes.Count == 0)
            {
                XmlNodeList children = cnode.ChildNodes;
                if (children.Count == 0)
                    nodeValue = null;
                else if (children.Count == 1 && (children[0] is XmlText))
                    nodeValue = ((XmlText)(children[0])).InnerText;
            }
        }
        // Add nodeValue to ArrayList associated with each nodeName
        // If nodeName doesn't exist then add it
        object oValuesAL = childNodeNames[nodeName];
        ArrayList ValuesAL;
        if (oValuesAL == null)
        {
            ValuesAL = new ArrayList();
            childNodeNames[nodeName] = ValuesAL;
        }
        else
            ValuesAL = (ArrayList)oValuesAL;
        ValuesAL.Add(nodeValue);
    }

    private static void OutputNode(string childname, object alChild, StringBuilder sbJSON, bool showNodeName)
    {
        if (alChild == null)
        {
            if (showNodeName)
                sbJSON.Append("\"" + SafeJSON(childname) + "\": ");
            sbJSON.Append("null");
        }
        else if (alChild is string)
        {
            if (showNodeName)
                sbJSON.Append("\"" + SafeJSON(childname) + "\": ");
            string sChild = (string)alChild;
            sChild = sChild.Trim();
            sbJSON.Append("\"" + SafeJSON(sChild) + "\"");
        }
        else
            XmlToJSONnode(sbJSON, (XmlElement)alChild, showNodeName);
        sbJSON.Append(", ");
    }

    // Make a string safe for JSON
    private static string SafeJSON(string sIn)
    {
        StringBuilder sbOut = new StringBuilder(sIn.Length);
        foreach (char ch in sIn)
        {
            if (Char.IsControl(ch) || ch == '\'')
            {
                int ich = (int)ch;
                sbOut.Append(@"\u" + ich.ToString("x4"));
                continue;
            }
            else if (ch == '\"' || ch == '\\' || ch == '/')
            {
                sbOut.Append('\\');
            }
            sbOut.Append(ch);
        }
        return sbOut.ToString();
    }
    public bool IsReusable {
        get {
            return false;
        }
    }

}

因為博客園沒有手機端，所以簡單做了一個，真的非常簡單啊。。。

多上一張圖：

 

 

 

 

 

 

 

 

功能一覽

其實說白了就只有一個博客頁與博客詳情頁了

博客頁

其中滾動會分頁：我們來看看我們的數據吧：

核心代碼：

define(['$', '_', 'cBase', 'cView', getViewPath('index'), getViewPath('index_item'), 'blogModel', 'blogStore'], function ($, _, b, v, html, itemTpt, model, store) {
    var getPageScrollPos = function () {
        var left = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
            top = Math.max(document.documentElement.scrollTop, document.body.scrollTop),
            height = Math.min(document.documentElement.clientHeight, document.body.clientHeight),
            width = Math.min(document.documentElement.clientWidth, document.body.clientWidth),
            pageWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth),
            pageHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
        return {
            top: top,
            left: left,
            height: height,
            width: width,
            pageWidth: pageWidth,
            pageHeight: pageHeight
        };
    };
    var model = model.blogList.getInstance();
    var blogStore = store.blog.getInstance();

    var pageSize = 10;
    var curpage = 1;
    var isLoading = false; //正在加載
    var blogs = {};


    var View = b.Class(v.PageView, {
        _propertys_: function () {
        },
        init: function (superInit, request, interface) {
            superInit(request, interface);
            console.log('init');
        },
        createHtml: function () {
            return html;
        },
        attrs: {
            'data-id': 'test',
            className: 'yexiaoc'
        },
        events: {
            '.orderItem,click': function (el) {
                var id = el.attr('data-id');
                var blog = blogs[id];
                blogStore.set(blog);
                this.forward('detail');
                this._unbindScroll();
                var s = '';
            }
        },
        onCreate: function () {
            console.log('onCreate');
            this.tpl = _.template(itemTpt);
            this._loadData();
        },
        //dom創建后數據加載時執行，用於加載后執行我們的邏輯
        onLoad: function () {
            console.log('onLoad');
            
            var scope = this;
            $(window).bind('scroll', function () {
                scope._onWindowScroll.call(scope)
            });

        },
        _loadData: function (onSuc, onError) {
            var tpl = this.tpl;
            var list = this.find('#lstbox');
            var param = {};
            param.url = 'http://wcf.open.cnblogs.com/blog/sitehome/paged/' + curpage + '/' + pageSize;
            model.setParam(param);
            var scope = this;
            isLoading = true;
            model.execute(function (data) {
                var listData = data.feed && (data.feed.entry || []);
                if (listData) {
                    if (listData.length == 0) {
                        list.html('<li>暫無數據</li>');
                    } else {
                        $.each(listData, function (i, item) {
                            blogs[item.id] = item; //將博客存儲
                            var htm = tpl(item) || '';
                            list.append(htm);
                        });
                    }
                    (typeof onSuc === 'function') && (onSuc.call(scope, data));
                }
                isLoading = false;
            });
        },
        _onWindowScroll: function () {
            var pos = getPageScrollPos();
            if (pos.pageHeight - (pos.top + pos.height) < 500 && !isLoading) {
                curpage++;
                this._loadData();
            }
        },
        _unbindScroll: function () {
            $(window).unbind('scroll');
        },
        //dom創建后，未顯示
        onShow: function () {

            console.log('onShow');
        },
        //dom隱藏前
        onHide: function () {
            console.log('onHide');
        }
    });

    return View;
});

對應兩個模板頁

<input class="login" type="button" value="點擊登錄" />
<header>
    <b class="icon_home i_bef" id="js_home"></b>
    <h1>
        博客園</h1>
    <i id="js_return" class="returnico"></i>
</header>
<section class="cont_wrap" style="margin: 17px 0 40px;">
    <ul class="pro_list" id="lstbox">
    </ul>
</section>
<ul class="tab_search fix_bottom">
    <li class="tabcrt">博客</li>
    <li class="tab_hotel ">新聞</li>
    <li class="tab_hotel ">48小時</li>
    <li class="tab_hotel ">推薦</li>
</ul>

<li class="arr_r orderItem" data-id="<%=id %>">
    <article class="blog_item">
        <h3>
            <a href="<%=link.href %>" target="_blank"><%=title.value || '無題' %></a>
            </h3>
            
        <div class="author pro_list_rank">
            <%if(author.avatar){ %>
            <a href="<%=author.uri %>" target="_blank">
                <img src="<%=author.avatar %>">
            </a>
            <%} %>
            JavaScript 是根據 "ECMAScript"標准制定的網頁腳本語言。這個標准由 ECMA 組織發展和維護。ECMA-262 是正式的 JavaScript標准。JavaScript是目前Web客戶端開發的主要編程語言，也是Ajax的核心技術之一。
        </div>
        <div class="item_footer">
            <a href="<%=author.uri %>" class="lightblue">Scut</a> <%=published %> <a href="<%=link.href %>" title="2013-08-21 15:21" class="gray">評論(<%=comments %>)</a>
            <a href="<%=link.href %>" class="gray">閱讀(<%=views %>)</a> <span class="price1">推薦(<%=diggs %>)</span></div>
    </article>
</li>

然后就是詳情頁了

詳情頁

define(['$', '_', 'cBase', 'cView', getViewPath('detail'), getViewPath('detail_article'), 'blogModel', 'blogStore'], function ($, _, b, v, html, itemTpt, model, store) {

    var model = model.blog.getInstance();
    var blogStore = store.blog.getInstance();
    var tpl = _.template(itemTpt);

    var View = b.Class(v.PageView, {
        _propertys_: function () {
        },
        init: function (superInit, request, interface) {
            superInit(request, interface);
            console.log('init');
        },
        createHtml: function () {
            return html;
        },
        attrs: {
        },
        events: {
            '#js_return,click': function () {
                this.forward('index');
            }
        },
        onCreate: function () {
            console.log('onCreate');

        },
        _loadData: function () {
            var box = this.find('.cont_wrap');
            box.html('');
            var param = { url: 'http://wcf.open.cnblogs.com/blog/post/body/' + blogStore.get().id }
            $.get('Handler.ashx', param, function (data) {
                (typeof data === 'string') && (data = $.parseJSON(data));
                data && data.string && (blogStore.setAttr('value', data.string.value));
                var d = blogStore.get();
                box.append(tpl(d));
                var ss = '';
            });
        },
        //dom創建后數據加載時執行，用於加載后執行我們的邏輯
        onLoad: function () {
            console.log('onLoad');
        },
        //dom創建后，未顯示
        onShow: function () {
            console.log('onShow');
            this._loadData();

        },
        //dom隱藏前
        onHide: function () {
            console.log('onHide');
        }
    });

    return View;
});

其中模板各位自己下載看吧。

結語

之前已經詳細描述了整個代碼邏輯這次就不說了，各位覺得不錯可以下載下來看看，后面點還會更新。

源碼

http://files.cnblogs.com/yexiaochai/page.zip（page.zip）