首页 > 代码库 > Backbone学习记录（1）

Backbone学习记录（1）

2024-07-19 00:08:19   211人阅读

去年买的《基于MVC的javascript Web富应用开发》，拖到现在还没看完，作者介绍了三个MVC框架，Spine ,backbone和javascriptMVC。1和2在国内的流行度，不高，我就只打算学backbone了。

backbone依赖于underscore.js，所以在引入的时候需要先引underscore -_-#
=>  Uncaught TypeError: Cannot call method ‘each‘ of undefined

Backbone对象

console.log(Backbone);/*{    $: function ( selector, context ) {},    Collection: function (models, options) {},    Events: Object,    History: function () {},    Model: function (attributes, options) {},    Router: function (options) {},    VERSION: "1.1.2",    View: function (options) {},    ajax: function () {},    bind: function (name, callback, context) {},    emulateHTTP: false,    emulateJSON: false,    history: Backbone.History,    listenTo: function (obj, name, callback) {},    listenToOnce: function (obj, name, callback) {},    noConflict: function () {},    off: function (name, callback, context) {},    on: function (name, callback, context) {},    once: function (name, callback, context) {},    stopListening: function (obj, name, callback) {},    sync: function (method, model, options) {},    trigger: function (name) {},    unbind: function (name, callback, context) {},    __proto__: Object}*/

 


Model和Model.extend

看一下Backbone的Model构造器

  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);  };

options用第2种写法的原因是其性能更好，如果options存在，就可避免一次赋值的操作

options=options||{};//1options|(options={});//2

cid属性不知道是干嘛的，为什么要把attributes属性留出来？以及中间那一大堆都在干嘛，最后是调用了initialize方法做初始化工作？

keys(Backbone.Model)//["extend"]
Model有一个静态方法extend：没看过underscore,源码以后再看 ~~~~(>_<)~~~~ 
总之，第一个参数对象的属性都被传到了extend生产的构造器的原型上，第二个参数对象的属性都成了extend生成的构造器的静态属性
  var extend = function(protoProps, staticProps) {    var parent = this;    var child;    // The constructor function for the new subclass is either defined by you    // (the "constructor" property in your `extend` definition), or defaulted    // by us to simply call the parent‘s constructor.    if (protoProps && _.has(protoProps, ‘constructor‘)) {      child = protoProps.constructor;    } else {      child = function(){ return parent.apply(this, arguments); };    }    // Add static properties to the constructor function, if supplied.    _.extend(child, parent, staticProps);    // Set the prototype chain to inherit from `parent`, without calling    // `parent`‘s constructor function.    var Surrogate = function(){ this.constructor = child; };    Surrogate.prototype = parent.prototype;    child.prototype = new Surrogate;    // Add prototype properties (instance properties) to the subclass,    // if supplied.    if (protoProps) _.extend(child.prototype, protoProps);    // Set a convenience property in case the parent‘s prototype is needed    // later.    child.__super__ = parent.prototype;    return child;  };
var User1=Backbone.Model.extend({});var User2=Backbone.Model.extend({‘initalize‘:function(){console.log(‘init ing‘)}});var user1=new User1();var user2=new User2();

cid似乎是实例的标志。对比user1和user2,可知，Backbone.Model.extend构造器传入的第一个参数（对象）属性添加到了原型链上。



Backbone.Model.extend生成的User2构造器，比如这里，在实例化User2的时候传入{‘name‘:‘susan‘}，这些键值对最后被保存在了实例的attributes属性中。

 

var User4=Backbone.Model.extend({‘initalize‘:function(){console.log(‘init ing‘)}},{‘checkFn‘:function(){console.log("check fn ing")}});keys(User4);//["extend", "checkFn", "__super__"]

 这里可以看到，checkFn确实是作为了User4的静态属性。


set 和 get方法

var User1=Backbone.Model.extend({});var user1=new User1({‘name‘:‘susan‘});user1.get(‘name‘);//"susan"

从这里可以看到 new User1()的时候传入一个对象参数，等同于user1.set()方法 ？

set的两种用法 ： set(name,value) 与 set({name:value})

user1.set(‘name‘,‘lily‘);user1.get(‘name‘);//lilyuser1.set({‘name‘:‘lucy‘,‘age‘:‘25‘});user1.get(‘name‘);//lucyuser1.get(‘age‘);//25

 

Backbone学习记录（1）


联系
我们