From 3c2e769934982e4a22ab094607e15a0e2adb2cbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?=
<3277200+sentsim@users.noreply.github.com>
Date: Wed, 5 Mar 2025 19:27:06 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=20component=20?=
=?UTF-8?q?=E6=96=87=E6=A1=A3=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/component/detail/options.md | 10 ++++----
docs/component/index.md | 44 +++++++++++++++++---------------
2 files changed, 28 insertions(+), 26 deletions(-)
diff --git a/docs/component/detail/options.md b/docs/component/detail/options.md
index 8fc24b5b..6045945f 100644
--- a/docs/component/detail/options.md
+++ b/docs/component/detail/options.md
@@ -18,7 +18,7 @@
name |
-组件名称。如 `name:'tabs'`,那么在使用组件时,可通过 `layui.tabs` 获得该组件。注:*组件名必须唯一*。
+组件名称。如 `name:'tabs'`,在使用组件时,即可通过 `layui.tabs` 获得该组件。注:*组件名必须唯一*。
|
string |
@@ -70,7 +70,7 @@ CONST: {
isRenderOnEvent |
-渲染是否仅由事件触发。如 `dropdown` 这类通过点击触发的组件,那么应该设置为 `true`;而诸如 `tabs` 这类初始即展示的组件,则应该设置为 `false`。*推荐根据组件类型始终显式设置对应值*。
+渲染是否由事件触发。如 `dropdown` 这类通过点击触发的组件,那么应该设置为 `true`;而诸如 `tabs` 这类初始即展示的组件,则应该设置为 `false`。*推荐根据组件类型始终显式设置对应值*。
|
boolean |
@@ -84,7 +84,7 @@ CONST: {
isDeepReload |
-组件重载时是否允许为深度重载,即每次重载时选项进行深度合并。
+组件重载时是否允许深度重载,即对重载时选项进行深度合并。
|
boolean |
@@ -167,7 +167,7 @@ extendsInstance: function(that) {
}
```
-那么,当组件渲染时,即可通过它返回的对象调用实例方法:
+当组件渲染时,即可通过它返回的对象调用实例方法:
```js
var inst = xxx.render(); // 某组件渲染
@@ -180,7 +180,7 @@ inst.close(); // 关闭某组件
events |
-定义组件各类内部事件。
+定义组件各内部事件。
```js
events: function() {
diff --git a/docs/component/index.md b/docs/component/index.md
index ec6e59a8..11fdb927 100644
--- a/docs/component/index.md
+++ b/docs/component/index.md
@@ -19,7 +19,7 @@ toc: true
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
-该方法返回一个对象,通常用于当前组件的基础对外接口,如:组件渲染、重载、事件操作,及构造函数等等。用法示例:
+该方法返回一个对象,包含用于组件对外的基础接口,如:组件渲染、重载、事件操作,及构造函数等等。用法示例:
```js
/**
@@ -68,7 +68,7 @@ layui.define('component', function(exports) {
| [component.CONST](#CONST) | 获得组件的通用常量集。如 `MOD_NAME` 等 |
| [component.Class](#Class) | 获得组件的构造函数。一般用于扩展原型方法 |
-> 注:上表中的 `component` 为组件的基础对象,实际使用时,请根据实组件名称进行替换。如 `tabs` 组件,对应的接口则为:`tabs.render(options)` `tabs.on('event(filter)', callback)` 等。
+> 😊 注:上表中的 `component` 为组件的基础对象,实际使用时,请根据实组件名称进行替换。如 `tabs` 组件,对应的接口则为:`tabs.render(options)` `tabs.on('event(filter)', callback)` 等。
组件渲染
@@ -78,7 +78,7 @@ layui.define('component', function(exports) {
| 选项 | 描述 |
| --- | --- |
-| elem | 组件渲染指定的目标元素 |
+| elem | 件渲染指定的目标元素选择器或 DOM 对象 |
| id | 组件渲染的唯一实例 ID |
| show | 是否初始即渲染组件。通常结合创建组件设定的 `isRenderOnEvent` 选项决定是否启用 |
@@ -140,7 +140,7 @@ tabs.render({
`component.on('event(id)', callback)`
-- 参数 `event(id)` : 是事件的特定结构。 `event` 为事件名,支持的事件见下表。`id` 为组件的实例 ID。
+- 参数 `event(id)` : 是事件的特定结构。 `event` 为事件名,支持的事件见各组件列表。`id` 为组件的实例 ID。
- 参数 `callback` : 事件回调函数。返回的参数由各组件内部单独定义。
具体事件一般由组件内部单独定义,具体可查看各组件对应的文档。
@@ -237,22 +237,7 @@ layui.use('test', function() {
`component.Class`
-通过获得组件的构造函数,可对组件的原型进行重构,但一般不推荐,因为这可能破坏组件的基础功能。
-
-```
-// 以 tabs 组件为例
-var tabs = layui.tabs;
-
-// 获得 tabs 组件构造函数
-var Class = tabs.Class;
-
-// 重构 tabs 组件内部的 xxx 方法(不推荐)
-Class.prototype.xxx = function() {
- // …
-};
-```
-
-当然,如果是通过 `layui.component()` 方法创建一个新的组件,通常必须借助 `Class` 构造函数扩展组件原型,以灵活实现组件的个性化定制。但一般不推荐重写 `component.js` 原型中已经定义的基础方法,如:`init, reload, cache`
+当通过 `layui.component()` 方法创建一个新的组件时,通常需借助 `Class` 构造函数扩展组件原型,以灵活实现组件的个性化定制。但一般不推荐重写 `component.js` 原型中已经定义的基础方法,如:`init, reload, cache`
```
/**
@@ -281,7 +266,24 @@ layui.define('component', function(exports) {
});
```
+通过 `Class` 构造函数也可以对某个组件的原型进行重构,但一般不推荐,因为这可能破坏组件的基础功能。
+
+```
+// 以 tabs 组件为例
+var tabs = layui.tabs;
+
+// 获得 tabs 组件构造函数
+var Class = tabs.Class;
+
+// 重构 tabs 组件内部的 xxx 方法(不推荐)
+Class.prototype.xxx = function() {
+ // …
+};
+```
+
+您也可以直接参考 tabs 组件源码中关于扩展原型的具体实践。
+
## 💖 心语
-Layui 由于早前欠缺统筹性思维,很多组件自成一体,使得无法对组件进行很好的统一管理。随着版本的迭代,我们也一直在努力尝试改善这一问题,但很多时候,为了向下兼容而不得不保留许多旧有的特性。`component` 模块的初衷正是为了确保组件的一致性,如核心逻辑和 API 设计等,其目的也是为了让 2.x 系列版本尽可能地减少些遗憾,让 Layui 始终拥有自己的范式。
+Layui 由于早前欠缺统筹性思维,很多组件自成一体,使得无法对组件进行很好的统一管理。随着版本的迭代,我们也一直在努力尝试改善这一问题,但很多时候,为了向下兼容而不得不保留许多旧有的特性。`component` 模块的初衷正是为了确保组件的一致性,如核心逻辑和 API 设计等,其目的也是为了让 2.x 系列版本尽可能地减少些遗憾,让 Layui 在既定的范式中保持前行。
|