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>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>自定义模块 - layui</title>
|
||||
<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/' // 用于扩展模块的基础路径
|
||||
});
|
||||
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
// 直接加载 base 目录下的模块
|
||||
layui.use(['test'], function() {
|
||||
console.log('直接加载 base 目录下的模块 loaded: ', layui.test);
|
||||
});
|
||||
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: './js/'
|
||||
}).extend({
|
||||
index: 'index'
|
||||
,test: 'child/test'
|
||||
}).use('test');
|
||||
|
||||
layui.use('index')
|
||||
</script>
|
||||
</body>
|
||||
// 加载外部样式
|
||||
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>
|
||||
|
||||
@ -3,6 +3,6 @@
|
||||
layui.define(function(exports){
|
||||
|
||||
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){
|
||||
|
||||
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