在純靜態(tài)網(wǎng)站里，有時(shí)候會(huì)動(dòng)態(tài)更新某個(gè)區(qū)域往會(huì)選擇 Pjax（swup、barba.js）去處理，他們都是使用 ajax 和 pushState 通過真正的永久鏈接，頁面標(biāo)題和后退按鈕提供快速瀏覽體驗(yàn)。
我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、仁和ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的仁和網(wǎng)站制作公司
但是實(shí)際使用中可能會(huì)遇到不同頁面可能會(huì)需要加載不同插件處理，有些人可能會(huì)全量選擇加載，這樣會(huì)導(dǎo)致加載很多無用的腳本，有可能在用戶關(guān)閉頁面時(shí)都不一定會(huì)訪問到，會(huì)很浪費(fèi)資源。
首先想到的肯定是在請求到新的頁面后，我們手動(dòng)去比較當(dāng)前 DOM 和 新 DOM 之間 script 標(biāo)簽的差異，手動(dòng)給他插入到 body 里。
一般來說 JavaScript 腳本都是放在 body 后，避免阻塞頁面渲染，假設(shè)我們頁面腳本也都是在 body 后，并在 script 添加 [data-reload-script] 表明哪些是需要?jiǎng)討B(tài)加載的。
首先我們直接獲取到帶有 [data-reload-script] 屬性的 script 標(biāo)簽:
重慶分公司
重慶分公司
// NewHTML 為 新頁面 HTML
const pageContent = NewHTML.replace('', ' 然后通過創(chuàng)建 script 標(biāo)簽插入到 body：
children.forEach(item => {
const element = document.createElement('script');
for (const { name, value } of arrayify(item.attributes)) {
element.setAttribute(name, value);
}
element.textContent = item.textContent;
element.setAttribute('async', 'false');
document.body.insertBefore(element)
})
如果你的插件都是通過 script 引入，且不需要執(zhí)行額外的 JavaScript 代碼，只需要在 Pjax 鉤子函數(shù)這樣處理就可以了。
實(shí)際很多插件不僅僅需要你引入，還需要你手動(dòng)去初始化做一些操作的。我們可以通過 src 去判斷是引入的腳本，還是代碼塊。
let scripts = Array.from(document.scripts)
let scriptCDN = []
let scriptBlock = []
children.forEach(item => {
if (item.src)
scripts.findIndex(s => s.src === item.src) < 0 && scriptCDN.push(item);
else
scriptBlock.push(item.innerText)
})
scriptCDN 繼續(xù)通過上面方式插入到 body 里，然后通過 eval 或者 new Function 去執(zhí)行 scriptBlock 。因?yàn)?scriptBlock 里的代碼可能是會(huì)依賴 scriptCDN 里的插件的，所以需要在 scriptCDN 加載完成后在執(zhí)行 scriptBlock 。
const loadScript = (item) => {
return new Promise((resolve, reject) => {
const element = document.createElement('script');
for (const { name, value } of arrayify(item.attributes)) {
element.setAttribute(name, value);
}
element.textContent = item.textContent;
element.setAttribute('async', 'false');
element.onload = resolve
element.onerror = reject
document.body.insertBefore(element)
})
}
const runScriptBlock = (code) => {
try {
const func = new Function(code);
func()
} catch (error) {
try {
window.eval(code)
} catch (error) {
}
}
}
Promise.all(scriptCDN.map(item => loadScript(item))).then(_ => {
scriptBlock.forEach(code => {
runScriptBlock(code)
})
})
按照上面思去處理之后，會(huì)存在一個(gè)問題。 比如：我們添加了一個(gè) 全局的 'resize' 事件的監(jiān)聽，在跳轉(zhuǎn)其他頁面時(shí)候我們需要移除這個(gè)監(jiān)聽事件。
這個(gè)時(shí)候我們需要對(duì)代碼塊的格式進(jìn)行一個(gè)約束，比如像下面這樣，在初次加載時(shí)執(zhí)行 mount 里代碼，頁面卸載時(shí)執(zhí)行 unmount 里代碼。
DynamicPlugin 大致結(jié)構(gòu)：
let cacheMount = []
let cacheUnMount = []
let context = {}
class DynamicPlugin {
add(options) {
if (isFunction(options))
cacheMount.push(options)
if (isPlainObject(options)) {
let { mount, unmount } = options
if (isFunction(mount))
cacheMount.push(mount)
if (isFunction(unmount))
cacheUnMount.push(unmount)
}
// 執(zhí)行當(dāng)前頁面加載鉤子
this.runMount()
}
runMount() {
while (cacheMount.length) {
let item = cacheMount.shift();
item.call(context);
}
}
runUnMount() {
while (cacheUnMount.length) {
let item = cacheUnMount.shift();
item.call(context);
}
}
}
頁面卸載時(shí)調(diào)用 DynamicPlugin.runUnMount()。
Head 部分處理來說相對(duì)比較簡單，可以通過拿到新舊兩個(gè) Head，然后循環(huán)對(duì)比每個(gè)標(biāo)簽的 outerHTML，用來判斷哪些比是需要新增的哪些是需要?jiǎng)h除的。
本文示例代碼完整版本可以 參考這里
