Backbone 中的繼承

時間 2019-11-13

原文原文鏈接

使用了Backbone 也有了一段時間，只是之前調用肯定的使用一套方案，調研完畢以後直接交給下面人用去了，因而也沒有繼續深刻 react

最近又看了reactjs，很羨慕繼承，想整合到項目中，可是用reactjs目前還不現實，多但願Backbone 也能擁有這樣的特性，因而就查看Backbone中的繼承究竟是怎麼回事。 app

如下是Backbone 中的extend源碼部分 ide

// Helper function to correctly set up the prototype chain for subclasses.
  // Similar to `goog.inherits`, but uses a hash of prototype properties and
  // class properties to be extended.
  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 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 and add the prototype properties.
    child.prototype = _.create(parent.prototype, protoProps);
    child.prototype.constructor = child;

    // Set a convenience property in case the parent's prototype is needed
    // later.
    child.__super__ = parent.prototype;

    return child;
  };

  // Set up inheritance for the model, collection, router, view and history.
  Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;

backbone 文檔中這樣寫道 this

extendBackbone.View.extend(properties, [classProperties])
Get started with views by creating a custom view class. You'll want to override therender function, specify your declarative events, and perhaps the tagName,className, or id of the View's root element. prototype

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },

  render: function() {
    ...
  }

});

Properties like tagName, id, className, el, and events may also be defined as a function, if you want to wait to define them until runtime. code

因而寫了很長時間 Backbone.View.extend，很悲催，看了源碼以後才知道 parent = this; 因而打開思惟其實VIEW也能夠這樣寫的

var A = Backbone.View.extend({
			name:'name',
			initialize:function(){console.log(this.addr)
				//this.render();
			},
			test:function(){
				return this.name;
			},
			render:function(){
				var $div = $('<div id="test-bean"></div>');
				console.log("render2");
				$('body').append($div);
			}
		}) 
		
		var b = A.extend({
			addr:"wxi",
			initialize:function(){
				A.prototype.initialize.call(this);console.log('b')
				this.render();
			},
			getAddr:function(){
				return this.addr;
			},
			render:function(){
				A.prototype.render.call(this);
				console.log("render");
			},
		});
		
		console.log(b.prototype)
		var bb = new b();
		console.log(bb.test());

會實現View之間的繼承

打開思惟，這樣咱們就能夠作不少不少~~ ，具備特性的VIEW封裝... router

//題外 CSS -- hack 繼承