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

发布于 2024-11-01 07:11:01 字数 3510 浏览 2 评论 0原文

当我编写客户端代码时，我使用 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 编码功能的地方。

最后我的问题（抱歉，介绍相当长）

是否有更好的服务器端 zen 编码解析器可以在我的 PHP 代码中使用？
是否有一个好的（非常简洁且功能齐全）替代模板系统来使用 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('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:[email protected]]{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:[email protected]">

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

    */
?>

非常感谢任何帮助

原文

When I write client side code, I use HTML/CSS/JavaScript and lately jQuery to both speed up coding, and use improved methods to achieve the same goal.

In my text editor I use zen-coding to speed up the writing of code, and also to avoid errors. I was looking at zen-coding as a jQuery plugin for a while, but it has a fatal flaw, that you want the HTML to be written and sent to the client plain before any javascript kicks in.

Although we can use JavaScript servers (env.js or node.js) and therefore do a lot of development server side using JavaScript and jQuery, I am not comfortable moving over yet as it is an emerging technology, and has many differences and drawbacks (and also some major advantages).

I want to continue using PHP server side, but develop in the way I am most comfortable with, and familiar with which is client side JavaScript.

Therefore - I have been looking into QueryPath which is a PHP port of jQuery that aims to take the best and most relevant parts of jQuery and re-work it to suit the server environment.

That is all great, and I have now been looking at two PHP classes capable of parsing zen-coding which when combined acts as a great templating engine and also avoids errors in my code.

The problem I am having is that neither zen-coding parsers support anywhere near a full set of zen-coding features.

So finally my questions (sorry for the rather lengthy intro)

Is there a better server side zen-coding parser I can use in my PHP code?
Is there a good (very concise and full featured) alternative templating system to using zen-coding? (which I know is not originally designed for this task)
Is there a better approach I should take to achieve my ultimate goal of narrowing the divide between the way I code client side and server side?
Is there a PHP library that implements a load of utility functions that by using will enhance the security/performance of my code without me learning all the internal workings? (like jQuery does for javascript)

NB: I am looking more for functional equivalence than syntactic similarity - although both are a plus for me.

Here is some commented test code that should illuminate what I am trying to achieve:

<?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:[email protected]]{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:[email protected]">

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

    */
?>

Any help is much appreciated

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

递刀给你 2024-11-08 07:11:01

问题 1 和 2

类似于 ZenCoding 示例的模板引擎是 Haml。语法有所不同，但总体上同样简短且相当简洁。

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

问题3

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

我有点怀疑您使用的 QueryPath 东西是否是一个特别好的选择...它似乎在某种程度上掩盖了 HTML 标记本身，使得更难看到操作的确切结果。

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

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

问题 4

我再次对整个事情有点怀疑。如果您不了解幕后发生的事情，如何编写出好的代码？当事情出错或无法按预期工作时，您如何正确理解或调试？

现在我不知道你是否是 PHP 大师，但我个人建议你了解它是如何工作的。不过，您不必从头开始编写所有内容来做到这一点。选择一个框架是一个好主意，它会完全满足您的要求：它会为您做很多事情，因此您不必太担心安全性或其他事情。

我个人建议使用 Zend Framework，因为它提供了广泛的组件，并且您只能使用您想要的部分 - 您不必立即使用整个框架。然而，一开始它可能有点复杂，特别是如果您不太熟悉 PHP 和 OOP 概念，因此您最初使用其他框架可能会运气更好。

Questions 1 and 2

A template engine sort of like the ZenCoding example would be Haml. The syntax is different, but it's similarily short and quite concise in general.

If you like using ZenCoding, you could consider simply using an editor with support for it. PhpStorm for example bundles a ZenCoding plugin by default. I'm sure others (such as Vim) have plugins for this purpose as well. However, this approach will only allow you to write it: Once you've written it, the editor will expand it to the actual HTML markup.

Question 3

I think a part of this problem is that they are inherently completely different things. The client-side scripting side of things, it's typically a user-interface only. Certain programming styles and approaches are used with the browser UI. However, on the server-side, you generally have data processing, and for data processing, other types of patterns work better.

I'm a bit doubtful whether the QueryPath thinger you're using is a particularily good choice... It seems to somewhat obscure the HTML markup itself, making it harder to see what the exact result of the operations would be.

For generation of HTML markup on the server-side, I would recommend using a template engine or simply using PHP-only templates.

One approach you could use is to completely throw away server-side markup generation. Of course this is not a good idea for everything, but for complex web apps (in style of Gmail or such), you can generate the entire markup using just JavaScript. On the server, you would only use JSON to return data. This way you don't have to deal with markup on the server and can keep using jQuery or whatever on the client for the entire thing.

Question 4

Again I'm a bit doubtful about this whole thing. If you don't understand what's going on under the hood, how can you produce good code? How can you understand or debug things correctly when they go wrong or don't work as expected?

Now I don't know if you're a PHP guru or not, but personally I would suggest that you learn how things work. You don't have to write everything from scratch to do that though. Choosing a framework is a good idea, and it will do exactly what you ask: It will do many things for you, so you don't have to worry as much about security or other things.

Personally I would recommend using the Zend Framework, since it provides a wide range of components, and you can only use the parts you want - you don't have to use the whole framework at once. However, it can be a bit complex at first especially if you're not very familiar with PHP and OOP concepts, so you might have better luck initially going with some other framework.

回复收藏 0 原文

月寒剑心 2024-11-08 07:11:01

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

明白

恕我直言，你让整个事情变得过于复杂;)
在整个之间生成 HTML 所需的 PHP 代码和输出的 HTML 本身在编写代码的长度方面存在非常非常小的差异。
对于每个不知道 3 个库或其他任何内容的人来说，该代码是完全不可恢复的。
与普通 HTML 的简单性相比，站点加载速度将大大降低。
之间的真正区别是什么：

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>

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

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

