一种实现 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 语句进行判断也是可行的,只要能区分开不同的页面即可。

posted @ 2024-08-29 07:16  AurLemon  阅读(15)  评论(0编辑  收藏  举报