https://github.com/mlhiter/laura
to create a minimal frontend framework
https://github.com/mlhiter/laura
framework
Last synced: 8 months ago
JSON representation
to create a minimal frontend framework
- Host: GitHub
- URL: https://github.com/mlhiter/laura
- Owner: mlhiter
- Created: 2023-09-18T02:19:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-18T13:29:13.000Z (over 2 years ago)
- Last Synced: 2025-09-22T09:12:46.247Z (9 months ago)
- Topics: framework
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### 一，框架基本做了什么？
#### 1，响应性（Reactivity）
```html
//without
const coolPara = 'Lorem ipsum.';
const el = document.getElementById('cool-para');
el.innerText = coolPara;
//with（Vue）
const coolPara = 'Lorem ipsum.';
{{ coolPara }}
//or（React）
export default function Para() {
const coolPara = 'Lorem ipsum';
return
{ coolPara }
;
}
```
可以看到书写的代码量大大减少，但是这不是主要原因；
主要原因是这将UI和数据绑定组合在一起，我们只需要更改script里的数据即可更新template里的UI显示。
#### 2，组合性（Composability）
```html
//with
Lorem ipsum.
```
我们可以通过定义组件并且在不同的地方重用它来提高复用率，就像定义函数使用函数一样，但是这是在原始的HTML情况下不具有的。
#### 3，模板化（templating）
Vue中的template和React中的JSX的Component，用来展示的部分就是模板。
为什么称为模板呢，因为它的数据是可变的，其他非数据部分不变，数据部分变就像模板一样喽。
#### 4，虚拟DOM（virtual DOM）
一种概念或者技术，简单的说就是我们虚构出一个DOM树存在内存里，当我们更新数据的时候，虚拟DOM树会检查自己哪里发生改变，然后仅改变真正DOM树的这一部分。
为什么要在数据与真实DOM之间加上这样一层虚拟DOM呢？因为如果直接操控真实DOM经常会产生非常大的改变，损耗性能而且慢。而我们通过虚拟DOM可以做到仅改变我们想要改变的那一小部分的真实DOM，并且虚拟DOM存在内存里的代价是相对较小的（比直接操控真实DOM小）。
#### 5，状态管理（state management）
状态是框架的本质，状态的改变会导致相应的组件使用状态的新值来重新渲染其模板。
### #参考文章
[Building a Frontend Framework; Reactivity and Composability With Zero Dependencies --- 构建前端框架；零依赖性的反应性和可组合性 (18alan.space)](https://18alan.space/posts/how-hard-is-it-to-build-a-frontend-framework.html)
[Frontend framework --- 前端框架 (mfrachet.github.io)](https://mfrachet.github.io/create-frontend-framework/)