경험을 향상시키기 위해 확장 기능으로 트렁크를 강화하십시오.

Backbone은 웹 애플리케이션 개발 프레임워크로서 점점 인기를 얻고 있습니다. 이러한 인기로 인해 프레임워크의 기능을 향상하고 다른 사람들이 채워야 한다고 생각하는 공백을 메우기 위한 수많은 확장 기능과 플러그인이 등장했습니다. 최고의 옵션 중 일부를 살펴보겠습니다.

백본.퍼펫

Derick Bailey가 개발한 이 확장 프로그램은 용량이 꽤 크며 개인적으로 가장 좋아하는 확장 프로그램입니다. Backbone에 한두 가지 기능을 추가하는 대신 Derick은 자신이 존재한다고 생각하는 가장 큰 구멍을 모두 채우기로 결정했습니다. GitHub 프로젝트의 추가 정보에서 그가 말한 내용은 다음과 같습니다.

"Backbone.Marionette는 대규모 JavaScript 애플리케이션 구축을 단순화하도록 설계된 Backbone.js용 복합 애플리케이션 라이브러리입니다. 이는 나(Derick Bailey)가 Backbone을 사용하여 구축한 애플리케이션에서 발견된 공통 디자인 및 구현 패턴의 모음이며, 다음에서 영감을 받은 다양한 부분을 포함합니다. Microsoft의 “Prism” 프레임워크”

와 같은 복합 애플리케이션 아키텍처.

마리오네트가 우리에게 무엇을 제공하는지 자세히 살펴보겠습니다.

• Application: 이것은 애플리케이션의 모든 것이 통신하는 중심 개체입니다. 이는 애플리케이션의 모든 모듈이 서로 종속되지 않도록 통신할 수 있는 중앙 이벤트 허브인 애플리케이션의 기본 보기를 설정하는 빠르고 쉬운 방법을 제공하며, 애플리케이션이 어떻게 작동하는지 세밀하게 제어할 수 있는 초기화 프로그램을 제공합니다. 시작합니다.
• 모듈: 모듈 코드를 캡슐화하고 중앙 애플리케이션 개체에서 이러한 모듈의 이름을 지정하는 방법입니다.
• Views: 확장할 새 뷰 클래스는 정리를 위한 기본 메서드를 제공하므로 메모리 누수가 발생하지 않습니다. 또한 렌더링 템플릿도 포함되어 있습니다. 간단한 보기의 경우 템플릿과 모델만 지정하면 나머지는 알아서 처리됩니다.
• 컬렉션/복합 뷰: 복합 앱 라이브러리가 작동하는 곳입니다. 이 두 가지 보기를 사용하면 컬렉션의 모든 보기, 심지어 컬렉션과 모델의 중첩 계층을 렌더링하는 프로세스를 처리할 수 있는 보기를 매우 적은 노력으로 쉽게 생성할 수 있습니다.
• 지역 및 레이아웃: 지역은 DOM의 특정 위치에서 뷰를 렌더링하고, 렌더링 취소하고, 닫는 모든 작업을 처리하는 개체입니다. 레이아웃은 하위 뷰 작업을 위한 기본 제공 영역이 있는 일반 뷰입니다.
• AppRouter: 라우터에 경로 구성만 포함되도록 컨트롤러를 사용하여 작업 부하를 처리할 수 있는 새로운 유형의 라우터입니다.
• Events: Marionette는 Wreqr 프로젝트에서 확장되어 대규모 이벤트 기반 애플리케이션을 만드는 데 Backbone의 이벤트를 더욱 강력하게 만듭니다.

마리오네트가 할 수 있는 일의 표면적인 부분만 살펴보았습니다. GitHub로 이동하여 Wiki에서 해당 문서를 읽어 보는 것이 좋습니다.

또한 Andrew Burgess는 Tuts+ 프리미엄 고급 백본 패턴 및 기술 과정에서 마리오네트를 다루고 있습니다.

백본 네트워크 검증

Backbone.Validation은 문제의 작은 부분 집합, 즉 모델 검증을 채우는 것을 목표로 합니다. Backbone에는 여러 유효성 검사 확장 기능이 있지만 이 확장 기능이 커뮤니티에서 가장 많은 존경을 받은 것 같습니다.

실제로 모델에 대한 validate 方法，而是可以为模型创建 validation 속성을 작성할 필요는 없습니다. 이 속성은 유효성을 검사하려는 각 속성과 목록의 각 속성을 검증하기 위한 규칙을 지정하는 객체입니다. 또한 각 속성에 대한 오류 메시지를 지정하고 사용자 지정 함수를 전달하여 개별 속성의 유효성을 검사할 수도 있습니다. 아래에서 해당 웹 사이트의 예 중 하나를 수정한 예를 볼 수 있습니다.

확인할 수 있는 수많은 내장 유효성 검사기와 스키마가 있으며, 자체 전역 유효성 검사기를 사용하여 목록을 확장할 수도 있습니다. 이 Backbone 플러그인은 검증을 재미있게 만들지는 않지만 검증을 추가하지 않은 것에 대한 모든 변명을 제거합니다. 이 훌륭한 도구를 사용하는 방법에 대한 더 많은 예제와 자세한 지침을 보려면 해당 웹사이트를 방문하세요.

