基于Node.js+socket.io+express做的简单的web在线聊天例子-WebTalk.zip

[](http://travis-ci.org/visionmedia/jade) # Jade - template engine Jade is a high performance template engine heavily influenced by [Haml](http://haml-lang.com) and implemented with JavaScript for [node](http://nodejs.org). ## Features - client-side support - great readability - flexible indentation - block-expansion - mixins - static includes - attribute interpolation - code is escaped by default for security - contextual error reporting at compile &amp; run time - executable for compiling jade templates via the command line - html 5 mode (using the _!!! 5_ doctype) - optional memory caching - combine dynamic and static tag classes - parse tree manipulation via _filters_ - template inheritance - block append / prepend - supports [Express JS](http://expressjs.com) out of the box - transparent iteration over objects, arrays, and even non-enumerables via `each` - block comments - no tag prefix - AST filters - filters - :stylus must have [stylus](http://github.com/LearnBoost/stylus) installed - :sass must have [sass.js](http://github.com/visionmedia/sass.js) installed - :less must have [less.js](http://github.com/cloudhead/less.js) installed - :markdown must have [markdown-js](http://github.com/evilstreak/markdown-js) installed or [node-discount](http://github.com/visionmedia/node-discount) - :cdata - :coffeescript must have [coffee-script](http://jashkenas.github.com/coffee-script/) installed - [Emacs Mode](https://github.com/brianc/jade-mode) - [Vim Syntax](https://github.com/digitaltoad/vim-jade) - [TextMate Bundle](http://github.com/miksago/jade-tmbundle) - [Screencasts](http://tjholowaychuk.com/post/1004255394/jade-screencast-template-engine-for-nodejs) - [html2jade](https://github.com/donpark/html2jade) converter ## Implementations - [php](http://github.com/everzet/jade.php) - [scala](http://scalate.fusesource.org/versions/snapshot/documentation/scaml-reference.html) - [ruby](http://github.com/stonean/slim) - [python](https://github.com/SyrusAkbary/pyjade) ## Installation via npm: npm install jade ## Browser Support To compile jade to a single file compatible for client-side use simply execute: $ make jade.js Alternatively, if uglifyjs is installed via npm (`npm install uglify-js`) you may execute the following which will create both files. However each release builds these for you. $ make jade.min.js By default Jade instruments templates with line number statements such as `__.lineno = 3` for debugging purposes. When used in a browser it's useful to minimize this boiler plate, you can do so by passing the option `{ compileDebug: false }`. The following template p Hello #{name} Can then be as small as the following generated function: ```js function anonymous(locals, attrs, escape, rethrow) { var buf = []; with (locals || {}) { var interp; buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>'); } return buf.join(""); } ``` Through the use of Jade's `./runtime.js` you may utilize these pre-compiled templates on the client-side _without_ Jade itself, all you need is the associated utility functions (in runtime.js), which are then available as `jade.attrs`, `jade.escape` etc. To enable this you should pass `{ client: true }` to `jade.compile()` to tell Jade to reference the helper functions via `jade.attrs`, `jade.escape` etc. ```js function anonymous(locals, attrs, escape, rethrow) { var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow; var buf = []; with (locals || {}) { var interp; buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>'); } return buf.join(""); } ``` ## Public API ```javascript var jade = require('jade'); // Compile a function var fn = jade.compile('string of jade', options); fn(locals); ``` ### Options - `self` Use a `self` namespace to hold the locals. _false by default_ - `locals` Local variable object - `filename` Used in exceptions, and required when using includes - `debug` Outputs tokens and function body generated - `compiler` Compiler to replace jade's default - `compileDebug` When `false` no debug instrumentation is compiled ## Syntax ### Line Endings **CRLF** and **CR** are converted to **LF** before parsing. ### Tags A tag is simply a leading word: html for example is converted to `<html></html>` tags can also have ids: div#container which would render `<div id="container"></div>` how about some classes? div.user-details renders `<div class="user-details"></div>` multiple classes? _and_ an id? sure: div#foo.bar.baz renders `<div id="foo" class="bar baz"></div>` div div div sure is annoying, how about: #foo .bar which is syntactic sugar for what we have already been doing, and outputs: `<div id="foo"></div><div class="bar"></div>` ### Tag Text Simply place some content after the tag: p wahoo! renders `<p>wahoo!</p>`. well cool, but how about large bodies of text: p | foo bar baz | rawr rawr | super cool | go jade go renders `<p>foo bar baz rawr.....</p>` interpolation? yup! both types of text can utilize interpolation, if we passed `{ name: 'tj', email: 'tj@vision-media.ca' }` to the compiled function we can do the following: #user #{name} &lt;#{email}&gt; outputs `<div id="user">tj &lt;tj@vision-media.ca&gt;</div>` Actually want `#{}` for some reason? escape it! p \#{something} now we have `<p>#{something}</p>` We can also utilize the unescaped variant `!{html}`, so the following will result in a literal script tag: - var html = "<script></script>" | !{html} Nested tags that also contain text can optionally use a text block: label | Username: input(name='user[name]') or immediate tag text: label Username: input(name='user[name]') Tags that accept _only_ text such as `script` and `style` do not need the leading `|` character, for example: html head title Example script if (foo) { bar(); } else { baz(); } Once again as an alternative, we may use a trailing '.' to indicate a text block, for example: p. foo asdf asdf asdfasdfaf asdf asd. outputs: <p>foo asdf asdf asdfasdfaf asdf asd. </p> This however differs from a trailing '.' followed by a space, which although is ignored by the Jade parser, tells Jade that this period is a literal: p . outputs: <p>.</p> It should be noted that text blocks should be doubled escaped. For example if you desire the following output. </p>foo\bar</p> use: p. foo\\bar ### Comments Single line comments currently look the same as JavaScript comments, aka "//" and must be placed on their own line: // just some paragraphs p foo p bar would output <!-- just some paragraphs --> <p>foo</p> <p>bar</p> Jade also supports unbuffered comments, by simply adding a hyphen: //- will not output within markup p foo p bar outputting <p>foo</p> <p>bar</p> ### Block Comments A block comment is legal as well: body // #content h1 Example outputting <body> <!-- <div id="content"> <h1>Example</h1> </div> --> </body> Jade supports conditional-comments as well, for example: head //if lt IE 8 script(src='/ie-sucks.js') outputs: <body> <!--[if lt IE 8]> <script src="/ie-sucks.js"></script> <![endif]--> </body> ### Nesting Jade supports nesting to define the tags in a natural way: ul li.first a(href