Mediawiki通过ReourceLoader添加Jquery插件
MediaWiki通过ResourceLoader添加jQuery插件
基础概念
ResourceLoader是MediaWiki的核心模块加载系统，它负责高效地加载JavaScript、CSS和其他资源。通过ResourceLoader，可以方便地将jQuery插件集成到MediaWiki中。
优势
- 性能优化：自动合并和压缩资源
- 依赖管理：自动处理脚本依赖关系
- 缓存控制：智能缓存机制减少重复加载
- 按需加载：只在需要时加载资源
- 版本管理：避免资源冲突
实现方法
1. 创建扩展的基本结构
首先需要创建一个MediaWiki扩展，目录结构如下：
MyExtension/
├── extension.json
├── resources/
│ ├── myPlugin.js
│ └── myPlugin.css
└── MyExtension.php2. 注册资源文件
在extension.json中定义资源：
{
"name": "MyExtension",
"version": "1.0.0",
"author": "Your Name",
"url": "https://www.example.com",
"descriptionmsg": "myextension-desc",
"license-name": "GPL-2.0-or-later",
"type": "other",
"ResourceModules": {
"ext.myExtension": {
"scripts": ["resources/myPlugin.js"],
"styles": ["resources/myPlugin.css"],
"dependencies": ["jquery"],
"messages": [],
"targets": ["desktop", "mobile"]
}
},
"manifest_version": 2
}3. 加载资源
在PHP文件中加载模块：
class MyExtension {
public static function onBeforePageDisplay( OutputPage &$out, Skin &$skin ) {
$out->addModules( 'ext.myExtension' );
}
}4. 编写jQuery插件
在resources/myPlugin.js中：
( function( $, mw ) {
'use strict';
// 定义jQuery插件
$.fn.myPlugin = function( options ) {
var settings = $.extend( {
color: 'red',
backgroundColor: 'white'
}, options );
return this.each( function() {
$( this ).css( {
color: settings.color,
backgroundColor: settings.backgroundColor
} );
} );
};
// 页面加载完成后初始化插件
$( function() {
$( '.my-plugin-element' ).myPlugin( {
color: 'blue',
backgroundColor: '#f0f0f0'
} );
} );
// 或者通过mw.hook在特定事件后执行
mw.hook( 'wikipage.content' ).add( function( $content ) {
$content.find( '.my-plugin-element' ).myPlugin();
} );
} )( jQuery, mediaWiki );常见问题及解决方案
1. 插件未加载
原因：
- 资源路径配置错误
- 依赖声明不完整
- 模块名称拼写错误
解决：
- 检查
extension.json中的路径是否正确 - 确保所有依赖项已声明
- 验证模块名称在加载时是否一致
2. jQuery冲突
原因：
- 插件使用了全局
$而未考虑MediaWiki的noConflict模式
解决：
- 使用闭包包装插件代码，如示例所示
- 明确传递
jQuery对象
3. 插件在可视化编辑器中不起作用
原因：
- 资源未针对编辑器环境加载
解决：
- 在
extension.json中添加targets: ["desktop", "mobile"] - 使用
$out->addModules()时考虑编辑器上下文
最佳实践
- 模块化开发：将大型插件拆分为多个小模块
- 延迟加载：对于非关键功能，使用
mw.loader.using()按需加载 - 错误处理：添加适当的错误捕获和处理
- 文档注释：为插件添加清晰的文档
- 测试覆盖：编写QUnit测试确保插件稳定性
高级用法
动态加载插件
mw.loader.using( 'ext.myExtension' ).then( function() {
// 插件加载完成后执行
$( '#myElement' ).myPlugin();
} );与其他MediaWiki模块交互
mw.hook( 'ext.myExtension.loaded' ).add( function( plugin ) {
// 其他模块可以使用这个钩子访问插件功能
} );通过ResourceLoader添加jQuery插件是MediaWiki扩展开发中的常见需求，遵循上述方法可以确保插件高效、稳定地运行，并与MediaWiki生态系统良好集成。
相关·内容
没有搜到相关的文章
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
