前端MVC与Backbone.js-优快云博客

本文链接：https://blog.youkuaiyun.com/lulalahappy123/article/details/50502488

项目里有自己开发的框架，为了深入理解，先学习一下前端的MVC模式及backbone和Angular

MVC:与后台的MVC不同，后台众所周知就是Model对应数据库部分，view就是页面部分，controller 就是控制器拦截请求，分配到相应图层。

至于前端的MVC 我现在刚刚了解，可能有了解的不准确的地方。

许多前端框架的MVC,如backbone 分为 Models, Views, Collections

前端MVC的话则是这样的（前端其实大部分是MV+X，不一定有Controller):

顾名思义：

Models 还是对应数据部分，具体可以表明是页面的文本框输入数值或是点击按钮，或者是ajax里面的数据等；可以把数据请求和数据操作放在model中;也就是说，数据层可以从ajax拿到数据，也可以从页面拿到

View ：视图的改变，展示给用户

而controller 如事件绑定，实现相应操作。C的逻辑代码则存放在JS中.

backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。

可以先看一下backbone.js的入门教程 Backboen.js入门学习

这里还要补充一点，就是关于服务器的异步操作都是通过Backbone.sync这个方法来完成的，调用这个方法的时候会自动的传递一个参数过去，根据参数向服务器端发送对应的请求。比如你save，backbone会判断你的这个对象是不是新的，如果是新创建的则参数为create，如果是已存在的对象只是进行了改变，那么参数就为update，如果你调用fetch方法，那参数就是read，如果是destory，那么参数就是delete。也就是所谓的CRUD ("create", "read", "update", or "delete")，而这四种参数对应的请求类型为POST，GET，PUT，DELETE。你可以在服务器根据这个request类型，来做出相应的CRUD操作。

关于url和urlRoot的事情了，如果你设置了url，那么你的CRUD都会发送对应请求到这个url上，但是这样又一个问题，就是delete请求，发送了请求，但是却没有发送任何数据，那么你在服务器端就不知道应该删除哪个对象（记录），所以这里又一个urlRoot的概念，你设置了urlRoot之后，你发送PUT和DELETE请求的时候，其请求的url地址就是：/baseurl/[model.id]，这样你就可以在服务器端通过对url后面值的提取更新或者删除对应的对象

VIEW:view的主要应用就是绑定事件，处理业务，渲染页面。

有template和装template的容器；

容器：用字典格式定义el, el引用DOM的一些元素，如模板容器；需要new一个对象

所有模块定义都一样，如

 initialize: function(){

        alert('init a SearchView');

    }

template:需要underscore

_.template($("#search_template").html(),{})

来定义模板，{}中可以传递字典参数

加载模板

 $(this.el).html(template);

还可以绑定事件，原来绑定事件常用：

$("input[type=button]").bind('click',function(){})

现在可以在extend里直接定义方法

 events:{  //就是在这里绑定的

        'click input[type=button]' : 'doSearch'  //定义类型为button的input标签的点击事件，触发函数doSearch

    },

Model

初始化赋值

一是用defaults:{}定义对象；

另一种是用.set({}) set对象；

获取用.get()

数据保存可以用save POST到url

可以先定义url

url:'/save/',

var man = new Man;;
man.set({name:'the5fire'});
man.save();

获取数据可以用fetch

var man = new Man;;
man1.fetch({url:'/getmans/',success:function(model,response){})

Collection

定义model (类似于一个类)后只需要

BookShelf = Backbone.Collection.extend({

model : Book

});

定义了collections

然后每个new 出的model对象 add到collections里即可

此外还有remove方法

Router主要是链接问题

 var AppRouter = Backbone.Router.extend({
            routes: {
                "posts/:id" : "getPost",
                "*actions" : "defaultRoute"
            },
            getPost: function(id) {
                alert(id);
            },
            defaultRoute : function(actions){
                alert(actions);
            }
        });

        var app_router = new AppRouter;

        Backbone.history.start();