Layui 3 设计方案和开发规范 (草案)

Tinywan

发布于 2026-07-01 12:51:05

930

文章被收录于专栏：开源技术小栈开源技术小栈

概述

过去两年，随着 AI 技术的浪潮，每个人都在思考未来的方向，对普通开发者而言，可能更多只是 Coding Agent 与手工编写代码的切换，而开源项目又该如何应对这样的变革？

Layui 试图交出她的答案：「他强由他强，清风拂山岗」，至少也应该为 AI 更新下知识库。

在昨天（10月24日）那个特别的日子发布了 2.x 的收官版本 2.13.0 之后，即意味着：Layui 3 将从过去漫长的实验徘徊阶段，正式迈入实质开发阶段。

🧩 设计方案

项目定位

Layui 3 主要面向以后端开发者为主体的全栈开发者群体。它为更便捷地构建现代 Web 界面而生，因此它的本质是一个 Web 组件库，而非像 Vue, React 那样的基础框架，它依然大致对标 Bootstrap, 但提供了更丰富的动态组件交互系统。

技术栈

Layui 3 将采用纯原生的 HTML CSS JavaScript 开发模式，并通过主流构建工具融入前端更广阔的生态。

开发语言: JavaScript（ES6+）/ CSS3 / HTML5
构建工具: Rollup + Babel + PostCSS
其他工具: Prettier + ESLint (也在考虑 Biome) / Jest 等

组件形式

根据组件的应用场景，Layui 3 计划采用两种组件创建方式：Web Components 方式和普通组件方式，因此依然会推出一个类似 Layui 2 component 那样的基础组件构建模块，确保组件的一致性。

目录结构

以下是初步设定的主要目录结构：

layui/
├── dist/                  # 构建输出目录
│   ├── css/               # CSS 库
│   ├── components/
│   ├── core/
│   ├── index.js           # 构建时 ESM 入口
│   ├── layui.esm.js       # 浏览器 ESM 入口
│   ├── layui.js           # 浏览器 IIFE 入口
├── docs/                  # 文档目录
├── src/                   # 源代码开发目录
│   ├── components/        # 各组件模块
│   │   ├── button/
│   │   └── ...
│   ├── core/              # 核心模块（如：DOM 类、组件基础类）
│   └── index.js           # 打包入口
├── scripts/               # 构建脚本
├── tests/                 # 测试目录
│   ├── unit/              # 单元测试
│   ├── visual/            # 可视化测试示例
└── package.json

📏 开发规范

代码规范

Code formatting

采用 Prettier 作为代码格式化工具，除采用「单引号」外，其余均沿用默认配置

{
  "singleQuote": true
}

个别特定配置详见：https://github.com/layui/layui/blob/main/.prettierrc

Code linting

采用 ESLint 作为代码静态分析工具，基本沿用默认配置。

rules: {
  'no-console': ['error', { allow: ['warn', 'error'] }], // 仅允许 console.warn 和 console.error
}

个别特定规则详见：https://github.com/layui/layui/blob/main/eslint.config.mjs

Pull Request 规范

重点强调：本地开发时，请务必使用npm ci安装依赖包

详见：https://github.com/layui/layui/blob/main/CONTRIBUTING.md#pull-request

命名规范

命名空间

凡是涉及到命名空间的，均以lay为前缀，如：

Web Components 标签

<lay-table></lay-table>

CSS 类名

.lay-table { }

命名规则

类型	命名规则	示例
CSS 类名	lay-+kebab-case（小写字母加连字符）	.lay-tabs-header
JavaScript 类名	PascalCase （大驼峰）	Button, TreeTable
组件名、文件名	camelCase （小驼峰）或全小写	button, treeTable
回调函数	camelCase + 生命周期	beforeRender, afterRender
事件处理器属性	on+ 事件名	onClick

样式规范

主题色

Layui 3 内置蓝绿双主题（以下只是一个示例，并非最终色调）：

:root {
/* 蓝绿双主题色 */
--lay-color-primary-green: #16b777;
--lay-color-primary-blue: #1e9fff;

/* 默认主题色 */
--lay-color-primary: var(--lay-color-primary-green);

/* 七色 */
--lay-color-red: #FF5722;
--lay-color-orange: #F9A800;
--lay-color-green: #21BA21;
--lay-color-blue: var(--lay-color-primary-blue);
--lay-color-purple: #A233C6;
--lay-color-dark: #20222A;
--lay-color-tint: #F8F9FA;
}