结合 jQuery 和 Zen-Coding php 端口在服务器端脚本上模拟客户端编程风格

Posted

技术标签:

【中文标题】结合 jQuery 和 Zen-Coding php 端口在服务器端脚本上模拟客户端编程风格【英文标题】：Combine jQuery and Zen-Coding php ports to emulate client side programming style on server side scripts 【发布时间】：2011-08-06 15:32:40 【问题描述】：

当我编写客户端代码时，我使用 html/CSS/javascript 和最近的 jQuery 来加快编码速度，并使用改进的方法来实现相同的目标。

在我的文本编辑器中，我使用 zen-coding 来加快代码的编写速度，同时也避免错误。一段时间以来，我一直将 zen-coding 视为一个 jQuery 插件，但它有一个致命的缺陷，即您希望在任何 javascript 启动之前编写 HTML 并将其发送到客户端。

虽然我们可以使用 JavaScript 服务器（env.js 或 node.js），因此在服务器端使用 JavaScript 和 jQuery 进行了很多开发，但由于它是一项新兴技术，并且有很多不同之处，我还不太愿意搬过去和缺点（以及一些主要优点）。

我想继续使用 php 服务器端，但以我最熟悉的方式进行开发，并且熟悉客户端 JavaScript。

因此 - 我一直在研究 QueryPath，它是 jQuery 的一个 PHP 端口，旨在利用 jQuery 的最佳和最相关的部分并对其进行重新设计以适应服务器环境。

这一切都很好，我现在一直在研究两个能够解析 zen-coding 的 PHP 类，当它们组合起来时，它们可以作为一个很好的模板引擎，并且还可以避免我的代码中的错误。

我遇到的问题是，没有一个 zen 编码解析器支持完整的 zen 编码功能集。

最后是我的问题（抱歉，介绍太长了）

    我可以在我的 PHP 代码中使用更好的服务器端 zen 编码解析器吗？ 是否有一个很好的（非常简洁和功能齐全的）替代模板系统来使用 zen 编码？ （我知道最初不是为这项任务设计的） 我是否应该采取更好的方法来实现缩小客户端和服务器端编码方式之间差异的最终目标？ 是否有一个 PHP 库可以实现大量实用功能，通过使用这些功能可以提高我的代码的安全性/性能，而无需我了解所有内部工作原理？ （就像 jQuery 对 javascript 所做的那样）

注意：与句法相似性相比，我更多的是寻找功能等效性——尽管两者对我来说都是一个加分项。

这里是一些注释测试代码，应该可以说明我想要实现的目标：

<?php

    // first php based zen-coding parser
    // http://code.google.com/p/zen-php
    require_once 'ZenPHP/ZenPHP.php';
    // my own wrapper function
    function zp($abbr) return ZenPHP::expand($abbr); 

    // second php based zen-coding parser
    // https://github.com/philipwalton/PW_Zen_Coder
    require_once 'PW_Zen_Coder/PW_Zen_Coder.php';
    $zc = new PW_Zen_Coder;
    // my own wrapper function
    function pwzc($abbr) global $zc; return $zc->expand($abbr); 

    // php port of jQuery with a new server-side flavor
    // http://querypath.org/
    require_once 'QueryPath/QueryPath.php';

    // initialize query path with simple html document structure
    qp(zp('html>head+body'))

        // add a heading and paragraph to the body
        ->find('body')
        ->html(zp('h1Zen Coding and jQuery - Server Side+pThis has all been implemented as a php port of JavaScript libraries'))

        // add a comments link to the paragraph
        ->find('p')
        ->append(pwzc('span.comments>a[href=mailto:this@comment.com]send a comment'))

        // decide to use some jquery - so add it to the head
        ->find(':root head')
        ->append(zp('script[type=text/javascript][src=/jquery.js]'))

        // add an alert script to announce use of jQuery
        ->find(':root body')
        ->append(zp('script[type=text/javascript]$(function() alert("just decided to use some jQuery") )'))

        // send it to the browser!
        ->writeHTML();

    /* This will output the following html

    <html>
    <head>
    <script type="text/javascript" src="/jquery.js"></script>
    </head>
    <body>
    <h1>
        Zen Coding and jQuery - Server Side
    </h1>
    <p>
        This has all been implemented as a php port of JavaScript libraries
    <span class="comments">
        <a href="mailto:this@comment.com">

            send a comment
        </a>
    </span>
    </p>
    <script type="text/javascript">
        $(function() alert("just decided to use some jQuery") )
    </script>
    </body>
    </html>

    */
