帮酷LOGO
  • 显示原文与译文双语对照的内容
Your first choice for hybrid mobile applications

  • 源代碼名稱:erste
  • 源代碼網址:http://www.github.com/dashersw/erste
  • erste源代碼文檔
  • erste源代碼下載
  • Git URL:
    git://www.github.com/dashersw/erste.git
  • Git Clone代碼到本地:
    git clone http://www.github.com/dashersw/erste
  • Subversion代碼到本地:
    $ svn co --depth empty http://www.github.com/dashersw/erste
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Erste

    npm versionGitHub license

    用於構建高性能混合移動應用程序的視圖庫

    erste.js 是一個帶有態度的零炒作視圖庫。 它是為了在移動設備上實現最大的性能。

    特性

    • 輕量,10kb 個縮小&壓縮
    • 無相關性
    • 沒有魔法作為聲明性的,也沒有更多
    • 使用優秀的老 DOM api,HTML5 &來構建現代應用沒有陷阱
    • 簡潔,結構化和可以訪問的API

    概述

    // 1. Import erste,import {Component} from'erste';// 2. Create your application,classAppextendsComponent {
     constructor() {
     super();
     this.counter=0;
     }
     // 3. Arrange your view,template() {
     return` <div> <h1>${this.counter}</h1> <button class="increment">Increment</button> <button class="decrement">Decrement</button> </div>`;
     }
     // 4. Create your methods,increment() { this.$('h1').innerText=++this.counter; }
     decrement() { this.$('h1').innerText=--this.counter; }
     // 5. Bind your events.getevents() {
     return {
     'tap': {
     '.increment':this.increment,
     '.decrement':this.decrement }
     }
     }
    }// 6. Make your application run.newApp().render(document.body);

    table-內容

    動機

    構建應用程序應該簡單簡單。 現在使用的大多數框架都難以實現,它們對邊際收益做出了錯誤的妥協。 一個超級聲明性框架,它的大小為,由於它的模糊和不熟悉的api,。上的第二個引導時間。 這是熟悉的?

    我們作為應用程序開發人員不需要優秀的特性,只是在紙上或者在on談話中。 我們需要一個 easy-to-use,合理的API 。 所使用框架的認知負荷最好是 0. 當你想區分'<'和'&'時,祝你好運。

    erste.js 是應用程序開發的一種鄭重方法。 它為你提供了開始的插件,並且不嘗試從你的應用程序中偷偷。 它讓你專註於你自己的源代碼,並且擺脫了。

    安裝

    直接下載

    使用 Bower

    bower install --save erste

    使用 npm

    npm install --save erste

    使用閉包編譯器構建

    erste.js 在Google閉包編譯器中非常出色。 軟體實際上是用閉包編譯器構建的,所以如果你使用了閉包編譯器,你也可以使用 goog.require 或者 import 將源代碼的源代碼設置為最小的佔用量和最大的性能,並使用你的源代碼。

    示例應用程序

    首頁:Cordova,Cordova,popular,popular,popular,Cordova,showcases,showcases,showcases,showcases,showcases,showcases,showcases,showcases,showcases,showcases,showcases 。 你可以學習如何構建和管理複雜視圖層次結構,處理用戶事件並使用包含的選項卡欄,導航欄,側邊欄,拉組件和無限滾動組件。 存儲庫還包含一個 Gulpfile.js,它包含了使用ES6構建應用程序的常見任務,並通過 Babel 。

    構建你的第一個應用程序

    GUI應用程序是用組件架構構建的。 這不是最新趨勢,而是架構在 40年前定義的方式。 所以在 erste.js, 中有一個簡單且簡單的構建 block - Component 類。 應用程序中看到和觸摸的所有東西都是 erste.js, 中的組件,但是它也提供一些特殊的構造,。 這些是 View 類,它是顯示全視圖的主類,用於填充屏幕和它的他組件的生命周期。

    root-視圖

    每個應用程序都以 root 視圖開頭。 它是你在 <body> 標籤中放置的第一件事,一個包括所有應用程序的視圖。

    通過在 erste.js 中擴展 View 類來編寫 root 視圖;

    root-view.js:

    import {View} from'erste';classRootViewextendsView {
     template() {
     return` <root-view> <h1>Hello world!</h1> </root-view>`;
     }
    }

    在這裡你需要重寫的唯一東西是 template 方法。 注意,模板只是 erste.js. 中的標記,它們沒有解析為聲明性語法,因此 <root-view> 只是一個標記。 由於我們面向現代的HTML5-compatible瀏覽器,你實際上可以使用定製標記來區分標記。 否則,你只需使用普通 <div> 。 實際上,任何元素都可以做為模板,而 block 元素作為 root 視圖有意義。

    你現在應該將這個視圖插入到 DOM 。 有兩種方法可以做到這一點,最簡單

    index.js:

    importRootViewfrom'./root-view';document.body.innerHTML=newRootView();

    這隻是將組件的模板插入到 body 。 更涉及的替代方法是手動呈現視圖的DOM元素;

    index.js:

    import RootView from './root-view';
    new RootView().render();

    注意,在不提供參數時,render方法將這裡視圖直接呈現到 document.body 。 或者,你可能希望將所需的宿主元素作為呈現方法的第一個參數傳遞給 new RootView().render(document.body);

    我們將進一步討論這兩種方法的含義。

    DOM事件

    在 erste.js. 中處理DOM事件完全自動化,我們承認大多數 Bug 和問題都是由於處理DOM事件( 尤其是忘記刪除那些導致內存泄露的) 而導致的。 此外,手動DOM監聽器會妨礙應用程序的性能。 因此,erste.js 提供了完整的事件管理系統,可以以一種聲明性的方式為你解決所有這些問題。

    erste.js 還內置了內置手勢識別器,提供了諸如 taplongTapswipe 等觸摸事件。

    讓我們在 root 視圖中的按鈕上監聽tap事件,並做一些沒有意義的事情;

    root-view.js:

    import {View} from'erste';classRootViewextendsView {
     template() {
     return` <root-view> <h1>Hello world!</h1> <button>Tap me!</button> </root-view>`;
     }
     onTapButton() {
     this.$('h1').innerText='Thanks for the tap!';
     }
     getevents() {
     return {
     'tap': {
     'button':this.onTapButton }
     }
     }
    }

    這裡你會注意到的第一件事是 events 屬性的聲明。 它是一個對象,它的鍵是事件類型和值,是另一個帶有對應于CSS選擇器和對應於事件處理程序。

    第二,手動DOM更新。 erste.js 不提供任何數據綁定功能。 數據綁定,無論你採用什麼技術,總是一個糟糕的執行者。 由於 erste.js的目標是構建應用程序最顯著的方式,因這裡我們決定使用聲明性DOM更新並進行手動更新。

    然而,這帶來了有效性問題,因為jQuery代碼處理不好的問題仍然在某些記憶中新鮮。 手動管理DOM確實有些惡意的方式,而且我們希望你能夠堅持最佳實踐,而不會損害方便。 因此,我們提供了兩個 helper 方法,$$$ 。 你可能已經猜到了,這些是圍繞 querySelectorquerySelectorAll DOM api的簡單包裝器。 這些調用也是作用域,這意味著 this.$('button') 實際上轉換為 this.el.querySelector('button'),其中 this.el 是組件的DOM元素。 這是一種非常高效和直接的引用DOM元素的方法。

    :DOM事件管理如何工作

    erste.js 提供了一個聲明性的方法來管理DOM事件,通過大量利用事件委派。 在 erste.js, 中,每個DOM事件類型都有一個全局事件處理程序。 當事件發生時,它的全局處理程序接收它並檢查是否在組件中定義了適當的處理。 如果找到這樣的組件,則將事件轉發到指定的處理程序。 儘管事件管理被委託給 body 上的全局處理器,但是事件傳播仍然可以正常工作,因為。 這讓你可以使用常規的web開發中習慣的事件處理方法,其中父組件可以偵聽子組件上發生的事件。

    創建其他組件

    erste.js 不影響你的生命周期管理。 創建它的他視圖和組件是嚴格必要的,這意味著你可以以手動實例化視圖,並且需要。 我們認為,移動應用優化的一個關鍵步驟是手動管理實例化和處理大量組件。

    讓我們把簡單的按鈕和標籤變成獨立的組件。

    button-with-label.js:

    import {Component} from'erste';classButtonWithLabelextendsComponent {
     template() {
     return` <button-with-label> <h1>Hello world!</h1> <button>Tap me!</button> </button-with-label>`;
     }
     onTapButton() {
     this.$('h1').innerText='Thanks for the tap!';
     }
     getevents() {
     return {
     'tap': {
     'button':this.onTapButton }
     }
     }
    }

    我們基本上把所有的邏輯轉移到可重用的組件中。 這裡要注意的一點是,template 方法應該返回一個單獨的HTML元素。 因此,我們將 <h1><button> 包裝在 <button-with-label> 中。

    然後 root 視圖就變得簡單了

    root-view.js:

    import {View} from'erste';importButtonWithLabelfrom'./button-with-label';classRootViewextendsView {
     constructor() {
     super();
     this.buttonWithLabel=newButtonWithLabel();
     }
     template() {
     return` <root-view>${this.buttonWithLabel} </root-view>`;
     }
    }

    下面是聲明性 erste.js的方式;視圖和組件可以包含其他組件,只要在模板文本中包含它們。

    基於組件的組件生命周期管理

    在本例中,我們選擇在 RootView的構造函數中實例化子組件。 雖然這是一個非常常見的場景,由於某些原因,我們可能希望推遲子組件的初始化。

    選項 1: 聲明性

    我們可以在 template 方法中創建組件,以便僅在視圖被渲染時創建。 這不是可以維護的,但在某些情況下可能是公平的權衡。 那麼 RootView 中的template 方法可以如下所示:

    root-view.js:

    /*.. . previous code.. . */template() {
     this.buttonWithLabel=newButtonWithLabel();
     return` <root-view>${this.buttonWithLabel} </root-view>`;
     }
    選項 2: 使用 erste.js API命令

    子組件在實例化時可能要求它的父組件處於DOM中。 在這些情況下,當父級呈現到DOM后,強制將子級追加到父級中。 在這種情況下,RootView 看起來像:

    root-view.js:

    import {View} from'erste';importButtonWithLabelfrom'./button-with-label';classRootViewextendsView {
     onAfterRender() {
     this.buttonWithLabel=newButtonWithLabel();
     this.buttonWithLabel.render(this.el);
     }
     template() {
     return`<root-view></root-view>`;
     }
    }

    當然,你也可以在 RootView 構造函數中實例化 ButtonWithLabel,並在 onAfterRender 中呈現它。

    選項 3: 使用 DOM API命令

    如果你不喜歡記住自定義 render 方法,那麼你也可以使用本機 appendChild DOM API 。

    在這種情況下,RootView 看起來像:

    root-view.js:

    import {View} from'erste';importButtonWithLabelfrom'./button-with-label';classRootViewextendsView {
     onAfterRender() {
     this.buttonWithLabel=newButtonWithLabel();
     this.el.appendChild(this.buttonWithLabel.el);
     }
     template() {
     return`<root-view></root-view>`;
     }
    }

    注意,這裡需要訪問 ButtonWithLabel 組件的el 屬性,這給了我們DOM元素。 同時,當你第一次訪問 el 時,會出現一個隱式。 由於 el 可以能是空的,因這裡 erste.js 假設每當你想引用 el 時,你實際上想要使組件呈現出來。 如果組件之前沒有呈現,為了方便起見,erste.js 首先將它呈現到DOM元素中,然後再返回給你。

    創建主視圖和細節視圖,或者引入 ViewManager

    移動應用程序廣泛使用了主/細節視圖方案,它是 erste.js的第一個民民。

    ViewManager 是一個類,用於編排詳細的視圖和管理視圖層次結構,以便完全回到以前的視圖。

    修改 root 視圖使它的成為顯示項列表的主視圖,並引入詳細視圖。 為了便於內部視圖層次結構,我們必須使用 ViewManager 類。 讓我們從調整 index.js 開始;

    index.js:

    import {ViewManager} from'erste';importRootViewfrom'./root-view';var vm =newViewManager();var rootView =newRootView();rootView.vm= vm;vm.setCurrentView(rootView);

    setCurrentView 方法將視圖呈現到 vm的root 元素中,這是默認的body,在本例中是。 然後我們也將 vm 放到 RootView 上,因為稍後它將使用這個視圖管理器來顯示細節視圖。

    讓我們先構建我們的細節視圖。

    detail-view.js:

    import {View} from'erste';classDetailViewextendsView {
     constructor(item) {
     super();
     this.item= item;
     }
     template() {
     return` <detail-view> <p>${this.item}</p> </detail-view>`;
     }
    }

    它只接收構造函數中的一個項並在模板中列印它。

    下面是一個示例視圖實現,以及如何利用我們的新細節視圖;

    root-view.js:

    import {View} from'erste';importDetailViewfrom'./detail-view';classRootViewextendsView {
     constructor() {
     super();
     this.items= [1, 2, 3];
     }
     onItemTap(e) {
     var targetIndex =e.targetEl.getAttribute('data-index');
     var item =this.items[targetIndex];
     var detailView =newDetailView(item);
     this.vm.pull(detailView);
     }
     template_item(item, index) {
     return`<div data-index=${index}>${item}</div>`;
     }
     template() {
     return` <root-view>${this.items.map(this.template_item).join('')} </root-view>`;
     }
     getevents() {
     return {
     'tap': {
     'div':this.onItemTap }
     };
     }
    }

    這裡最有趣的一點是我們如何獲取關於tapped項的信息以及如何創建細節視圖。 儘管可能有各種實現,但是我們選擇將每個項的索引嵌入到它的模板中。 然後在tap事件處理程序中,獲取這個索引屬性並使用相應的項實例化一個 DetailView 。 最後一件事是告訴視圖管理器把這個新的細節視圖放在屏幕上。

    恭喜現在你有了一個示例母版/細節視圖應用程序 ! 閱讀更高級的用例 !

    返回主視圖

    在最簡單的場景中,細節視圖是 final 視圖,在導航到詳圖視圖之後,主視圖將被釋放。 這也可以防止默認內存泄漏。 如果希望保留以前視圖的歷史,則 pull 方法接受第二個可選參數 opt_canGoBack,該參數為 boolean 類型。 在 true 中傳遞時,視圖管理器將在它的歷史記錄中保存第一個視圖,而不釋放它。

    隨後,你可以以隨時調用 vm.push(),並且視圖管理器將返回到主視圖,處理詳細信息視圖。

    後退手勢

    erste.js 還具有來自iOS的滑動手勢,用於查看導航。 你可以從屏幕左邊緣拖動到右邊,它會顯示下面的主視圖。

    默認情況下不啟用這裡手勢識別,你需要為細節視圖顯式啟用它。 修改 DetailView 構造函數並將 supportsBackGesture 設置為 true

    detail-view.js:

    /*.. . previous code.. . */constructor(item) {
     super();
     this.item= item;
     this.supportsBackGesture=true;
     }

    現在,你將能夠使用swipe導航回原始視圖 !

    結論

    在應用程序開發方面,erste.js 提供了更多的服務。 你可以以查看各種組件。如導航欄。tab欄和更多內容,了解如何使用高級功能。 請確保在 erste.js-demo 嘗試演示,以查看所有的操作。

    許可證

    MIT許可證

    版權所有( c ) 2017 Armagan Amcalar

    若要在取得該軟體副本時免費授予任何人,如有下列條件的軟體,請免費授予該軟體的副本,並與相關的文檔文件("軟體") 進行許可,包括不受限制的權利,包括以下條件:

    上述版權聲明和本許可聲明須包括在所有的副本或實質性部分的軟體。

    軟體是"是",沒有任何保證,表示或者隱含,包括但不限於銷售,適合特定用途和 NONINFRINGEMENT 。 作者或者版權持有人在合同。侵權或者它的他與軟體或者它的他用戶交易的行為。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语