orsburn / cayuga

用于渲染服务器端元素的库

2.0.1 2024-04-02 03:25 UTC

This package is auto-updated.

Last update: 2024-09-03 04:54:03 UTC


README

内容

  • 这是什么(简短描述)
  • 这是什么(详细描述)
  • 文档
  • 示例

这是什么(简短描述)

  • 一个JavaScript库,用于请求在DOM事件响应下“热替换”的页面服务器端渲染元素。
  • 一个PHP库,用于响应对服务器端内容的请求。

这是什么(详细描述)

另一个JavaScript前端框架。某种程度上。JavaScript框架和库的繁多试图通过承认它们只是众多框架中的一员来证明自己的存在。虽然这种自我反省的谦卑值得赞赏,但导致每个新项目产生的哲学差异很少能证明其存在的合理性。

然而,Cayuga真正试图与众不同,因为它真正为服务器端渲染而构建。它最初不会在第一次运行时在页面上渲染元素,然后再在客户端更新未来的模块。相反,它实际上在服务器上渲染所有模块,并将完全渲染的元素传递给客户端——始终如此。

为了使前端库将模块加载到页面上,它首先需要从服务器加载数据以填充模块。由于与服务器的交互已经在进行中,因此发送渲染元素而不是只有数据是微不足道的额外数据。

Cayuga是一个JavaScript对象,用于标识要监视事件的页面元素。然后,可以将这些事件的处理程序传递回服务器进行处理。对于每个这样的元素都有一个对象条目。或者,可以为元素应绑定的事件类型创建一个条目。

最后,有一个实现这些定义的库。所有操作都从一个Cayuga实例开始。

入门指南

>应注意的是,有几种方法可以实现用户界面的处理器。这里详细说明的步骤只是其中一种,但应作为一个良好的起点。

将Cayuga添加到应用程序中有五个步骤。

  1. 安装Cayuga。
  2. 将Cayuga入口添加到应用程序中。
  3. 添加事件处理器。
  4. 包含Cayuga JavaScript。
  5. 定义Cayuga JavaScript实例。

步骤1

安装应通过Composer处理。


### Step 2

Place a PHP program at the root of your application named ```cayuga.php```. This is the entry point for the server-side UI content, and is where the handlers for your UI are initialized.

It should instantiate your UI handlers.

```php
<?php

include_once __DIR__ . "/vendor/autoload.php";

$cayuga = new \Cayuga\Handler(
	// Handlers for elements with events against
	// the class attribute.
	new Application\CayugaHandlers\HtmlClass(),

	// Handlers for elements with events against
	// the id attribute.
	new Application\CayugaHandlers\HtmlId()
);
```

### Step 3

Create a directory named something like ```src/CayugaHandlers```. In this directory create the classes to handle the HTML events from your application. For example:

```
src/CayugaHandlers/HtmlClass.php
src/CayugaHandlers/HtmlId.php
```

### Step 4

Drop the ```cayuga.min.js``` script wherever the JavaScript in your application lives, and point your HTML to it. For example:

```html
<script src="client/js/cayuga.min.js"></script>
```

### Step 5

Create a ```<script>``` block at the bottom of your HTML, something like this:

```html
<script>
new Cayuga({
	"#login": {
		event: "click",
		outlet: "#outlet",
		fields: ["username", "password"]
	}
},
"https:///application/cayuga.php");
</script>
```

## Examples

> The examples are currently undergoing a significant re-write, so they should not be depended on.

In addition to the docs, there is an example of how Cayuga works available in __examples/index.html__.

http://server.domain.tld/cayuga/examples/index.html

1. Copy the example directory to a webserver.
1. Make sure the **script** **src** attribute points to the correct server information. It's currently:  https://:8989.

## Documentation

The documentation is well underway, but is still a work in progress.  What's more, is that it's currently only available as ODT or PDF files. The expectation is that it will be duplicated into a browser-friendly version as well.

* **Cayuga (client).pdf** is for the client-side library.
* **Cayuga (server).pdf** is for the server-side UI rendering.

## Detached UI

In simple terms, the UI is simple thought of as an embedded portion of the application, that can be easily added as needed, with a folder of classes, some templates or views, and the cayuga.php entry point. The reality is, that the UI can easily be broken out into an application of it's own.

The structure described in above can be put into a stand along application that does noting but serve UI content. Just be sure to point the second parameter of the Cayuga() instantiation to the UI URL.