訪問量統計工具 Hit Kounter v0.2

本文最初發佈於個人我的博客：咀嚼之味

Hit Kounter 是一個簡單的訪問量統計工具。據我從數據庫裏的數據目測，如今已經擁有了 9 位用戶！不過我要對這九位用戶說聲抱歉啦。

Hit Kounter 本來部署於 SAE 上，而近期 SAE 針對使用 MySQL 的應用開始收費。本項目只是一個本人使用業餘時間開發的小工具；它自己包含的功能也很精簡，並不適合使用付費服務。因此我已經將 Hit Kounter 服務遷移至 LeanCloud 上。本來部署在 SAE 上的服務預計在 五一假期 後下線，對已經使用 Hit Kounter 的一些用戶，我再次表達個人歉意！

因爲這次改版改動比較大，我是 fork 了一份代碼出來進行修改的；改版後的 Hit Kounter 在 Github 上倉庫地址是 zry656565/Hit-Kounter-LC，區別於原來的 Hit Kounter PHP 版：zry656565/Hit-Kounter

使用方式上，目前 v0.2 版本相比於 v0.1 並無什麼改變，接下來會從如下幾個方面介紹一下：

• 如何爲你的博客添加訪問統計

• Hit Kounter 的 JS 接口

• 如何從 v0.1.1 版本遷移到 v0.2.0

• 小結：Hit Kounter 的將來

若是你是 Hit Kounter v0.1 的用戶，能夠直接閱讀 如何從 v0.1.1 版本遷移到 v0.2.0。

如何爲你的博客添加訪問量統計

1. 引入腳本

<script src="https://cdn1.lncld.net/static/js/av-mini-0.6.10.js"></script>
<script src="http://jerry-cdn.b0.upaiyun.com/hit-kounter/hit-kounter-lc-0.2.0.js"></script>

首先，在你的頁面中引入這兩個腳本，第一個腳本是 LeanCloud 的庫腳本，引入了它咱們才能使用 LeanCloud 的服務；因爲你可能在每一個頁面都須要顯示訪問量，把它加入根模板也許是個不錯的選擇。

2. 顯示當前頁面的訪問量

<span data-hk-page="current"> - </span>

你能夠在頁面的任何地方插入這句 HTML 片斷，你以前引入的腳本會自動檢查當前頁面上帶有 data-hk-* 屬性的元素，並針對你給出的屬性值向服務器請求數據，最後把獲得的結果替換到上面的標籤內。能夠參考 我博客中的例子。

3. 顯示指定頁面的訪問量

若是你但願在文章列表頁中顯示各個頁面的訪問量分別是多少，那麼你就要使用一個 url 來填充 data-hk-page 的屬性值，就像這樣：

<span data-hk-page="http://jerryzou.com/posts/design-for-all-mobile-resolution/"> - </span>

那麼 Hit Kounter 檢測到這個標籤之後，就會向服務器請求該地址的具體訪問量，並將默認值 - 替換爲實際值。能夠參考 我博客中的例子。

Hit Kounter 的 JS 接口

Hit Kounter 會在全局注入 Icarus 對象，它是與服務器交互的數據接口。經過它，咱們就能夠直接向服務器發送請求。先看看下面這個例子：

Icarus.request({
  api: 'hk.page.get',
  v: '1.0',
  data: {
    pages: [
      { url: 'http://test.com/1' },
      { url: 'http://test.com/2' },
      { url: 'http://test.com/3' }
    ]
  },
  success: function(results) {
    for (var i = 0; i < results.length; i++) {
      console.log(results[i].domain, results[i].url, results[i].count);
    }
  },
  failure: function(code, err) {
    console.log(code, err);
  }
});

上面這個例子中，咱們主要是獲取了三個頁面的具體訪問量；目前 Icarus 支持的接口有四個（具體能夠參考 Hit-Kounter-LC Wiki）：

• hk.page.increment

• hk.page.get

• hk.page.getTop

• hk.page.getByDomain

至於如何使用就由大家自由發揮啦。

如何從 v0.1.1 版本遷移到 v0.2.0

我已經把遷移的成本降到最低，只要替換引入的文件便可：

<!-- 老版本須要引入的文件 -->
<script src="http://jerry-cdn.b0.upaiyun.com/hit-kounter/hit-kounter-0.1.1.js"></script>

<!-- 新版本須要引入的文件 -->
<script src="https://cdn1.lncld.net/static/js/av-mini-0.6.10.js"></script>
<script src="http://jerry-cdn.b0.upaiyun.com/hit-kounter/hit-kounter-lc-0.2.0.js"></script>

由於 v0.2 版本基於 LeanCloud 的服務，因此須要額外引入 LeanCloud 的一個庫文件。另外須要注意的是，第二個文件除了版本號作了更新，還多了 -lc 幾個字符哦。

本次更新在將後端服務從 SAE 替換爲 LeanCloud 的同時並無作太多的功能改進。最主要的一點功能改進是引入緩存機制，在數據超過默認的五分鐘以前，Icarus 不會向服務器發送新的 get 請求。（increment 請求固然仍是照發不誤的啦）

如下內容請使用了 Icarus 接口的用戶注意

Icarus 接口所接受的多餘的參數如今須要放在 data 對象中，注意對你以前的代碼作必定修改。直接看例子可能比較直觀：

/*================
 * 老版本調用方式
 *================*/
Icarus.request({
  api: 'hk.page.get',
  v: '1.0',
  pages: [                          // <---
    { url: 'http://test.com/1' }    // <---
  ],                                // <---
  success: function(results) {},
  failure: function(code, err) {}
});

/*================
 * 新版本調用方式
 *================*/
Icarus.request({
  api: 'hk.page.get',
  v: '1.0',
  data: {                           // <---
    pages: [                        // <---
      { url: 'http://test.com/1' }  // <---
    ]                               // <---
  },                                // <---
  success: function(results) {},
  failure: function(code, err) {}
});

小結：Hit Kounter 的將來

固然，Hit Kounter 將來會加入愈來愈多的功能，包括但不限於：

• 添加一個可以得到全站的訪問總量的 API

• 經過添加 <div data-hk-top-pages="5"> 這樣一個元素，便可以將全站訪問量最高的五個頁面羅列在 div 框內。

• 爲用戶提供一個很方便的方式來導入初始的訪問量數據

• 完善各類可能的錯誤信息（包括服務端和瀏覽器端的錯誤）

TODO List 能夠在 這個 issue 中看到，並且由於 zry656565/Hit-Kounter-LC 是開源項目，也很期待你們可以多吐槽，若是能給 Hit-Kounter-LC 貢獻代碼那就再好不過啦~。