ephect-io/fullmoon

有效的PHP

维护者

详细信息

github.com/ephect-io/fullmoon

主页

源代码

问题

安装: 29

依赖: 0

建议者: 0

安全性: 0

星星: 0

观察者: 0

分支: 0

开放问题: 0

dev-main 2024-09-06 05:36 UTC

Requires

  • php: ^8.2
  • ext-curl: *
  • ext-iconv: *
  • ext-mysqlnd: *
  • ext-pdo: *
  • ext-readline: *
  • ext-sqlite3: *
  • ext-zip: *

GPL-3.0+ 3b20113930f0c3eeeabebfb12f0b117b38b63589

This package is auto-updated.

Last update: 2024-09-27 23:52:11 UTC

README

Ephect

什么是Ephect ?

Effective Programming in Hybrid Environment using Components-based Templates.

这是一个结合了轻量级PHP框架和JavaScript库的综合解决方案。

Ephect 允许您以流畅的方式设计后端页面和组件，以及Web组件。

它集成了一个基于webpack的构建过程。

特色概念

组件

基本上，组件是自定义HTML标签。除了命名约定外，后端侧HTML标签的所有概念都适用于组件：组件名称必须以大写字母开头。

组件的逻辑是通过一个简单的返回模板的函数编写的。

示例 1

这是一个开放的组件，可以围绕子组件或只是HTML代码。

<MyComponent>
    Hello World!
</MyComponent>

代码将如下所示

<?php

namespace QuickStart;

function MyComponent($children) {

    return (<<< HTML
    <h1>My component</h1>
    <p>
    {{ children }}
    </p>
    HTML);
}

它将渲染

    <h1>My component</h1>
    <p>
    Hello World!
    </p>

示例 2

一个接受参数的封闭组件

<AnotherComponent with="Some argument" />

代码将如下所示

<?php

namespace QuickStart;

function AnotherComponent($props) {

    return (<<<HTML
    <h2 id="with">
        {{ props->with }}
    </h2>
    HTML);
}

它将渲染

    <h2 id="with">
    Some argument
    </h2>

组件的级联和重用

组件可以在级联中声明，并且相同的组件可以在每个级联组件中重用。

如果我们结合示例 1 和 2

<MyComponent>
    <AnotherComponent with="Some argument" />
</MyComponent>

它将渲染

    <h1>My component</h1>
    <p>
    <h2 id="with">
        Some argument
    </h2>
    </p>

组件槽

一个具有命名占位符的父组件可以被继承来更改其占位符的内容。负责管理占位符的组件称为 槽。

这是一个包含要覆盖的槽的母组件

<?php

namespace QuickStart;

function Mother($children)
{

    return (<<< HTML
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>
            <Slot name="title">
                Mother!
            </Slot>
            </title>

            <Slot name="stylesheets">
            </Slot>
        </head>

        <body>
            <div class="App" >
                {{ children }}
            </div>
            <Slot name="javascripts">
            </Slot>
        </body>
    </html>
    HTML);
}

这是一个从母组件继承的组件

<?php

namespace QuickStart;

function Home()
{
    return (<<< HTML
    <Mother>
        <Slot name="title">Ephect in action !</Slot>
        <Slot name="stylesheets">
            <link rel="stylesheet" href="/css/app.css" />
        </Slot>
        <!-- 
            The children container of the parent component
            is filled with all that is not nested in slots
        -->
        <div class="App-content" >
            <h1>Welcome Home!</h1>
        </div>
        <!-- end of children code -->
        <Slot name="javascripts">
            <script src="/js/ephect.js"></script>
        </Slot>
    </Mother>
    HTML);
}

它将渲染

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>
                Ephect in action !
            </title>

            <link rel="stylesheet" href="/css/app.css" />
        </head>

        <body>
            <div class="App">
                <div class="App-content">
                    <h1>Welcome Home!</h1>
                </div>
            </div>
            <script src="/js/ephect.js"></script>
        </body>
    </html>

钩子

Ephect 引入了 钩子 来管理数据流。除了在 ReactJS 领域中广为人知的 useEffect 和 useState 钩子之外，Ephect 还提供了 3 个新的基本钩子

  • useProps：确保可以使用属性，
  • useQueryArgument：过滤传递给查询的参数值，
  • useSlot：将槽内嵌套的变量绑定到父组件。

