Ember.js의 세계를 받아들이세요-Word누르다-php.cn

拥抱 Ember.js 的世界

사용 가능한 JavaScript 라이브러리가 많으며 대부분은 일반적인 웹 사이트에서 요구하는 전통적인 DOM 중심 상호 작용을 제공하는 데 매우 능숙합니다. 그러나 단일 페이지 애플리케이션을 위한 관리 가능한 코드 기반을 구축하는 경우 문제를 해결하려면 완전히 새로운 프레임워크 세트가 필요합니다.

오래된 속담처럼: "작업에 가장 적합한 도구를 사용하십시오."

jQuery와 같은 기존 라이브러리가 데스크톱과 같은 경험을 구축하는 데 도움이 되지 않는 것이 아니라 단지 사용 사례가 아니며 데이터 바인딩, 이벤트 라우팅, 상태 관리와 같은 기능이 부족할 뿐입니다. 물론, 이러한 기능 중 일부를 구현하기 위해 여러 플러그인을 함께 엮을 수도 있지만 제 생각에는 이러한 특정 문제를 해결하기 위해 처음부터 특별히 구축된 프레임워크로 시작하는 것이 더 합리적입니다. 옛말처럼: "작업에 가장 적합한 도구를 사용하세요."

저는 최근 Ember.js 팀과 인터뷰를 했습니다. 저의 동기는 제가 "새로운 인기"라고 부르는 Ember.js에 대해 알아보는 것이었습니다.

Ember는 위에서 설명한 요구 사항을 충족하며 이는 jQuery가 개발자를 빠르게 시작하고 실행하는 방법을 연상시키는 방식입니다. 팀은 대규모 애플리케이션 구축에서 얻은 수년간의 전문 지식과 지식을 활용하여 모델/뷰/컨트롤러 기반 애플리케이션을 설계하고 구축하는 데 내재된 많은 복잡성을 추상화하기 위한 조치를 의도적으로 취했습니다.

제가 하고 싶은 것은 프레임워크의 개념을 단계별로 소개하는 여러 부분으로 구성된 기사 시리즈를 통해 Ember.js를 빠르게 익힐 수 있도록 돕는 것입니다. 우리는 일반적인 소개(이 기사가 됨)부터 시작한 다음 점차적으로 완전한 애플리케이션을 구축할 것입니다. 무엇보다도 이는 제가 배운 개념을 강화하고 새로운 기술을 배우는 데에도 도움이 될 것입니다! 저는 Ember.js 팀이 이 자료의 정확성을 검토하고 어쩌면 여기에 가치 있는 내용을 기여할 수 있도록 최선을 다할 것입니다.

계속하기 전에 주의하세요: Ember.js는 여러분에게 많은 마법을 선사합니다. 때때로 코드를 보고 "어? 그게 어떻게 되는 거지?"라고 말할 때가 있습니다. 저는 거기에 가본 적이 있고 몇 가지 사항을 정리하려고 노력할 것이지만 Ember 프레임워크 코드의 내부를 탐구하지는 않을 것입니다. 대신 해당 도구와 API를 활용하여 애플리케이션을 구축하는 방법에 대해 설명하겠습니다.

그럼 시작해 보겠습니다.

핵심 개념

Ember.js는 전통적인 웹사이트를 구축하기 위한 프레임워크가 아닙니다.

가장 먼저 기억해야 할 점은 Ember.js는 전통적인 웹사이트를 구축하기 위한 프레임워크가 아니라는 것입니다. jQuery 및 MooTools와 같은 라이브러리가 이에 적합합니다. Ember.js를 고려하고 있다면 데스크톱과 같은 경험, 특히 확장 가능한 경험을 구축하려고 한다고 가정합니다. 실제로 프레임워크의 태그라인은 "야심찬 웹 애플리케이션 개발을 위한 프레임워크"입니다. 이는 분명히 아버지의 JavaScript 라이브러리가 아님을 알려줍니다.

