Блог

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

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

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

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

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

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

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

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

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

    */
?>
  

Любая помощь приветствуется

Вопросы 1 и 2

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

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

Вопрос 3

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

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

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

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

Вопрос 4

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

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

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

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

ОШИБКИ

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 для создания шаблонов, такой как 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 может это сделать….

надеюсь, это поможет. 😉

Я не уверен, что понял ваш вопрос, но обычно у меня такой простой подход:

 <?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'; в макете будет указано добавить новый тег script
3. Затем есть простой HTML, который должен быть оформлен макетом
4. <?php $content = ob_get_clean() ?> получите выходные данные, сохраненные во внутреннем буфере, и присвоите их переменной.
5. <?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>
  

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

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

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

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

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

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