Объединение php-портов jQuery и Zen-кодирования для эмуляции стиля программирования на стороне клиента на сценариях на стороне сервера

Когда я пишу код на стороне клиента, я использую HTML/CSS/JavaScript и в последнее время jQuery для ускорения кодирования и использования улучшенных методов для достижения той же цели.

В моем текстовом редакторе я использую zen-кодирование для ускорения написания кода, а также для предотвращения ошибок. Я некоторое время смотрел на zen-кодирование как плагин jQuery, но у него есть фатальный недостаток, который вы хотите, чтобы HTML был написан и отправлен на клиентскую платформу до того, как начнется любой javascript.

Хотя мы можем использовать серверы JavaScript (env.js или node.js) и, следовательно, делать большую часть серверной части разработки с использованием JavaScript и jQuery, мне неудобно двигаться дальше, поскольку это новая технология, и многие различия и недостатки (а также некоторые основные преимущества).

Я хочу продолжить использование PHP-сервера, но развиваться так, как мне больше всего нравится, и знакомство с которым - это клиентский JavaScript.

Поэтому - я изучал QueryPath, который является портом PHP jQuery, целью которого является использование лучших и наиболее значимых частей jQuery и переработка его в соответствии с серверной средой.

Это здорово, и теперь я смотрю на два класса PHP, способных анализировать дзэн-кодирование, которое при объединении действует как отличный механизм шаблонов, а также позволяет избежать ошибок в моем коде.

Проблема, с которой я столкнулась, заключается в том, что ни дзэн-кодирующие парсеры не поддерживают нигде рядом с полным набором функций zen-кодирования.

Итак, наконец, мои вопросы (извините за довольно длительное введение)

  • Есть ли лучший код для дзэн-кодирования на стороне сервера, который я могу использовать в своем PHP-коде?
  • Есть ли хорошая (очень сжатая и полнофункциональная) альтернативная система шаблонов для использования zen-кодирования? (который, как я знаю, изначально не предназначен для этой задачи)
  • Есть ли лучший подход, который я должен предпринять для достижения моей конечной цели - сужения разрыва между тем, как я кодирую клиентскую сторону и серверную сторону?
  • Есть ли библиотека PHP, которая реализует загрузку функций утилиты, которые с помощью повысят безопасность/производительность моего кода, если бы я не изучил все внутренние работы? (например, jQuery для javascript)

NB: Я больше ищу функциональную эквивалентность, чем синтаксическое сходство, хотя оба являются плюсом для меня.

Вот некоторый прокомментированный тестовый код, который должен осветить то, что я пытаюсь достичь:

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

    */
?>

Любая помощь очень ценится

Ответ 1

Прежде всего, я хочу сказать, что у меня был ответ на ваш ответ, потому что он хорошо объяснен и у него есть хороший момент для рассмотрения; то я хочу, чтобы вы подумали о другом:

Gotchas

  • ИМХО, вы слишком много всего себя чувствуете;)

  • между всем PHP-кодом, необходимым для генерации HTML-кода и выведенным 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>

6.. как вы знаете, оба zen-кодирования и 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:[email protected]|mailCheck");
    $smarty->display('index.tpl');

ПРИМЕЧАНИЕ: использование mailCheck, да, вы также должны рассмотреть возможность проверки какой-либо переменной. smarty может это сделать....

надеюсь, что эта помощь.;)

Ответ 2

Вопросы 1 и 2

Тип механизма шаблона, подобный примеру ZenCoding, будет Haml. Синтаксис отличается, но он аналогично короткий и довольно краткий в целом.

Если вам нравится использовать ZenCoding, вы можете просто использовать редактор с поддержкой. PhpStorm, например, по умолчанию подключает плагин ZenCoding. Я уверен, что у других (таких как Vim) есть плагины для этой цели. Однако этот подход позволит вам только написать: как только вы его написали, редактор расширит его до фактической разметки HTML.

