mirror of
https://gitee.com/layui/layui.git
synced 2025-06-28 13:34:27 +08:00
feat: 新增 扩展任意外部模块的支持，及大量底层优化
- feat: layui.extend() 可扩展无需遵循 Layui 模块规范的任意第三方组件 - feat: 优化 layui.use() 的逻辑 - feat: 优化 layui.link() 的逻辑 - style: 优化 layui.js 整体代码风格
This commit is contained in:
贤心
parent
c204590a06
commit
c01a69225e
@ -1,30 +1,56 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<title>自定义模块 - layui</title>
|
<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/' // 用于扩展模块的基础路径
|
||||||
|
});
|
||||||
|
|
||||||
<link rel="stylesheet" href="../src/css/layui.css">
|
// 扩展模块
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
<style>
|
// 加载模块
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
</style>
|
// 直接加载 base 目录下的模块
|
||||||
</head>
|
layui.use(['test'], function() {
|
||||||
<body>
|
console.log('直接加载 base 目录下的模块 loaded: ', layui.test);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载外部样式
|
||||||
|
layui.link('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css', function(link) {
|
||||||
<script src="../src/layui.js"></script>
|
console.log('prism.min.css loaded');
|
||||||
<script>
|
}, 'prism');
|
||||||
layui.config({
|
</script>
|
||||||
base: './js/'
|
</body>
|
||||||
}).extend({
|
|
||||||
index: 'index'
|
|
||||||
,test: 'child/test'
|
|
||||||
}).use('test');
|
|
||||||
|
|
||||||
layui.use('index')
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -3,6 +3,6 @@
|
|||||||
layui.define(function(exports){
|
layui.define(function(exports){
|
||||||
|
|
||||||
exports('index', {
|
exports('index', {
|
||||||
title: '模块入口'
|
title: 'index 扩展模块'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -1,143 +0,0 @@
|
|||||||
/**
|
|
||||||
|
|
||||||
@Name：layui.modDemo XX组件
|
|
||||||
@Author：贤心
|
|
||||||
@License：MIT
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
layui.define(['laytpl'], function(exports){
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
var $ = layui.$
|
|
||||||
,laytpl = layui.laytpl
|
|
||||||
|
|
||||||
//模块名
|
|
||||||
,MOD_NAME = 'modDemo'
|
|
||||||
|
|
||||||
//外部接口
|
|
||||||
,modeDemo = {
|
|
||||||
config: {}
|
|
||||||
,index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0
|
|
||||||
|
|
||||||
//设置全局项
|
|
||||||
,set: function(options){
|
|
||||||
var that = this;
|
|
||||||
that.config = $.extend({}, that.config, options);
|
|
||||||
return that;
|
|
||||||
}
|
|
||||||
|
|
||||||
//事件监听
|
|
||||||
,on: function(events, callback){
|
|
||||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//操作当前实例
|
|
||||||
,thisModule = function(){
|
|
||||||
var that = this
|
|
||||||
,options = that.config
|
|
||||||
,id = options.id || that.index;
|
|
||||||
|
|
||||||
thisModule.that[id] = that; //记录当前实例对象
|
|
||||||
thisModule.config[id] = options; //记录当前实例配置项
|
|
||||||
|
|
||||||
return {
|
|
||||||
config: options
|
|
||||||
//重置实例
|
|
||||||
,reload: function(options){
|
|
||||||
that.reload.call(that, options);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取当前实例配置项
|
|
||||||
,getThisModuleConfig = function(id){
|
|
||||||
var config = thisModule.config[id];
|
|
||||||
if(!config) hint.error('The ID option was not found in the '+ MOD_NAME +' instance');
|
|
||||||
return config || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
//字符常量
|
|
||||||
,ELEM = 'layui-modeDemo'
|
|
||||||
|
|
||||||
|
|
||||||
//主模板
|
|
||||||
,TPL_MAIN = ['<div class="ayui-border-box">'
|
|
||||||
|
|
||||||
,'</div>'].join('')
|
|
||||||
|
|
||||||
//构造器
|
|
||||||
,Class = function(options){
|
|
||||||
var that = this;
|
|
||||||
that.index = ++transfer.index;
|
|
||||||
that.config = $.extend({}, that.config, transfer.config, options);
|
|
||||||
that.render();
|
|
||||||
};
|
|
||||||
|
|
||||||
//默认配置
|
|
||||||
Class.prototype.config = {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
//重载实例
|
|
||||||
Class.prototype.reload = function(options){
|
|
||||||
var that = this;
|
|
||||||
|
|
||||||
layui.each(options, function(key, item){
|
|
||||||
if(item.constructor === Array) delete that.config[key];
|
|
||||||
});
|
|
||||||
|
|
||||||
that.config = $.extend(true, {}, that.config, options);
|
|
||||||
that.render();
|
|
||||||
};
|
|
||||||
|
|
||||||
//渲染
|
|
||||||
Class.prototype.render = function(){
|
|
||||||
var that = this
|
|
||||||
,options = that.config;
|
|
||||||
|
|
||||||
//解析模板
|
|
||||||
that.elem = $(TPL_MAIN);
|
|
||||||
|
|
||||||
var othis = options.elem = $(options.elem);
|
|
||||||
if(!othis[0]) return;
|
|
||||||
|
|
||||||
//索引
|
|
||||||
that.key = options.id || that.index;
|
|
||||||
|
|
||||||
//插入组件结构
|
|
||||||
othis.html(that.elem);
|
|
||||||
|
|
||||||
that.events(); //事件
|
|
||||||
};
|
|
||||||
|
|
||||||
//事件
|
|
||||||
Class.prototype.events = function(){
|
|
||||||
var that = this;
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//记录所有实例
|
|
||||||
thisModule.that = {}; //记录所有实例对象
|
|
||||||
thisModule.config = {}; //记录所有实例配置项
|
|
||||||
|
|
||||||
//重载实例
|
|
||||||
modeDemo.reload = function(id, options){
|
|
||||||
var that = thisModule.that[id];
|
|
||||||
that.reload(options);
|
|
||||||
|
|
||||||
return thisModule.call(that);
|
|
||||||
};
|
|
||||||
|
|
||||||
//核心入口
|
|
||||||
modeDemo.render = function(options){
|
|
||||||
var inst = new Class(options);
|
|
||||||
return thisTransfer.call(inst);
|
|
||||||
};
|
|
||||||
|
|
||||||
exports(MOD_NAME, modeDemo);
|
|
||||||
});
|
|
||||||
@ -1,8 +1,9 @@
|
|||||||
|
/**
|
||||||
|
* test
|
||||||
|
*/
|
||||||
|
|
||||||
layui.define(function(exports){
|
layui.define(function(exports){
|
||||||
|
|
||||||
exports('test', {
|
exports('test', {
|
||||||
title: '子目录模块加载'
|
title: 'test 扩展模块'
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
9
examples/extends/test/test1.js
Normal file
9
examples/extends/test/test1.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/**
|
||||||
|
* test1
|
||||||
|
*/
|
||||||
|
|
||||||
|
layui.define(function(exports){
|
||||||
|
exports('test1', {
|
||||||
|
title: 'test1 扩展模块'
|
||||||
|
})
|
||||||
|
});
|
||||||
9
examples/extends/test/test2.js
Normal file
9
examples/extends/test/test2.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/**
|
||||||
|
* test2
|
||||||
|
*/
|
||||||
|
|
||||||
|
layui.define(function(exports){
|
||||||
|
exports('test2', {
|
||||||
|
title: 'test2 扩展模块'
|
||||||
|
})
|
||||||
|
});
|
||||||
849
src/layui.js
849
src/layui.js
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user