OLD | NEW |
1 <div id="pageData-name" class="pageData">MVC Architecture</div> | 1 <h1>MVC Architecture</h1> |
2 <div id="pageData-showTOC" class="pageData">true</div> | 2 |
3 | 3 |
4 <p> | 4 <p> |
5 As modern browsers become more powerful with rich features, | 5 As modern browsers become more powerful with rich features, |
6 building full-blown web applications in JavaScript is not only feasible, | 6 building full-blown web applications in JavaScript is not only feasible, |
7 but increasingly popular. | 7 but increasingly popular. |
8 Based on | 8 Based on |
9 <a href="http://httparchive.org/trends.php?s=intersection&minlabel=Jan+20+2011&m
axlabel=Jan+15+2012">trends</a> | 9 <a href="http://httparchive.org/trends.php?s=intersection&minlabel=Jan+20+2011&m
axlabel=Jan+15+2012">trends</a> |
10 on <a href="http://httparchive.org/">HTTP Archive</a>, | 10 on <a href="http://httparchive.org/">HTTP Archive</a>, |
11 deployed JavaScript code size has grown 45% over the course of the year. | 11 deployed JavaScript code size has grown 45% over the course of the year. |
12 </p> | 12 </p> |
13 | 13 |
14 <img src="../images/jstransferrequests.png" | 14 <img src="{{static}}/images/jstransferrequests.png" |
15 width="568" | 15 width="568" |
16 height="292" | 16 height="292" |
17 alt="JS transfer size and JS requests"> | 17 alt="JS transfer size and JS requests"> |
18 | 18 |
19 <p> | 19 <p> |
20 With JavaScript's popularity climbing, | 20 With JavaScript's popularity climbing, |
21 our client-side applications are much more complex than before. | 21 our client-side applications are much more complex than before. |
22 Application development requires collaboration from multiple developers. | 22 Application development requires collaboration from multiple developers. |
23 Writing <strong>maintainable</strong> and | 23 Writing <strong>maintainable</strong> and |
24 <strong>reusable</strong> code is crucial in the new web app era. | 24 <strong>reusable</strong> code is crucial in the new web app era. |
(...skipping 22 matching lines...) Expand all Loading... |
47 MVC offers architectural benefits over standard JavaScript — | 47 MVC offers architectural benefits over standard JavaScript — |
48 it helps you write better organized, and therefore more maintainable code. | 48 it helps you write better organized, and therefore more maintainable code. |
49 This pattern has been used and extensively tested | 49 This pattern has been used and extensively tested |
50 over multiple languages and generations of programmers. | 50 over multiple languages and generations of programmers. |
51 </p> | 51 </p> |
52 | 52 |
53 <p> | 53 <p> |
54 MVC is composed of three components: | 54 MVC is composed of three components: |
55 </p> | 55 </p> |
56 | 56 |
57 <img src="../images/mvc.png" | 57 <img src="{{static}}/images/mvc.png" |
58 width="466" | 58 width="466" |
59 height="303" | 59 height="303" |
60 alt="model-view-controller"> | 60 alt="model-view-controller"> |
61 | 61 |
62 <h3>Model</h3> | 62 <h3>Model</h3> |
63 | 63 |
64 <p> | 64 <p> |
65 Model is where the application’s data objects are stored. | 65 Model is where the application’s data objects are stored. |
66 The model doesn’t know anything about views and controllers. | 66 The model doesn’t know anything about views and controllers. |
67 When a model changes, typically it will notify its observers that a change has o
ccurred. | 67 When a model changes, typically it will notify its observers that a change has o
ccurred. |
68 </p> | 68 </p> |
69 | 69 |
70 <p> | 70 <p> |
71 To understand this further, let’s use the Todo list app, a simple, one page web
app that tracks your task list. | 71 To understand this further, let’s use the Todo list app, a simple, one page web
app that tracks your task list. |
72 </p> | 72 </p> |
73 | 73 |
74 <br> | 74 <br> |
75 | 75 |
76 <img src="../images/todos.png" | 76 <img src="{{static}}/images/todos.png" |
77 width="444" | 77 width="444" |
78 height="366" | 78 height="366" |
79 alt="model-view-controller"> | 79 alt="model-view-controller"> |
80 | 80 |
81 <p> | 81 <p> |
82 The model here represents attributes associated | 82 The model here represents attributes associated |
83 with each todo item such as description and status. | 83 with each todo item such as description and status. |
84 When a new todo item is created, | 84 When a new todo item is created, |
85 it is stored in an instance of the model. | 85 it is stored in an instance of the model. |
86 </p> | 86 </p> |
(...skipping 232 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
319 | 319 |
320 <ul> | 320 <ul> |
321 <li><a href="http://www.amazon.com/JavaScript-Web-Applications-Alex-MacC
aw/dp/144930351X">JavaScript Web Applications</a> | 321 <li><a href="http://www.amazon.com/JavaScript-Web-Applications-Alex-MacC
aw/dp/144930351X">JavaScript Web Applications</a> |
322 (By Alex MacCaw)</li> | 322 (By Alex MacCaw)</li> |
323 <li><a href="http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/d
p/0596806752/ref=pd_sim_b_2">JavaScript Patterns</a> | 323 <li><a href="http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/d
p/0596806752/ref=pd_sim_b_2">JavaScript Patterns</a> |
324 (By Stoyan Stefonov)</li> | 324 (By Stoyan Stefonov)</li> |
325 <li><a href="http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Za
kas/dp/1449327680">Maintainable JavaScript</a> | 325 <li><a href="http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Za
kas/dp/1449327680">Maintainable JavaScript</a> |
326 (By Nicolas Z. Zakas)</li> | 326 (By Nicolas Z. Zakas)</li> |
327 </ul> | 327 </ul> |
328 | 328 |
329 <p class="backtotop"><a href="#top">Back to top</a></p> | 329 <p class="backtotop"><a href="#top">Back to top</a></p> |
330 | |
OLD | NEW |