Backbone: 백본 및 ES6 클래스

예, 이것은 확실히 실패입니다. 다리 작업을 해주셔서 감사합니다.

이야기의 교훈은 최소한 정적 속성 지원이 이루어질 때까지 Backbone과 함께 ES6 클래스를 사용하지 않는다는 것입니다. 당신이 제안한 대체 옵션 중 내가 선호하는 솔루션은 문자열/객체를 반환 값으로 정의하는 것입니다. Backbone API 디자인의 핵심 부분은 이러한 프로토타입 공유 문자열과 객체에 있으며 개발자가 생성자의 인스턴스에 각 속성을 할당하도록 요구하면 API가 더러워집니다(메모리 낭비는 말할 것도 없고).

일관성 외에도 extend Backbone과 함께 class 키워드를 사용해야 하는 이유가 있습니까?

훌륭한 블로그 게시물입니다. ES6과 Backbone 클래스가 함께 플레이하는 방식이 궁금합니다. 당신의 솔루션에 관해서:

1. 모든 속성을 함수로 연결 : 저는 이에 반대하지 않습니다. 프로토타입에 직접 객체를 설정하는 것만큼 깨끗하지는 않지만 프로토타입 객체를 변경하는 데 많은 코드 트립이 발생하는 것을 보았습니다. 이 방법은 면역이므로 ES6이 클래스 속성을 포함하지 않기로 결정했다고 생각합니다.
2. 모든 속성을 기본 옵션으로 전달 : 이것이 보다 고전적인 언어로 작업을 수행하는 방법이 아닙니까? 나는 이것이 위의 것보다 훨씬 덜 깨끗한 솔루션이라고 생각합니다.
3. 생성자를 두 번 실행하십시오 .

이야기의 교훈은 최소한 정적 속성 지원이 이루어질 때까지 Backbone과 함께 ES6 클래스를 사용하지 않는다는 것입니다.

클래스 속성도 super() 호출 뒤에 옵니다. :실망한:

일관성을 제외하고 Backbone over expand와 함께 class 키워드를 사용해야 하는 이유가 있습니까?

나는 블로그 포스트에서 이것을 다루었다. 거의? 아니요. 이론상으로는 백본이 장기적으로 코드와 추가 개념을 줄일 수 있지만 현실적으로 ES6 클래스가 트랜스파일 없이 모든 관련 브라우저에서 널리 지원되기까지는 적어도 몇 년이 걸릴 것이며 코드 축소는 다음 단계가 될 것입니다. 아무것도.

그러나 일관성 측면을 과소평가하지 마십시오. 이것이 JavaScript에서 객체 지향 프로그래밍을 수행하는 "방법"이 된다면(Ember/Angular/React/Typescript/Aurelia 등에서 표준화가 주어졌을 가능성이 있는 것으로 보임), Backbone을 사용하지 않는 것은 다른 옵션. 특히 주니어 개발자들에게. 그것이 반드시 변화할 가치가 있는지 확신할 수 없습니다. 그러나 그것은 현학적인 "작은 마음의 도깨비" 일관성을 위한 것만은 아닙니다.

@akre54 및 @jridgewell 에 "모든 속성을 기능으로 연결" 접근 방식이 아마도 제안된 옵션 중 최고일 것이라는 데 동의합니다. FWIW, 원래 상대적인 js 초보자로서 백본을 배울 때 이러한 "정적" 속성과 사용 방법에 대해 약간 혼란스러웠던 것을 기억합니다.

ES7에는 올바른 클래스 속성이 있습니다. https://gist.github.com/jeffmo/054df782c05639da2adb

ES7 제안은 단지 초기 커뮤니티 주도 제안일 뿐입니다. 실제로 공식 사양의 일부가 될 것인지는 확실하지 않습니다. 현재 구현은 생성자가 실행된 후 속성이 인스턴스에 추가되도록 하므로 Backbone에 도움이 되지 않습니다. (위 jridgewell의 링크를 참조하거나 Babel 5.0.0으로 직접 시도하십시오)

@jridgewell 나는 포스트의 '@benmccormick의이 부분을 언급했다 :

React 개발자는 Backbone 사용자가 접하는 속성 이니셜라이저와 동일한 문제에 주목했습니다. React 버전 0.13의 일부로 클래스에 대한 특수 속성 초기화 구문을 지원하며 이는 결국 표준화될 수 있습니다. 이 ESDiscuss 스레드 에 더 많은 정보가 있습니다. 이 표준은 아직 작업 중이지만 Babel 5.0.0에서 실험 지원 버전을 사용할 수 있습니다. 불행히도 해당 버전은 클래스 속성을 슈퍼클래스 생성자가 실행된 후 인스턴스화되는 것으로 정의하므로 여기에서 Backbone의 문제가 해결되지 않습니다.

