結合jQuery和Zen-Coding php端口，在服務器端腳本上模擬客戶端編程風格

Question

當我編寫客戶端代碼時，我使用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編碼的PHP類，它們在組合時可以作為一個很好的模板引擎，也可以避免代碼中的錯誤。

我遇到的問題是，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: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>

    */
?>

任何幫助深表感謝

Answer 1

問題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概念，那么最初可能會有更好的運氣與其他框架一起使用。

Answer 2

我不太明白你的問題，但我通常有這個簡單的方法：

<?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->js[] = 'js/jquery.js'; 會說布局添加一個新的腳本標簽
然后是純HTML必須用布局裝飾
<?php $content = ob_get_clean() ?>獲取存儲在內部緩沖區中的輸出並將其分配給變量。
<?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>

Answer 3

首先，我想說我已經投了你的答案，因為它得到了很好的解釋並且有一些好的觀點要考慮; 那么我想讓你想想另外一點：

陷阱

恕我直言，你是整個事情過於復雜;）
在生成HTML所需的整個PHP代碼和輸出的HTML本身之間，在編寫代碼的長度方面存在非常小的差異。
對於不了解3個庫或其他任何東西的人來說，代碼是完全不可靠的。
與簡單的vanilla 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>

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

7 ..事實上jQuery有一個很好的文檔，並且它的使用有用並不意味着可以成功地使用任何人。 （ 僅僅復制/過去不被視為編碼技巧IMO ）

解

它可能是你看到像smarty這樣的PHP模板引擎的最佳解決方案，這將以各種方式滿足你的需求：

安全/性能
縮小我編碼客戶端和服務器端的方式之間的界限

一個例子是:( 被認為是一個非常原始的例子，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 ，是的，你還應該考慮最終的某種變量檢查。 聰明可以做到....

希望這個幫助。 ;）

Answer 4

由於我是QueryPath的作者，所以我的回答非常偏向，但我喜歡你想要做的事情。 （看到我的代碼以我從未預料到的方式使用，總是令人激動。）

QueryPath具有擴展機制。 使用它，您可以直接向QueryPath添加方法。 例如，你可以編寫一個簡單的插件，讓你用qp()->zp($selector, $zencode);替換qp()->find()->append(zp()) qp()->zp($selector, $zencode); 。

您可以查看QueryPath/Extensions ，看看它們是如何工作的。 （ QPXML.php很容易QPXML.php 。）

如果您最終構建（並發布）解決方案，請告訴我。

Answer 5

我認為你完全忽略了ZenCoding的觀點。 ZenCoding旨在集成在您的編輯器中，而不是集成在您的應用程序中。 這是一種使用更少的擊鍵和更少的錯誤快速編寫HTML的方法。 您注釋的測試代碼看起來並不適合我。 我更喜歡簡單的HTML版本。

如果編寫純HTML的速度和質量對你來說是一個問題，也許是時候切換到更好的編輯器了？ 一個支持ZenCoding，自動平衡HTML標簽，自動完成，片段/模板等等？ 我已經配置Vim為我做這一切。 我被告知StormPHP也很好。

結合jQuery和Zen-Coding php端口，在服務器端腳本上模擬客戶端編程風格

問題描述

5 個解決方案

解決方案1
2 2011-04-24 17:52:10

解決方案2
1 2011-04-15 22:54:06

解決方案3
1 已采納 2011-04-29 16:27:36

解決方案4
0 2012-05-23 02:37:26

解決方案5
0 2011-04-28 05:43:43

結合jQuery和Zen-Coding php端口，在服務器端腳本上模擬客戶端編程風格

問題描述

5 個解決方案

解決方案1 2 2011-04-24 17:52:10

解決方案2 1 2011-04-15 22:54:06

解決方案3 1 已采納 2011-04-29 16:27:36

解決方案4 0 2012-05-23 02:37:26

解決方案5 0 2011-04-28 05:43:43

解決方案1
2 2011-04-24 17:52:10

解決方案2
1 2011-04-15 22:54:06

解決方案3
1 已采納 2011-04-29 16:27:36

解決方案4
0 2012-05-23 02:37:26

解決方案5
0 2011-04-28 05:43:43