[Tips on Ember 2] 如何嘗試 angle-bracket component

Yu_Huang 發(fā)布于2019-08-21 10:39 / 956人閱讀

摘要：警告版本是很不穩(wěn)定的，并不推薦使用于要上線的應用。如果你要嘗試新的特性，要么是新建一個測試用的，要么是你的應用離正式上線還早并且你和你的團隊折騰得起。在此功能正式發(fā)布之后應該是不需要這段補丁代碼的，目前來說也不會影響使用。

Ruby China 的朋友大概都知道我很喜歡 Ember，然而我用 Ember 的經(jīng)歷其實遠比不上 Angular 那么豐富（Ember 業(yè)余愛好，Angular 做正兒八經(jīng)的項目）。最近我換工作了，終于可以在新的項目里主導使用 Ember 來開發(fā) Web App，恰逢 Ember 進入了 2.0 時代，許多東西和當初自己瞎玩的時候相比變化都很大。于是我就想把接下來在實際工作中的一些經(jīng)驗技巧都記錄下來發(fā)在 Ruby China，希望對喜歡 Ember，關注前端開發(fā)的朋友們有所幫助。

來到新的公司新的團隊，終于可以徹徹底底的使用 Ember 了，由于接下來有了發(fā)揮的空間和自由，所以我特別想先嘗試嘗試那些“傳說中了好久”的新特性，第一個想到的就是 angle-bracket component（也就是尖括號形式的 component，寫起來如同 HTML 一樣，這也是 Angular／React 等框架創(chuàng)造 component 的形式，一度是 Angular 的主推賣點）。

雖然 Ember 2.0 已經(jīng)發(fā)布了，但是 angle-bracket component 還要等到 ~2.1 才能在正式版本里出現(xiàn)，如果現(xiàn)在就想嘗鮮的話就得使用 canary 版本了，這主要是因為 Ember 的新特性需要手動開啟 |44135dc37db6e69bf4a7cd78398c5a340| 才能嘗試，而目前只有 canary 版本允許你開啟 Feature Flags（當前可以使用的 feature flags 有一份列表可查）。

?警告：canary 版本是很不穩(wěn)定的，并不推薦使用于要上線的應用。如果你要嘗試新的特性，要么是新建一個測試用的 Ember App，要么是你的應用離正式上線還早并且你（和你的團隊）折騰得起。就個人經(jīng)驗來說 canary 版本本身還算穩(wěn)定（畢竟有測試），但問題主要出在：1）API 的變化沒有文檔，你需要自己去跟蹤 issues；2）周邊工具會收到影響（比如我在嘗試 angle-bracket component 的時候，ember inspector 就有 bug 了，會影響正常的開發(fā)）

下面簡要列舉開啟 angle-bracket component 相關的 feature flags 的步驟：

升級 ember 和 ember-data（可選）至 canary 版本

更改 bower.json 文件內(nèi)相關的部分為：

"dependencies": {
  "ember": "components/ember#canary",
  "ember-data": "components/ember-data#canary"
}

然后執(zhí)行 $ bower uninstall ember && bower uninstall ember-data && bower install，或者你也可以不去 uninstall 直接嘗試 bower install，但是有時候會需要解決煩人的依賴問題。

開啟相關的 feature flags

編輯 config/environment.js，在 ENV.EmberENV.FEATURE 下添加下面的代碼：

var ENV = {
  // ...
  EmberENV: {
    FEATURES: {
        "ember-htmlbars-attribute-syntax": true,
        "ember-htmlbars-inline-if-helper": true,
        "ember-htmlbars-component-generation": true
    }
  // ...
  }
}

重寫舊的 components

舊的 components 都是 Ember.Component 的子類，而 angle-bracket component 則是 Ember.GlimmerComponent 的子類，所以你只需要保證這一點就可以完成轉換了。一個新創(chuàng)建的 angle-bracket component 的代碼看起來是這樣的：

import Ember from "ember"

export default Ember.GlimmerComponent.extend({
})

不出意外的話我認為當正式版本發(fā)布后，現(xiàn)在的 Ember.Component 將被 Ember.GlimmerComponent 取代，所以以后可能還得改回來（這應該還有段日子的）。內(nèi)部其他的 API 目前還是以 Ember.Component 的文檔為準，未來有什么變化以后再看吧。

現(xiàn)在重要的是 component template 的寫法，我在測試的時候把一個登錄表單封裝成了 component，以下是其 template 的寫法和使用的方法：

如上，可以看到新的模版語法里給 component 傳遞數(shù)據(jù)和訪問數(shù)據(jù)的一些寫法上的變化，這些變化其實是依賴于 "ember-htmlbars-attribute-syntax" 這個 feature flag 的。

修復一個 deprecation warning

觀察修改后的應用，可以看到這樣的警告：

修補這個問題的代碼很簡單：

Ember.GlimmerComponent.reopenClass({
  isComponentFactory: true
})

這段代碼可以插入到 app/app.js 文件里，在應用初始化的時候即時生效。在此功能正式發(fā)布之后應該是不需要這段補丁代碼的，目前來說也不會影響使用。

結束

就是這樣了，從現(xiàn)在開始你可以使用新的語法來創(chuàng)建 components，除此之外還有新的 htmlbars-attribute-syntax（上例所示）和 htmlbars-inline-if-helpers 特性。HTMLBars 對于模版語法帶來的改變，可以參考這篇總結性的文章：http://colintoh.com/blog/htmlbars

