Jade和less 在WEB前端开发中的应用

1,593 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,593
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Jade和less 在WEB前端开发中的应用

  1. 1. JavaScript Node.js HAML Jade和less Jade在WEB前端开发中的应用 尹志翔 less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  2. 2. JavaScript Node.js HAML Jade浏览器端模版引擎JADE less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  3. 3. JavaScript 先聊聊JavaScript吧 Node.js• 网页:HTML+CSS+JavaScript+(其他 HAML 资源) Jade• 简单: – 不面向对象, – C语言族,(它的鼻祖叫C--) – 语法少, less – 类型少• 除了网页:WScript,ASP,Node.js CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  4. 4. JavaScriptJavaScript是用来做什么的? Node.js• 验证表单 HAML• 交互时向用户询问信息 Jade (prompt,alert,confirm…)• 弹出窗口 less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  5. 5. JavaScriptJavaScript被拿来做什么了 Node.js• 修复一些浏览器对一些样式的不兼容 HAML• 更丰富的控件 Jade• 实现动画! …• 比如: – 做一个IDE? less Cloud9 IDE CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  6. 6. 当人类已经阻止不了 JavaScript JavaScript Node.js• AJAX一脚踢破了浏览器与服务器之 HAML 间的那堵墙(也就是HTML) Jade – 注:AJAX=异步JavaScript和XML :服务器(化工厂) :HTML(瓶子) :数据(洗衣液) less CSS :AJAX(袋子) :浏览器(家庭主妇的储存室) Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  7. 7. 当人类已经阻止不了 JavaScript JavaScript Node.js• JavaScript代码量越来越大 HAML• 把垃圾都扔给JavaScript吧 Jade – ‘语义化的WEB设计’(WEB3.0的概念) – 而非‘面向对象的WEB设计’ – MVC的概念让前端心驰神往• 前端模版库的出现 – backbone.js less – spine.js CSS – jQuery Template Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  8. 8. JavaScript 顺便提一下node.js Node.js• 监听端口->HTTP请求->表单数据 HAML +URL->用JavaScript程序输出响应- Jade >HTTP响应• 用它做WEB应用程序通常还需要一 个WEB框架 – GeddyJS less – express.js … CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  9. 9. JavaScript Node.js HAML JadeJADE是啥? less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  10. 10. JavaScript一个为Node.js而生的模版引擎 Node.js HAML Jade less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  11. 11. JavaScript 一个HAML的衍生品 Node.js• HAML来自Ruby HAML – ERB来自Rails(一个基于Ruby的MVC框架) Jade – 当Ruby---一个缩进风格语言---的程序员遇上 ERB(内嵌式Ruby) less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  12. 12. JavaScript Node.js HAML JadeJADE能干啥? less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  13. 13. JavaScript将数据和模版变成HTML Node.js HAML :数据(洗衣液) Jade :Jade模版(空瓶子) less :HTML(装满了洗衣液的瓶子) CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  14. 14. JavaScript Node.js HAML Jade为啥用JADE? less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  15. 15. JavaScript 开发环境零配置 Node.js• 因为Jade编译器能在浏览器端运行 HAML – 开发主线使用JavaScript编写. Jade – 自适应Node.js/浏览器运行环境• 本地开发,使用任何WebServer less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  16. 16. 因为Jade的语法对设计人员友 JavaScript 好 Node.js• Jade语法非常接近CSS选择器语法 HAML – Jade对HAML语法的改进 Jade• Jade语法很简洁 less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  17. 17. JavaScript编译和运行分开 Node.js HAML Jade less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  18. 18. JavaScript 多种架构选择 Node.js• 浏览器端编译,运行(开发环境) HAML• 服务器端编译(优化),运行 Jade (express.js/Node.js中)• 部署编译,部署运行• 部署编译,浏览器端运行 less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  19. 19. JavaScript Node.js HAML Jade咱怎么用JADE? less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  20. 20. JavaScript 开发环境 Node.js• xxx.htm里不放任何内容 HAML• 将Jade模版储存为xxx.htm.jade与 Jade xxx.htm存放在一起,通过AJAX加载• 渲染Jade需要的数据通过数组的形 式在xxx.htm.js定义 – 通过AJAX加载 less – JSON格式 CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  21. 21. JavaScript 生产环境 Node.js• 将Jade模版提前编译为JavaScript函 HAML 数,内嵌在HTML页面之中. Jade• 在客户端运行. less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  22. 22. JavaScript Node.js HAML JadeCSS预处理器LESS less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  23. 23. JavaScript CSS-网页的垃圾堆 Node.js• ↓ CSS推出之前的HTML2.0 HAML Jade less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  24. 24. JavaScript CSS-网页的垃圾堆 Node.js• HTML3.2中的CSS--内联样式的滥用 HAML – 1997年的W3C主页: Jade http://web.archive.org/web/1997121022 0609/http://www.w3.org/ less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  25. 25. JavaScript CSS-网页的垃圾堆 Node.js• XHTML (2000年-现在) HAML• 嵌套结构有点复杂 Jade – 看看它的样式 表:http://www.w3school.com.cn/css/in dex.asp less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  26. 26. JavaScriptLess有啥用 Node.js HAML Jade less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  27. 27. JavaScriptLess有啥用 Node.js HAML Jade !!! less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  28. 28. JavaScript Less有哪些特性? Node.js• 嵌套! HAML• 变量! Jade• 混合(继承!)• 其他小功能 – 注释 – 引用 less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  29. 29. JavaScript Less有哪些特性? Node.js• 主线依然采用JavaScript进行开发,在浏 HAML 览器端运行! Jade• 很多实现和工具 – Node.js(主线) – 本地编译运行 – 在github上搜索less+css – ... less – 国人喜欢它: http://less.cnodejs.net/tools http://www.lesscss.net/ CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/
  30. 30. JavaScript 咱们咋用less Node.js• 开发环境中直接通过标签引用 HAML Jade• 生产环境中在部署时编译为CSS –… less CSS Jade和less在前端开发中的应用 尹志翔 http://zhixiang.in/

×