讲解JavaScript的Backbone.js框架的MVC结构设计理念(2)

(核心)视图:定义、管理、配置
模板:定义、配置、管理
组件:定义、配置、管理
(核心)用户事件配置、管理
用户输入校验、配置、管理
C 控制器/分发器

(核心)事件分发、模型分发、视图分发
不做数据处理、业务处理,即业务无关
扩展:权限控制、异常处理等
C是JSMVC框架的核心,实现集中式配置和管理,可以有多个控制器
工具库

主要是异步请求、DOM操作,可以依赖于jQuery等

Model指的是一条一条的数据,而集合Collection指的是对Model中的多条数据进行管理。

模型 Model
我们用Backbone.Model表示应用中所有数据,models中的数据可以创建、校验、销毁和保存到服务端。

对象赋值的方法
1、直接定义,设置默认值

Trigkit = Backbone.Model.extend({ initialize : function () { alert('hi!'); }, defaults:{ age : '22', profession : 'coder' } }); var coder = new Trigkit; alert(coder.get('age'));//22

2、 赋值时定义

<script type="text/javascript"> Trigkit = Backbone.Model.extend({ initialize : function () { alert('hi!'); } }); var t = new Trigkit; t.set({name :'huang',age : '10'}); alert(t.get('name')); </script>


对象中的方法

<script type="text/javascript" src="https://www.jb51.net/Underscore.js"></script> <script type="text/javascript" src="https://www.jb51.net/backbone-1.1.2.js"></script> <script type="text/javascript"> var Trigkit4 = Backbone.Model.extend({ initialize : function () { alert("hello world!"); }, defaults : { name : 'zhangsan', age : 21 }, aboutMe: function () { return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁'; } }); var t = new Trigkit4; alert(t.aboutMe()); </script>

当模型实例化时,他的initialize方法可以接受任意实例参数,其工作原理是backbone模型本身就是构造函数,所以可以使用new生成实例:

var User = Backbone.Model.extend({ initialize: function (name) { this.set({name: name}); } }); var user = new User('trigkit4'); alert(user.get('name'), 'trigkit4');//trigkit4

看下backbone的源码:

var Model = Backbone.Model = function(attributes, options) { var attrs = attributes || {}; options || (options = {}); this.cid = _.uniqueId('c'); this.attributes = {}; if (options.collection) this.collection = options.collection; if (options.parse) attrs = this.parse(attrs, options) || {}; attrs = _.defaults({}, attrs, _.result(this, 'defaults')); this.set(attrs, options); this.changed = {}; this.initialize.apply(this, arguments); }; initialize: function(){},//initialize是默认的空函数

Model 的事件绑定
为了能及时更新view,我们需要通过事件绑定机制来处理和响应用户事件:

<script type="text/javascript"> var Task = Backbone.Model.extend({ initialize: function () { this.on("change:name", function (model) { alert("my name is : " + model.get("name")); }); } }); var task = new Task({ name:"oldname", state:"working"}); task.set({name:"trigkit"}); // object.on(event, callback, [context]) </script> </head>

关于事件绑定,有on,off,trigger,once,listenTo,stopListening,listenToOnce等方法,具体参照:#Events

2016214155730521.png (600×470)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwysy.html