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

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

ionic指令式組件

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

1.元素形式

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

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

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

2.屬性形式

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

3.CSS類形式

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

ionic服務(wù)式組件

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

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

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

·上拉菜單：SionicActionSheet

?彈出框：$ionicPopup

·浮動(dòng)框：SionicPopover

·載人指示器：$ionicLoading

·背景幕：$ionicBackdrop

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