test

1 911 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 911
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

test

  1. 1. JavaScript Node.js HAML Jade和less Jade在WEB前端开发中的应用 尹志翔 less CSS Jade和less在前端开发中的应用
  2. 2. JavaScript Node.js HAML Jade浏览器端模版引擎JADE less CSS Jade和less在前端开发中的应用
  3. 3. JavaScript 先聊聊JavaScript吧 Node.js• 网页:HTML+CSS+JavaScript+(其他 HAML 资源) Jade• 简单: – 不面向对象, – C语言族,(它的鼻祖叫C--) – 语法少, less – 类型少• 除了网页:WScript,ASP,Node.js CSS Jade和less在前端开发中的应用
  4. 4. JavaScriptJavaScript是用来做什么的? Node.js• 验证表单 HAML• 交互时向用户询问信息 Jade (prompt,alert,confirm…)• 弹出窗口 less CSS Jade和less在前端开发中的应用
  5. 5. JavaScript JavaScript被拿来做什么 Node.js• 修复一些浏览器对一些样式的不兼容 HAML• 更丰富的控件 Jade• 实现动画! less CSS Jade和less在前端开发中的应用
  6. 6. 当人类已经阻止不了 JavaScript JavaScript Node.js• AJAX一脚踢破了浏览器与服务器之 HAML 间的那堵墙(也就是HTML) Jade – 注:AJAX=异步JavaScript和XML :服务器(化工厂) :HTML(瓶子) :数据(洗衣液) less CSS :AJAX(袋子) :浏览器(家庭主妇的储存室) Jade和less在前端开发中的应用
  7. 7. 当人类已经阻止不了 JavaScript JavaScript Node.js• 前端模版库的出现 HAML – backbone.js Jade – spine.js – jQuery Template• JavaScript代码量越来越大 less CSS Jade和less在前端开发中的应用
  8. 8. JavaScript 顺便提一下node.js Node.js• 监听端口->HTTP请求->表单数据 HAML +URL->用JavaScript程序输出响应- Jade >HTTP响应• 用它做WEB应用程序通常还需要一 个WEB框架 – GeddyJS less – express.js … CSS Jade和less在前端开发中的应用
  9. 9. JavaScript Node.js HAML JadeJADE是啥? less CSS Jade和less在前端开发中的应用
  10. 10. JavaScript一个Node.js模版引擎 Node.js HAML Jade less CSS Jade和less在前端开发中的应用
  11. 11. JavaScript 一个HAML的衍生品 Node.js• HAML来自Ruby HAML – ERB来自Rails(一个基于Ruby的MVC框架) Jade – 当Ruby---一个缩进风格语言---的程序员遇上 ERB(内嵌式Ruby) less CSS Jade和less在前端开发中的应用
  12. 12. JavaScript Node.js HAML JadeJADE能干啥? less CSS Jade和less在前端开发中的应用
  13. 13. JavaScript将数据和模版变成HTML Node.js HAML :数据(洗衣液) Jade :Jade模版(空瓶子) less :HTML(装满了洗衣液的瓶子) CSS Jade和less在前端开发中的应用
  14. 14. JavaScript Node.js HAML Jade为啥用JADE? less CSS Jade和less在前端开发中的应用
  15. 15. JavaScript 开发环境零配置 Node.js• 因为Jade编译器能在浏览器端运行 HAML – 开发主线使用JavaScript编写. Jade – 自适应Node.js/浏览器运行环境• 本地开发,使用任何WebServer less CSS Jade和less在前端开发中的应用
  16. 16. 因为Jade的语法对设计人员友 JavaScript 好 Node.js• Jade语法非常接近CSS选择器语法 HAML – Jade对HAML语法的改进 Jade• Jade语法很简洁 less CSS Jade和less在前端开发中的应用
  17. 17. JavaScript编译和运行分开 Node.js HAML Jade less CSS Jade和less在前端开发中的应用
  18. 18. JavaScript 多种架构选择 Node.js• 浏览器端编译,运行(开发环境) HAML• 服务器端编译(优化),运行 Jade (express.js/Node.js中)• 部署编译,部署运行• 部署编译,浏览器端运行 less CSS Jade和less在前端开发中的应用
  19. 19. JavaScript Node.js HAML Jade咱怎么用JADE? less CSS Jade和less在前端开发中的应用

×