?>

非常感谢任何帮助

【问题讨论】：

嘿Bllly！你以前帮过我一个问题。你太聪明了！这一定是一个非常棘手的问题！ 我猜你是那个投票给这个问题的人！希望对给出正确答案的人来说不是一个棘手的问题:) 有很多 PHP 框架，就像 JQuery 对 JS 所做的那样，有助于加快编码速度。 Zend Framework、Kohana、CodeIgniter……恐怕你永远找不到任何东西使两者在风格上相匹配，因为服务器上的语言需求与语言客户端的需求大不相同。 【参考方案1】：

问题 1 和 2

类似于 ZenCoding 示例的模板引擎是 Haml。语法有所不同，但一般来说都非常简短和简洁。

如果您喜欢使用 ZenCoding，您可以考虑使用支持它的编辑器。 PhpStorm 例如默认捆绑一个 ZenCoding 插件。我确信其他人（例如 Vim）也有为此目的的插件。但是，这种方法只允许您编写它：一旦您编写了它，编辑器会将其扩展为实际的 HTML 标记。

问题 3

我认为这个问题的一部分是它们本质上是完全不同的东西。客户端脚本方面，它通常只是一个用户界面。某些编程风格和方法与浏览器 UI 一起使用。但是，在服务器端，您通常进行数据处理，而对于数据处理，其他类型的模式效果更好。

我有点怀疑您使用的 QueryPath 是否是一个特别好的选择...它似乎有点模糊了 HTML 标记本身，使得更难看到操作的确切结果是什么。

为了在服务器端生成 HTML 标记，我建议使用模板引擎或仅使用 PHP 模板。

您可以使用的一种方法是完全放弃服务器端标记生成。当然，这对所有事情都不是一个好主意，但对于复杂的网络应用程序（Gmail 或类似的风格），您可以只使用 JavaScript 生成整个标记。在服务器上，您只会使用 JSON 来返回数据。这样你就不必处理服务器上的标记，并且可以继续使用 jQuery 或客户端上的任何东西来完成整个事情。

问题 4

我再次对这整件事有点怀疑。如果你不了解幕后发生的事情，你怎么能写出好的代码呢？当出现错误或无法按预期工作时，您如何才能正确理解或调试？

现在我不知道您是否是 PHP 专家，但我个人建议您了解事物的工作原理。不过，您不必从头开始编写所有内容。选择一个框架是个好主意，它会完全按照您的要求做：它会为您做很多事情，因此您不必担心安全性或其他事情。

我个人建议使用 Zend 框架，因为它提供了广泛的组件，并且您只能使用您想要的部分 - 您不必一次使用整个框架。但是，一开始它可能会有点复杂，尤其是如果您对 PHP 和 OOP 概念不是很熟悉，所以最初使用其他框架可能会更好。

【讨论】：

