前端培訓(xùn)：Ionic指令式組件和服務(wù)式組件

ionic對AngularJS進行了擴展，將移動端開發(fā)中常見的UI組件抽象成AngularJS的指令與服務(wù)，便于我們在開發(fā)中快速構(gòu)建移動App界面。ionic JavaScript是對AngularJS的擴展，其內(nèi)置的JavaScript組件與AngularJS組件類似。按照使用方式可以將ionic JavaScript組件分為兩大類：指令式組件和服務(wù)式組件。

ionic指令式組件

ionic JavaScript的指令式組件通常以元素、屬性或CSS類的形式在HTML文件使用。

1.元素形式

以元素形式使用的指令都帶有“ion-”前綴，例如使用ion-tabs指令實現(xiàn)一個功能完備的選項卡，示例代碼如下。

<ion-tabs>
    <ion-tab titlew"本周熱賣"="">...</ion-tab>
    <ion-tab title='“銷量最高"'>...</ion-tab>
</ion-tabs>

ionic中以元素形式使用的指令覆蓋了移動端大部分的開發(fā)需求，包含基本布局、視圖路由、列表、表單輸入、選項卡、側(cè)邊欄、幻燈片等。

2.屬性形式

ionic中以屬性形式使用的指令沒有固定前綴，而是使用多個單詞來描述組件功能，多個單詞之間使用“-”符號連接，例如nav-direction(導(dǎo)航描述)。ionic的手勢事件功能也是通過屬性形式使用的，例如長按事件on-hold，可以采用<any on-hold=".….">…</any〉。

3.CSS類形式

目前官方以CSS類形式使用的指令只有1個，即hide-on-keyboard-open(鍵盤打開時隱藏元素)，使用方式是<any class="hide-on-keyboard-open">…</any>。

ionic服務(wù)式組件

ionic 的服務(wù)式組件通常帶有$ionic 前級，例如sionicLoading。ionic 服務(wù)式組件本質(zhì)上是AngularJS服務(wù)對象，可以在AngularJS代碼中以依賴注入的方式被應(yīng)用，用于直接創(chuàng)建頁面視圖組件或執(zhí)行與頁面視圖組件交互的任務(wù)。

ionic服務(wù)式組件中包含如下幾個常用的動態(tài)組件。

·模態(tài)對話框：sionicModal

·上拉菜單：SionicActionSheet

?彈出框：$ionicPopup

·浮動框：SionicPopover

·載人指示器：$ionicLoading

·背景幕：$ionicBackdrop

如果ionic服務(wù)組件名稱帶有后綴delegate，那么它的類型為代理類服務(wù)組件，例如sionicTabsDelegate。代理類服務(wù)組件在使用上與普通服務(wù)組件有所差別，這類組件通常含有SgetByHandle(delegateHandle)方法——該方法可以用來獲取頁面上對應(yīng)指令式組件的操作對象，繼而達到使用代碼控制這些組件外觀和行為的目的。