zen coding

Download Zen Coding

Post on 19-Jan-2015

894 views

Category:

Spiritual

0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. Zen Coding

2. Zen Coding

  • JavaScript, Python
  • :Eclipse/Aptana , Coda, TextMate,Espresso( ),Gedit ,TopStyle
  • http://code.google.com/p/zen-coding/

3. Zen Coding Zen Coding 4. Expand Abbreviation

  • div#header>cc:ie6+ul.nav>li*3>a

5. Expand Abbreviation

6.

  • E#id.class
  • div#header->
  • p.date->
  • div#head.one.two->

7.

  • E>E
  • head>link->
  • table>tr>td->
  • ul#name>li.item->

8.

  • E+E
  • p+p->
  • div#name>p.one+p.two->

9.

  • E$*N
  • p.name-$*3->
  • select>option#item-$*3->

10.

  • zen_settings.js(zen_settings.py )

11. zen_settings

  • varzen_settings= {
    • //
    • css : {
      • ...
    • },
    • html : {
      • extends : css,
      • snippets : {
        • ...
      • },
      • abbreviations : {
        • ...
      • }
    • }
  • }

12. :

  • snippets : {
    • 'cc:ie6': ''
  • }

13. : ()

  • abbreviations : {
    • 'a:link': '',
    • 'img': ''
  • }

14. 0.5

  • - (html pair matcher).

15. ID CLASS:

  • snippets : {
    • 'djb': '{% block${id}%} ${child} |{% endblock %}'
  • }
  • djb#content>div.page->

{% block content %}

{% endblock %} 16.

  • Eclipse/Aptana: (HTML/XML) .

17.

  • div>img+br

18.

  • HTML

19.

  • XHTML

20.

  • XML

21.

  • Hello world

  • Hello world

22.

  • , :

23. Wrap with abbreviation

  • +
  • div#header>h1+div.wrap

24. Wrap with abbreviation

25. Wrap with abbreviation

  • item 1
  • item 2
  • item 3
  • +
  • div#header>ul#nav>li.item-$ *

26. Wrap with abbreviation

    • item 1
    • item 2
    • item 3

27.

  • http://www.zen-coding.ru/demo/
  • editArea

28. Zen Coding Zen Coding 29. Zen Coding HTML Pair Matcher API 30.

31.

  • Hello world! div#header+ul>li
  • :
  • function isAllowedChar ( ch ) {
  • var char_code = ch . charCodeAt ( 0 ),
  • special_chars = '#.>+*:$-_!@' ;
  • return ( char_code > 64 && char_code < 91 ) // uppercase letter
  • || ( char_code > 96 && char_code < 123 ) // lowercase letter
  • || ( char_code > 47 && char_code < 58 ) // number
  • || special_chars . indexOf ( ch ) != -1 ; // special character
  • }

32.

  • :
    ul#nav>li
  • < div>ul#nav>li
ul#nav>li

?

  • > < , , .

33.

  • :
  • function parseIntoTree ( abbr ) {
  • ...
  • var re = /([+>])?([a-z@!][a-z0-9:-]*)(#[w-$]+)?((?:.[w-$]+)*)(?:*(d+))?/ig
  • abbr = abbr . replace ( re , function ( str , operator , tag_name , id , class_name , multiplier ) {
  • ...
  • return '' ;
  • });
  • return (! abbr ) ? tree : null ;
  • }

34.

  • div+ul#nav>li*3>a
  • Tag()Snippet() .

root div ul(id=nav) li(3) a( href= ) 35.

  • root.toString(profile_name);
  • (, , ).

36. HTML-

  • last_match
  • ( )

Lorem ipsum dolor sit amet.

37. HTML-

  • HTMLPairMatcher . last_match = {
  • opening_tag : {
  • name : 'ul' ,
  • full_tag : '
    • ' ,
  • start : 5 ,
  • end : 19 ,
  • unary : false ,
  • type : 'tag' ,
  • close_self : false
  • },
  • closing_tag : {
  • ...
  • }
  • }

38.

  • API
  • (TextMate, Coda)
  • Tab

39. EclipseMonkey

  • Eclipse JavaScript
  • Mozilla Rhino
    • Java- JavaScript
    • IDE
    • ,
    • :String java.lang.String

40. ? [email_address] http://chikuyonok.ru http://chikuyonok.ru http://chikuyonok.ru