mirror of
https://github.com/layui/layui.git
synced 2026-02-09 10:19:20 +08:00
569 lines
14 KiB
HTML
569 lines
14 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>基础方法测试 - layui</title>
|
|
<link href="./assets/dist/css/layui.css" rel="stylesheet" />
|
|
<link href="./assets/modules/test/test.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script src="./assets/dist/layui.js"></script>
|
|
<script>
|
|
layui.use(async () => {
|
|
var lay = layui.lay;
|
|
var util = layui.util;
|
|
|
|
// 异步导入测试模块
|
|
const { test } = await import('./assets/modules/test/test.js');
|
|
const tester = test({
|
|
elem: '#root',
|
|
items: [
|
|
{
|
|
name: 'layui',
|
|
children: [
|
|
{ name: 'sort' },
|
|
{ name: 'type' },
|
|
{ name: 'isArray' },
|
|
{ name: 'extend' },
|
|
],
|
|
},
|
|
{ type: '-' },
|
|
{
|
|
name: 'lay',
|
|
children: [
|
|
{ name: 'extend' },
|
|
{ name: 'treeToFlat' },
|
|
{ name: 'flatToTree' },
|
|
],
|
|
},
|
|
],
|
|
});
|
|
|
|
tester.describe('layui.sort', (it) => {
|
|
it({
|
|
title: '整数型数字排序',
|
|
code: `
|
|
const arr = layui.sort([{a: 3},{a: 0},{a: 0},{a: -1},{a: -5},{a: 6},{a: 9},{a: -333333}], 'a');
|
|
console.log(arr);
|
|
`,
|
|
expected: [
|
|
{ a: -333333 },
|
|
{ a: -5 },
|
|
{ a: -1 },
|
|
{ a: 0 },
|
|
{ a: 0 },
|
|
{ a: 3 },
|
|
{ a: 6 },
|
|
{ a: 9 },
|
|
],
|
|
});
|
|
|
|
it({
|
|
title: '浮点型数字排序',
|
|
code: `
|
|
const arr = layui.sort([{a: 3.5},{a: 0.5},{a: 0.5},{a: -1.5},{a: -5.5},{a: 6.5},{a: 9.5},{a: -333333.5}], 'a');
|
|
console.log(arr);
|
|
`,
|
|
expected: [
|
|
{ a: -333333.5 },
|
|
{ a: -5.5 },
|
|
{ a: -1.5 },
|
|
{ a: 0.5 },
|
|
{ a: 0.5 },
|
|
{ a: 3.5 },
|
|
{ a: 6.5 },
|
|
{ a: 9.5 },
|
|
],
|
|
});
|
|
|
|
it({
|
|
title: '混合型数字排序',
|
|
code: `
|
|
const arr = layui.sort([{a: 1},{a: 20.5},{a: 20.3},{a: 3},{a: 52},{a: 4.3}], 'a');
|
|
console.log(arr);
|
|
`,
|
|
expected: [
|
|
{ a: 1 },
|
|
{ a: 3 },
|
|
{ a: 4.3 },
|
|
{ a: 20.3 },
|
|
{ a: 20.5 },
|
|
{ a: 52 },
|
|
],
|
|
});
|
|
|
|
it({
|
|
title: '中文排序',
|
|
code: `
|
|
const arr = layui.sort([{a: '男'},{a: '女'},{a: '男'},{a: '女'},{a: '男'}], 'a');
|
|
console.log(arr);
|
|
`,
|
|
expected: [
|
|
{ a: '女' },
|
|
{ a: '女' },
|
|
{ a: '男' },
|
|
{ a: '男' },
|
|
{ a: '男' },
|
|
],
|
|
});
|
|
|
|
it({
|
|
title: '英文排序',
|
|
code: `
|
|
const arr = layui.sort([{a: 'E'},{a: 'B'},{a: 'D'},{a: 'C'},{a: 'A'}], 'a');
|
|
console.log(arr);
|
|
`,
|
|
expected: [
|
|
{ a: 'A' },
|
|
{ a: 'B' },
|
|
{ a: 'C' },
|
|
{ a: 'D' },
|
|
{ a: 'E' },
|
|
],
|
|
});
|
|
|
|
it({
|
|
title: '混合排序',
|
|
code: `
|
|
const arr = layui.sort([
|
|
{a: 3},
|
|
{a: '男'},
|
|
{a: 0},
|
|
{a: 66},
|
|
{a: 99},
|
|
{a: 'C'},
|
|
{a: '女'},
|
|
{a: 3.5},
|
|
{a: 0},
|
|
{a: -1},
|
|
{a: 'B'},
|
|
{a: 5.5},
|
|
{a: '男'},
|
|
{a: 'A'},
|
|
{a: -5},
|
|
{a: '男'},
|
|
{a: 6},
|
|
{a: 9}
|
|
], 'a');
|
|
console.log(arr);
|
|
`,
|
|
expected: [
|
|
{ a: -5 },
|
|
{ a: -1 },
|
|
{ a: 0 },
|
|
{ a: 0 },
|
|
{ a: 3 },
|
|
{ a: 3.5 },
|
|
{ a: 5.5 },
|
|
{ a: 6 },
|
|
{ a: 9 },
|
|
{ a: 66 },
|
|
{ a: 99 },
|
|
{ a: 'A' },
|
|
{ a: 'B' },
|
|
{ a: 'C' },
|
|
{ a: '女' },
|
|
{ a: '男' },
|
|
{ a: '男' },
|
|
{ a: '男' },
|
|
],
|
|
});
|
|
|
|
it({
|
|
title: '数组成员为纯数字',
|
|
code: `
|
|
const arr = layui.sort([1, 20.5, 19.5, 52, 4.5]);
|
|
console.log(arr);
|
|
`,
|
|
expected: [1, 4.5, 19.5, 20.5, 52],
|
|
});
|
|
|
|
it({
|
|
title: '数组成员为混合型',
|
|
code: `
|
|
// 按成员对象的 key 为 a 进行比较
|
|
const arr = layui.sort([1, {a: 32}, 20.5, {a: 6}, 52, 5.5], 'a');
|
|
console.log(arr);
|
|
`,
|
|
expected: [1, 5.5, { a: 6 }, 20.5, { a: 32 }, 52],
|
|
});
|
|
});
|
|
|
|
tester.describe('layui.type', (it) => {
|
|
it({
|
|
title: 'new RegExp()',
|
|
code: `console.log(layui.type(new RegExp()))`,
|
|
expected: 'regexp',
|
|
});
|
|
|
|
it({
|
|
title: 'new Date()',
|
|
code: `console.log(layui.type(new Date()))`,
|
|
expected: 'date',
|
|
});
|
|
});
|
|
|
|
tester.describe('layui.isArray', (it) => {
|
|
it({
|
|
title: '[]',
|
|
code: `console.log(layui.isArray([]))`,
|
|
expected: true,
|
|
});
|
|
|
|
it({
|
|
title: 'lay("div")',
|
|
code: `console.log(layui.isArray(lay("div")))`,
|
|
expected: true,
|
|
});
|
|
|
|
it({
|
|
title: 'document.querySelectorAll("div")',
|
|
code: `console.log(layui.isArray(document.querySelectorAll("div")))`,
|
|
expected: true,
|
|
});
|
|
|
|
it({
|
|
title: '{}',
|
|
code: `console.log(layui.isArray({}))`,
|
|
expected: false,
|
|
});
|
|
});
|
|
|
|
tester.describe('layui.extend', (it) => {
|
|
it({
|
|
title: '测试扩展模块是否注册成功',
|
|
code: `
|
|
layui.config({
|
|
base: './assets/modules/extends/' // 用于扩展模块的基础路径
|
|
});
|
|
|
|
// 扩展模块
|
|
layui.extend({
|
|
// 扩展遵循 Layui 规范的模块
|
|
index: 'index', // 会前置追加 base 基础路径
|
|
test1: 'test/test1', // 会前置追加 base 基础路径
|
|
test2: '{/}./assets/modules/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'
|
|
}
|
|
});
|
|
`,
|
|
expected: '扩展模块名应为 layui.modules 成员',
|
|
assert(actual, expected) {
|
|
var modules = layui.modules;
|
|
if (
|
|
modules.index &&
|
|
modules.test1 &&
|
|
modules.test2 &&
|
|
modules.markdownit &&
|
|
modules.Prism
|
|
) {
|
|
return true;
|
|
}
|
|
},
|
|
});
|
|
|
|
it({
|
|
title: '测试加载「扩展模块」是否成功',
|
|
code: `
|
|
// 加载全部扩展模块
|
|
layui.use(['index', 'test1', 'test2', 'markdownit', 'Prism'], function() {
|
|
console.log('All modules loaded successfully.');
|
|
});
|
|
|
|
// 直接加载 base 目录下的模块
|
|
layui.use(['test'], function() {
|
|
console.log('test module: loaded successfully');
|
|
});
|
|
`,
|
|
expected: '扩展模块应成功绑定在 layui 对象上',
|
|
async assert(actual, expected) {
|
|
async function loadExtendModule() {
|
|
await new Promise((resolve, reject) => {
|
|
// 加载全部扩展模块
|
|
layui.use(
|
|
['index', 'test1', 'test2', 'markdownit', 'Prism'],
|
|
() => {
|
|
console.log(
|
|
'遵循 Layui 规范的扩展模块 loaded: ',
|
|
layui.index,
|
|
layui.test1,
|
|
layui.test2,
|
|
);
|
|
console.log('任意外部模块 loaded: ');
|
|
console.log(' > markdownit: ', layui.markdownit);
|
|
console.log(' > Prism: ', layui.Prism);
|
|
|
|
resolve();
|
|
},
|
|
);
|
|
});
|
|
|
|
await new Promise((resolve, reject) => {
|
|
// 直接加载 base 目录下的模块
|
|
layui.use(['test'], () => {
|
|
console.log(
|
|
'直接加载 base 目录下的模块 loaded: ',
|
|
layui.test,
|
|
);
|
|
resolve();
|
|
});
|
|
});
|
|
|
|
if (
|
|
layui.index &&
|
|
layui.test1 &&
|
|
layui.test2 &&
|
|
layui.markdownit &&
|
|
layui.Prism &&
|
|
layui.test
|
|
) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return await loadExtendModule();
|
|
},
|
|
});
|
|
});
|
|
|
|
/**
|
|
* lay
|
|
*/
|
|
|
|
tester.describe('lay.extend', (it) => {
|
|
const objNCode = `
|
|
const objN = [
|
|
{
|
|
a: [1, 3],
|
|
b: {ba: 1}
|
|
},
|
|
{
|
|
a: [5],
|
|
b: {bb: 2}
|
|
},
|
|
{
|
|
b: {ba: 3},
|
|
c: 3
|
|
}
|
|
];
|
|
`;
|
|
|
|
it({
|
|
title: '普通拷贝',
|
|
code: `
|
|
const obj = lay.extend({}, {a:1});
|
|
console.log(obj);
|
|
`,
|
|
expected: { a: 1 },
|
|
});
|
|
|
|
it({
|
|
title: '普通合并',
|
|
code: `
|
|
const obj = lay.extend({a:1}, {a:3}, {a:5, b:5});
|
|
console.log(obj);
|
|
`,
|
|
expected: { a: 5, b: 5 },
|
|
});
|
|
|
|
it({
|
|
title: '值为「普通对象和数组」的深拷贝合并',
|
|
code: `
|
|
${objNCode}
|
|
const obj = lay.extend({}, ...objN);
|
|
console.log(obj);
|
|
`,
|
|
expected: { a: [5, 3], b: { ba: 3, bb: 2 }, c: 3 },
|
|
});
|
|
|
|
it({
|
|
title: '使用 customizer 实现数组覆盖而非合并',
|
|
code: `
|
|
${objNCode}
|
|
const obj = lay.extend({}, ...objN, (objValue, srcValue) => {
|
|
if (Array.isArray(objValue) && Array.isArray(srcValue)) {
|
|
return srcValue
|
|
|
|
// 若为 Object[] 值，可深拷贝数据源覆盖
|
|
// return lay.extend([], srcValue);
|
|
}
|
|
});
|
|
console.log(obj);
|
|
`,
|
|
expected: { a: [5], b: { ba: 3, bb: 2 }, c: 3 },
|
|
});
|
|
|
|
it({
|
|
title: '使用 customizer 实现特定字段跳过合并',
|
|
code: `
|
|
${objNCode}
|
|
const obj = lay.extend({}, ...objN, (objValue, srcValue, key) => {
|
|
if (key === 'b') {
|
|
return objValue;
|
|
}
|
|
});
|
|
console.log(obj);
|
|
`,
|
|
expected: { a: [5, 3], b: { ba: 1 }, c: 3 },
|
|
});
|
|
|
|
it({
|
|
title: '是否存在对象引用',
|
|
code: `
|
|
const src = { data: [{a: 1, b: 2}] };
|
|
const obj = lay.extend({}, src);
|
|
|
|
// 修改 obj 数组类型中的对象成员，查看 src 是否被影响
|
|
obj.data[0].a = '11111';
|
|
console.log(obj.data[0].a === src.data[0].a);
|
|
`,
|
|
expected: false,
|
|
});
|
|
});
|
|
|
|
tester.describe('lay.treeToFlat', (it) => {
|
|
const data = [
|
|
{
|
|
title: '节点 1',
|
|
id: '1000',
|
|
children: [
|
|
{
|
|
title: '节点 1-1',
|
|
id: '1001',
|
|
},
|
|
{
|
|
title: '节点 1-2',
|
|
id: '1002',
|
|
children: [
|
|
{
|
|
title: '节点 1-2-1',
|
|
id: '1003',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: '节点 2',
|
|
id: '2000',
|
|
},
|
|
];
|
|
|
|
it({
|
|
title: '树状数据展平',
|
|
code: `
|
|
const data = ${JSON.stringify(data, null, 2)};
|
|
|
|
// 树状数据展平
|
|
const flatData = lay.treeToFlat(data, {
|
|
keepChildren: true // 是否保留 children 字段
|
|
});
|
|
console.log(JSON.stringify(flatData));
|
|
`,
|
|
expected: '子节点被展平到一级数组中（控制台查看）',
|
|
assert(actual, expected) {
|
|
try {
|
|
actual = JSON.parse(actual);
|
|
console.log(`${this.title} : `, actual);
|
|
return actual.length === 5;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
},
|
|
});
|
|
|
|
it({
|
|
title: '是否存在对象引用',
|
|
code: `
|
|
const data = ${JSON.stringify(data, null, 2)};
|
|
|
|
// 树状数据展平
|
|
const flatData = lay.treeToFlat(data, {
|
|
keepChildren: true // 是否保留 children 字段
|
|
});
|
|
flatData[0].children[0].title="333333"; // 修改数据
|
|
console.log(flatData[0].children[0].title === data[0].children[0].title);
|
|
`,
|
|
expected: false,
|
|
});
|
|
});
|
|
|
|
tester.describe('lay.flatToTree', (it) => {
|
|
const data = [
|
|
{
|
|
title: '节点 1',
|
|
id: '1000',
|
|
parentId: null,
|
|
},
|
|
{
|
|
title: '节点 1-1',
|
|
id: '1001',
|
|
parentId: '1000',
|
|
},
|
|
{
|
|
title: '节点 1-2',
|
|
id: '1002',
|
|
parentId: '1000',
|
|
},
|
|
{
|
|
title: '节点 1-2-1',
|
|
id: '1003',
|
|
parentId: '1002',
|
|
},
|
|
{
|
|
title: '节点 2',
|
|
id: '2000',
|
|
parentId: null,
|
|
},
|
|
];
|
|
|
|
it({
|
|
title: '平铺数据转树状',
|
|
code: `
|
|
const data = ${JSON.stringify(data, null, 2)};
|
|
|
|
const treeData = lay.flatToTree(data); // 平铺数据转树状
|
|
console.log(JSON.stringify(treeData));
|
|
`,
|
|
expected: '根据 parentId 字段进行树状数据生成（控制台查看）',
|
|
assert(actual, expected) {
|
|
try {
|
|
actual = JSON.parse(actual);
|
|
console.log(`${this.title} : `, actual);
|
|
return actual.length === 2;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
},
|
|
});
|
|
|
|
it({
|
|
title: '是否存在对象引用',
|
|
code: `
|
|
const data = ${JSON.stringify(data, null, 2)};
|
|
|
|
const treeData = lay.flatToTree(data); // 平铺数据转树状
|
|
treeData[0].children[0].title="333333"; // 修改数据
|
|
// 查看原始数据是否被修改
|
|
console.log(treeData[0].children[0].title === data[1].title);
|
|
`,
|
|
expected: false,
|
|
});
|
|
});
|
|
|
|
// 返回顶部
|
|
util.fixbar();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|