0
前端单元测试初体验 <ul><li>关于前端引入单元测试的作用和意义 </li></ul><ul><li>----20120216 twitter@asapphire  </li></ul>
提纲挈领 <ul><li>Why  Test.   Why   Unit Test.  Why  Me </li></ul><ul><li>How Refactor  </li></ul>1/15
Why Test <ul><ul><li>For Team </li></ul></ul><ul><ul><li>建立起重构的基础 </li></ul></ul><ul><ul><li>建立起对代码质量的信心 </li></ul></ul>2/15
Why Unit Test <ul><ul><li>First Language </li></ul></ul><ul><ul><li>Difficult to Code </li></ul></ul>3/15
<ul><ul><li>  Why Me </li></ul></ul><ul><ul><li>现状还好 没 bug  时间 25%-50%  资源有限 </li></ul></ul>4/15
Why Me <ul><ul><li>  Thinking  in Javascript </li></ul></ul><ul><ul><li>提升个人功力 </li></ul></ul>5/15
Why Me <ul><ul><li>设计模式 </li></ul></ul><ul><ul><li>MVC / MVP / MCRV / MVVM… </li></ul></ul><ul><ul><li>Model  -  模型 业务层 / ...
Why Me <ul><ul><li>框架 </li></ul></ul>JavaScript MVC SproutCore BackboneJS  YUI App Framework … Single Page App 7/15
Why Me <ul><ul><li>分层的思想 </li></ul></ul><ul><ul><li>不一定采用分层的结构 - 额外开销 </li></ul></ul>8/15
Why Me 9/15
Why Me <ul><ul><li>分层和分离的代码更: </li></ul></ul><ul><ul><li>松耦合 </li></ul></ul><ul><ul><li>易于重用 </li></ul></ul><ul><ul><li>… ...
How Refactor <ul><ul><li>Thinking </li></ul></ul><ul><ul><li>这个方法应该属于哪个层 </li></ul></ul><ul><ul><li>这个方法是否只属于一个 层 </li></u...
<ul><ul><li>对比源文件  </li></ul></ul><ul><ul><li>page.js </li></ul></ul>How Refactor 12/15
How Refactor <ul><ul><li>视图与逻辑分离 </li></ul></ul>13/15
<ul><li>Mock </li></ul><ul><li>应用框架推进单元测试 </li></ul><ul><li>… </li></ul>问题和反馈 14/15
结束语 <ul><li>请关注前端单元测试 </li></ul>15/15
Upcoming SlideShare
Loading in...5
×

前端单元测试初体验

1,136

Published on

关于前端引入单元测试的作用和意义

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,136
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "前端单元测试初体验"

  1. 1. 前端单元测试初体验 <ul><li>关于前端引入单元测试的作用和意义 </li></ul><ul><li>----20120216 twitter@asapphire </li></ul>
  2. 2. 提纲挈领 <ul><li>Why Test. Why Unit Test. Why Me </li></ul><ul><li>How Refactor </li></ul>1/15
  3. 3. Why Test <ul><ul><li>For Team </li></ul></ul><ul><ul><li>建立起重构的基础 </li></ul></ul><ul><ul><li>建立起对代码质量的信心 </li></ul></ul>2/15
  4. 4. Why Unit Test <ul><ul><li>First Language </li></ul></ul><ul><ul><li>Difficult to Code </li></ul></ul>3/15
  5. 5. <ul><ul><li> Why Me </li></ul></ul><ul><ul><li>现状还好 没 bug 时间 25%-50% 资源有限 </li></ul></ul>4/15
  6. 6. Why Me <ul><ul><li> Thinking in Javascript </li></ul></ul><ul><ul><li>提升个人功力 </li></ul></ul>5/15
  7. 7. Why Me <ul><ul><li>设计模式 </li></ul></ul><ul><ul><li>MVC / MVP / MCRV / MVVM… </li></ul></ul><ul><ul><li>Model - 模型 业务层 / 数据层 </li></ul></ul><ul><ul><li>View - 界面 表现层 </li></ul></ul><ul><ul><li>Controller - 响应 Event 用户交互 </li></ul></ul><ul><ul><li>Renderer - 渲染 View </li></ul></ul><ul><ul><li>Presenter - 将 model 与 view 绑定 </li></ul></ul><ul><ul><li>ViewModel - 业务层 </li></ul></ul>6/15
  8. 8. Why Me <ul><ul><li>框架 </li></ul></ul>JavaScript MVC SproutCore BackboneJS YUI App Framework … Single Page App 7/15
  9. 9. Why Me <ul><ul><li>分层的思想 </li></ul></ul><ul><ul><li>不一定采用分层的结构 - 额外开销 </li></ul></ul>8/15
  10. 10. Why Me 9/15
  11. 11. Why Me <ul><ul><li>分层和分离的代码更: </li></ul></ul><ul><ul><li>松耦合 </li></ul></ul><ul><ul><li>易于重用 </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>易于单元测试 [model] </li></ul></ul>10/15
  12. 12. How Refactor <ul><ul><li>Thinking </li></ul></ul><ul><ul><li>这个方法应该属于哪个层 </li></ul></ul><ul><ul><li>这个方法是否只属于一个 层 </li></ul></ul><ul><ul><li>这个方法是否只做了一件事 </li></ul></ul><ul><ul><li>… </li></ul></ul>11/15
  13. 13. <ul><ul><li>对比源文件 </li></ul></ul><ul><ul><li>page.js </li></ul></ul>How Refactor 12/15
  14. 14. How Refactor <ul><ul><li>视图与逻辑分离 </li></ul></ul>13/15
  15. 15. <ul><li>Mock </li></ul><ul><li>应用框架推进单元测试 </li></ul><ul><li>… </li></ul>问题和反馈 14/15
  16. 16. 结束语 <ul><li>请关注前端单元测试 </li></ul>15/15
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×