博客单页化实践

半年前，因为VPS未续费导致所有数据丢失，直至今日终于重新恢复了所有的文章数据（虽然丢失了全部的评论），并且借此机会对所有文章进行了一次重新审视，修改了部分问题，并将所有示例迁移到 jsfiddle和 jsperf上，总算造一段落。

新的博客完全独立建设，不使用任何第三方的CMS系统，后端使用ASP.NET MVC实现，数据库使用MySQL，通过Mono部署于Ubuntu Server之上，前端使用nginx作为静态服务器。

也正因为完全独立构建，不受任何系统出于安全、简便等奇怪理由而附加的限制，这个博客系统也成了自己练手的娱乐场。就比如本篇要介绍的OPOA化实践。

概念

OPOA，全称 One Page One Application，中文可以称之为 单页应用。

顾名思义，在OPOA下，一个页面组成一个应用，不再以传统的超链接跳转导航的方式，而是通过javascript以 XMLHttpRequest加载数据，通过 DOM操作展现数据。

作为一个单页应用，其优势主要有：

• 多个页面拥有相同的结构时，一些相同的内容（如侧边栏、LOGO等）不需要重复加载，节省流量（及一定的数据库查询）。
• 没有浏览器跳转地址导致的短暂空白页面状态，提升用户体验。
• 可以增加过渡效果（如渐隐、渐显等），进一步提升体验。

纵观我的博客的结构：

可以发现，博客基本上由 页首、 侧边栏 、主内容3部分组成。而其中 页首和 侧边栏 的内容是始终不变的，博客中所有的页面均只是填充主内容区域。

从后端的实现上来说，大致的结构是这样的：

  

    

        
标题
        
副标题
    


    

        @RenderBody()
    
    

        

            
        
        

            
        
        

            
标签
            @Html.Action("TagCloud")
        
        

            
存档
            @Html.Action("ArchiveList")
        
    

其中侧边栏的内容虽然永远是固定的，但是会调用 TagCloud和 ArchiveList两个子Action，显而易见这2个Action又会有数据库的查询。因此，如果排除不变的这部分，只更新 div[id="main"]部分的内容，每一次浏览均可减少2次的数据库查询和一定量的HTML内容传输，有着不错的收益。

设计

本次实现OPOA的目标有：

• 在 尽量少地引入后端改动的前提下完成。
• 仅针对相关API支持到位的浏览器，其它浏览器保持降级，使用标准的超链接导航方式浏览。

因此尽管业界有不少OPOA的解决方案，如 Backbone等，但是其引入的复杂性会导致后端（包括输出的HTML）的大量的变更，并不适合本次实现。还是自己实现一次来得更有优势。

再回到最初的目的，我们要把 超链接导航改为 XMLHttpRequest加载数据并渲染，而超链接是由 元素产生的。因此从基本的解决方案而言，我们需要做的是：

1. 拦截所有 元素的点击事件。
2. 点击发生时，取消掉默认的跳转行为，改用XMLHttpRequest加载相应页面数据。
3. 解析相应数据，放到 div[id="main"]容器中。
4. 模拟浏览器的行为，改变地址栏、标题等。

当然其中会有很多的细节，后文主要就讲述这些问题。

实现

元素拦截

也许在几年前， 拦截所有 元素这事看上去并不那么简单，由于动态的脚本的存在，很有可能动态地加上 元素，这些新增的元素如何绑定事件会变成一个课题。

然而在 事件冒泡这一概念已经普及的如今，在jQuery推出了 delegate函数，并进一步整合进 on函数之后，这一需求的实现之简单也已经被全民所理解。

在这一块唯一需要注意的是，并不是所有的链接都属于本站，因此需要对链接的 href属性进行一定的判断。判断的条件无非2个：

1. 是相对地址。
2. 是绝对地址，但和当前页面是同域的。

对于第1点太容易判断了，而第2点需要解析 href属性分出 protocol、 domain 、port等信息，由于浏览器中的javascript并没有相应的方法，自己实现也不怎么有趣，而个人的博客在后端输出时，应当被拦截的链接地址都是相对地址，因此暂时忽略了。

综合以上，对于元素的点击事件的拦截，代码相当简单：

  $('#page').on(
    'click',
    'a',
    function() {
        var href = $(this).attr('href');

        if (href.indexOf('/') !== 0) {
            return;
        }

        loadPage(href, true);

        return false;
    }
);

解析文档结构

对于 加载远程页面这一需求，自然不再赘述，随便用个 $.get函数就搞定问题了。比较麻烦的是，获取到后端给定的HTML之后，如何有效地更新当前页面。这一动作需要满足以下需求：

• 相关的资源都正确加载，包含但不限于css和js文件。
• 只更新需要更新的部分，即 div[id="main"]部分。

而后端为了 尽可能少地改造，返回回来的必然是一个HTML片段，而不会像一些成熟的OPOA应用一样，返回一个JSON结构，其中包含了依赖资源、HTML片段等一系列数据的描述。因此javascript需要做的是，从HTML片段中分析出 相关资源 以及具体内容并插入到当前页面中。

好在我们有jQuery的帮助，将整个HTML片段传给jQuery，看是否可以得到需要的内容：

  console.log($(html));

输出：
[#text, , #text,