앞서 Ember는 MVC 패턴을 활용하여 적절한 코드 관리 및 구성을 촉진한다고 언급했습니다. MVC 기반 개발을 한번도 해본 적이 없다면 꼭 읽어보세요. Nettuts+에는 이 주제에 대한 훌륭한 기사가 있습니다. 이러한 개념에 익숙하신 분들은 편안함을 느끼실 것입니다. 내가 계속 듣는 한 가지는 Backbone에서 Ember.js로 마이그레이션하는 것이 실제로 쉽다는 것입니다. 왜냐하면 Ember는 개발자에게 익숙한 코드 구성 패턴을 유지하면서 많은 무거운 작업을 수행하기 때문입니다.

p>Ember는 클라이언트 측 템플릿에도 의존합니다...

많이. 이는 동적 HTML 기반 템플릿을 생성할 수 있는 표현식을 제공하는 Handlebars 템플릿 라이브러리를 사용합니다. Ember 개발자는 이러한 삽입 가능한 표현식에 데이터를 바인딩하고 애플리케이션의 표시를 동적으로 변경할 수 있습니다. 예를 들어, 일련의 사람들을 가져와 정렬되지 않은 목록으로 표시하는 템플릿을 만들 수 있습니다. 으아악

"#each" 표현식은 루프 명령으로 사용되어 "people" 배열의 각 요소를 열거하고 "{{name}}" 표현식을 실제 값으로 대체합니다. 이중 괄호는 핸들바에서 표현식을 식별하는 데 사용되는 표시입니다. 이는 작은 예이므로 나중에 자세히 설명하겠습니다.

Handlebars는 매우 강력한 클라이언트측 템플릿 엔진이므로 Ember 가이드뿐만 아니라 Handlebars 웹사이트 자체도 확인하여 사용 가능한 옵션을 완전히 파악하는 것이 좋습니다. 많이 사용하게 되실 겁니다.

Ember 설정

Ember.js는 다른 라이브러리에 의존하므로 jQuery 및 Handlebars의 복사본을 가져와야 합니다. 그런데 잠깐만요, 제가 jQuery와 Ember가 서로 다른 공간에서 작동한다고 말하지 않았나요? 네, 그렇습니다. 하지만 중요한 점은: Ember 팀은 바퀴를 재발명하지 않기 위해 최선을 다하고 있다는 것입니다. 그들은 가장 잘하는 일, 즉 DOM 작업을 수행하기 위해 jQuery를 선택했습니다. jQuery가 이 일을 정말 잘하기 때문에 이것은 좋은 일입니다. 이것이 그들이 Ember 핵심 팀 멤버인 Yehuda Katz가 작성한 환상적인 템플릿 라이브러리인 Handlebars를 선택한 이유입니다.

필요한 파일을 얻는 가장 쉬운 방법은 Ember.js Github 저장소를 방문하여 스타터 키트를 다운로드하는 것입니다. 시작하는 데 도움이 되는 샘플은 다음과 같습니다. 작성 당시에는 다음 내용이 포함되었습니다.

人类 1.0 RC1
处理栏 1.0 RC3
jQuery 1.9.1

还有一个基本的 html 模板，其编码包含所有关联的库（jQuery、Ember 等），以及 Handlebars 模板和“app.js”的示例，其中包含用于启动基本的 Ember 应用程序。

<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
<script src="js/libs/ember-1.0.0-rc.1.js"></script>
<script src="js/app.js"></script>

로그인 후 복사

请注意，app.js 不是框架的一部分。这是一个普通的 ole JavaScript 文件；您可以将其命名为任何您想要的名称。而且，虽然我们将在本教程系列中使用它，但以后您可能最终会将 JavaScript 拆分为多个文件，就像处理任何其他网站或应用程序一样。此外，Ember 并不期望您的框架文件有特定的目录结构。

