1. JavaScript
Node.js
HAML
Jade和less Jade
在WEB前端开发中的应用
尹志翔
less
CSS
Jade和less在前端开发中的应用

2. JavaScript
Node.js
HAML
Jade
浏览器端模版引擎
JADE less
CSS
Jade和less在前端开发中的应用

3. JavaScript
先聊聊JavaScript吧
Node.js
• 网页:HTML+CSS+JavaScript+(其他 HAML
资源) Jade
• 简单:
– 不面向对象,
– C语言族,(它的鼻祖叫C--)
– 语法少, less
– 类型少
• 除了网页:WScript,ASP,Node.js
CSS
Jade和less在前端开发中的应用

4. JavaScript
JavaScript是用来做什么的?
Node.js
• 验证表单 HAML
• 交互时向用户询问信息 Jade
(prompt,alert,confirm…)
• 弹出窗口
less
CSS
Jade和less在前端开发中的应用

5. JavaScript
JavaScript被拿来做什么
Node.js
• 修复一些浏览器对一些样式的不兼容 HAML
• 更丰富的控件 Jade
• 实现动画!
less
CSS
Jade和less在前端开发中的应用

6. 当人类已经阻止不了
JavaScript
JavaScript Node.js
• AJAX一脚踢破了浏览器与服务器之 HAML
间的那堵墙(也就是HTML) Jade
– 注:AJAX=异步JavaScript和XML
:服务器(化工厂)
:HTML(瓶子)
:数据(洗衣液) less
CSS
:AJAX(袋子) :浏览器(家庭主妇的储存室)
Jade和less在前端开发中的应用

7. 当人类已经阻止不了
JavaScript
JavaScript Node.js
• 前端模版库的出现 HAML
– backbone.js Jade
– spine.js
– jQuery Template
• JavaScript代码量越来越大
less
CSS
Jade和less在前端开发中的应用

8. JavaScript
顺便提一下node.js
Node.js
• 监听端口->HTTP请求->表单数据 HAML
+URL->用JavaScript程序输出响应- Jade
>HTTP响应
• 用它做WEB应用程序通常还需要一
个WEB框架
– GeddyJS
less
– express.js
… CSS
Jade和less在前端开发中的应用

9. JavaScript
Node.js
HAML
Jade
JADE是啥? less
CSS
Jade和less在前端开发中的应用

10. JavaScript
一个Node.js模版引擎
Node.js
HAML
Jade
less
CSS
Jade和less在前端开发中的应用

11. JavaScript
一个HAML的衍生品
Node.js
• HAML来自Ruby HAML
– ERB来自Rails(一个基于Ruby的MVC框架) Jade
– 当Ruby---一个缩进风格语言---的程序员遇上
ERB(内嵌式Ruby)
less
CSS
Jade和less在前端开发中的应用

12. JavaScript
Node.js
HAML
Jade
JADE能干啥? less
CSS
Jade和less在前端开发中的应用

13. JavaScript
将数据和模版变成HTML
Node.js
HAML
:数据(洗衣液) Jade
:Jade模版(空瓶子)
less
:HTML(装满了洗衣液的瓶子) CSS
Jade和less在前端开发中的应用

14. JavaScript
Node.js
HAML
Jade
为啥用JADE? less
CSS
Jade和less在前端开发中的应用

15. JavaScript
开发环境零配置
Node.js
• 因为Jade编译器能在浏览器端运行 HAML
– 开发主线使用JavaScript编写. Jade
– 自适应Node.js/浏览器运行环境
• 本地开发,使用任何WebServer
less
CSS
Jade和less在前端开发中的应用

16. 因为Jade的语法对设计人员友
JavaScript
好 Node.js
• Jade语法非常接近CSS选择器语法 HAML
– Jade对HAML语法的改进 Jade
• Jade语法很简洁
less
CSS
Jade和less在前端开发中的应用

17. JavaScript
编译和运行分开
Node.js
HAML
Jade
less
CSS
Jade和less在前端开发中的应用

18. JavaScript
多种架构选择
Node.js
• 浏览器端编译,运行(开发环境) HAML
• 服务器端编译(优化),运行 Jade
(express.js/Node.js中)
• 部署编译,部署运行
• 部署编译,浏览器端运行
less
CSS
Jade和less在前端开发中的应用

19. JavaScript
Node.js
HAML
Jade
咱怎么用JADE? less
CSS
Jade和less在前端开发中的应用