模板:ResourceLoader/文档

零件内容

关联模板

本模板转载自：方舟指令WIKI
区别于直接增加代码至common.js页面的全局加载的做法，ResourceLoader加载JS可控制页面JS数量，提升加载效率并预防JS冲突。
使用mw.loader.load载入js脚本、css样式表或js模块。
Js脚本仅限于MediaWiki命名空间下的页面。

使用办法

在需要的的页面写入

{{ResourceLoader|你的js/css/js模块}}

参数列表：

	#1
		页面名称或模块名称。
	isModule
		当值为"true"时，载入js模块或小工具，并忽略后面的参数。
	MIME
		"text/javascript" 或 "text/css"

魔改版

本ResourceLoader为赛马娘wiki魔改版，支持模板:ES6与模板:React丨作者：素子ちゃん_official

在需要的的页面写入

{{ResourceLoader|你的js/css/js模块}}

参数列表：

	#1
		页面名称或模块名称。
	isModule
		当值为"true"时，载入js模块或小工具，并忽略后面的参数。
	isModuleES6
		当值为"true"时，载入ES6模块，并忽略后面的参数。
	isModuleReact
		当值为"[true,true]"时，载入React并载入JSX模块，并忽略后面的参数。
		当值为"[false,true]"时，不载入React，载入JSX模块，并忽略后面的参数。       
	MIME
		"text/javascript" 或 "text/css"

请在Common.js添加相应的魔改ResourceLoader代码

×

/* 参见[[模板:ResourceLoader]]*/
/* 将相关代码用改为DOM加载完成后运行，解决部分情况
模板:ResourceLoader加载不完全的问题 -- 芙兰朵露琪露诺 2021/8/11*/


function templateResourceLoader() {
	$('.resourceLoader').each(function() {
		var $x = $(this);
		var text = $.trim($x.text());
		
		if (!text) return;
		
		//加载模块
		if ($x.data('isModule') == true) 
			return mw.loader.load(text);	
		
		//自动补充MediaWiki命名空间
		var ns = text.match('^.*?:');
		if (!ns) text = 'MediaWiki:' + text;
		
		//加载CSS样式表
		var mime = ($x.data('mime') || "text/javascript").toLowerCase();
		if (mime == "text/css") {
			if (text.slice(-4).toLowerCase() !== '.css') text = text + '.css';
			//if ($x.data('debug') !== true) text = text + '&debug=false';
			return mw.loader.load("//wiki.biligame.com/umamusume/index.php?title="+text+"&action=raw&ctype=text/css", "text/css");
		}
		
		//加载JS脚本
		if (ns && ns[0].toLowerCase() !== 'mediawiki:') {
			return console.log('ResourceLoader: 不允许加载MediaWiki以外的js脚本');
		}
		if (text.slice(-3).toLowerCase() !== '.js') text = text + '.js';
		//加载ES6模块
		if ($x.data('isModuleEs6') == true) 
			return loadModuleES6("//wiki.biligame.com/umamusume/index.php?title="+text+"&action=raw&ctype=text/javascript", function() {
				console.log("ResourceLoader: 加载ES6模块 => " + text);
			});
		//加载React模块
		if ($x.data('isModuleReact')) {
			if ($x.data('isModuleReact')[0]) {
			    $.getScript("//wiki.biligame.com/umamusume/index.php?title=MediaWiki:React.development.min.js&action=raw&ctype=text/javascript", function() {
					$.getScript("//wiki.biligame.com/umamusume/index.php?title=MediaWiki:React-dom.development.min.js&action=raw&ctype=text/javascript", function() {
						console.log("ReactENV => React/ReactDOM Loaded! React is Available For This Page!");
						console.log("%c React开发提示 %c 请务必在JS编辑界面右下角使用React同步器同步编译你的JSX代码，否则它将不起任何作用", "color: #fff; padding: 5px 0; background: blue;", "padding: 5px 5px 5px 0; background: #e5e5ff; color:blue");
			    		$('.resourceLoader').each(function() {
							var $xr = $(this);
							var textr = $.trim($xr.text());
							if (!textr) return;
							//自动为React模块补充MediaWiki命名空间与-babel后缀
							var nsr = textr.match('^.*?:');
							if (!nsr) textr = 'MediaWiki:' + textr.slice(0, -3);
							textr += '-babel.js';
							if ($xr.data('isModuleReact') && $xr.data('isModuleReact')[1]) {
								loadModuleES6("//wiki.biligame.com/umamusume/index.php?title="+textr+"&action=raw&ctype=text/javascript", function() {
									console.log("ResourceLoader: 加载React模块 => " + textr);
								});
							}
						});
					});
			    });
				return;
			}
		}
		//加载普通脚本
		console.log('ResourceLoader: 加载JS => ' + text);
		//if ($x.data('debug') !== true) text = text + '&debug=false';
		return mw.loader.load("//wiki.biligame.com/umamusume/index.php?title="+text+"&action=raw&ctype=text/javascript", "text/javascript");
	});
}

if (document.readyState == 'loading') {
	document.addEventListener('DOMContentLoaded', templateResourceLoader);
} else {
	templateResourceLoader();
}

//加载ES6模块
function loadModuleES6(src, callback) {
	var script = document.createElement('script'),
	head = document.getElementsByTagName('head')[0];
	script.type = 'module';
	script.charset = 'UTF-8';
	script.src = src;
	if (script.addEventListener) {
			script.addEventListener('load', function () {
			callback();
		}, false);
	} else if (script.attachEvent) {
		script.attachEvent('onreadystatechange', function () {
			var target = window.event.srcElement;
			if (target.readyState == 'loaded') {
				callback();
			}
		});
	}
	head.appendChild(script);
}