mirror of
https://gitee.com/layui/layui.git
synced 2025-06-28 04:35:24 +08:00
c01a69225e
- feat: layui.extend() 可扩展无需遵循 Layui 模块规范的任意第三方组件 - feat: 优化 layui.use() 的逻辑 - feat: 优化 layui.link() 的逻辑 - style: 优化 layui.js 整体代码风格
57 lines
2.0 KiB
HTML
57 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>扩展模块 - Layui</title>
|
|
<link rel="stylesheet" href="../src/css/layui.css">
|
|
</head>
|
|
<body>
|
|
<div class="layui-text layui-padding-3">
|
|
<h3>打开浏览器控制台查看测试结果</h3>
|
|
</div>
|
|
<script src="../src/layui.js"></script>
|
|
<script>
|
|
layui.config({
|
|
base: 'extends/' // 用于扩展模块的基础路径
|
|
});
|
|
|
|
// 扩展模块
|
|
layui.extend({
|
|
// 扩展遵循 Layui 规范的模块
|
|
index: 'index', // 会前置追加 base 基础路径
|
|
test1: 'test/test1', // 会前置追加 base 基础路径
|
|
test2: '{/}extends/test/test2', // 不会前置追加 base 基础路径，即单独路径
|
|
// 扩展任意外部模块
|
|
markdownit: {
|
|
src: 'https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js', // 模块路径
|
|
api: 'markdownit' // 接口名称
|
|
},
|
|
Prism: {
|
|
src: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
|
|
api: 'Prism'
|
|
}
|
|
});
|
|
|
|
// 加载模块
|
|
layui.use(['all', 'index', 'test1', 'test2', 'markdownit', 'Prism'], function() {
|
|
console.log('Layui 内置模块 loaded: ', layui);
|
|
console.log('遵循 Layui 规范的扩展模块 loaded: ', layui.index, layui.test1, layui.test2);
|
|
console.log('任意外部模块 loaded: ')
|
|
console.log(' > markdownit: ', layui.markdownit);
|
|
console.log(' > Prism: ', layui.Prism);
|
|
});
|
|
|
|
// 直接加载 base 目录下的模块
|
|
layui.use(['test'], function() {
|
|
console.log('直接加载 base 目录下的模块 loaded: ', layui.test);
|
|
});
|
|
|
|
// 加载外部样式
|
|
layui.link('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css', function(link) {
|
|
console.log('prism.min.css loaded');
|
|
}, 'prism');
|
|
</script>
|
|
</body>
|
|
</html>
|