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

概述

在过往的两年时光里，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
}

个别特定配置详见：点击这里

Code linting

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

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

个别特定规则详见：点击这里

Pull Request 规范

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

详见：点击这里

命名规范

命名空间

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

Web Components 标签

<lay-table></lay-table>

CSS 类名

.lay-table { }

命名规则

样式规范

主题色

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;
}

尺寸

按钮、表单等

• 24pxsm
• 32pxdefault
• 40pxlg

内外边距

• 5pxxs
• 8pxsm
• 16pxdefault
• 24pxlg
• 32pxxl

字体

• 12px注释
• 14px正文 (default)
• 16px小标题
• 24px中标题
• 32px大标题

其他

• 版本号遵循 Semantic Versioning 规范
• Git 提交信息遵循 Conventional Commits 规范

以上方案与规范在开发过程中将持续完善。欢迎开发者提供更多宝贵建议。

以上关于Layui 3 设计方案和开发规范 (草案)的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。