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

Question

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

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

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

Я хочу продолжать использовать серверную часть PHP, но развиваться так, как мне удобно, и знаком с клиентским JavaScript.

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

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

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

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

1. Есть ли лучший синтаксический анализатор дзен-кодирования на стороне сервера, который я могу использовать в своем PHP-коде?
2. Существует ли хорошая (очень лаконичная и полнофункциональная) система шаблонов, альтернативная использованию дзен-кодирования? (который, я знаю, изначально не предназначен для этой задачи)
3. Есть ли лучший подход, который я должен использовать, чтобы достичь своей конечной цели - сократить разрыв между тем, как я кодирую сторону клиента и сторону сервера?
4. Существует ли библиотека 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: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

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

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

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

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

Вопрос 4

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

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

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

Answer 2

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

GOTCHAS

1. ИМХО вы все усложняете;)

2. между всем кодом PHP, необходимым для генерации HTML, и самим выведенным 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-coding и queryPath не предназначены для использования в том виде, в котором вы работаете, по крайней мере, в производственном сценарии.

7 .. Фактто, что у jQuery есть хорошая документация, и ее полезно использовать, не означает, что она может быть успешно использована кем угодно.( простая копия / прошлое не считается навыком кодирования IMO )

РЕШЕНИЕ

это, вероятно, лучшее решение для вас, глядя на некоторыевид PHP Templating Engine, такой как smarty , это удовлетворит ваши потребности по-разному:

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, да, вы также должны учитывать возможность проверки переменных.smarty может сделать это ....

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

Answer 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: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 могут быть делегированы на Front Controller, поэтому представление может быть просто:

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

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

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

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

Если вы в конечном итоге создаете (и выпускаете) решение, пожалуйста, дайте мне знать.

Answer 5

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

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