当您查看入门工具包代码时，它可能看起来像典型的网站代码。从某些方面来说，你是对的！不过，一旦我们开始组织事情，您就会看到构建 Ember 应用程序有何不同。

余烬之地的布局

在开始编写代码之前，了解 Ember.js 的工作原理以及了解构成 Ember 应用程序的移动部件非常重要。让我们看一下这些部分以及它们之间的关系。

模板

模板是定义用户界面的关键部分。正如我之前提到的，Handlebars 是 Ember 中使用的客户端库，在为应用程序创建 UI 时广泛使用该库提供的表达式。这是一个简单的例子：

<script type="text/x-handlebars">
     <h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>

로그인 후 복사

请注意，表达式会混合到 HTML 标记中，并通过 Ember 动态更改页面上显示的内容。在这种情况下，{{firstName}} 和 {{lastName}} 占位符将被从应用检索的数据替换。

Handlebars 通过灵活的 API 提供强大的功能。了解它提供的功能对您来说非常重要。

路由

应用程序的路由器有助于管理应用程序的状态。

应用程序的路由器有助于管理应用程序的状态以及用户导航应用程序时所需的资源。这可能包括从模型请求数据、将控制器连接到视图或显示模板等任务。

您可以通过为应用程序中的特定位置创建一条路线来实现此目的。路由指定应用程序的各个部分以及与其关联的 URL。 URL 是 Ember 用于了解需要向用户呈现哪种应用程序状态的关键标识符。

App.Router.map( function() {
   this.route( 'about' ); // Takes us to "/about"
});

로그인 후 복사

路由的行为（例如：从模型请求数据）通过 Ember 路由对象的实例进行管理，并在用户导航到特定 URL 时触发。一个示例是从模型请求数据，如下所示：

App.EmployeesRoute = Ember.Route.extend({
   model: function() {
       return App.Employee.find();
   }
});

로그인 후 복사

在本例中，当用户导航到应用程序的“/employees”部分时，路由会向模型请求所有员工的列表。

模型

数据的对象表示。

模型是应用程序将使用的数据的对象表示。它可以是一个简单的数组或通过 Ajax 请求从 RESTful JSON API 动态检索的数据。 Ember 数据库提供了用于在应用程序中加载、映射和更新数据到模型的 API。

控制器

控制器通常用于存储和表示模型数据和属性。它们就像代理一样，使您可以访问模型的属性并允许模板访问它们以动态渲染显示。这就是模板始终连接到控制器的原因。

要记住的主要事情是，当模型检索数据时，您将使用控制器以编程方式将该数据公开给应用程序的不同部分。虽然模型和控制器看起来紧密耦合，但事实上，模型本身并不知道稍后将使用它们的控制器。

您还可以存储需要保留但不需要保存到服务器的其他应用程序属性。

观看次数

Ember.js 中的视图旨在管理围绕用户交互的事件，并将其转换为在应用程序中有意义的事件。因此，如果用户单击按钮来删除员工，则视图负责解释本机浏览器单击事件并在应用程序当前状态的上下文中对其进行适当处理。

命名约定

Ember.js 帮助最大程度地减少所需代码量并在幕后为您处理事务的方法之一是通过命名约定。定义和命名路由（和资源）的方式会影响控制器、模型、视图和模板的命名。例如，如果我创建一条名为“employees”的路线：

App.Router.map( function() {
   this.resource( 'employees' );
});

로그인 후 복사

然后我会命名我的组件，如下所示：

경로 개체: App.EmployeesRoute
컨트롤러: App.EmployeesController
모델: App.Employee
보기: App.EmployeesView
템플릿: 직원

이 명명 규칙을 사용하는 것은 두 가지 목적으로 사용됩니다. 첫째, 유사한 구성요소 간의 의미론적 관계를 제공합니다. 둘째, Ember는 존재하지 않을 수도 있는 필수 객체(예: 경로 객체 또는 컨트롤러)를 자동으로 생성하고 애플리케이션에서 사용할 수 있도록 연결할 수 있습니다. 이것이 앞서 말한 '마법'이다. 실제로 이것은 Application 객체를 인스턴스화할 때 전역 애플리케이션 수준에서 Ember가 수행하는 작업과 정확히 같습니다.

