一种实现 MediaWiki 分页面加载 JS 的思路

前言

MediaWiki 中使用 JavaScript 的办法一般是把代码放在 MediaWiki:Common.js 页面内。MediaWiki:Common.js 中的代码将并作用于所有页面。

但如果只有部分页面需要执行 JavaScript 代码，对于不需要的页面来说是没必要的，有没有什么办法能分着加载呢？

思路

MediaWiki 官方文档提到了很多方法。importScript()和mw.config.get('wgPageName')就是其中之一。前者是引入 Wiki 页面的方法，而后者是获取当前页面名称的方法（如果站点同时支持繁体中文等其它中文变体，这个方法也是不受影响的）。

那么，只需要把不同页面的代码放到 MediaWiki 命名空间下，如 MediaWiki:Script.js（MediaWiki 命名空间只有管理员能编辑）。最后在全局 JS 中检测页面名称并引入对应的 JS 文件即可！（可能有点奇怪的办法，但是笔者自己的站点测试了很多次确实可行，这种办法有点像动态导入组件？）

// 只能引入 Wiki 页面的方法 importScript('pageName')
importScript('MediaWiki:Script.js'); // 引入 MediaWiki:Script.js 页面的 JS 文件

更进一步地说，importScript()是通过在页面内添加<script></script>标签实现的，页面名称会被转化成/index.php?title=MediaWiki:Script.js&action=raw&ctype=text/javascript的形式。通过查询调用栈可发现，最终是被定向到 addScript 函数（见下）。

 function addScript(src, callback) {
    var script = document.createElement('script');
    script.src = src;
    script.onload = script.onerror = function() {
        if (script.parentNode) {
            script.parentNode.removeChild(script);
        }
        if (callback) {
            callback();
            callback = null;
        }
    }
    ;
    document.head.appendChild(script);
    return script;
}

实现

说回正题。只需要将以下代码添加到 MediaWiki:Common.js 即可。这里我使用一个对象存储着每个页面对应的 JS 页面名称。

(function() {
	/**
	 * 加载页面对应的脚本
	 */
	const pageScripts = {
	    '首页': 'MediaWiki:Mainpage.js',
	    '玩家列表': 'MediaWiki:List.js'
	};
	const currentPageName = mw.config.get('wgPageName');
	const scriptToImport = pageScripts[currentPageName];
	if (scriptToImport)
		importScript(scriptToImport);
})();

当然，直接使用 switch 或者 if 语句进行判断也是可行的，只要能区分开不同的页面即可。