解决方案

对于您查看某种 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:[email protected]|mailCheck");
    $smarty->display('index.tpl');

注意：使用mailCheck，是的，您应该还要考虑某种变量检查的可能性。聪明人可以做到......

希望这有帮助。 ;)

first of all i want to say i have up-voted your answer because it is well explained and have some nice point to consider; then i want let you think about theese other point:

GOTCHAS

IMHO you are overcomplicating the whole thing ;)
between the entire PHP code needed to generate the HTML and the outputted HTML itself there is very very low difference in term of lenght of writed-code.
the code is completely unredeable for everyone who don't know the 3 libs or whatever it is.
the speed of site-load will decrease enourmously compared to the semplicity of the vanilla HTML.
what the real difference between:

h1{Zen Coding and jQuery - Server Side}+p{This has all been implemented as a php port of JavaScript libraries}

and

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

6.. as you know both zen-coding and queryPath are not intended to be used the way you are doing, at least not in a production scenario.

7.. The fact that jQuery have a good documentation and it's usefull to use doesn't mean that can be used successfully from anyone. ( the mere copy/past is not considered a coding skill IMO )

SOLUTION

it is probably the best solution for you looking at some kind of PHP Templating Engine like smarty, this will suit your needs in various way:

security/performance
narrowing the divide between the way I code client side and server side

an example would be: ( to be considered a very primitive example, smarty have more powerfull functionalities )

<!-- 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:[email protected]|mailCheck");
    $smarty->display('index.tpl');

NOTE: the use of mailCheck, yes you should also consider eventuality some kind of variable check. smarty can do it....

hope this help. ;)

回复收藏 0 原文

白鸥掠海 2024-11-08 07:11:01

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

<?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:[email protected]">
        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->js[] = 'js/jquery.js'; 会告诉布局添加一个新的脚本标签
然后有一个纯 HTML 必须用布局
<代码> 获取存储在内部缓冲区中的输出并将其分配给变量。
将包含具有主要 HTML 结构的布局以及一些用于打印元、标题、标记的逻辑、

第 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:[email protected]">
        send a comment
    </a>
</span>
</p>
<script type="text/javascript">
    $(function(){ alert("just decided to use some jQuery") })
</script>

I'm not sure to understand your question, but I usually have this simple approach:

<?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:[email protected]">
        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' ?>

Some points:

ob_start turn on the output buffer (the output is not sent to the client but stored in an internal buffer)
$config->js[] = 'js/jquery.js'; will say to the layout to add a new script tag
Then there is the plain HTML that have to be decorated with the layout
<?php $content = ob_get_clean() ?> get the output stored in the internal buffer and assign it to a variable.
<?php require 'layout.php' ?> will include the layout with the main HTML structure and some logic to print metas, title, <link> tags, <script> tags, and so on... The layout will contain a <?php echo $content ?> to print the page content.

The point 1, 4 and 5 can be delegated to a Front Controller, so the view can be just:

<?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:[email protected]">
        send a comment
    </a>
</span>
</p>
<script type="text/javascript">
    $(function(){ alert("just decided to use some jQuery") })
</script>

回复收藏 0 原文