Re: 1 和 2，我认为 HAML 是一个不错的选择，但是 zen-coding 具有单行的优势，并且 javascript 并不能始终如一地处理换行符。此外，zen-coding 的风格非常接近 css，因此对于前端开发人员来说很容易学习。我知道 zen-coding 在编辑器中工作，但我想要的是一个模板引擎，而不是我的编辑器的代码扩展器。 Re:3 这种编辑方式确实掩盖了 html，但却是人们使用 jQuery 的方式。它更像是直接操作 DOM，所以没有 HTML 对我来说很好，只是一开始可能不熟悉。 Re:4 谢谢你的建议，我会给zend好好看看。 我真的不能说我喜欢将所有内容放在一行中的想法。在查看代码时，我什至没有注意到您在其中混入了 P 标签。从学习和经验来看，阅读长行更慢，更容易出错，更不用说横向滚动了。 - 我同意 Zen 基于 CSS 很容易学习，但我个人发现它更适合快速编写代码（我自己也使用它），但不适合阅读或修改它。 - 如果 jQuery 代码通常做某事并不意味着这是一个好习惯；）另外，您通常不会使用 jQuery 来生成整个文档 使用 jQ 样式进行小的更改或类似的可能会起作用，但我认为它不适用于任何更大的事情，因为我提到了几点（更难阅读、修改，可能存在性能问题）。哦，还有一个叫做 Aptana Jaxer 的东西，它允许在客户端和服务器上共享 JS 代码——它非常简洁，但似乎很快就消失了。 - 也回复：JS 不处理换行符。 Dojo 有一个 JS 模板引擎，可以使用外部文件作为模板。这几乎解决了编写模板时 JS + 换行符中的所有问题。建议去看看【参考方案2】：

首先我想说我已经对你的答案投了赞成票，因为它得到了很好的解释并且有一些很好的考虑；那我想让你想想这些其他点：

发现问题

    恕我直言，你把整个事情复杂化了；）

    在生成 HTML 所需的整个 PHP 代码与输出的 HTML 本身之间，编写代码的长度差异非常小。

    对于不了解这 3 个库或其他任何内容的每个人来说，代码都是完全不可重复的。

    与普通 HTML 的简洁性相比，网站加载速度将大大降低。

    两者之间的真正区别是什么：

h1Zen Coding and jQuery - Server Side+pThis has all been implemented as a php port of JavaScript libraries

和

<h1>Zen Coding and jQuery - Server Side</h1><p>This has all been implemented as a php port of JavaScript libraries</p>

6.. 如您所知，zen-coding 和 queryPath 都不是按照您的方式使用的，至少不是在生产场景中。

7.. jQuery 拥有良好的文档并且使用起来很有用，但这并不意味着任何人都可以成功地使用它。 （单纯的复制/过去不被认为是 IMO 的编码技能）

解决方案

这可能是您查看某种 PHP 模板引擎（如 smarty）的最佳解决方案，这将以各种方式满足您的需求：

    安全/性能 缩小客户端和服务器端编码方式之间的鸿沟

一个例子是：（被认为是一个非常原始的例子，smarty有更强大的功能）

<!-- index.tpl -->
<html>
  <head> $scriptLink 
  </head>
  <body> <h1> $h1Text </h1>
    <p> $pText 
      <span class="comments">
        <a href="$aLink"> $aText </a>
      </span>
    </p> $scriptFunc 
  </body>
</html>

    // index.php
    require('Smarty.class.php');
    $smarty = new Smarty;
    $smarty->assign("scriptLink", "<script type=\"text/javascript\" src=\"/jquery.js\"></script>");
    $smarty->assign("scriptFunc", "<script type=\"text/javascript\">$(function() alert(\"hello world\") );</script>");
    $smarty->assign("h1Text", "Zen Coding and jQuery - Server Side");
    $smarty->assign("pText", "This has all been implemented as a php port of JavaScript libraries");
    $smarty->assign("aText", "send a comment");
    $smarty->assign("aLink", "mailto:this@comment.com|mailCheck");
    $smarty->display('index.tpl');

注意：使用mailCheck，是的，您还应该考虑不测性某种变量检查。 smarty可以做到....

希望对您有所帮助。 ;)

【讨论】：

【参考方案3】：

我不确定是否理解你的问题，但我通常有这种简单的方法：

<?php

ob_start();

$config->js[] = 'js/jquery.js';

?>

<h1>
    <del>Zen Coding and jQuery - Server Side</del>
    <ins>HTML and PHP :-)</ins>

</h1>
<p>
    This has all been implemented <del>as a php port of JavaScript libraries</del> 
    <ins>in php</ins>
<span class="comments">
    <a href="mailto:this@comment.com">
        send a comment
    </a>
</span>
</p>
<script type="text/javascript">
    $(function() alert("just decided to use some jQuery") )
</script>