下一篇我打算講講 Sass 在 Ember CLI 里面的一些最佳方案，其中包括如何整合 Bootstrap 的 Sass 版（而不是直接 import 它的 css 版本），以及如何在此基礎上使用其他的 Sass 庫／框架等等。這個選題是因為新團隊里的伙伴們對這件事情有些爭執(zhí)，所以我就確定了一個最佳方案，宗旨是：1）保證最大的靈活性和定制性；2）在此基礎上讓設置步驟足夠簡單。

我也樂意聽聽大家的反饋，如果有什么事情是你覺得很想了解的，或是你已經(jīng)做到了但是覺得還不足夠好的，可以回復我，等我有了答案之后我也會如此整理出來和大家分享。

關于 Ember Inspector 的 bug

目前使用 canary 版本的時候，ember inspector 會有一個隱蔽的 bug，其表現(xiàn)是：當你在 ember inspector 開啟的狀態(tài)下（開發(fā)者工具打開并且當前的 tab 是 Ember）刷新當前應用時頁面會變空白，此時你可以在 console 下看到這樣的警告：

這個問題其實和你的應用無關，是 ember inspector 在刷新后重新初始化的時候造成的，經(jīng)個人測試只在最近的 canary 版本里存在，估計 ember inspector 更新以后會修復吧。有一個簡單的臨時解決辦法就是關閉開發(fā)者工具然后再刷新就好了，之后再開啟開發(fā)者工具之后 ember inspector 還可以用。其實你只要保證刷新的時候 ember inspector 不處于當前激活的 tab 就好了，開發(fā)者工具可以不關的。

原文首發(fā)于 Ruby China 社區(qū)，轉載請注明。

GPU云服務器云服務器 ember 2 js Ember tips tips1

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/85965.html

[Tips on Ember 2] Ember CLI with Webstorm

摘要：好，你用就用吧，各種問題自己也不會看文檔問谷歌，成天怨聲載道的不得不吐槽一下現(xiàn)在的年輕人。為什么使用有關和的糾結歷史可以去谷歌一下，此處不再啰嗦最根本的原因就是對的支持更好，更新和維護也更勤快。 Tips on Ember 2 對我來說是沒什么計劃性的寫作，我只是把它當做是每天工作的總結日志，一個很重要的目的是為團隊做一些技術事務的整理，以幫助一些新人快速成長起來。如果有些內(nèi)容不能滿足...

curlyCheng 2019-08-21 10:39 評論0 收藏0
[Tips on Ember 2] How components works when out of

摘要：因為組件的存在范圍被限制在以內(nèi)，這就是這種機制目前存在的意義所在。組件都是可以傳遞參數(shù)或外部作用域的，利用此機制進行判斷來執(zhí)行可選行為，這是對用戶友好的舉措。這一篇還是一個簡單的例子所引發(fā)的思考。你看，如今的框架和庫，無論規(guī)模大小功能多少，它們在本質上都朝著組件化的思路快速演進著。Angular 有 directives，Angular 2應該也還是這個叫法；Ember 從 Vie...

jk_v1 2019-08-21 10:40 評論0 收藏0
[Tips on Ember 2] UI 布局與應用狀態(tài)的關系處理

摘要：如果說傳統(tǒng)的前端開發(fā)是以頁面為中心來入手的話，那么現(xiàn)代的應用開發(fā)就是以狀態(tài)為中心來著手設計和開發(fā)的。初步分析路由是怎么管理狀態(tài)的復雜的話題簡單說在中，應用的每一個可能的狀態(tài)都是通過體現(xiàn)的。引子 SPA（單頁面應用）的核心是什么？自該類型應用誕生以來我最多思考的問題就是這個?，F(xiàn)在前端 SPA 框架滿天飛，許多不是框架的也被稱作框架，究竟有什么代表性的層（layer）能讓一個系統(tǒng)稱得上...

wayneli 2019-08-21 10:39 評論0 收藏0
[Tips on Ember 2] Ember CLI 和 Sass (及其周邊) 的協(xié)同工作

摘要：今天這篇主要講講里關于樣式開發(fā)的一些前期準備工作，主要是和。總的來說就不要再用了，又大又笨而且連親爹都準備放棄它了，未來將是小快靈組件協(xié)同工作的大趨勢，就是可以用來替代的組件庫。今天這篇主要講講 Ember CLI 里關于樣式開發(fā)的一些前期準備工作，主要是 Sass 和 Bootstrap。 Ember Addons 是尋找各種組件的絕佳場所，下文將要介紹的一些都可以在這里找到，沒事...

ziwenxie 2019-08-21 10:39 評論0 收藏0
使用service實現(xiàn)登錄、權限控制

摘要：就沒必要動牛刀，創(chuàng)建一個數(shù)據(jù)庫了執(zhí)行完后，在目錄下創(chuàng)建一個程序，自動植入到當前項目中，訪問的和與訪問域名端口一致。就沒必要動牛刀，創(chuàng)建一個數(shù)據(jù)庫了本篇博文將為你介紹如何使用實現(xiàn)權限控制，我會創(chuàng)建一個簡單的登錄示例加以說明。文章來源：http://blog.ddlisting.com 官網(wǎng)對于登錄、用戶權限的介紹只有一段簡單的說明，并沒有詳細說明如何使用service實現(xiàn)權限控制。下面...

Aomine 2019-08-19 18:32 評論0 收藏0