예를 들어 wycats의 js-decorators Strawman 또는 원래의 (대체된) 조화 클래스 제안을 참조하십시오 .

클래스 속성과 함께 getter를 사용하는 것이 좋습니다.

class Row extends Backbone.View {
  get tagName() { return 'li'; }
}

절대적인 최후의 수단으로 _.result 도우미를 사용하여 인스턴스 또는 정적 소품을 확인할 수 있습니다.

_.instOrStaticVar = function(instance, property) {
  if (instance == null) return void 0;
  var value = instance[property] || instance.constructor[property];
  return _.isFunction(value) ? value.call(instance) : value;
}

네, 하지만:

불행히도 해당 버전은 클래스 속성을 슈퍼클래스 생성자가 실행된 후 인스턴스화되는 것으로 정의하므로 여기에서 Backbone의 문제가 해결되지 않습니다.

따라서 ES5는 다음을 수행합니다.

// ES6
class View extends Backbone.View {
  tagName = 'li';

  constructor() {
    // Do anything that doesn't touch `this`
    super();
    // Do anything that touches `this`
  }
}

// ES5
function View() {
  // Do anything that doesn't touch `this`
  Backbone.View.apply(this, arguments);

  // Add class properties
  this.tagName = 'li';

  // Do anything that touches `this`
}
View.prototype = _.create(Backbone.View.prototype, {
  constructor: View
});

인스턴스 변수를 설정하기 위한 변경 사항을 받기 전에 요소가 여전히 생성됩니다.

예를 들어 wycats의 js-decorators Strawman을 참조하십시오...

데코레이터가 적용되는 방식을 설명할 수 있습니까?

클래스 속성과 함께 getter를 사용하는 것이 좋습니다.

:+1:. 나는 모든 속성을 기능 으로

절대적인 최후의 수단으로 _.result 도우미를 사용하여 인스턴스 또는 정적 소품을 확인할 수 있습니다.

흥미로울 수 있습니다...

당신은 할 수 있습니다:

class MyView extends Backbone.View {
  constructor() {
    super({ tagName: 'h1' });
    this.el.textContent = 'Hello World';
  }
}

@thejameskyle 슈퍼클래스 생성자 옵션에

클래스를 설정하기 위해 super() 에 의존하는 대신, 단순히 init() 함수나 무언가를 가질 수 있습니다.

class DocumentRow extends Backbone.View {

    constructor() {
        super();
        this.tagName =  "li";
        this.className = "document-row";
        this.events = {
            "click .icon":          "open",
            "click .button.edit":   "openEditDialog",
            "click .button.delete": "destroy"
        };
        this.init();
    }

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

    render() {
        //...
    }
}

@milesj 흠? 최종 ES6 클래스 사양과 함께 즉시 오류가 발생합니다.

파생 클래스에서 이것을 사용하려면 먼저 super()를 호출해야 합니다.

작동하더라도 실제로 Backbone 생성자를 호출하지 않으며 초기화 코드를 가져오지 않습니다.

내 첫 번째 게시물에서 이 링크를 참조하세요. http://www.2ality.com/2015/02/es6-classes-final.html

@milesj : 건이며, 당신은 전화를해야 super() 설정하기 전에 this.tagName 같은 또는를. 그리고 View의 생성자에서 요소 를 this.tagName 설정하기 전에 이미 요소를 생성했습니다.

@milesj 서브클래싱할 때 여전히 허용되지 않습니다.

@jridgewell 아 죄송합니다. 놓쳤습니다. 가장 자연스러운 선택인 것 같습니다. 나는 이것에 대해 jeffmo와 sebmck와 이야기했습니다.

몇 가지 배경 이야기를 제공하기 위해 추론은 기본 유형(예: 배열) 확장을 지원하기 위해 super() 메서드를 호출할 때까지 this 가 결정되지 않기 때문입니다. 그렇지 않으면 DOM(및 아마도 다른 위치)에서 초기화 문제가 발생합니다.

@jridgewell @thejameskyle 그런 다음 먼저 super()를 호출하면 됩니다(업데이트된 예). ES6 수업에서 동일한 작업을 수행했기 때문에 여기에서는 문제가 발생하지 않습니다. 뷰 생성자 로직을 init() 메소드로 옮기면 됩니다.

즉 A의 많은 아주의 비용이 두 번 실행하는 코드입니다.

@milesj 블로그 원본을 읽으셨나요? super를 먼저 실행하면 속성이 처리되지 않습니다. 자세한 설명은 여기를 참조하십시오. http://benmccormick.org/2015/04/07/es6-classes-and-backbone-js/

