java pjax_PJAX，站点加速之翼

之所以说 pjax 不是开箱即用，主要是因为所有 js 脚本的调用会在第二次执行 pjax 方法时失效。我刚开始遇到这个问题时，一头雾水，折腾了许久而不得解，然后在 laravel china 发帖求助，很快站长龙哥就站出来，耐心细致的解答了我的疑惑。仔细研究了源码，我发现了其中两个有趣的函数：

var container = extractContainer("", xhr, options)

executeScriptTags(container.scripts)

字面意思是将取回的 html 碎片 进行加工处理成一个容器对象，并处理其中的脚本标签，那为什么第一次之后的 pjax 就没执行我的脚本呢？我们继续阅读两个函数体内的关键代码：

extractContainer :

// Gather all script[src] elements

obj.scripts = findAll(obj.contents, 'script[src]').remove()

obj.contents = obj.contents.not(obj.scripts)

将 html 碎片中的所有带 src 的脚本删除并储存在容器对象的 scripts 属性中，将去除了 scripts 的 html 碎片内容赋给 contents 属性。看到这里，你可能会大概明白了 pjax 的用意。继续看另一个函数体的内容：

executeScriptTags :

if (!scripts) return

var existingScripts = $('script[src]')

scripts.each(function() {

var src = this.src

var matchedScripts = existingScripts.filter(function() {

return this.src === src

})

if (matchedScripts.length) return

var script = document.createElement('script')

var type = $(this).attr('type')

if (type) script.type = type

script.src = $(this).attr('src')

document.head.appendChild(script)

})

获取目前 DOM 中的所有带 src 的脚本，然后和 html 碎片中的脚本逐个做比对，如果碎片中有新的脚本就将其插入到 head 标签的最后。啊哈~ pjax 这么做是确保不会重复请求任何已经下载过的脚本文件，节省 HTTP 开支。但这么做的弊端就是本段开头说的那个问题，那如何解决呢？

灵活运用 pjax 提供的事件。 要解决上述问题，我们可以监听 pjax:end 事件，当然 pjax:success 和 pjax:complete 也行，区别不大 ：

$(document).on('pjax:end', function() {

self.blogBootUp()

})