Комбинирайте jQuery и Zen-Coding php портове, за да емулирате стила на програмиране от страна на клиента на скриптове от страна на сървъра

Когато пиша код от страна на клиента, използвам HTML/CSS/JavaScript и напоследък jQuery както за ускоряване на кодирането, така и за използване на подобрени методи за постигане на същата цел.

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

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

Искам да продължа да използвам PHP от страната на сървъра, но да се развивам по начина, по който ми е най-удобно и съм запознат с това, което е JavaScript от страна на клиента.

Ето защо - разглеждах QueryPath, който е PHP порт на jQuery, който има за цел да вземе най-добрите и най-подходящите части от 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:[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="/bgmailto:[email protected]">

            send a comment
        </a>
    </span>
    </p>
    <script type="text/javascript">
        $(function(){ alert("just decided to use some jQuery") })
    </script>
    </body>
    </html>

    */
?>

Всяка помощ е много ценена


person Billy Moon    schedule 15.04.2011    source източник
comment
Хей Bllly! Помогнахте ми с един въпрос преди. Толкова си умен! Това трябва да е наистина труден проблем!   -  person Briz    schedule 16.04.2011
comment
Предполагам, че вие ​​сте този, който е гласувал за въпроса тогава! Дано въпросът не е труден за човека, който дава правилния отговор :)   -  person Billy Moon    schedule 16.04.2011
comment
Има много PHP рамки, които, подобно на JQuery за JS, помагат за ускоряване на кодирането. Zend Framework, Kohana, CodeIgniter... Опасявам се, че никога няма да намерите нещо, което да съвпада по стил между двете, тъй като нуждите от език на сървър са много различни от нуждите от страна на езиков клиент.   -  person dqhendricks    schedule 16.04.2011


Отговори (5)


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

ИМАМЕ

  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="/bg{$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, да, трябва също така да обмислите евентуална проверка на променливи. умният го може....

надявам се това да помогне. ;)

person Luca Filosofi    schedule 29.04.2011

Въпроси 1 и 2

Механизъм за шаблони, подобен на примера на ZenCoding, би бил Haml. Синтаксисът е различен, но е също толкова кратък и доста сбит като цяло.

Ако обичате да използвате ZenCoding, можете да обмислите просто да използвате редактор с поддръжка за него. PhpStorm например включва плъгин ZenCoding по подразбиране. Сигурен съм, че други (като Vim) също имат добавки за тази цел. Този подход обаче ще ви позволи само да го напишете: след като го напишете, редакторът ще го разшири до действителното HTML маркиране.

Въпрос 3

Мисля, че част от този проблем е, че по своята същност те са напълно различни неща. Скриптовата страна на клиента обикновено е само потребителски интерфейс. Определени програмни стилове и подходи се използват с потребителския интерфейс на браузъра. Въпреки това, от страна на сървъра, обикновено имате обработка на данни, а за обработка на данни други видове модели работят по-добре.

Малко се съмнявам дали QueryPath нещото, което използвате, е особено добър избор... Изглежда донякъде замъглява самото HTML маркиране, което прави по-трудно да се види какъв би бил точният резултат от операциите.

За генериране на HTML маркиране от страна на сървъра бих препоръчал да използвате шаблонна машина или просто да използвате шаблони само за PHP.

Един подход, който можете да използвате, е да изхвърлите напълно генерирането на маркиране от страна на сървъра. Разбира се, това не е добра идея за всичко, но за сложни уеб приложения (в стила на Gmail или подобни) можете да генерирате цялото маркиране, като използвате само JavaScript. На сървъра бихте използвали само JSON за връщане на данни. По този начин не е нужно да се занимавате с маркиране на сървъра и можете да продължите да използвате jQuery или каквото и да е на клиента за цялото нещо.

Въпрос 4

Отново малко се съмнявам в цялото това нещо. Ако не разбирате какво се случва под капака, как можете да създадете добър код? Как можете да разберете или отстраните правилно нещата, когато се объркат или не работят според очакванията?

Сега не знам дали сте PHP гуру или не, но лично бих ви препоръчал да научите как работят нещата. Не е нужно да пишете всичко от нулата, за да направите това. Изборът на рамка е добра идея и тя ще направи точно това, което поискате: ще направи много неща вместо вас, така че не е нужно да се тревожите толкова много за сигурността или други неща.

Лично аз бих препоръчал използването на Zend Framework, тъй като предоставя широк набор от компоненти и можете да използвате само частите, които искате - не е нужно да използвате цялата рамка наведнъж. Въпреки това, в началото може да е малко сложно, особено ако не сте много запознати с PHP и OOP концепциите, така че може да имате по-голям късмет първоначално с друга рамка.

