JavaScript MVC 学习笔记（一）初识JS MVC

xorpay 发布于2019-08-22 10:55 / 1853人阅读

摘要：以基于的富应用开发为主要学习资料。下面用实现一个例子使用匿名函数来封装一个作用域在页面加载时绑定事件监听上面的代码创建了控制器，这个控制器是放在变量下的命名空间。然后用了一个匿名函数封装了一个作用域，以避免对全局作用域造成污染。

公开记录学习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

    

    ${ formatDate(this.date) }

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

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

// template.html

    ${ helper.formatDate(this.date) }

控制器

控制器是模型和视图之间的纽带。控制器从视图获得事件和输入，对它们进行处理（很可能包含模型），并相应地更新视图。当页面加载时，控制器会给视图添加事件监听，比如监听表单提交或按钮点击。然后，当用户和应用产生交互时，控制器中的事件触发器就开始工作了。

下面用jQuery实现一个例子：

var Controller = {};

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

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

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

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

云服务器 GPU云服务器 _JavaScript_MVC js+mvc mvc js 数据 js mvc 引入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91460.html

Backbone.js学习笔记（一）

摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

FrancisSoung 2019-08-21 10:21 评论0 收藏0
初识React

摘要：初识依稀记得那年参加线下活动，第一次听说这个词语，当时的主讲人是郭达峰，他播放了一个关于及的性能对比视频。合成事件会以事件委托的方式绑定到组件最上层，并且在组件卸载的时候自动销毁绑定的事件。初识React 依稀记得2015那年参加线下活动，第一次听说React这个词语，当时的主讲人是郭达峰，他播放了一个关于ember、angular及react的性能对比视频： React.js Co...

kuangcaibao 2019-08-21 14:47 评论0 收藏0
JavaScript MVC 学习笔记（四）类的使用(下)

摘要：基于函数进行调用的，用来确保函数是在指定的值所在的上下文中调用的。添加私有函数目前上面为类库添加的属性都是公开的，可以被随时修改。以基于的富应用开发为主要学习资料。控制类库的作用域在类和实例中都添加proxy函数，可以在事件处理程序之外处理函数的时候保持类的作用域。下面是不用proxy的办法： var Class = function(parent){ var klas...

Rango 2019-08-21 10:25 评论0 收藏0
JavaScript MVC 学习笔记（六）模型之ORM

摘要：模型应当从视图和控制器中解耦出来。与数据操作和行为相关的逻辑都应当放入模型中，通过命名空间进行管理。在应用中，对象关系映射也是一种非常有用的技术，它可以用来做数据管理及用做模型。以基于的富应用开发为主要学习资料。 MVC 和命名空间要确保应用中的视图、状态和数据彼此清晰分离，才能让架构更加整洁有序且更加健壮。模型应当从视图和控制器中解耦出来。与数据操作和行为相关的逻辑都应当放入模型...

mrcode 2019-08-22 10:56 评论0 收藏0
JavaScript MVC 学习笔记（三）类的使用（中）

摘要：实际上，可以将其理解为某种形式的继承。如果上下文是，则使用全局对象代替。例如的第个参数是上下文，后续是实际传入的参数序列中允许更换上下文是为了共享状态，尤其是在事件回调中。公开记录学习JS MVC，不知道能坚持多久= =。以《基于MVC的JavaScript web富应用开发》为主要学习资料。接上一篇类的学习，发现实在是看晕了，有些例子是能看懂在干嘛，但是不知道为什么这样做，有的甚至...

DandJ 2019-08-22 10:56 评论0 收藏0