10

クライアント側のコードを書くときは、HTML/CSS/JavaScript と最近では jQuery を使用してコーディングを高速化し、改善された方法を使用して同じ目標を達成しています。

私のテキスト エディターでは、Zen コーディングを使用してコードの記述を高速化し、エラーを回避しています。しばらくの間、jQuery プラグインとしての zen-coding を検討していましたが、これには致命的な欠陥があり、javascript が起動する前に HTML を記述してクライアントにプレーンで送信する必要があります。

JavaScript サーバー (env.js または node.js) を使用できるため、JavaScript と jQuery を使用してサーバー側で多くの開発を行うことができますが、これは新しいテクノロジであり、多くの違いと欠点があるため (また、いくつかの大きな利点もあります)。

PHPサーバーサイドを使い続けたいと思っていますが、私が最も快適で、クライアントサイドのJavaScriptに精通している方法で開発しています。

したがって、私は、jQuery の最良かつ最も関連性の高い部分を取り、サーバー環境に合わせて再加工することを目的とした、jQuery の PHP ポートである QueryPath を調べてきました。

それはすべて素晴らしいことです。私は今、zen-coding を解析できる 2 つの PHP クラスを見てきました。これらを組み合わせると、優れたテンプレート エンジンとして機能し、コードのエラーも回避できます。

私が抱えている問題は、どちらの zen コーディング パーサーも zen コーディング機能の完全なセットに近いところをサポートしていないことです。

最後に私の質問です(かなり長いイントロで申し訳ありません)

  1. PHP コードで使用できる、より優れたサーバー側の Zen コーディング パーサーはありますか?
  2. 禅コーディングを使用するための優れた (非常に簡潔でフル機能の) 代替テンプレート システムはありますか? (もともとこのタスク用に設計されていないことは知っています)
  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 を使用するのが好きな場合は、ZenCoding をサポートするエディターを使用することを検討できます。たとえば、PhpStormにはデフォルトで ZenCoding プラグインがバンドルされています。他のもの (Vim など) にもこの目的のためのプラグインがあると確信しています。ただし、このアプローチでは、それを記述することしかできません。一度記述すると、エディターはそれを実際の HTML マークアップに展開します。

質問 3

この問題の一部は、それらが本質的に完全に異なるものであることにあると思います。クライアント側のスクリプト側で、通常はユーザー インターフェイスのみです。ブラウザー UI では、特定のプログラミング スタイルとアプローチが使用されます。ただし、サーバー側では通常、データ処理があり、データ処理には他のタイプのパターンがうまく機能します。

あなたが使用している QueryPath が特に良い選択であるかどうかは少し疑問です... HTML マークアップ自体がやや不明瞭になり、操作の正確な結果がどうなるかを確認するのが難しくなります。

サーバー側で HTML マークアップを生成するには、テンプレート エンジンを使用するか、単純に PHP のみのテンプレートを使用することをお勧めします。

使用できるアプローチの 1 つは、サーバー側のマークアップ生成を完全に破棄することです。もちろん、これはすべてに適した方法ではありませんが、複雑な Web アプリケーション (Gmail などのスタイル) の場合は、JavaScript のみを使用してマークアップ全体を生成できます。サーバーでは、JSON のみを使用してデータを返します。この方法では、サーバーでマークアップを処理する必要がなく、jQuery などをクライアントで全体的に使用し続けることができます。

質問 4

繰り返しますが、私はこの全体について少し疑問を持っています。内部で何が起こっているのかを理解していない場合、どうすれば優れたコードを作成できるでしょうか? 問題が発生したり、期待どおりに動作しない場合、どうすれば物事を正しく理解またはデバッグできますか?

あなたが PHP の第一人者であるかどうかはわかりませんが、個人的には、物事がどのように機能するかを学ぶことをお勧めします。ただし、それを行うためにすべてをゼロから作成する必要はありません。フレームワークを選択することは良い考えであり、それはあなたが求めていることを正確に行います: それはあなたのために多くのことをしてくれるので、セキュリティやその他のことについてそれほど心配する必要はありません.

個人的には、Zend Framework を使用することをお勧めします。これは、幅広いコンポーネントを提供し、必要な部分のみを使用できるためです。フレームワーク全体を一度に使用する必要はありません。ただし、特に PHP と OOP の概念にあまり慣れていない場合は、最初は少し複雑になる可能性があるため、最初は他のフレームワークを使用する方がうまくいく可能性があります。

于 2011-04-24T17:52:10.693 に答える
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 に答える
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' ?><link>メインの HTML 構造を含むレイアウトと、メタ、タイトル、タグ、タグなどを印刷するためのロジック<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 に答える
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理解するのは簡単です。)

ソリューションを構築 (およびリリース) することになった場合は、お知らせください。

于 2012-05-23T02:37:26.790 に答える