예, 나는 그것을 읽었고 이것이 왜 해결책이 아닌지 여전히 궁금합니다. 모두가 호출해야 하는 뷰 생성자에 대해 계속 이야기하지만 반드시 그런 것은 아닙니다. 다음과 같은 것이 솔루션이 아닌 이유는 무엇입니까(조금 고안되었지만)?

var View = Backbone.View = function(options) {
    this.cid = _.uniqueId('view');
    // extend()ing options is no longer needed if properties are set directly
};

View.prototype.setup = function() {
    this._ensureElement();
    this.initialize.call(this, arguments);
};

class DocumentRow extends Backbone.View {
    constructor() {
        super();
        this.tagName =  "li";
        this.className = "document-row";
        this.events = {
            "click .icon":          "open",
            "click .button.edit":   "openEditDialog",
            "click .button.delete": "destroy"
        };
        this.setup(...arguments);
    }
}

비 ES6과의 하위 호환성 때문에 추측하고 있습니까?

그러면 생성자가 #setup 호출하지 않기 때문에 기본 View 클래스가 작동하지 않습니다. 그리고 super() 이외의 서브클래스 호출을 강제하는 것은 매우 성가신 일입니다.

이것은 백본뿐만 아니라 모든 ES6 클래스가 다루어야 하는 문제입니다. 개인적으로 Babel ES7 클래스 속성 사양을 사용하여 해결했습니다.

@milesj 앞서 언급했듯이 ES7 클래스 속성은 생성자가 끝날 때까지 인스턴스화되지 않기 때문에 이 문제를 해결하지 못합니다.

나는 이것을 하는 것에 대해 jeffmo와 sebmck에게 말했다:

class Root {
  rootProp = 'root';
  constructor() {
    console.log('Root', this.rootProp);
    console.log('Root', this.derivedProp);
  }
}

class Derived extends Root {
  derivedProp = 'derived';
  constructor() {
    super();
    console.log('Derived', this.rootProp);
    console.log('Derived', this.derivedProp);
  }
}

디슈가링:

function Root() {
  this.rootProp = 'root';
  console.log('Root', this.rootProp);
  console.log('Root', this.derivedProp);
}

function Derived() {
  super();
  this.derivedProp = 'derived';
  console.log('Derived', this.rootProp);
  console.log('Derived', this.derivedProp);
}

그러나 여전히 여기에서 문제가 해결되지 않고 불일치가 발생합니다.

new Derived();
// >> 'Root' 'root'
// >> 'Root' undefined
// >> 'Derived' 'root'
// >> 'Derived' 'derived'

이것은 백본뿐만 아니라 모든 ES6 클래스가 다루어야 하는 문제입니다.

흠?

개인적으로 Babel ES7 클래스 속성 사양을 사용하여 해결했습니다.

className 가 없는 많은 DIV 요소가 있을 것입니다. https://github.com/jashkenas/backbone/issues/3560#issuecomment -90739676, https://github.com/jashkenas/backbone/issues/3560#issuecomment -91601515 및 https://github 의 마지막 지점을 참조하세요 . .com/jashkenas/backbone/issues/3560#issuecomment -98827719.

알 겠어요. 이 경우 "모든 속성을 슈퍼클래스 생성자에 대한 기본 옵션으로 전달" 옵션을 사용하거나 "속성" 메서드 생성에 대한 마지막 줄(생성자를 건드리지 않음)을 사용하는 것이 좋습니다.

class DocumentRow extends Backbone.View {
    loadProperties() {
        return {
            tagName: 'li',
            className: 'document-row',
            events: {
                "click .icon": "open",
                "click .button.edit": "openEditDialog",
                "click .button.delete": "destroy"
            },
            foo: 'bar'
        };
    }
}

// Contrived example
var View = Backbone.View = function(options) {
    this.cid = _.uniqueId('view');
    options || (options = {});
    _.extend(this, this.loadProperties(), _.pick(options, viewOptions));
    this._ensureElement();
    this.initialize.apply(this, arguments);
};

Toolkit에서 비슷한 작업을 수행했으며 여기에서 볼 수 있습니다. https://github.com/titon/toolkit/issues/107

안녕하세요.

여기서 논의를 올바르게 이해했다면 백본 개발자가 해결 방법과 모범 사례에 대해 논의하고 있지만 실제로 이 문제를 처리하기 위해 BB 코어를 변경할 의도가 없습니까? (나는 그들이 그래야 한다고 제안하는 것이 아니며 그러한 변화가 무엇인지 전혀 알지 못할 것입니다). 즉, 모든 속성을 함수로 사용하거나 주제에 대한 최종 단어를 가져오는 제안이 있습니까? 감사 해요.

