Skip to content

Commit b66f57b

Browse files
dntzhangdntzhang
committed
docs: remove content of oop
1 parent 562389c commit b66f57b

File tree

3 files changed

+0
-287
lines changed

3 files changed

+0
-287
lines changed

‎README.CN.md

Lines changed: 0 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
- 💗 [目标 100+ 模板](https://omi.cdn-go.cn/templates/latest/) & [OMI 模板源码](https://github.com/Tencent/omi/tree/master/packages/omi-templates)
1010
- 🐲 [OMI Form](https://omi.cdn-go.cn/form/latest/docs/) & [OMI Form 游乐场](https://omi.cdn-go.cn/form/latest/play/) & [Lucide Omi 图标](https://github.com/omijs/lucide-omi)
1111
- 🌐 你要的一切都有: **Web Components**, **JSX**, Function Components, Router, Suspense, Directive, Tailwindcss...
12-
- 💯 面向对象编程(OOP) 和 数据驱动编程(DOP) 两种范式都支持
1312
- 💒 使用 **Constructable Stylesheets** 轻松管理和共享样式
1413

1514
```tsx
@@ -209,102 +208,6 @@ render(<todo-list />, document.body)
209208
```
210209

211210

212-
### TodoApp 使用信号类 Signal
213-
214-
> 面向对象编程
215-
216-
在面向对象编程中，我们将重点放在对象上，对象包含了数据和操作数据的方法。这种编程范式强调的是对象之间的交互和协作，以及如何通过对象的封装、继承和多态性来组织和管理代码。基于响应式函数的 TodoApp 也可以使用面向对象的方式来实现，例如，我们可以创建一个 TodoList 类，这个类包含了待办事项列表的数据和操作这些数据的方法，以及一个 `update` 方法来更新 UI。
217-
218-
219-
220-
```tsx
221-
import { render, Signal, tag, Component, h, computed } from 'omi'
222-
223-
type Todo = { text: string, completed: boolean }
224-
225-
class TodoApp extends Signal<{ todos: Todo[], filter: string, newItem: string }> {
226-
completedCount: ReturnType<typeof computed>
227-
228-
constructor(todos: Todo[] = []) {
229-
super({ todos, filter: 'all', newItem: '' })
230-
this.completedCount = computed(() => this.value.todos.filter(todo => todo.completed).length)
231-
}
232-
233-
addTodo = () => {
234-
// api a
235-
this.value.todos.push({ text: this.value.newItem, completed: false })
236-
this.value.newItem = ''
237-
this.update()
238-
239-
// api b, same as api a
240-
// this.update((value) => {
241-
// value.todos.push({ text: value.newItem, completed: false })
242-
// value.newItem = ''
243-
// })
244-
}
245-
246-
toggleTodo = (index: number) => {
247-
const todo = this.value.todos[index]
248-
todo.completed = !todo.completed
249-
this.update()
250-
}
251-
252-
removeTodo = (index: number) => {
253-
this.value.todos.splice(index, 1)
254-
this.update()
255-
}
256-
}
257-
258-
const todoApp = new TodoApp([
259-
{ text: 'Learn OMI', completed: true },
260-
{ text: 'Learn Web Components', completed: false },
261-
{ text: 'Learn JSX', completed: false },
262-
{ text: 'Learn Signal', completed: false }
263-
])
264-
265-
@tag('todo-list')
266-
class TodoList extends Component {
267-
onInput = (event: Event) => {
268-
const target = event.target as HTMLInputElement
269-
todoApp.value.newItem = target.value
270-
}
271-
272-
render() {
273-
const { todos } = todoApp.value
274-
const { completedCount, toggleTodo, addTodo, removeTodo } = todoApp
275-
return (
276-
<>
277-
<input type="text" value={todoApp.value.newItem} onInput={this.onInput} />
278-
<button onClick={addTodo}>Add</button>
279-
<ul>
280-
{todos.map((todo, index) => {
281-
return (
282-
<li>
283-
<label>
284-
<input
285-
type="checkbox"
286-
checked={todo.completed}
287-
onInput={() => toggleTodo(index)}
288-
/>
289-
{todo.completed ? <s>{todo.text}</s> : todo.text}
290-
</label>
291-
{' '}
292-
<button onClick={() => removeTodo(index)}>❌</button>
293-
</li>
294-
)
295-
})}
296-
</ul>
297-
<p>Completed count: {completedCount.value}</p>
298-
</>
299-
)
300-
}
301-
}
302-
303-
render(<todo-list />, document.body)
304-
```
305-
306-
这里不讨论哪种方式(DOP,OOP)的好坏，使用 omi 两种方式都可以任意选择。
307-
308211
## 自动导入 h
309212

310213
vite.config.js:

‎README.md

Lines changed: 0 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ English | [简体中文](./README.CN.md)
99
- 🐲 [OMI Form](https://omi.cdn-go.cn/form/latest/docs/) & [OMI Form Playground](https://omi.cdn-go.cn/form/latest/play/) & [Lucide Omi Icons](https://github.com/omijs/lucide-omi)
1010
- ⚡ **Tiny** size, **Fast** performance
1111
- 🌐 Everything you need: **Web Components**, **JSX**, Function Components, Router, Suspense, Directive, Tailwindcss...
12-
- 💯 Both **object** oriented programming(OOP) and **data** oriented programming(DOP) are supported
1312
- 💒 Harness **Constructable Stylesheets** to easily manage and share styles
1413

1514
```tsx
@@ -210,101 +209,6 @@ class TodoList extends Component {
210209
render(<todo-list />, document.body)
211210
```
212211

213-
214-
### TodoApp with Signal Class
215-
216-
> Object oriented programming
217-
218-
In object-oriented programming, the focus is on the objects, which contain both data and methods to operate on the data. This programming paradigm emphasizes the interaction and cooperation between objects, and how to organize and manage code through object encapsulation, inheritance, and polymorphism. The TodoApp with reactivity functions can also be implemented in an object-oriented way, for example, by creating a TodoList class that contains the data of the to-do list and methods to operate on this data, as well as a `update` method to update the UI.
219-
220-
```tsx
221-
import { render, Signal, tag, Component, h, computed } from 'omi'
222-
223-
type Todo = { text: string, completed: boolean }
224-
225-
class TodoApp extends Signal<{ todos: Todo[], filter: string, newItem: string }> {
226-
completedCount: ReturnType<typeof computed>
227-
228-
constructor(todos: Todo[] = []) {
229-
super({ todos, filter: 'all', newItem: '' })
230-
this.completedCount = computed(() => this.value.todos.filter(todo => todo.completed).length)
231-
}
232-
233-
addTodo = () => {
234-
// api a
235-
this.value.todos.push({ text: this.value.newItem, completed: false })
236-
this.value.newItem = ''
237-
this.update()
238-
239-
// api b, same as api a
240-
// this.update((value) => {
241-
// value.todos.push({ text: value.newItem, completed: false })
242-
// value.newItem = ''
243-
// })
244-
}
245-
246-
toggleTodo = (index: number) => {
247-
const todo = this.value.todos[index]
248-
todo.completed = !todo.completed
249-
this.update()
250-
}
251-
252-
removeTodo = (index: number) => {
253-
this.value.todos.splice(index, 1)
254-
this.update()
255-
}
256-
}
257-
258-
const todoApp = new TodoApp([
259-
{ text: 'Learn OMI', completed: true },
260-
{ text: 'Learn Web Components', completed: false },
261-
{ text: 'Learn JSX', completed: false },
262-
{ text: 'Learn Signal', completed: false }
263-
])
264-
265-
@tag('todo-list')
266-
class TodoList extends Component {
267-
onInput = (event: Event) => {
268-
const target = event.target as HTMLInputElement
269-
todoApp.value.newItem = target.value
270-
}
271-
272-
render() {
273-
const { todos } = todoApp.value
274-
const { completedCount, toggleTodo, addTodo, removeTodo } = todoApp
275-
return (
276-
<>
277-
<input type="text" value={todoApp.value.newItem} onInput={this.onInput} />
278-
<button onClick={addTodo}>Add</button>
279-
<ul>
280-
{todos.map((todo, index) => {
281-
return (
282-
<li>
283-
<label>
284-
<input
285-
type="checkbox"
286-
checked={todo.completed}
287-
onInput={() => toggleTodo(index)}
288-
/>
289-
{todo.completed ? <s>{todo.text}</s> : todo.text}
290-
</label>
291-
{' '}
292-
<button onClick={() => removeTodo(index)}>❌</button>
293-
</li>
294-
)
295-
})}
296-
</ul>
297-
<p>Completed count: {completedCount.value}</p>
298-
</>
299-
)
300-
}
301-
}
302-
303-
render(<todo-list />, document.body)
304-
```
305-
306-
We won't discuss which method is good or bad here. You can choose either method using omi.
307-
308212
## Auto Import h
309213

310214
vite.config.js:

‎packages/omi/README.md

Lines changed: 0 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
- 🐲 [OMI Form](https://omi.cdn-go.cn/form/latest/docs/) & [OMI Form Playground](https://omi.cdn-go.cn/form/latest/play/) & [Lucide Omi Icons](https://github.com/omijs/lucide-omi)
77
- ⚡ **Tiny** size, **Fast** performance
88
- 🌐 Everything you need: **Web Components**, **JSX**, Function Components, Router, Suspense, Directive, Tailwindcss...
9-
- 💯 Both **object** oriented programming(OOP) and **data** oriented programming(DOP) are supported
109
- 💒 Harness **Constructable Stylesheets** to easily manage and share styles
1110

1211
```tsx
@@ -207,99 +206,6 @@ class TodoList extends Component {
207206
render(<todo-list />, document.body)
208207
```
209208

210-
211-
### TodoApp with Signal Class
212-
213-
> Object oriented programming
214-
215-
In object-oriented programming, the focus is on the objects, which contain both data and methods to operate on the data. This programming paradigm emphasizes the interaction and cooperation between objects, and how to organize and manage code through object encapsulation, inheritance, and polymorphism. The TodoApp with reactivity functions can also be implemented in an object-oriented way, for example, by creating a TodoList class that contains the data of the to-do list and methods to operate on this data, as well as a `update` method to update the UI.
216-
217-
```tsx
218-
import { render, Signal, tag, Component, h, computed } from 'omi'
219-
220-
type Todo = { text: string, completed: boolean }
221-
222-
class TodoApp extends Signal<{ todos: Todo[], filter: string, newItem: string }> {
223-
completedCount: ReturnType<typeof computed>
224-
225-
constructor(todos: Todo[] = []) {
226-
super({ todos, filter: 'all', newItem: '' })
227-
this.completedCount = computed(() => this.value.todos.filter(todo => todo.completed).length)
228-
}
229-
230-
addTodo = () => {
231-
// api a
232-
this.value.todos.push({ text: this.value.newItem, completed: false })
233-
this.value.newItem = ''
234-
this.update()
235-
236-
// api b, same as api a
237-
// this.update((value) => {
238-
// value.todos.push({ text: value.newItem, completed: false })
239-
// value.newItem = ''
240-
// })
241-
}
242-
243-
toggleTodo = (index: number) => {
244-
const todo = this.value.todos[index]
245-
todo.completed = !todo.completed
246-
this.update()
247-
}
248-
249-
removeTodo = (index: number) => {
250-
this.value.todos.splice(index, 1)
251-
this.update()
252-
}
253-
}
254-
255-
const todoApp = new TodoApp([
256-
{ text: 'Learn OMI', completed: true },
257-
{ text: 'Learn Web Components', completed: false },
258-
{ text: 'Learn JSX', completed: false },
259-
{ text: 'Learn Signal', completed: false }
260-
])
261-
262-
@tag('todo-list')
263-
class TodoList extends Component {
264-
onInput = (event: Event) => {
265-
const target = event.target as HTMLInputElement
266-
todoApp.value.newItem = target.value
267-
}
268-
269-
render() {
270-
const { todos } = todoApp.value
271-
const { completedCount, toggleTodo, addTodo, removeTodo } = todoApp
272-
return (
273-
<>
274-
<input type="text" value={todoApp.value.newItem} onInput={this.onInput} />
275-
<button onClick={addTodo}>Add</button>
276-
<ul>
277-
{todos.map((todo, index) => {
278-
return (
279-
<li>
280-
<label>
281-
<input
282-
type="checkbox"
283-
checked={todo.completed}
284-
onInput={() => toggleTodo(index)}
285-
/>
286-
{todo.completed ? <s>{todo.text}</s> : todo.text}
287-
</label>
288-
{' '}
289-
<button onClick={() => removeTodo(index)}>❌</button>
290-
</li>
291-
)
292-
})}
293-
</ul>
294-
<p>Completed count: {completedCount.value}</p>
295-
</>
296-
)
297-
}
298-
}
299-
300-
render(<todo-list />, document.body)
301-
```
302-
303209
We won't discuss which method is good or bad here. You can choose either method using omi.
304210

305211
## Auto Import h

0 commit comments

Comments
 (0)