<?php $content = ob_get_clean() ?>

<?php require 'layout.php' ?>

几点：

    ob_start开启输出缓冲区（输出不发送到客户端而是存储在内部缓冲区中） $config-&gt;js[] = 'js/jquery.js'; 会告诉布局添加一个新的脚本标签 然后是必须用布局装饰的纯 HTML &lt;?php $content = ob_get_clean() ?&gt; 获取存储在内部缓冲区中的输出并将其分配给变量。 &lt;?php require 'layout.php' ?&gt; 将包含具有主要 HTML 结构的布局和一些打印元数据、标题、&lt;link&gt; 标签、&lt;script&gt; 标签等的逻辑......布局将包含一个 &lt;?php echo $content ?&gt; 以打印页面内容.

第 1、4 和 5 点可以委托给 Front Controller，因此视图可以是：

<?php

$config->js[] = 'js/jquery.js';

?>

<h1>
    <del>Zen Coding and jQuery - Server Side</del>
    <ins>HTML and PHP :-)</ins>

</h1>
<p>
    This has all been implemented <del>as a php port of JavaScript libraries</del> 
    <ins>in php</ins>
<span class="comments">
    <a href="mailto:this@comment.com">
        send a comment
    </a>
</span>
</p>
<script type="text/javascript">
    $(function() alert("just decided to use some jQuery") )
</script>

【讨论】：

感谢您的回复 - 它并没有完全回答我的问题，这些问题主要是为了让我能够以 jQuery 的风格编写服务器代码。例如，使用可以以非常灵活的方式添加和删除 DOM 元素的选择器和链式函数。但是，最好从您那里清楚地了解如何实现简单的 php 模板。【参考方案4】：

我认为您完全忽略了 ZenCoding 的重点。 ZenCoding 旨在集成到您的编辑器中，而不是您的应用程序中。这是一种使用更少的击键和更少的错误快速编写 HTML 的方法。您评论的测试代码对我来说看起来并不那么有用。我更喜欢纯 HTML 版本。

如果编写纯 HTML 的速度和质量对您来说是个问题，也许是时候改用更好的编辑器了？一个支持 ZenCoding、自动平衡 HTML 标签、自动完成、sn-ps/模板等？我已经配置 Vim 来为我做这一切。我听说 StormPHP 也很不错。

【讨论】：

我知道 zen-coding 最初并不是设计为模板的，我在问题中说明了这一点并询问是否有更好的选择。我的想法不是在编码时节省一些击键。我的想法是缩小前端和服务器端脚本之间的鸿沟。我希望几行代码可以在后端和前端之间移植，并产生相同的结果，或者由服务器解析，或者作为 javascript 客户端执行。例如，我的梦想是能够编写一个侧边栏，其中在 head 中添加 css，在 body 中添加 html，等等作为一个可移植代码块......【参考方案5】：

我的回答有很大的偏见，因为我是 QueryPath 的作者，但我喜欢你正在尝试做的事情。 （看到我的代码以一种出乎我意料的方式使用总是令人兴奋。）

QueryPath 具有扩展机制。使用它，您可以直接向 QueryPath 添加方法。因此，例如，您可以编写一个简单的插件，让您将 qp()-&gt;find()-&gt;append(zp()) 替换为 qp()-&gt;zp($selector, $zencode); 之类的东西。

您可以查看QueryPath/Extensions 中的扩展程序并了解它们是如何工作的。 （QPXML.php 很容易理解。）

如果您最终构建（并发布）解决方案，请告诉我。

【讨论】：

以上是关于结合 jQuery 和 Zen-Coding php 端口在服务器端脚本上模拟客户端编程风格的主要内容，如果未能解决你的问题，请参考以下文章

如何将自定义片段添加到 zen-coding？

PHP+jquery 瀑布流+LightBox图片盒子特效

PH54-200-S500-R 工业舵机 无人车 机械臂 舵盘

结合悬停和单击功能（jQuery）？

jquery mobile，结合jquery mobile“页面”和内部页面

在 Rails 应用程序中结合 Scriptaculous 和 jQuery