@gotofritz 모든 속성을 인스턴스에 강제 적용하는 ES6 솔루션이 확장되지 않기 때문에 해결 방법을 논의하고 있습니다. 백본의 클래스 시스템은 여기에서 옳은 일을 하고 있습니다.

ES7 클래스에 정적 프로토타입 속성 을 하는 것에 대한 extend 고수한다고 말하고 싶습니다.

감사 해요. ES6 수업은 조금 더 해볼께요... :-)

이 문제에 걸려 넘어진 다른 사람을 위해 실제로는 "모든 속성을 슈퍼클래스 생성자에 대한 기본 옵션으로 전달"이 더 낫다는 것을 알았습니다. 예를 들어, 우리 앱에는 인스턴스화 시 전달해야 하는 동적(현지화된) 경로가 있습니다 그리고 route() 메서드가 작동하지 않습니다. 반면 다음은

class Router extends Backbone.Router {

 constructor (localizedRoutes) {
    _.defaults(localizedRoutes, {
        "nonLocalizedRouteA/": "routeA"
        "*actions": "defaultRoute"
     });
 super({ routes: localizedRoutes });
}

방금 이것을 보았고 두 가지 해결 방법이 모델이 가지고 있는 idAttribute 속성에 대해 작동하지 않는다고 생각합니다. Backbone이 model.idAttribute 를 사용하여 속성에 액세스하므로 메서드가 작동하지 않습니다. 그리고 모델 생성자는 속성 추가를 옵션으로 모두 지원하지 않는 것 같습니다.

두 가지 해결 방법 모두 idAttribute 속성에 대해 작동하지 않는다고 생각합니다.

잘 잡았습니다. 이 문제를 해결하는 PR을 작성하겠습니다. 그 동안 getter 표기법을 사용하여 사용자 정의 idAttribute (및 cidPrefix )를 제공할 수 있습니다.

class Model extends Backbone.Model {
  get idAttribute() {
    return '_id';
  }

  get cidPrefix() {
    return '__c';
  }
}

Backbone이 model.idAttribute를 사용하여 속성에 액세스하므로 메서드가 작동하지 않습니다.

get idAttribute() { return '_id'; } 는 일반 속성처럼 액세스되는 getter 메서드입니다. this.idAttribute === '_id'; .

이것은 대대적인 재작성이 필요한 것처럼 들리기 시작했습니다. 아마도 백본 v2?

이것은 대대적인 재작성이 필요한 것처럼 들리기 시작했습니다. 아마도 백본 v2?

전혀 그렇지 않습니다. 우리는 이미 ES6 서브클래싱을 지원합니다( Models 제외). 누군가 @akre54 의 정적 속성 제안을 탐색했다면 흥미로울 것이라고 생각합니다. 하지만 원래 게시물의 두 가지 솔루션에서는 그럴 필요도 없습니다.

@jridgewell , 빠른 솔루션에 감사드립니다!

데코레이터는 이 스레드(특히 Yehuda Katz의 제안 )에서 위에서 언급했으며 이것이 이 문제를 해결할 수 있는지 여부는 해결되지 않았습니다.

나는 제안된 대로 그것들을 가지고 놀고 있었고 다음과 같이 데코레이터를 작성할 수 있습니다.

function props(value) {
    return function decorator(target) {
        _.extend(target.prototype, value);
    }
}

우리가 사용한 예제는 다음과 같이 작성할 수 있습니다.

@props({
      tagName: 'li',
      className: 'document-row',
      events: {
        "click .icon": "open",
        "click .button.edit": "openEditDialog",
        "click .button.delete": "destroy"
      }
    })
class DocumentRow extends Backbone.View {

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

    render() {
        //...
    }
}

이것은 나를 위해 잘 작동하는 것 같습니다. 데코레이터는 클래스 생성자가 실행되기 전에 클래스에 적용됩니다. 이것은 말의 선언적 버전일 뿐입니다.

class DocumentRow extends Backbone.View {

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

