README

介绍

Phx包是一个PHP Composer包，允许您在PHP应用程序中使用类似JSX的语法。此包包含一些函数，使您能够以更声明性和直观的方式创建和渲染组件。

安装

要安装Phx包，您需要在PHP环境中安装Composer。然后，您可以运行以下命令

composer require codeboy124/phx

用法

`Phx::Run`

Phx::Run函数用于执行表示类似JSX代码的字符串。它接受一个字符串作为参数，并渲染相应的组件。

参数

$content (字符串)：要将之转换为常规HTML的phx代码

返回值

字符串：包含HTML的字符串内容

示例

<?php
require("vendor/autoload.php");

use Codeboy124\Phx\Phx;

function Greet($props){
    $name = $props["name"];
    return Phx::Run("
        <h1>Hello, <i>$name</i></h1>
    ");
}

function Layout($props, $children){
    $childrenJoined = implode("", $children);
    return Phx::Run("
        <main>
            $childrenJoined
        </main>
    ");
}

function App() {
    return Phx::Run("
        <Layout>
            <Greet name='user12' />
            <p>
                Some text paragraph...
            </p>
        </Layout>
    ")
}

echo App();

`Phx::createElement`

Phx::createElement函数类似于React中的createElement函数。它允许您使用指定的标签名、属性和子元素创建HTML元素。在内部，这是Phx::Run在解析phx后构建HTML的方式。如果要在生产中提高性能，最终可能会有一个程序将Phx::Run转换为使用Phx::createElement的系统，以消除解析phx代码所需的时间，但这尚未实现。

由于Phx::createElement和Phx::Run几乎相同，因此您也可以将它们组合使用。

参数

$type (字符串 | 回调)：包含HTML元素的字符串或组件的回调
$attributes (关联数组，可选)：包含元素/组件属性的键的数组
$children (索引数组，可选)：包含元素/组件的所有子元素/组件的数组

返回值

字符串：基本上与Phx::Run相同，因此包含转换后的phx代码的字符串

示例

<?php
require("vendor/autoload.php");

use Codeboy124\Phx\Phx;

function Greet($props){
    $name = $props["name"];
    return Phx::createElement("h1", [], [
        Phx::createElement("i", [], [$name])
    ]);
}

function App() {
    return Phx::createElement("div", [], [
        Phx::createElement("Greet", [
            "name" => "user12"
        ]),
        Phx::createElement("p", [], [
            "Some text paragraph"
        ])
    ]);
}

echo App();

`Phx::Attributes`

Phx::Attributes函数有助于将属性格式化为可以用于Phx::Run函数的字符串。它接受一个属性关联数组并返回一个格式化的字符串。

参数

$attributes (关联数组)：包含元素/组件属性的键的数组

返回值

字符串：遵循以下格式的格式化字符串 'mynumber=7 mystring="text"'

示例

<?php
require("vendor/autoload.php");

use Codeboy124\Phx\Phx;

function ConfirmButton($attributes){
    $attributeString = Phx::Attributes($attributes);
    return Phx::Run("
        <button $attributeString>Confirm</button>
    ");
}

function App(){
    return Phx::Run("
        <div>
            <h1>Click 'Confirm'</h1>
            <ConfirmButton onclick='someClickHandler()' />
        </div>
    ");
}

echo App();

`作用域`

Scope类管理所有作用域js或css。请创建一个Scope的全局实例

构造函数参数

$root (字符串，默认为"")：用于相对URL的源根
$type ("css"或"js"，默认为"css")：作用域内容的类型。这可以是"css"或"js"

示例

<?php
require("vendor/autoload.php");

use Codeboy124\Phx\Scope;
$js = new Scope("https://:3000/", "js");
$css = new Scope(); // or `new Scope("", "css")`

`Scope->Add`

Scope类的一个方法，它将一些文本内容添加到您的范围中。请注意，它不会修改原始材料，因此请小心不要在两个地方定义相同的函数

参数

$content (字符串)：要添加的文本内容

返回值

无，这是一个void

示例

<?php
require("vendor/autoload.php");

use Codeboy124\Phx\Phx;
use Codeboy124\Phx\Scope;

$js = new Scope("", "js");

function HelloWorldButton(){
    global $js;
    $js->Add("
        function helloWorld(){
            console.log('Hello, World!');
        }
    ");
    return Phx::Run("
        <button onclick='helloWorld()'>Click me</button>
    ")
}

// etc

`Scope->AddSrc`

Scope类的一个方法，它将一些URL添加到您的范围中

参数

$url (字符串)：源的URL

返回值

无，这是一个void

示例

<?php
require("vendor/autoload.php");

use Codeboy124\Phx\Phx;
use Codeboy124\Phx\Scope;

$js = new Scope("https://:3000/", "js");

function ScopedSourceButton(){
    global $js;
    $js->AddSrc("https://some.script.src/lib.min.js"); // An absolute url that does not use the root
    $js->AddSrc("/assets/js/scoped-source-button.js"); // A relative url that combines this url with the root (http://locahost:3000/)
    return Phx::Run("
        <button onclick='someFunction()'>Click me</button>
    ");
}

// etc

`Scope->Read`

Scope类的一个方法，它将所有源转换为实际的HTML。这通常是通过添加内置的Scopes组件来完成的，我将在后面解释。

参数

无

返回值

字符串：生成的script、style或link标签

示例

<?php
require("vendor/autoload.php");

use Codeboy124\Phx\Phx;
use Codeboy124\Phx\Scope;

$js = new Scope("", "js");

function HelloWorldButton(){
    global $js;
    $js->Add("
        function helloWorld(){
            console.log('Hello, World!');
        }
    ");
    return Phx::Run("
        <button onclick='helloWorld()'>Click me</button>
    ")
}

// DOES NOT WORK! The Read method is called before the HelloWorldButton adds its scopes
function App(){
    $scopes = $js->Read();
    return Phx::Run("
        <main>
            <HelloWorldButton />
        </main>
        $scopes
    ")
}

// DOES WORK! The children are compiled first before they are passed to this function
function Layout($_, $children){
    $childrenJoined = implode("", $children);
    $scopes = $js->Read();
    return Phx::Run("
        <main>
            $childrenJoined
        </main>
        $scopes
    ")
}
function App(){
    return Phx::Run("
        <HelloWorldButton />
    ");
}

echo App();

`Scopes`

一个组件，其功能与Scope类的Read方法相同，但使用组件来实现。

属性

from (字符串): 您的Scope实例的名称（不带'$'字符）

返回值