Backbone.LayoutManager

Backbone.LayoutManager는 Backbone의 뷰를 더 좋게 만드는 것입니다. Backbone.Marionette와 마찬가지로 메모리 누수를 방지하기 위한 정리 코드를 도입하고 모든 상용구를 처리하며 구성 및 애플리케이션별 코드만 남깁니다. 마리오네트와 달리 LayoutManager는 특히 뷰에 중점을 둡니다.

LayoutManager는 뷰에만 초점을 맞추기 때문에 마리오네트보다 뷰에 대해 더 많은 작업을 수행할 수 있습니다. 예를 들어, LayoutManager는 외부 파일에서 템플릿을 동적으로 로드하려고 할 때 비동기 렌더링을 수행할 수 있습니다.

LayoutManager는 마리오네트와는 매우 다른 방식이지만 하위 뷰도 처리할 수 있습니다. 그러나 어느 쪽이든 그것은 대부분 구성이므로 작업이 매우 단순해지고 모든 것을 직접 구현하려는 경우 수행해야 하는 작업의 90%가 제거됩니다. 아래에서 뷰에 세 개의 하위 뷰를 추가하는 간단한 예를 참조하세요.

Backbone.Layout.extend({
    views: {
      "header": new HeaderView(),
      "section": new ContentView(),
      "footer": new FooterView()
    }
});

像往常一样，请务必参阅 GitHub 页面和文档以了解更多信息。

Backbone.ModelBinder

Backbone.ModelBinder 在模型中的数据和视图显示的标记之间创建链接。您已经可以通过绑定到模型上的更改事件并再次渲染视图来完成此操作，但 ModelBinder 更高效且更易于使用。

看一下下面的代码：

var MyView = Backbone.View.extend({
    template: _.template(myTemplate),

    initialize: function() {
        // Old Backbone.js way
        this.model.on('change', this.render, this);
        // or the new Backbone 0.9.10+ way
        this.listenTo(this.model, 'change', this.render);
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
    }
});

这种方法的问题在于，每当更改单个属性时，我们都需要重新渲染整个视图。此外，在每次渲染时，我们都需要将模型转换为 JSON。最后，如果希望绑定是双向的（当模型更新时，DOM 也会更新，反之亦然），那么我们需要向视图添加更多逻辑。

此示例使用 Underscore 的 template 函数。让我们假设我们传递给它的模板如下所示：

<form action="...">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" name="firstName" value="<%= firstName %>">

    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" name="lastName" value="<%= lastName %>">
</form>

使用标签 <%= 和 %> 使 template 函数将这些区域替换为我们从模型发送的 JSON 中存在的 firstName 和 lastName 属性。我们假设该模型也具有这两个属性。

使用 ModelBinder，我们可以删除这些模板标签并以普通 HTML 形式发送。 ModelBinder 将查看 input 标记上的 name 属性的值，并自动将该属性的模型值分配给该标记的 value 属性。例如，第一个 input 的 name 设置为“firstName”。当我们使用 ModelBinder 时，它会看到这一点，然后将 input 的 value 设置为模型的 firstName 属性。

下面，您将看到我们之前的示例在切换到使用 ModelBinder 后的外观。另外，要意识到绑定是双向的，因此如果 input 标签更新，模型将自动为我们更新。

HTML 模板：

<form action="...">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" name="firstName">

    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" name="lastName">
</form>

JavaScript 视图：

var MyView = Backbone.View.extend({
    template: myTemplate,

    initialize: function() {
        // No more binding in here
    },

    render: function() {
        // Throw the HTML right in
        this.$el.html(this.template);
        // Use ModelBinder to bind the model and view
        modelBinder.bind(this.model, this.el);
    }
});

现在我们有了干净的 HTML 模板，我们只需要一行代码就可以使用 modelBinder.bind 将视图的 HTML 和模型绑定在一起。 modelBinder.bind 采用两个必需参数和一个可选参数。第一个参数是将绑定到 DOM 的数据的模型。第二个是将递归遍历的 DOM 节点，搜索要进行的绑定。最后一个参数是 binding 对象，如果您不喜欢默认用法，它指定如何完成绑定的高级规则。

ModelBinder 不仅仅可以用于 input 标签。它适用于任何元素。如果元素是某种类型的表单输入，例如 input、select 或 textarea，它将相应地更新这些元素的值。如果您绑定到一个元素，例如 div 或 span，它会将模型的数据放置在该元素的开始和结束标记之间（例如 <span name="firstName">[数据在此处] <span></span></span>)。

Backbone.ModelBinder 背后的功能比我在这里演示的要强大得多，因此请务必阅读 GitHub 存储库上的文档以了解所有相关信息。

结论

事情就这样结束了。我只介绍了少数扩展和插件，但这些是我认为最有用的。

Backbone 格局在不断变化。如果您想查看各种可用 Backbone 扩展的完整列表，请访问此 wiki 页面，Backbone 团队会定期更新该页面。

위 내용은 경험을 향상시키기 위해 확장 기능으로 트렁크를 강화하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!