自动初始化
SanoUI 提供了强大的自动初始化功能，通过 SA.init() 方法可以一键初始化所有组件。
基础用法
在页面加载完成后，调用 SA.init() 会自动扫描并初始化所有带有 data-* 属性的组件。
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./sanoui.min.css">
</head>
<body>
<!-- 使用 data 属性配置组件 -->
<button class="sa-button" data-button data-type="primary">按钮</button>
<div class="sa-alert" data-alert data-type="success" data-title="成功"></div>
<script src="./sanoui.min.js"></script>
<script>
// 自动初始化所有组件
const page = SA.init('body');
</script>
</body>
</html>初始化范围
可以指定初始化的容器范围：
javascript
// 初始化整个 body
SA.init('body');
// 初始化指定容器
SA.init('#app');
// 初始化指定元素
const container = document.getElementById('app');
SA.init(container);获取组件实例
SA.init() 返回一个页面对象，可以获取已初始化的组件实例：
javascript
const page = SA.init('body');
// 通过选择器获取组件实例
const button = page.get('.sa-button[data-type="primary"]');
// 通过元素获取组件实例
const element = document.querySelector('.sa-alert');
const alert = page.get(element);
// 获取所有指定类型的组件
const allButtons = page.getAll('button');组件元信息
可以获取组件的元信息：
javascript
const page = SA.init('body');
// 获取组件 ID（自动生成的唯一 ID）
const button = page.get('.sa-button');
const meta = page.getMeta(button._id);
console.log(meta);
// {
// type: 'button',
// instance: SaButton,
// element: HTMLElement
// }销毁组件
销毁所有已初始化的组件：
javascript
const page = SA.init('body');
// 销毁所有组件
page.destroy();组件自动初始化属性
每个组件都支持通过 data-* 属性进行配置，常见的属性包括：
通用属性
data-[component-name]: 启用自动初始化（如data-button,data-alert）
组件特定属性
每个组件都有自己特定的配置属性，详见各组件文档。
手动初始化 vs 自动初始化
自动初始化（推荐）
优点：
- ✅ 代码简洁
- ✅ 配置直观
- ✅ 适合简单场景
适用场景：
- 静态页面
- 简单交互
- 快速原型
html
<button class="sa-button" data-button data-type="primary">按钮</button>
<script>
SA.init('body');
</script>手动初始化
优点：
- ✅ 更精细的控制
- ✅ 更好的性能
- ✅ 更灵活的配置
适用场景：
- 动态内容
- 复杂交互
- 需要精细控制
javascript
const button = new SaButton('#my-button', {
type: 'primary',
onClick: () => {
// 自定义逻辑
}
});混合使用
可以在同一个项目中混合使用两种方式：
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./sanoui.min.css">
</head>
<body>
<!-- 自动初始化 -->
<button class="sa-button" data-button data-type="primary">自动初始化</button>
<!-- 手动初始化 -->
<div id="my-button"></div>
<script src="./sanoui.min.js"></script>
<script>
// 先自动初始化
const page = SA.init('body');
// 再手动初始化
const button = new SaButton('#my-button', {
type: 'success',
onClick: () => {
console.log('手动创建的按钮');
}
});
</script>
</body>
</html>最佳实践
优先使用自动初始化：对于简单场景，使用自动初始化可以大大减少代码量。
合理划分容器：将需要初始化的组件放在同一个容器中，避免重复初始化。
及时销毁：对于动态创建和销毁的组件，记得调用
destroy()方法。避免重复初始化：同一个元素不要多次初始化，SanoUI 会自动检测并跳过已初始化的元素。