fix(view): fix pjax support for busuanzi

[isHarryh]

问题描述

在使用“卜算子”统计插件时，如果启用了 pjax，则会导致切换页面后，卜算子的显示功能失效。例如，文章详情页面的顶部信息栏显示 0 VISITS。

原因分析

这是因为卜算子的 JS 脚本需要重新运行才能生效。卜算子的 JS 源码概述如下：

var bszCaller, bszTag;
!function() {
    // ...
}(),
bszCaller = {
    fetch: function(a, b) {
        // ...
    },
    evalCall: function(a) {
        // ...
    }
},
bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback", function(a) {
    bszTag.texts(a),
    bszTag.shows()
}),
bszTag = {
    //...
};

可见，必须运行 bszCaller.fetch(...) 语句才可以使得页面中的统计文本正常显示。

解决方案

仿照上次 MathJax 问题的解决方案。只需在 pjax:complete 事件触发后，手动运行 bszCaller.fetch(...) 语句即可。

此外，自从采用了 pjax 技术以来，已经发现了很多类似的不兼容性问题（未来可能也会继续出现），并引入了一定的代码维护复杂度。是否应该考虑一种通用的解决方案（把所有 <script> 都打上 data-pjax 标签？）来解决这一系列问题？或者弃用 pjax 而采用其他的性能优化方案？

---

Problem Description

When using the "Busuanzi" statistics plugin, enabling PJAX causes the plugin's display functionality to fail after page navigation. For example, the top information bar on a post details page might display 0 VISITS.

Cause Analysis

This issue occurs because the JavaScript script for Busuanzi needs to be re-executed to function properly. A summary of Busuanzi's JavaScript source code is as follows:

var bszCaller, bszTag;
!function() {
    // ...
}(),
bszCaller = {
    fetch: function(a, b) {
        // ...
    },
    evalCall: function(a) {
        // ...
    }
},
bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback", function(a) {
    bszTag.texts(a),
    bszTag.shows()
}),
bszTag = {
    //...
};

As shown, the bszCaller.fetch(...) statement must be executed to correctly display the statistical text on the page.

Solution

Following the approach used for the MathJax issue, the solution is straightforward: manually execute the bszCaller.fetch(...) statement after the pjax:complete event is triggered.

Additionally, since adopting PJAX, many similar compatibility issues have been discovered (and more might arise in the future), introducing a certain level of code maintenance complexity. Should we consider a general solution (e.g., tagging all <script> elements with a data-pjax attribute) to address this class of issues? Or should we abandon PJAX in favor of alternative performance optimization solutions?