思洋互动网站建设学前班

视图

视图层是呈现给用户的，用户与之产生交互。在JavaScript 应用中，视图大都是由HTML、CSS 和JavaScript 模板组成的。除了模板中简单的条件语句之外，视图不应当包含任何其他逻辑。

实际上，和模型类似，视图也应当从应用的其他部分中解耦出来。视图不必知晓模型和控制器中的细节，它们是相互独立的。将逻辑混入视图之中是编程的大忌。

这并不是说MVC 不允许包含视觉呈现相关的逻辑，只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“视图助手”（helper）：和视图有关的独立的小型工具函数。

来看下面的例子，其在视图中包含了逻辑，这是一个反例，平时不应当这样做：

1. // template.html  
2. <div> 
3. <script> 
4. function formatDate(date) {  
5. /* ... */  
6. };  
7. </script> 
8. ${ formatDate(this.date) }  
9. </div> 

广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司

在这段代码中，我们把formatDate() 函数直接插入视图中，这违反了MVC 的原则，结果导致标签看上去像大杂烩一样不可维护。可以将视觉呈现逻辑剥离出来放入视图助手中，正如下面的代码就避免了这个问题，可以让这个应用的结构满足MVC。

广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司

1. // helper.js  
2. var helper = {};  
3. helper.formatDate = function(){ /* ... */ };  
4. // template.html  
5. <div> 
6. ${ helper.formatDate(this.date) }  
7. </div> 

此外，所有视觉呈现逻辑都包含在helper 变量中，这是一个命名空间，可以防止冲突并保持代码清晰、可扩展。

不要太在意视图和模板的细节，我们会在第5 章中有详细讲述。本小节的目的只是简单介绍视图和MVC 架构模式之间的联系。