10

当我编写客户端代码时,我使用 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-coding 解析器支持完整的 zen-coding 功能集。

所以最后我的问题(对不起,相当冗长的介绍)

  1. 我可以在我的 PHP 代码中使用更好的服务器端 zen 编码解析器吗?
  2. 是否有一个很好的(非常简洁和功能齐全的)替代模板系统来使用 zen 编码?(我知道最初不是为这项任务设计的)
  3. 我应该采取更好的方法来实现缩小客户端和服务器端编码方式之间鸿沟的最终目标吗?
  4. 是否有一个 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('h1{Zen Coding and jQuery - Server Side}+p{This 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>

    */
?>

任何帮助深表感谢

4

5 回答 5

2

问题 1 和 2

类似于 ZenCoding 示例的模板引擎是Haml。语法是不同的,但一般来说它同样简短且非常简洁。

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

问题 3

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

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

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

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

问题 4

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

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

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

于 2011-04-24T17:52:10.693 回答
1

我不确定是否理解您的问题,但我通常有这种简单的方法:

<?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' ?> 

几点:

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

第 1、4 和 5 点可以委托给前端控制器,因此视图可以是:

<?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>
于 2011-04-15T22:54:06.217 回答
1

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

问题

  1. 恕我直言,你把整个事情复杂化了;)

  2. 在生成 HTML 所需的整个 PHP 代码和输出的 HTML 本身之间,就编写代码的长度而言,差异非常小。

  3. 对于不知道这 3 个库或其他任何东西的每个人来说,该代码是完全不可重复的。

  4. 与普通 HTML 的简洁性相比,站点加载的速度将大大降低。

  5. 之间的真正区别是什么:


h1{Zen Coding and jQuery - Server Side}+p{This 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-codingqueryPath都不打算按照您的方式使用,至少不是在生产场景中。

7. jQuery 有一个很好的文档并且使用起来很有用,但这并不意味着任何人都可以成功地使用它。(单纯的复制/过去不被视为编码技能IMO

解决方案

它可能是您查看诸如smarty之类的 PHP 模板引擎的最佳解决方案,这将以各种方式满足您的需求:

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

一个例子是:(被认为是一个非常原始的例子,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, 是的,您还应该考虑可能发生的某种变量检查。聪明的可以做到....

希望这有帮助。;)

于 2011-04-29T16:27:36.427 回答
0

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

如果编写纯 HTML 的速度和质量对您来说是个问题,也许是时候改用更好的编辑器了?一种支持 ZenCoding、自动平衡 HTML 标签、自动完成、片段/模板等?我已经配置 Vim 来为我做这一切。我被告知 StormPHP 也相当不错。

于 2011-04-28T05:43:43.123 回答
0

因为我是 QueryPath 的作者,所以我的回答有相当大的偏见,但我喜欢你正在尝试做的事情。(看到我的代码以我从未预料到的方式使用总是令人兴奋的。)

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

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

If you do end up building (and releasing) a solution, please let me know.

于 2012-05-23T02:37:26.790 回答