    render() {
        //...
    }
}
_.extend(DocumentRow.prototype, {
      tagName: 'li',
      className: 'document-row',
      events: {
        "click .icon": "open",
        "click .button.edit": "openEditDialog",
        "click .button.delete": "destroy"
      }
})

실제로 테스트하지는 않았지만 정적 및 프로토타입 소품을 모두 원한다면 전체 백본 확장 기능 을 데코레이터로 만들 수 있습니다.

불행히도 이것은 현재로서는 제안일 뿐이지만 Babel은 실험적인 깃발 뒤에 이를 지원하므로 사람들이 모험심을 느끼고 있다면 여기에서 가능한 솔루션입니다.

@benmccormick , 데코레이터 기술이 저에게 잘 맞습니다. 이것이 현재로서는 제안일 뿐이며, 이 접근 방식을 사용하는 것과 관련하여 다른 우려 사항이 있습니까?

@andrewrota 저는 말 그대로 지금 이 내용에 대한

원래 이것에 대해 생각하게 만든 @StevenLangbroek의 요점을 참조하십시오. https://gist.github.com/StevenLangbroek/6bd28d8201839434b843

다음은 내가 올릴 후속 게시물의 미리보기입니다. http://benmccormick.org/2015/07/06/backbone-and-es6-classes-revisited/ 영구 링크로 업데이트됨

이번 주 초에 영구 URL로 이동할 예정입니다. 그러나 이 스레드의 기본 요약과 내가 배운 것은 다음과 같습니다.

백본 속성을 현재 ES6 클래스 사양과 함께 작동하게 하는 3가지 접근 방식이 있습니다(처음 2개는 완전히 지원되는 것으로 간주되기 위해 #3684가 필요합니다):

1. 모든 속성을 생성자의 슈퍼에 전달
2. 모든 속성을 메서드로 취급
3. 클래스가 선언된 후 프로토타입에 직접 속성 추가

나는 여전히 이 모든 것이 표현력을 어느 정도 제한하는 것으로 봅니다. 하지만 데코레이터가 공식 사양이 된다면 문제는 어느 정도 해결될 것이라고 생각합니다. 데코레이터에는 2가지 옵션이 더 있습니다.

1. 클래스 상단에 있는 props를 가져와 프로토타입에 추가하는 props 데코레이터를 추가합니다.
2. 보다 표현력 있고 세분화된 인터페이스를 허용하는 몇 가지 특수 목적 데코레이터를 만듭니다.

이러한 솔루션 중 #3684 이외의 백본에 대한 추가 수정이 필요하지 않다고 생각하지만 데코레이터가 표준화되면 백본 데코레이터 라이브러리에 흥미로운 역할이 있을 것입니다.

월요일/화요일에 게시하기 전에 게시물에 대한 피드백을 원합니다.

@benmccormick 수정해주셔서 감사합니다. 요점은 잠시 후에 업데이트하겠습니다. 또한: 블로그 게시물에서 언급해 주셔서 감사합니다. :) 게시할 때 트위터에 ping을 보내주시겠습니까? :+1:

우리는 트리거가 아닌 마리오네트의 modelEvents 및 collectionEvents 에 대해 동일한 구문을 사용할 수 있습니다. 그것들은 클래스 데코레이터(예: 블로그 게시물의 tagName 및 템플릿)를 통해 노출될 수 있지만 저는 생각했습니다. 정적 속성을 사용할 수 없습니까? 아니면 백본에서 작동하지 않습니까?

데코레이터가 아직 0단계라는 것을 이해하지만 Backbone 앱을 작성하는 방식, 특히 이벤트 해시에 대한 메서드 데코레이터를 작성하는 방식에 있어 훌륭한 업그레이드가 될 것이라고 생각합니다. 이는 제가 꿀꿀거리는 것을 선호하게 만드는 일종의 프로그래밍 스타일이기도 합니다.

@StevenLangbroek 정적 속성에 대한 논의는 위를 참조하십시오.

현재 지정된 구문은 프로토타입에 추가하는 대신 각 인스턴스에 로컬 속성을 생성합니다. 이러한 속성은 슈퍼 생성자가 실행된 후에 추가됩니다.

@benmccormick , 게시물이 좋아 보이고 각 옵션의 장단점을 잘 설명하고 있다고 생각합니다. 이 시점에서 저는 특수 목적 데코레이터 접근 방식을 정말 좋아하며, 데코레이터가 사양에 포함된다고 가정하면 가장 좋은 접근 방식인 것 같습니다.

@benmccormick 의 데코레이터 가 프로토타입이 아닌 생성자를 사용하여 _#extend 를 호출한 다음 _#result 대신 @akre54 의 _.instOrStaticVar 메서드를 사용해야 합니까? 나는 그것이 주요 변경 사항이 될 것이라는 것을 알고 있지만 그런 식으로 IMHO가 더 깨끗해 보입니다. @akre54가 지적한 것처럼 속성은 프로토타입 공유 문자열과 객체 (즉, 모든 인스턴스에서 공유됨)이므로 클래스를 통해 액세스해야 합니다. 그렇죠?

나는 더 나아가 우리가 필요로 하는 방식으로 작업 클래스 속성을 만들 것입니다. 클래스 속성에도 주석을 달 수 있으며 장식된 속성을 프로토타입에 첨부하는 특수 데코레이터를 만들 수 있습니다.

class TodoView extends Backbone.View {
  <strong i="6">@protoprop</strong>
  static tagName = 'li';
}

function protoprop(target, name, descriptor) {
  target.prototype[name] = descriptor.initializer()
}

예제와 함께 Babel REPL 을 참조하십시오. 실험적인 것에 의존하지만 작동합니다.

내 블로그 댓글에서 논의된 @just-boris, 여기에서 보고 있는 동작은 Babel의 클래스 속성 및 데코레이터 사양 처리에 대한 구현 세부 정보입니다. 현재 어떤 제안에서도 정의되지 않은 동작입니다. 그런 식으로 일을 하고 싶다면 여기 및/또는 여기 에서 문제를 만들어 클래스 속성의 데코레이터를 표준화된 동작으로 만들고 싶을 것입니다. 그렇지 않으면 당신이 하고 있는 일이 언제라도 중단될 수 있습니다.

@benmccormick wycats/javascript-decorators 에는 이미 속성 이니셜라이저에 대한 추가 정의가 있습니다 .

여기서 주요 관심사는 속성 이니셜라이저가 일반적인 설명자이자 클래스 메서드이므로 데코레이터도 이를 래핑할 수 있다는 점입니다. 걱정할 이유는 없지만 해당 섹션의 사양은 변경되지 않습니다.

아 정말 멋지다, 나는 그것을 보지 못했다. 지적해주셔서 감사합니다.

2015년 9월 21일 월요일 오전 11시 29분, Boris Serdiuk [email protected]
썼다:

@benmccormick https://github.com/benmccormick
https://github.com/wycats/javascript-decorators 에는 이미 추가 기능이 있습니다.
속성 이니셜라이저에 대한 정의
https://github.com/wycats/javascript-decorators/blob/master/INITIALIZER_INTEROP.md
.

속성 이니셜라이저가 일반적인 설명자라는 주요 관심사는
클래스 메서드뿐만 아니라 데코레이터도 이를 래핑할 수 있습니다. 나는 보이지 않는다
걱정할 이유는 없지만 해당 섹션의 사양은 변경되지 않습니다.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/jashkenas/backbone/issues/3560#issuecomment -142015454
.

https://github.com/typhonjs/backbone-es6 대 @benmccormick이 제안한 방법 기술 사용에 대한 장단점을 알고 싶었습니다.

Btw, 훌륭한 블로그 게시물에 대해 @benmccormick 에게 감사드립니다!

여기에 properties 메소드를 첨부하는 제안(#121) pull-request 외에도 https://github.com/dsheiko/backbone-abstract/tree/master/demo-es6/src/Js
@akre54가 언급했듯이 Justin은 이미 유사한 솔루션( preInitialize 방법)을 제안했습니다. 이미 내 지점에서 사용하고 있지만 실제로 문제를 해결합니다. 선언적 클래스 속성을 금지하지 않음에도 불구하고 TypeScript에서도 유용한 것으로 보입니다.

PS preInitialize 가 더 일반적으로 들리므로 이 맥락에서 더 좋습니다. 그러나 모든 생성자의 작업보다 먼저 메서드를 호출하면 preConstruct 와 비슷합니다.

프로토타입에 설정하는 새로운 클래스 속성 제안을 볼 수 있기를 진심으로 바랍니다. 제안에 관련된 많은 사람들이 그 의미에 대해 걱정하는 것 같지만 jeffmo의 제안은 생성자에 넣는 반면 클래스 메서드가 프로토타입에 직접 연결되는 것은 매우 일관성이 없습니다.

프로토타입에 속성을 직접 연결하는 방식으로 진행했다면 거의 모든 React/Backbone 코드를 ES2015 클래스로 마이그레이션할 수 있었을 것입니다.

멋진 블로그 게시물 @benmccormick !! 내 프로젝트에서 해당 데코레이터를 사용할 것입니다.

@benmccormick , 기본 속성으로 클래스를 선언하는 또 다른 방법을 사용했습니다. 살펴보세요: https://github.com/epicmiller/es2015-default-class-properties

기본적으로 클래스를 지원하는 모든 환경에서 정상적으로 실행되고 잘 변환되며 생성자에서 또는 선언 후에 정의하는 것보다 훨씬 더 멋지게 보입니다. 데코레이터와 클래스 속성에 대한 제안이 ES2016/ES2017의 파이프라인을 따라 내려옴에 따라 이것은 백본에 대한 장기 솔루션보다 학문적 연습에 더 가깝지만 2-3년이 너무 길다면 이와 같은 것은 확실히 실행 가능한 옵션입니다. 기다리다.

글쎄, 문제는 클래스 속성이 Ecmascript 제안 단계 시스템에서 여전히 1단계에 있다는 것입니다. 나는 그것이 "사용자가 얻는 것"이라는 측면에서 김미처럼 보이기 때문에 이유를 모르겠습니다. 물론, 구문적으로나 참조 구현 측면에서 내부적으로 어떤 종류의 문제가 발생할 수 있는지 전혀 모릅니다.

https://github.com/tc39/ecma262
https://github.com/jeffmo/es-class-fields-and-static-properties

이것을 읽으면서 https://github.com/epicmiller/es2015-default-class-properties 좋은 접근 방식을 찾았습니다. 시도할 때 Backbone에 이에 대한 지원이 내장되어 있음을 깨달았습니다. 예를 들어:

class MyModel extends Backbone.Model.extend({
   idAttribute: 'id'
}) {
   // ...
};

위의 코드는 MyModel.prototype.idAttribute를 적절하게 설정합니다. TypeScript의 경우 선언 파일을 약간 조정하여 생성자 함수 인터페이스를 반환해야 하지만 이는 ES6 사용자와 관련이 없는 세부 사항입니다...

@t-beckmann은 아주 좋은 솔루션입니다. 읽기 쉽고 최소한의 변경만 필요합니다. 감사 해요!

이 스레드가 현재 2년 동안 진행되고 있다는 것을 알고 있지만 Backbone 및 ES6 클래스를 검색할 때 여전히 최고의(유일한) 결과 중 하나이며 여기에서 여러 번 언급된 클래스 속성을 사용하는 잠재적인 솔루션을 공유할 것이라고 생각했습니다. .

이제 클래스 속성이 2단계 에 있고 babel 사전 설정과 함께 널리 사용 가능하므로 다시 한 번 살펴보겠습니다. 언급한 바와 같이 인스턴스/멤버 속성의 문제는 _after_ constructor() 때까지 프로토타입에 적용되지 않지만 설정해야 하는 많은 속성이 생성자 내에서 사용된다는 것입니다. 정적 속성은 즉시 적용되지만 (설계상) 클래스의 인스턴스에 복사되지 않습니다.

다음 shim은 생성자를 실행하기 전에 생성자의 정적 속성을 인스턴스로 복사합니다(효과적으로 새 생성자를 만들고 속성을 적용한 다음 원래 생성자를 실행). 확실히 해킹이지만 결과에 매우 만족합니다.

심:

export default function StaticShim(Ctor) {
    const NewCtor = function shim(...args) {
       Object.keys(Ctor).forEach((key) => {
            if (this[key] === undefined) {
                this[key] = toApply[key];
            }
        });

        Object.assign(this, this.constructor);

        Ctor.apply(this, args);
    };

    NewCtor.prototype = Object.create(Ctor.prototype);
    NewCtor.prototype.constructor = NewCtor;

    Object.keys(Ctor).forEach((key) => {
        if (NewCtor[key] === undefined) {
            NewCtor[key] = Ctor[key];
        }
    });

    return NewCtor;
}

그런 다음 사용법:

class TestModel extends StaticShim(Backbone.Model) {
    static idAttribute = '_id';
    static urlRoot = '/posts';

    initialize() {
        console.log(this.url()); // Correctly logs "/posts/{id}"
    }
}

다른 누군가에게 도움이 되거나 누군가 그것에 대해 생각이 있는 경우를 대비하여 여기에 놓기를 원했습니다. 감사 해요!

오래된 문제를 부활시켜 죄송합니다.

Backbone.*.extend({...})를 사용하도록 ES6 클래스 선언을 변환하는 babel 플러그인을 작성하는 것이 가능하거나 가치가 있습니까?

@enzious는 확실히 가능한 것 같습니다. 가치가 있는지 여부는 당신에게 달려 있습니다 :)

@t-beckmann의 솔루션 이 가장 간단

나에게는 제대로 보이지 않습니다. idAttribute를 설정하는 메소드를 갖는 것이 더 적절하지 않을까요?

또한 Promise 지원이 있으면 놀랍습니다. 이것은 jquery Deferred를 사용하는 것보다 더 네이티브 접근 방식입니다. 개인적으로 Backbone 내에서 더 이상 사용되지 않는 것을 보고 싶습니다.

최신 도구 및 언어 기능을 활용하기 위해 레거시 백본 애플리케이션을 새로 고치는 것에 대한 이야기는 여전히 매우 불분명합니다. Symbol.iterator가 구현되고 프로덕션 릴리스에서 사용할 수 없는 것을 보는 것은 특히 실망스럽습니다.

이 질문에 대한 더 명확한 답변을 찾고 있는 사람들을 위해 저는 TypeScript를 백본 앱에 추가하고 있으며 이 댓글 의 솔루션 이 된다는 것을 알았습니다.

지금까지는 더 나은 추론을 하기 보다는 데코레이터를 통해 전달된 속성에 명시적으로 주석을 달아야 하는 단점이 있지만 충분히 잘 작동합니다.

export function Props<T extends Function>(props: { [x:string]: any }) {
  return function decorator(ctor: T) {
    Object.assign(ctor.prototype, props);
  };
}

@Props({
  routes: {
    home: "home",
    about: "about",
    dashboard: "dashboard",
    blog: "blog",
    products: "products",
    accountSettings: "accountSettings",
    signOut: "signOut",
  },
})
export class Router extends Backbone.Router {
  home() {}
  about() {}
  // ...
}

@Props({
  model: CategoryModel,
  comparator: (item: CategoryModel) => item.display_value,
})
export class CategoryCollection extends Backbone.Collection<CategoryModel> {}

명시적 속성 주석의 예:

@raffomania , @jridgewell & Co., 우리 팀은 클래스 외부의 프로토타입에 idAttribute를 추가하여 이 문제를 해결했습니다.

클래스 예제는 ParentExample {을 확장합니다.
// 여기에 클래스 메소드 등
}

x.예시 = 예;

x.Example.prototype.idAttribute = 'customIdAttr';

@kamsci 저는 Backbone을 ES6 클래스로 변환한 이 분기 에서 동일한 작업을 수행했습니다.

백본은 구성 개체가 _선언적_인 지점까지 _구성_을 사용합니다. 이것은 훌륭하지만 상속과 함께 잘 작동하지 않을 것입니다. (클래스를 복제하고 구성하십시오. 상속이 아닙니다.)

백본을 사용하여 새 코드를 작성하려는 경우 다르게 생각하는 것이 좋습니다. ES5 코드를 잘라내어 붙여넣은 다음 ES6처럼 보이게 하면 작동하지 않습니다. 그래서 무엇?

구성 개체를 통해 모든 것을 전달하는 데 전혀 문제가 없습니다. 해당 구성의 내용을 노출하거나 읽기/작업을 더 쉽게 만드는 방법은 울지 말고 해결해야 할 문제입니다.

생성자를 두 번 실행하고 싶은 사람은 없습니다. 그건 어리석은 짓이야. 하지만, 패턴의

Foo = BackboneThing.extend({LONG DECLARATIVE OBJECT LITERAL}) 역시 어머니가 좋아하는 추한 것입니다. 당신은 그것이 얼마나 추한지 모를 정도로 오랫동안 그렇게 해왔습니다.

참고: 저는 큰 마리오네트 프로젝트가 있고 ES6 구문을 사용하고 싶었습니다. Backbone 확장 선언을 ES6 클래스로 변환하는 jscodeshift 변환기를 만들었습니다. 많은 단순화 가정을 만들지만 시작점으로만 일부 사용자에게는 여전히 유용할 수 있습니다. 데코레이터에 문제가 생겼을 때 @t-beckmann이 제안한 구문을 따릅니다.
https://gist.github.com/maparent/83dfd65a37aaaabc4072b30b67d5a05d

이 스레드에 이상한 잘못된 이름이 있는 것 같습니다. ES6에 대한 '정적 속성'은 인스턴스화 없이 클래스에 존재하는 생성자의 속성입니다(예: Class.extend). 이 스레드에서 '정적 속성'은 '정적' 값(게터 또는 함수가 아님)이 있는 프로토타입의 명명된 속성을 참조하는 것 같습니다. 내가 맞았어?

정적 값이 있는 프로토타입 속성의 경우 Backbone 사전 초기화 값을 함수 반환 값으로 선언하는 것은 매우 간단한 전환이며 _.result가 기본값, className, id 등에 대해 예상대로 수행하는 것처럼 잘 작동합니다. 다른 인스턴스 속성은 초기화 기능의 상단은 정상적으로 작동합니다. 이 문제는 ES6 클래스에서 현재 정적 값으로 프로토타입 속성을 정의할 수 없고 getter, setter 및 함수만 있기 때문에 발생하는 것으로 보입니다.

어느 쪽이든, 생성자/클래스 정적 속성(Class.extend)은 ES6에서처럼 백본에서 상속되지 않습니다. 백본은 확장 기능을 수행할 때마다 이러한 속성이 ES6처럼 상속되도록 하는 대신 클래스 정적 속성을 새 클래스/생성자에 복사합니다. https://github.com/jashkenas/backbone/pull/4235 에서 수정하기 위해 홍보를 만들었습니다.

몇 가지 의견/피드백을 주시면 감사하겠습니다. 문제가 될 것인지 확실하지 않습니다. 꽤 많이 테스트한 결과 잘 작동하는 것 같습니다. 백본 클래스는 각각의 새 생성자에 대한 참조를 복사하는 대신 나중에 Class.extend를 상속합니다.