Grecha.js 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00124/article/details/141745994

Grecha.js 开源项目教程

grecha.jsSimple Front-End JavaScript Framework项目地址:https://gitcode.com/gh_mirrors/gr/grecha.js

1、项目介绍

Grecha.js 是一个简单的前端 JavaScript 框架，最初设计用于 emoteJAM。该框架的名字“Grecha”在俄语中意为“荞麦”。Grecha.js 旨在提供一种轻量级的解决方案，帮助开发者快速构建前端应用。

2、项目快速启动

快速启动指南

要快速启动 Grecha.js 项目，请按照以下步骤操作：

克隆项目仓库：

git clone https://github.com/tsoding/grecha.js.git

进入项目目录：
```
cd grecha.js
```

创建一个 HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Grecha.js 示例</title>
</head>
<body>
    <div id="entry"></div>
    <script src="/grecha.js"></script>
    <script>
        const kasha = img("Kasha.png");
        const kashaHard = img("KashaHard.gif");
        let count = 0;
        let hard = false;
        const r = router({
            "/": () => div(
                h1("Grecha.js"),
                div(a("Foo").att$("href", "#/foo")),
                div(a("Bar").att$("href", "#/bar")),
                div("Counter: " + count),
                div(hard ? kashaHard : kasha).onclick$(function () {
                    count += 1;
                    hard = !hard;
                    r.refresh();
                })
            ),
            "/foo": () => div(
                h1("Foo"),
                p("LOREM"),
                div(a("Home").att$("href", "#"))
            ),
            "/bar": () => div(
                h1("Bar"),
                p("LOREM"),
                div(a("Home").att$("href", "#"))
            )
        });
        entry.appendChild(r);
    </script>
</body>
</html>