person Jani Hartikainen    schedule 24.04.2011
comment
Re: 1 и 2, мисля, че HAML е добър избор, но дзен кодирането има предимството, че е едноредово, а javascript не обработва последователно прекъсванията на редовете. Освен това дзен-кодирането има стил, много близък до css, толкова лесен за научаване от разработчиците от предния край. Знам, че дзен кодирането работи в редактори, но това, което искам, е машина за шаблони, а не разширител на код за моя редактор. Re:3 Този начин на редактиране замъглява html, но това е начинът, по който хората използват jQuery. Това е по-скоро като директно манипулиране на DOM, така че никой HTML не е добре за мен, просто може би непознат в началото. Re:4 Благодаря за съвета, ще направя Zend добър преглед. - person Billy Moon; 28.04.2011
comment
Не мога да кажа, че харесвам идеята да поставя всичко на един ред. Дори не забелязах, че имаш смесен маркер P, когато разглеждах кода си. Говорейки от проучвания и опит, четенето на дълги редове е по-бавно и по-податливо на грешки, да не говорим за страничното превъртане. - Съгласен съм, че Zen е лесен за научаване въз основа на CSS, но лично аз го намирам за по-добър за бързо писане на код (аз също го използвам), но не толкова за четене или модифициране. - Ако кодът на jQuery обикновено прави нещо, това не означава, че е добра практика;) Освен това обикновено не използвате jQuery за генериране на цели документи - person Jani Hartikainen; 30.04.2011
comment
Използването на jQ стил за извършване на малки промени или подобни може да работи, но не мисля, че е чудесно за нещо по-голямо, поради точките, които споменах (по-трудно за четене, модифициране, вероятно проблеми с производителността). О, и имаше нещо, наречено Aptana Jaxer, което позволяваше споделяне на JS код както на клиента, така и на сървъра - беше доста спретнато, но изглежда избледняваше в неизвестност доста бързо. - Също Re: JS не обработва прекъсвания на редове. Dojo има JS шаблонна машина, която може да използва външни файлове като шаблони. Това до голяма степен коригира всички проблеми в JS + нови редове при писане на шаблони. Бих препоръчал да го проверите - person Jani Hartikainen; 30.04.2011

Не съм сигурен, че разбирам въпроса ви, но обикновено имам този прост подход:

<?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="/bgmailto:[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' ?> 

Някои точки:

  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 могат да бъдат делегирани на преден контролер, така че изгледът може да бъде просто:

<?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="/bgmailto:[email protected]">
        send a comment
    </a>
</span>
</p>
<script type="text/javascript">
    $(function(){ alert("just decided to use some jQuery") })
</script>
person Francesco Terenzani    schedule 15.04.2011
comment
Благодаря за отговора - той не отговаря точно на въпросите ми, които основно се опитват да ми позволят да напиша сървърен код в стила на jQuery. Например, използване на селектори и верижни функции, които могат да добавят и премахват DOM елементи по много гъвкав начин. Добре е обаче да получите ясна представа от вас за това как може да се постигне просто шаблониране на php. - person Billy Moon; 16.04.2011

Мисля, че напълно пропускате смисъла на ZenCoding. ZenCoding е предназначен да бъде интегриран във вашия редактор, а не във вашето приложение. Това е начин за бързо писане на HTML с по-малко натискания на клавиши и с по-малко грешки. Вашият коментиран тестов код не ми изглежда чак толкова използваем. Предпочитам обикновената HTML версия.

Ако скоростта и качеството на писане на обикновен HTML са проблем за вас, може би е време да преминете към по-добър редактор? Един с поддръжка на ZenCoding, автоматично балансиране на HTML тагове, автоматично довършване, фрагменти/шаблони и т.н.? Конфигурирах Vim да прави всичко това вместо мен. Казаха ми, че StormPHP също е доста добър.

person Sander Marechal    schedule 28.04.2011
comment
Знам, че дзен-кодирането първоначално не е проектирано да бъде шаблон, заявих това във въпроса и попитах дали има по-добра алтернатива. Идеята ми не е да спестявам няколко натискания на клавиши, докато кодирам. Идеята ми е да стесня разделението между скриптовете от предния край и сървърната страна. Искам няколко реда код да могат да бъдат преносими между задния и предния край и да произведат същия резултат, или анализиран от сървъра, или изпълнен като javascript страна на клиента. Моята мечта е да мога да кодирам например странична лента, където css се добавя в главата, html в тялото и така като единичен блок преносим код... - person Billy Moon; 28.04.2011

Аз съм значително предубеден в отговора си, тъй като съм автор на QueryPath, но ми харесва това, което се опитвате да направите. (Винаги е вълнуващо да видя как кодът ми се използва по начин, който никога не съм очаквал.)

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

Можете да разгледате разширенията в QueryPath/Extensions и да видите как работят. (QPXML.php е лесен за грешене.)

Ако в крайна сметка изградите (и пуснете) решение, моля, уведомете ме.

person Technosophos    schedule 23.05.2012