zoukankan      html  css  js  c++  java
  • 【javascript激增的思考04】MVC与Backbone.js(beta)

    前言

    最近整理了很多前端面试题的东西,今天又去参加了一次面试,不知各位烦不烦,我反正有点累了,于是我们今天继续回到我们前段时间研究的问题,我们再来看看MVC吧。

    什么是MVC

    又回到这个问题了,到底什么是MVC呢?

    MVC是一种设计模式,他将应用划分为:

    ① 数据(模型,model)

    ② 展现层(视图,view)

    ③ 用户交互(控制器,control)

    一个事件发生的过程是这样的:

    ① 用户和应用产生交互
    ② 控制器的事件处理器被触发
    ③ 控制器从模型中请求数据,并将其交给视图
    ④ 数据将数据呈现给用户
    
    以一个聊天呈现为例:
    
    ① 用户提交一个新的聊天信息
    ② 控制器的事件处理器被触发
    ③ 控制器创建一个新的聊天模型记录
    ④ 控制器更新视图
    ⑤ 用户看到聊天窗口新的信息

    以上的过程很简单,但是有复杂的情况,于是我们会清晰的分割各个部分,这样各个部分可以独立开发,方便测试与维护,对解耦有好处。

    模型

    模型用以存放应用的所有数据对象,比如一个User模型,用以存放用户列表、它们的属性及所有与模型有关的逻辑。

    模型不必知道视图与控制器的细节,模型只需要包含数据以及直接和这些数据相关的逻辑。

    任何事件处理代码,视图模板,以及那些和模型无关的逻辑都应该隔离刀模型以外。

    模型与视图代码混到一起是违法MVC规则的

    当控制器从服务器获取数据时,他就将数据包装成模型实例,来一个简单的例子,不然我们都晕了:

    1 var user = User.find('叶小钗');
    2 user.destroy();

    怎么样够简单吧,先不要在意这个,后面点我们还会讲到他。

    视图

    视图层是呈现给用户的,用户与之产生交互。

    在js中,视图大多是HTML+CSS+Javascript模板组成的,模板中除了简单的条件语句外,不要有其它逻辑。

    视图不必知道模型和控制器干了什么,视图中处理逻辑的代码应该少一点

    控制器

    控制器是视图与模型之间的纽带,控制器由视图获取事件和输入(事件来源于视图),对他们进行处理,并更新视图。

    当页面加载时,控制器会给视图添加事件监听,当用户和应用发生交互时,控制器中的事件触发器就开始工作了。

    var Controller = {};
    (Controller.users = function ($) {
        var nameClick = function () {};
        //在页面上增加事件监听
        $(function () {
            $('#view').click(nameClick);
        })
    })(jQuery);

    这坨莫名其妙的代码,就是我们的控制器啦。

    PS:现在各位觉得看着有点晕是很正常的,我研究了几次了都还是有点晕呢,你们不孕的话我就要哭了

    由于我们这里不是要详细的介绍MVC,所以就不多说了,后面点我们会有单独的系列研究MVC这个东西,我们进入BackBone的学习吧。

    什么是Backbone

    Backbone是构建javascript应用程序的一个优秀的类库,他简洁、轻量级但是他功能齐全,覆盖了所有基础功能,同时灵活性也很高。

    该类库提供了model、controller、view由此构成了我们构建应用程序的骨架。

    backbone只有4k,只提供了模型、事件、集合、视图、控制器和持久化等核心概念。

    PS:backbone依赖于underscore.js

    模型

    模型是保存应用程序数据的地方,我们可以把模型想象为对应用程序原始数据精心设计的抽象,并且添加了一些工具函数和事件。

    1 var User = Backbone.Model.extend({
    2     initialize: function () { }
    3 });

    extend第一个参数是一个对象,他成为了模型实例的属性,第二个参数是可选的类属性的哈希,多次调用extend可以生成模型的子类,他们将继承父亲所有的类和实例的属性。

    1 var User = Backbone.Model.extend({
    2     //实例属性
    3     instanceProperty: 'foo'
    4 }, {
    5     //类属性
    6     classProperty: 'bar'
    7 });

    当模型实例化时,他的initialize函数可接受任意实例参数,背后的工作原理是Backbone模型本身是构造函数,所以可以使用new生成一个新的实例:

    1 var User = Backbone.Model.extend({
    2     initialize: function (name) {
    3         this.set({name, name});
    4     }
    5 });
    6 var user = new User('叶小钗');

    PS:至于你们懂不懂,我反正是不懂了,所以继续学习下去吧,囧.....

    模型与属性

    使用set()和get()函数来设置和获取实例里的属性:

    user.set({name: '叶小钗'});

    可以使用validate函数验证一个属性:

     1 var User = Backbone.Model.extend({
     2     validate: function (atts) {
     3         if(!atts.email || atts.email.length < 3) {
     4             return 'email error';
     5         }
     6     }
     7 });
     8 var user = new User();
     9 user.bind('error', function (model, error) {
    10 //错误处理
    11 });
    12 //这样就会报错
    13 user.set({email: 'ss'});

    结语

    这块有点晦涩,我们今天暂时到这里,我私下研究下再写了。。。

  • 相关阅读:
    学习进度条
    学期总结
    实验四主存空间的分配和回收
    学术诚信与职业道德
    《构建之法》第8,9,10章 读后感
    实验三 进程调度模拟程序
    团队项目:学习四则运算,团队准备 3.0
    团队项目:学习四则运算,团队准备 2.0
    "数学口袋精灵"bug(团队)
    实验二作业调度模拟程序
  • 原文地址:https://www.cnblogs.com/yexiaochai/p/3165396.html
Copyright © 2011-2022 走看看