Backbone에서 뷰 믹스 인을 수행하는 적절한 방법

Backbone에서 뷰 믹스 인을 수행하는 적절한 방법

---

기본 백본 뷰를 항상 확장하고 섹션별로 기본 뷰를 가지고 있으므로 여러 수준으로 확장 할 수 있습니다. 내 질문은 뷰 믹스 인을 수행하는 가장 효과적인 방법입니다 : 어떤 뷰에도 섞일 수있는 재사용 가능한 뷰 부분입니다. 예를 들면 :

var BaseProfile = Backbone.View.extend({ ...});
var UserProfile = BaseProfile.extend({ ...});
var VideoSupport = Backbone.View.extend({ ...});

VideoSupport뷰 (이벤트 객체 및 몇 가지 메서드)를 UserProfile뷰 와 혼합하는 가장 좋은 방법은 무엇입니까 ?

---

underscore.js 라이브러리는 extend원하는 작업을 수행 하는 방법을 제공합니다 . 모든 개체에 기능을 정의한 다음 해당 개체의 모든 메서드와 속성을 문자 그대로 복사하여 다른 개체에 붙여 넣을 수 있습니다.

extend뷰, 모델 및 라우터에 대한 Backbone의 메서드는 밑줄의 extend.

 var MyMixin = {
  foo: "bar",
  sayFoo: function(){alert(this.foo);}
}

var MyView = Backbone.View.extend({
 // ...
});

_.extend(MyView.prototype, MyMixin);

myView = new MyView();
myView.sayFoo(); //=> "bar"

---

(상속성을 존중하는) 믹스 인을 지정하는 정말 간결한 방법을 제공하는 Backbone.Cocktail 을 사용 하는 것이 좋습니다 .

var Mixin = {
  initialize: function() {
    console.log("I'll be called as well as the class's constructor!");
  }
};

var View = Backbone.View.extend({
  mixins: [ MyMixin ]
});

이 블로그 게시물 에서 자세히 설명했습니다 .

---

이 요점 https://gist.github.com/3652964를 사용할 수 있습니다.

---

프로토 타입 체인에 내장 된 믹스 인을 사용한 Backbone.Mix 라이브러리 를 사용할 수 있습니다.

var Editable = {
    edit: function(){
        console.log('edit');
    }
};

var Article = Backbone.Model.mix(Editable).extend({
    initialize: function(){
        Backbone.Model.prototype.initialize.call(this);
        this.edit(); // logs "edit"
    }
});

---

나는 루비가 모듈을 처리하는 방법에 더 가깝게 혼합 된 메소드 (ala super)를 재정의하고 호출 할 수있는 능력이 필요했습니다. 그리고 간단한 확장 방법은 mixin 방법이 클래스에 존재한다면 방해 할 것입니다. CoffeeScript에서 모든 것을 구축하고 있으므로 shim 메서드를 사용할 수 있는 수퍼 개체에 액세스 할 수 있습니다. 또한 이벤트 개체를 자동으로 병합하여 mixin에서 이벤트 처리기를 정의 할 수 있습니다.

_.extend Backbone,
  mixin: (klass, mixin, merge) ->
    debugger unless mixin
    mixin = mixin.prototype || mixin
    merge ||= ["events"]

    sup = _.extend({},klass.__super__)

    for name,func of mixin      
      if base = sup[name] && _.isFunction(base)
        sup[name] = ->
          func.apply this, arguments
          base.apply this, arguments
      else
        sup[name] = func

    hp = {}.hasOwnProperty
    prototype = klass.prototype
    for name,func of mixin
      continue unless hp.call(mixin,name)
      continue if _(merge).contains name
      prototype[name] = func unless prototype[name]

    klass.__super__ = sup

    _(merge).each (name) ->
      if mixin[name]
        prototype[name] = _.extend({},mixin.events,prototype.events) 

    @

용법

class SimpleView extends Backbone.View
  events:
    "click .show" : "show"

  calculate: ->
    super + 5

  show: ->
    console.log @calculate()

class CalculatableViewMixin
  events:
    "click .calculate" : "show"

  calculate: ->
    15

Backbone.mixin SimpleView, CalculatableViewMixin

---

또 다른 옵션은 AOP 스타일 믹스 인의 기능을 제공 하는 Backbone.Advice 입니다 ( 확장 객체 메서드 호출 전 , 후 또는 주변에 사용자 지정 동작을 삽입 할 수 있음 ).

참고 URL : https://stackoverflow.com/questions/7853731/proper-way-of-doing-view-mixins-in-backbone