CLI工具 egg

Ephect 随附一个名为 egg 的CLI工具。 egg 的主要功能是同时构建整个应用程序的代码。这在一个命令中完成： php egg build。这种方法的优点是错误管理和应用程序速度的提升。

错误处理

每个语法错误都被处理为致命错误，这会停止编译过程。控制台输出将显示明确的消息，以帮助您快速修复。

无头页面生成器

编译器解析页面拥有的每个组件的模板，包括级联组件。每个组件从 Ephect 模板代码转换为纯功能 PHP 代码，并缓存。每个组件的代码轻量且运行速度快。

一旦页面准备就绪并缓存，浏览它们就会尽可能快。您应该注意的唯一瓶颈是数据资源调用。

要求

由于 Ephect 是一个混合环境，您需要同时安装 PHP 和 NodeJS。

强烈建议使用最新版本。

Ephect 与 PHP 8.3 和 Node.js LTS 20.x.x 兼容。

您可能还需要安装一些PHP扩展，如果尚未安装，如 PDO/Sqlite、cUrl、Iconv 等。

安装框架

建议使用composer create-project命令以获取所有所需的组件。

您可以在以下位置找到一个专门的项目来帮助您快速入门：ephect-io/create-app

只需这样做

composer create-project ephect-io/create-app myproject

其中myproject是您项目的名称。

安装示例应用程序

转到myproject目录并输入

php egg make:quickstart

您将看到一个app目录，其中包含Ephect应用程序的标准结构，以及一个public目录，其中存储了index.php文件。

构建应用程序

首先，安装所有需要的模块。

npm install

如果您不设置Web服务器就运行应用程序，您需要在一个单独的终端中提供应用程序服务。

打开另一个终端，转到您的项目目录并输入

php egg serve

回到第一个终端并输入

npm run dev

如果您按照之前所述安装了QuickStart应用程序，您应该看到类似以下内容

> create-app@0.7.0 dev
> run-script-os

> create-app@0.7.0 dev:darwin:linux
> bash scripts/unix/dev.sh all

scripts/unix/dev.sh: line 13: warning: here-document at line 11 delimited by end-of-file (wanted `LIST')
Running webpack...
asset app.min.js 2.32 KiB [emitted] (name: main)
runtime modules 274 bytes 1 module
./app/JavaScripts/index.js 212 bytes [built] [code generated]
webpack 5.91.0 compiled successfully in 306 ms

Publishing assets...
'app/Assets/bootstrap.php' -> 'public/bootstrap.php'
'app/Assets/css/setup.css' -> 'public/css/setup.css'
'app/Assets/css/index.css' -> 'public/css/index.css'
'app/Assets/css/app.css' -> 'public/css/app.css'
'app/Assets/favicon.ico' -> 'public/favicon.ico'
'app/Assets/img/salamandra.png' -> 'public/img/salamandra.png'
'app/Assets/index.php' -> 'public/index.php'
'app/Assets/web.config' -> 'public/web.config'

Sharing modules...
'node_modules/human-writes/dist/web/human-writes.min.js' -> 'public/modules/human-writes.min.js'

Building the app...
Compiling App ... 037ms
Compiling Home, querying https://:8000/ ... 065ms
Compiling Hello, querying https://:8000/hello/1/2 ... 013ms
Compiling World, querying https://:8000/world ... 011ms
Compiling Matriochka0, querying https://:8000/matriochka/1 ... 052ms
Compiling Info, querying https://:8000/info ... 007ms
Compiling Callback, querying https://:8000/callback ... 037ms

示例页面

可用的页面路由有

一个包含2个子组件的简单页面；第一个使用useState钩子将值传递给第二个。

一个示例，展示如何管理URL路径中传递的参数。

一个示例，展示如何使用具有样式父组件的管理查询字符串中传递的参数。

一个示例，展示如何使用相同组件的级联。

一个示例，展示PHP信息。

一个示例，展示如何使用PHP JSON响应制作JavaScript回调。

待续...