var 앱 = Ember.Application.create();

이 한 줄은 애플리케이션의 라우터, 컨트롤러, 보기 및 템플릿에 대한 기본 참조를 생성합니다.

경로 개체: App.ApplicationRoute
컨트롤러: App.ApplicationController
보기: App.ApplicationView
템플릿:App

위에서 생성한 "employees" 경로로 돌아가서 사용자가 애플리케이션에서 "/employees"로 이동하면 Ember는 다음 개체를 찾습니다.

App.EmployeesRoute
App.EmployeesController
직원템플릿

찾지 못하면 각각의 인스턴스를 생성하지만 데이터를 파생할 모델이나 데이터를 표시하는 데 사용할 템플릿을 지정하지 않았기 때문에 아무것도 렌더링하지 않습니다. 이것이 명명 규칙이 중요한 이유입니다. 이를 통해 Ember는 수동으로 연결할 필요 없이 특정 경로와 관련된 작업을 처리하는 방법을 알 수 있습니다.

첫 번째 예에서는 모델을 정의하기 위해 단수형 "Employee"를 사용했습니다. 이는 의도적인 것입니다. "직원"이라는 이름의 특성상 직원이 0명부터 많을 수도 있으므로 직원 한 명 또는 직원 전체를 반환할 수 있는 유연성을 갖춘 모델을 구축하는 것이 중요합니다. 모델 자체는 나중에 사용할 컨트롤러를 모르기 때문에 모델에 대한 단일 명명 규칙은 Ember의 요구 사항이 아닙니다. 따라서 이름을 유연하게 지정할 수 있지만 일관성을 위해 이 규칙을 준수하면 코드 관리가 더 쉬워집니다.

또한 resource() 메서드를 사용하여 경로를 정의하기로 결정했습니다. 이 경우 특정 직원 정보에 대한 세부 정보 페이지를 관리하기 위해 중첩된 경로를 사용할 가능성이 높기 때문입니다. 중첩에 대해서는 이 시리즈의 뒷부분에서 논의하겠습니다.

중요한 점은 Ember에서는 일관된 명명 체계를 사용하여 많은 코드를 통해 관계를 명시적으로 정의하지 않고도 이러한 구성 요소를 함께 묶는 후크를 쉽게 관리할 수 있다는 것입니다.

Ember의 명명 규칙에 대한 자세한 내용은 프로젝트 웹사이트에서 확인할 수 있으며, 꼭 읽어야 합니다.

다음 단계: 앱 구축

이 시리즈의 다음 부분에서는 애플리케이션의 기반을 만드는 코드를 자세히 살펴보겠습니다.

우리는 Ember의 핵심 개념을 검토하고 프레임워크의 주요 고급 측면을 논의했습니다. 이 시리즈의 다음 부분에서는 애플리케이션의 기반을 만드는 코드를 자세히 살펴보겠습니다. 그동안 표현식 구문을 이해하려면 핸들바 설명서를 살펴보시기 바랍니다. 또한, 정말로 Ember를 사용하고 싶으시다면 Tuts+ Premium을 계속 지켜봐 주시기 바랍니다. Tuts+ Premium은 곧 Ember 기반 애플리케이션 구축을 안내하는 전체 과정을 제공할 것입니다!

이 기사 시작 부분에서 언급했듯이 Ember.js 핵심 팀 리더인 Yehuda Katz와 Tom Dale은 이 콘텐츠의 정확성을 검토하고 엄지손가락을 치켜세웠습니다. Ember 팀이 승인되었습니다! 나중에 봐요!

위 내용은 Ember.js의 세계를 받아들이세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!