搜尋

首頁 >CMS教程 >＆＃＆按 >擁抱 Ember.js 的世界

擁抱 Ember.js 的世界

王林
王林原創
2023-09-02 21:41:02889瀏覽

拥抱 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，那麼我們的假設是您正在尋求建立類似桌面的體驗 - 尤其是可擴展的體驗。事實上，該框架的口號是“一個用於開發雄心勃勃的 Web 應用程式的框架”，這告訴您它顯然不是您爸爸的 JavaScript 庫。

我之前提到過，Ember 利用 MVC 模式來促進正確的程式碼管理和組織。如果您從未進行過基於 MVC 的開發，那麼您絕對應該閱讀它。 Nettuts 有一篇關於該主題的精彩文章。對於熟悉這些概念的人來說，您應該有賓至如歸的感覺。我一直聽到的一件事是，從 Backbone 遷移到 Ember.js 實際上很容易，因為 Ember 為您做了很多繁重的工作，同時仍然保持那些開發人員習慣的程式碼組織模式。 p>

Ember 也依賴客戶端模板......很多。它使用 Handlebars 模板庫，該庫提供允許您建立基於 HTML 的動態模板的表達式。 Ember 開發人員可以將資料綁定到這些可嵌入表達式，並動態變更其應用程式的顯示。例如，我可以建立一個模板，該模板可以接收一組人員並將其顯示在無序列表中：

<ul>
 {{#each people}}
   <li>Hello, {{name}}!</li>
 {{/each}}
</ul>

注意“#each”表達式用作循環指令，枚舉“people”數組的每個元素並將“{{name}}”表達式替換為實際值。需要注意的是，雙括號是 Handlebars 用來辨識表達式的標記。這是一個小範例，稍後我們將深入了解更多細節。

Handlebars 是一個非常強大的客戶端模板引擎，我建議不僅查看 Ember 指南，還查看 Handlebars 網站本身，以充分掌握可用的選項。您將會經常使用它。

設定 Ember

Ember.js 依賴其他函式庫，因此您需要取得 jQuery 和 Handlebars 的副本。但是，等等，我不是說過 jQuery 和 Ember 在不同的空間發揮作用嗎？嗯，是的，我做到了，但事情是這樣的：Ember 團隊致力於不重新發明輪子。他們選擇 jQuery 來做它最擅長的事：使用 DOM。這是一件好事，因為 jQuery 在這方面確實很擅長。這也是他們選擇 Handlebars 的原因，這是一個出色的模板庫，恰好由 Ember 核心團隊成員 Yehuda Katz 編寫。

取得所需檔案的最簡單方法是存取 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 App = Ember.Application.create();

    此單行會建立對應用程式的路由器、控制器、檢視和範本的預設參考。
  • 路由物件：
    • App.ApplicationRoute
  • 控制器：
    • App.ApplicationController
  • 檢視：
    • App.ApplicationView
  • 模板：
    • 應用程式

    回到我上面建立的「employees」路由，當使用者導航到應用程式中的「/employees」時，Ember 將會尋找以下物件：
    • App.EmployeesRoute
    • App.EmployeesController
    • 員工
範本

如果沒有找到它們，它將建立每個實例的實例，但不會渲染任何內容，因為您尚未指定從中衍生資料的模型或用於顯示資料的範本。這就是命名約定如此重要的原因。它讓 Ember 知道如何處理與特定路線相關的任務，而無需您手動進行連線。

請注意，在第一個範例中，我使用單數名稱「Employee」來定義模型。這是故意的。 「員工」這個名稱的本質決定了我可能會與 0 到多名員工一起工作，因此建立一個可以靈活返回一名員工或所有員工的模型非常重要。此模型的單一命名約定不是 Ember 的要求，因為模型本身不知道稍後將使用它們的控制器。因此，您可以靈活地命名它們，但為了保持一致性，堅持此約定將使您的程式碼管理變得更加容易。 此外，我選擇使用

resource()

方法來定義我的路由，因為在這種情況下，我很可能會使用嵌套路由來管理特定員工資訊的詳細資訊頁面。我們將在本系列後面討論嵌套。

關鍵要點是，透過使用一致的命名方案，Ember 可以輕鬆管理將這些元件綁定在一起的掛鉤，而無需透過大量程式碼明確定義關係。

專案網站上提供了 Ember 命名約定的完整詳細信息，

必讀
。

下一步：建立應用程式

在本系列的下一部分中，我們將深入研究程式碼來為我們的應用程式建立基礎。

我們已經回顧了 Ember 的核心概念，並討論了該框架的關鍵高級方面。在本系列的下一部分中，我們將深入研究程式碼來為我們的應用程式建立基礎。在此期間，我想再次建議您開始查看 Handlebars 的文檔，以了解表達式語法。另外，如果您真的迫不及待地想要進入 Ember，請繼續關注 Tuts Premium，它將很快提供完整的課程，引導您建立基於 Ember 的應用程式！

正如我在本文開頭指出的，Ember.js 核心團隊領導 Yehuda Katz 和 Tom Dale 審查了此內容的準確性，並豎起大拇指。 Ember 團隊已獲批准！一會兒見！ ######

以上是擁抱 Ember.js 的世界的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：使用 NativeScript 開發即時應用程式：實現推播通知下一篇：使用 NativeScript 開發即時應用程式：實現推播通知

相關文章

看更多