MediaWiki:Node.js:修订间差异
来自东方Project线下活动维基
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
// 动态加载 | // 动态加载 JavaScript(使用回调) | ||
function loadScript(url) { | function loadScript(url, callback) { | ||
var script = document.createElement('script'); | |||
script.src = url; | |||
script.onload = function () { | |||
console.log('加载完成: ' + url); | |||
if (callback) callback(); | |||
}; | |||
script.onerror = function () { | |||
console.error('加载失败: ' + url); | |||
}; | |||
document.head.appendChild(script); | |||
} | } | ||
第25行: | 第22行: | ||
// 依次加载所有资源(按顺序) | // 依次加载所有资源(按顺序) | ||
function loadDependencies() { | |||
var urlObj = new URL(window.location.href); | var urlObj = new URL(window.location.href); | ||
var title = urlObj.searchParams.get("title"); // 获取 title 参数 | var title = urlObj.searchParams.get("title"); // 获取 title 参数 | ||
var action = urlObj.searchParams.get("action"); // 获取 action 参数 | var action = urlObj.searchParams.get("action"); // 获取 action 参数 | ||
var hasJs = title && title. | var hasJs = title && title.indexOf(".js") === title.length - 3; | ||
var hasCSS = title && title. | var hasCSS = title && title.indexOf(".css") === title.length - 4; | ||
var hasEditAction = action === "edit"; | var hasEditAction = action === "edit"; | ||
console.log('NodeJS 模块加载中...'); | console.log('NodeJS 模块加载中...'); | ||
// 按顺序加载资源 | |||
if (hasJs || hasCSS) { | |||
if (hasEditAction) { | |||
loadScript('/node_modules/oojs/dist/oojs.min.js', function () { | |||
loadScript('/node_modules/oojs-ui/dist/oojs-ui.min.js', function () { | |||
loadCSS('/node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.css'); | |||
loadScript('/node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.js', function () { | |||
} | loadScript('/node_modules/vue/dist/vue.js', function () { | ||
console.log('所有资源加载完毕 🎉'); | |||
}); | |||
}); | |||
}); | |||
}); | |||
} else { | |||
loadScript('/node_modules/vue/dist/vue.js', function () { | |||
console.log('所有资源加载完毕 🎉'); | |||
}); | |||
} | } | ||
} else { | |||
loadScript('/node_modules/vue/dist/vue.js', function () { | |||
console.log('所有资源加载完毕 🎉'); | |||
}); | |||
} | } | ||
} | } | ||
// 确保在页面加载完成后执行 | // 确保在页面加载完成后执行 | ||
document.addEventListener( | if (document.readyState === 'complete') { | ||
loadDependencies(); | |||
} else { | |||
window.addEventListener('load', loadDependencies); | |||
} |
2025年3月2日 (日) 00:07的版本
// 动态加载 JavaScript(使用回调)
function loadScript(url, callback) {
var script = document.createElement('script');
script.src = url;
script.onload = function () {
console.log('加载完成: ' + url);
if (callback) callback();
};
script.onerror = function () {
console.error('加载失败: ' + url);
};
document.head.appendChild(script);
}
// 动态加载 CSS
function loadCSS(url) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
}
// 依次加载所有资源(按顺序)
function loadDependencies() {
var urlObj = new URL(window.location.href);
var title = urlObj.searchParams.get("title"); // 获取 title 参数
var action = urlObj.searchParams.get("action"); // 获取 action 参数
var hasJs = title && title.indexOf(".js") === title.length - 3;
var hasCSS = title && title.indexOf(".css") === title.length - 4;
var hasEditAction = action === "edit";
console.log('NodeJS 模块加载中...');
// 按顺序加载资源
if (hasJs || hasCSS) {
if (hasEditAction) {
loadScript('/node_modules/oojs/dist/oojs.min.js', function () {
loadScript('/node_modules/oojs-ui/dist/oojs-ui.min.js', function () {
loadCSS('/node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.css');
loadScript('/node_modules/oojs-ui/dist/oojs-ui-wikimediaui.min.js', function () {
loadScript('/node_modules/vue/dist/vue.js', function () {
console.log('所有资源加载完毕 🎉');
});
});
});
});
} else {
loadScript('/node_modules/vue/dist/vue.js', function () {
console.log('所有资源加载完毕 🎉');
});
}
} else {
loadScript('/node_modules/vue/dist/vue.js', function () {
console.log('所有资源加载完毕 🎉');
});
}
}
// 确保在页面加载完成后执行
if (document.readyState === 'complete') {
loadDependencies();
} else {
window.addEventListener('load', loadDependencies);
}