JavaScript MVC 进修笔记（一）初识JS MVC

2019年8月26日 183次阅读 来源: JingDing

公然纪录进修JS MVC，不知道能对峙多久= =。以《基于MVC的JavaScript web富运用开辟》为重要进修材料。

什么是MVC

MVC 是一种设想形式，它将运用划分为3个部份：数据（模子）、展示层（视图）、用户交互层（控制器）。一个事宜的发作是如许的历程：

  • 用户和运用发生交互
  • 控制器的事宜处置惩罚器被触发
  • 控制器从模子中要求数据，并将其交给视图
  • 视图将数据显现给用户

模子

模子用来寄存运用的一切数据对象。

模子没必要晓得视图和控制器的细节，模子只需包括数据及直接和这些数据相干的逻辑。

任何事宜处置惩罚代码、视图模板，以及那些和模子无关的逻辑都应该断绝在模子以外。将模子和视图的代码混在一同，是违背MVC架构准绳的。模子是最应该从你的运用中解耦出来的部份。

当控制器从服务器抓取数据或建立新的纪录时，它就将数据包装成模子实例。也就是说，我们的数据是面向对象的（object oriented），任何定义在这个数据模子上的函数或逻辑
都能够直接被挪用。

因而，不要如许做：

var user = users["foo"];
destroyUser(user);

上面的代码没有定名空间的观点，而且不是面向对象的。如果在运用中定义了另一个destoryUser()函数的话，两个函数就会发生争执。我们应该确保全局变量和函数的个数尽量少.

而要如许做：

var user = User.find("foo");
user.destroy();

上面的代码中，destory()函数是寄存在定名空间User的实例中的。这类代码越发清楚，而且异常轻易做继续，相似destory()的这类函数就不用在每一个模子中都定义一遍了。

视图

视图层是显现给用户的，用户与之发生交互。在JavaScript 运用中，视图大都是由HTML、CSS和JavaScript模板构成的。除了模板中简朴的前提语句以外，视图不应该包括任何其他逻辑。

这并不是说MVC不允许包括视觉显现相干的逻辑，只需这部份逻辑没有定义在视图以内即可。我们将视觉显现逻辑归类为“视图助手”（helper）：和视图有关的自力的小型东西函数。

反例——formatDate()函数直接插入视图：

// template.html
<div>
    <script>
        function formatDate(date) {
            /* ... */
        };
    </script>

    ${ formatDate(this.date) }
</div>

应该如许做——一切视觉显现逻辑都包括在helper变量中，这是一个定名空间，能够防备争执并坚持代码清楚、可扩大：

// helper.js
var helper = {};
helper.formatDate = function(){ /* ... */ };

// template.html
<div>
    ${ helper.formatDate(this.date) }
</div>

控制器

控制器是模子和视图之间的纽带。控制器从视图取得事宜和输入，对它们举行处置惩罚（极可能包括模子），并响应地更新视图。当页面加载时，控制器会给视图增加事宜监听，比方监听表单提交或按钮点击。然后，当用户和运用发生交互时，控制器中的事宜触发器就最先工作了。

下面用jQuery完成一个例子：

var Controller = {};

// 运用匿名函数来封装一个作用域
(Controller.users = function($){

    var nameClick = function(){
        /* ... */
    };

    // 在页面加载时绑定事宜监听
    $(function(){
        $("#view .name").click(nameClick);
    });
})(jQuery);

上面的代码建立了users控制器，这个控制器是放在Controller变量下的定名空间。然后用了一个匿名函数封装了一个作用域，以防止对全局作用域形成污染。当页面加载时，顺序给视图元素绑定了点击事宜的监听。

    原文作者：JingDing
    原文地址: https://segmentfault.com/a/1190000002486248
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