ephect-io/framework

有效的PHP

维护者

详细信息

github.com/ephect-io/framework

主页

源代码

问题

安装: 580

依赖项: 11

建议者: 0

安全: 0

星级: 1

关注者: 0

分支: 0

开放问题: 0

0.7.1 2024-05-04 21:07 UTC

Requires

  • php: ^8.2

GPL-3.0+ 1cebf23572adec1ca926077131030697c7cebe52

This package is auto-updated.

Last update: 2024-09-07 10:11:10 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>

组件槽

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

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

<?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 介绍了 hooks 来管理数据流。除了在 ReactJS 领域中广为人知的 useEffect 和 useState hooks 之外，Ephect 还提供了 3 个新的基本 hooks

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

CLI工具 egg

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

错误处理

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

无头页面生成器

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

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

要求

Ephect 需要的最小PHP版本是 8.2。

如果您尚未安装，可能还需要安装一些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

您将看到一个包含 Ephect 应用程序标准结构和存储 index.php 的 public 目录的 app 目录。

构建应用程序

仅使用 PHP 上下文

如果控制台没有出现任何问题，则可以在浏览器外生成您的应用程序。

然而，您首先需要启动内嵌的 Web 服务器。

如果您正在运行 Windows，则需要输入以下内容

php -S localhost:8888 -t src/public

否则，MacOS 和 Linux 接受此语法

php egg serve

在另一个终端或终端的另一个标签页中输入

php egg build

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

Compiling App ... 059ms
Compiling Home, querying https://:8000/ ... 193ms
Compiling Hello, querying https://:8000/hello/1/2 ... 027ms
Compiling World, querying https://:8000/world?name=$1&lname=$2 ... 019ms
Compiling Matriochka0, querying https://:8000/matriochka/1 ... 105ms
Compiling Info, querying https://:8000/info ... 009ms
Compiling Callback, querying https://:8000/callback ... 069ms

生成的应用程序将位于 cache 目录中。

构建过程遵循使用 GET HTTP 方法的路由，其他所有方法路由都在 Web 浏览器调用中构建。

使用混合上下文：PHP + JavaScript

首先，确保已安装 NodeJS 并以 20 版本作为最小版本运行。LTS/Iron 是一个好选择。

完成后，运行

npm install
npm run dev

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

> logo@1.0.0 dev
> sh scripts/dev.sh all

Building web components...
asset app.min.js 2.31 KiB [emitted] (name: main)
runtime modules 274 bytes 1 module
./app/JavaScripts/index.js 212 bytes [built] [code generated]
webpack 5.89.0 compiled successfully in 325 ms
'app/Assets/css/app.css' -> 'public/css/app.css'
'app/Assets/css/index.css' -> 'public/css/index.css'
'app/Assets/css/setup.css' -> 'public/css/setup.css'
'app/Assets/img/css/app.css' -> 'public/img/css/app.css'
'app/Assets/img/css/index.css' -> 'public/img/css/index.css'
'app/Assets/img/css/setup.css' -> 'public/img/css/setup.css'
'app/Assets/img/salamandra.png' -> 'public/img/salamandra.png'
'node_modules/human-writes/dist/web/human-writes.min.js' -> 'public/modules/human-writes.min.js'
Compiling App ... 059ms
Compiling Home, querying https://:8000/ ... 193ms
Compiling Hello, querying https://:8000/hello/1/2 ... 027ms
Compiling World, querying https://:8000/world?name=$1&lname=$2 ... 019ms
Compiling Matriochka0, querying https://:8000/matriochka/1 ... 105ms
Compiling Info, querying https://:8000/info ... 009ms
Compiling Callback, querying https://:8000/callback ... 069ms

示例页面

可用的页面路由有

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

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

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

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

一个示例，展示如何显示 PHP 信息。

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

待续...