Вопрос 3

Я думаю, что часть этой проблемы состоит в том, что они по своей сути совершенно разные вещи. Клиентская сторона сценариев, как правило, это только пользовательский интерфейс. В пользовательском интерфейсе браузера используются определенные стили и подходы к программированию. Тем не менее, на стороне сервера у вас обычно есть обработка данных, а для обработки данных другие типы шаблонов работают лучше.

Я немного сомневаюсь в том, что предмет QueryPath, который вы используете, является особенно хорошим выбором... Кажется, он несколько скрывает разметку HTML, что затрудняет просмотр точного результата операций.

Для создания разметки HTML на стороне сервера я бы рекомендовал использовать механизм шаблонов или просто использовать шаблоны только для PHP.

Один из подходов, который вы можете использовать, - полностью отбросить генерацию разметки на стороне сервера. Конечно, это не очень хорошая идея для всего, но для сложных веб-приложений (в стиле Gmail или таких) вы можете сгенерировать всю разметку, используя только JavaScript. На сервере вы должны использовать только JSON для возврата данных. Таким образом, вам не нужно иметь дело с разметкой на сервере и может продолжать использовать jQuery или что-то еще на клиенте для всего.

Вопрос 4

Снова я немного сомневаюсь в этом. Если вы не понимаете, что происходит под капотом, как вы можете создать хороший код? Как вы можете правильно понимать или отлаживать вещи, когда они ошибаются или не работают должным образом?

Теперь я не знаю, являетесь ли вы гуру PHP или нет, но лично я предлагаю вам узнать, как все работает. Вам не нужно писать все с нуля, чтобы это сделать. Выбор фреймворка - хорошая идея, и он будет делать именно то, что вы просите: он многое сделает для вас, поэтому вам не нужно беспокоиться о безопасности или других вещах.

Лично я бы рекомендовал использовать Zend Framework, поскольку он предоставляет широкий спектр компонентов, и вы можете использовать только те части, которые вы хотите - вам не нужно использовать всю структуру сразу. Однако вначале это может быть немного сложным, особенно если вы не очень хорошо знакомы с понятиями PHP и ООП, поэтому вам может быть повезло сначала с некоторыми другими фреймворками.

Ответ 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:[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'; скажет макету добавить новый тег script
  • Тогда есть простой 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:[email protected]">
        send a comment
    </a>
</span>
</p>
<script type="text/javascript">
    $(function(){ alert("just decided to use some jQuery") })
</script>

Ответ 4

Я думаю, что вам совершенно не хватает точки ZenCoding. ZenCoding предназначен для интеграции в ваш редактор, а не в ваше приложение. Это способ быстро писать HTML, используя меньшее количество нажатий клавиш и с меньшим количеством ошибок. Ваш прокомментированный тестовый код не выглядит всем, что мне подходит. Я предпочитаю обычную версию HTML.

Если скорость и качество написания простого HTML - проблема для вас, возможно, пора переключиться на лучший редактор? Один с поддержкой ZenCoding, автоматической балансировки HTML-тегов, автозаполнения, фрагментов/шаблонов и т.д.? Я настроил Vim, чтобы сделать все это для меня. Мне сказали, что StormPHP тоже неплохо.

Ответ 5

В моем ответе я сильно склонен, поскольку я являюсь автором QueryPath, но мне нравится то, что вы пытаетесь сделать. (Мне всегда приятно видеть, что мой код используется так, как я никогда не ожидал.)

QueryPath имеет механизм расширения. Используя его, вы можете добавлять методы непосредственно в QueryPath. Таким образом, вы могли бы, например, написать простой плагин, который позволит вам заменить qp()->find()->append(zp()) на что-то вроде qp()->zp($selector, $zencode);.

Вы можете посмотреть расширения в QueryPath/Extensions и посмотреть, как они работают. (QPXML.php является простым для grok.)

Если вы закончите создание (и освобождение) решения, сообщите мне.