salesforce lightning零基礎學習(二) lightning 知識簡單介紹----lightning事件驅動模型

看此篇部落格前或者後，看一下trailhead可以加深印象以及了解的更好：https://trailhead.salesforce.com/modules/lex_dev_lc_basics

做過classic的朋友知道，前台和背景互動可以在頁面上使用多種方式，比如在VF page中apex:commandButton等标簽綁定action，使用actionFunction,使用ajax toolkit，使用VF Remoting或者使用action:support多種方式實作和背景的互動。如果你習慣性的使用了classic，那麼你在lightning學習中可能有一點點的不适，最多的應該是沒法在lightning component中使用js了，因為lightning封裝了他的framework，這樣的好處為後期更容易維護，不必要因為維護别人的項目各種讀别人的rendered/reRender等惡心的事情，因為好多重新渲染元素的操作都在controller.js中處理了。當然，上面的都是泛泛而談，下面細節的說一下lightning的事件驅動模型。

一.Lightning模型介紹

Lightning事件驅動模型如下圖所示：

1.使用者在component标簽上點選按鈕或者觸發某個自定義事件

2.javascript controller中的action擷取目前的事件源，處理業務邏輯，細節的對于背景的操作在helper中執行；

3.javascript helper中執行和server端的互動，調用背景apex controller，并在apex controller執行結束後調用回調函數去處理後期的業務邏輯以及更新UI等操作；

4.server-controller 使用apex代碼處理業務邏輯以及和資料庫的互動，寫法和VF Remoting的背景寫法類似，差別為需要在方法上添加标簽@AuraEnabled。

上一篇内容說過一個component bundle包含了很多内容，此篇通過上面的事件驅動模型主要說一下以下三個元素：Component(.cmp) / Controller js(.js) / Helper js(.js)

二. Component介紹

我們在Apex中經常使用Visualforce Component做一些公用元件，但是lightning中的component和剛才說的不是一個内容。一個component是一個包含了定義着的資源資訊，标簽，也可以包含表達式或者是其他可選的資源，比如controller屬性資訊，stylesheet等資訊。lightning component中頭标簽為<aura:component>，所有的内容均需要在此内容中編寫。一個component中也可以嵌套其他的component，父子的component引用時，父的style sheet樣式會影響到子，使用時需要注意此點。針對Component更重要的是這個東西用在哪裡，怎麼用。   

1.用在哪裡：

Lightning Component可以用在很多的地方，如下圖所示。頭标簽的屬性實作不同的接口，則可以将此component用于不同地方。

• implements="force:appHostable" ： 建立一個componet用于自定義的lightning tab；
• implements="flexipage:availableForAllPageTypes"and access="global"    建立一個component用于lightning page或者用于lightning app builder；
• implements="flexipage:availableForRecordHome,force:hasRecordId" and access="global"    建立一個component用于lightning的記錄home page，此種方式可以直接應用目前記錄的ID；
• implements="forceCommunity:availableForAllPageTypes" and access="global"      建立一個component用于Community Builder；
• implements="force:lightningQuickAction"      建立一個component用于quick action。

2.怎麼用：

1) 建立Lightning Component

Lightning  Component可以有多種建立的方式，使用sublime建立，使用develop console或者idea，本人常用sublime建立。在File->New->Lightning Component便可以建立一個lightning component。在建立的lightning component名稱處右鍵，便可以建立出來此lightning component bundle其他的元件，比如controller.js,helper.js等元件，如下圖所示。

2) Lightning Component 基礎知識

和classic 中的visualforce component很相像，一個lightning component可以嵌套另外一個lightning component，如果嵌套的component含有命名空間，則引入的方式為<yourNamespace:yourComponent/>如果沒有設定命名空間，則預設的命名空間為c,即<c:yourComponent/>

一個Lightning Component檔案中可以引入多種元素，常用的元素如下：

• <aura:attribute>:此标簽用于聲明Component中需要引用的内容資訊的變量。
• <aura:registerEvent>:此标簽用于引入自定義的注冊事件。
• <aura:handler>:此标簽用于處理自定義的注冊事件以及标準的事件，比如初始化（init）等handler。
• <ltng:require>: 此标簽用于引入靜态資源
• 元素标簽：lightning封裝了很多元素标簽，常用的可以歸納為容器(container)元素，按鈕(button)元素，導航(navigation)元素，可視化(Visual)元素，字段(Field)元素以及格式化(format)元素。

<aura:attribute>:做過classic的朋友都知道，一個頁面，背景使用成員變量，前台VF page可以用它來渲染元素。在lightning中，Component attribute很像apex中的成員變量，他們可以使用表達式語句應用在元件元素标簽中進行資訊渲染。

attribute必須有兩個屬性：name以及type， aura:attribute寫法如下.

<aura:component>
<aura:attribute name="testAttribute" type="string" default="test"/>
test for {!v.testAttribute}
</aura:component>      

上面的demo聲明了一個類型為string的attribute，名稱為testAttribute。元件如果引用相關的屬性資訊，引用方式為{!v. + attributeName}。lightning中，使用"v"去通路attribute内容（v可以簡單的了解成view）。如果想要在後面設定attribute的值，也可以通過<aura:set attribute="anotherTestAttribute">來更改attribute值，aura:set通常可以和<aura:if>标簽一起使用，有興趣的可以自行檢視。

 attribute的type基本涵蓋了所有的類型，type取值如下：

基本類型：

• Boolean：定義一個布爾類型attribute。eg:<aura:attribute name="showDetail" type="Boolean" />
• Date：定義一個日期類型，不含Time，預設格式：YYYY-MM-dd。 eg: <aura:attribute name="startDate" type="Date" />
• Datetime：定義一個日期類型，含Time。eg:<aura:attribute name="lastModifiedDate" type="DateTime" />
• Decimal：定義一個浮點型小數，比Double類型更容易接收currency類型的資料。eg:<aura:attributename="totalPrice" type="Decimal" />
• Double： 定義一個double類型小數，通常可以被Decimal替代
• Integer：定義一個整數類型。eg:<aura:attribute name="numRecords" type="Integer" />
• Long：定義一個長整型類型，如果Integer盛裝不了，需要使用Long。eg:aura:attribute name="numRecords" type="Long" />
• String：定義一個字元串類型。eg:<aura:attribute name="message" type="String" />

(注：上述基本類型也可以使用數組類型，eg:<aura:attribute name="message"  type="String[]" />)

函數類型：與javascript類型相一緻的attribute 類型。

對象類型：定義一個自定義的object或者sObject類型。eg:<aura:attribute name="acc" type="Account" />

集合類型：

• type[](Array)：聲明一個數組類型。eg:<aura:attribute  name="colorPalette" type="String[]" default="['red','green', 'blue']" />
• List：聲明一個有序清單(和type[]相似，個人認為此處可以替代type[])。eg: <aura:attribute name="colorPalette" type="List" default="['red', 'green', 'blue']" />
• Map：聲明一個Map類型，包含鍵值對。eg:<aura:attribute name="testMap" type="Map" default="{a: 'label1', b:'label2' }" />
• Set：聲明一個無序清單。eg:<aura:attriute name="colorSet" type="Set" default="{'red','green','blue'}" />

自定義Java類型：如果建立Java類型，這個類必須要實作JsonSerializable接口。

特定的Frame-work類型（Framework-Specific）：

• Aura.Action：傳遞一個action到lightning:component中。eg: <aura:attribute name="onclick" type="Aura.Action"/>

<aura:registerEvent>: 通常用于建立完自定義event後，将event注冊到component中，進而通過aura:handler将event進行裝載。event包含系統自帶的标準事件（init/change等）以及自定義事件，aura:registerEvent用于注冊自定義事件。

<aura:handler>: lightning中提供了一些标準和自定義事件，将事件裝載到lightning component中需要使用aura:handler。标準的事件舉例：init（lightning component初始化觸發，相當于VF page中的構造函數或者action聲明内容）,change（某個aura:attribute改變自動觸發）。aura:handler寫法如下：

<aura:component>
    <aura:attribute name="childAttr" type="String" />
    <aura:handler name="change" value="{!v.childAttr}" action="{!c.onChildAttrChange}"/>
</aura:component>      

上面的demo聲明了一個針對childAttr的change事件，當childAttr更改以後，便會執行controller.js的onChildAttrChange方法。

（點選可檢視event的Best Practice）

元素标簽：

aura framework提供了大量的可以直接使用的元素标簽用來開發，使用者也可以通過slds樣式更改成需要的樣式。官方提供了很多可以直接使用的标簽，以ui: / lightning: aura: 開頭。元素标簽的樣式使用slds進行渲染，如果想檢視某個元素标簽樣式或者想要更改相關的樣式，可以先檢視lightning design system中元素的渲染方式。元素标簽可以包含幾大類來彙總：

容器元件

lightning:accordion / lightning:accordionSection : 可折疊容器

lightning:card ：卡牌裝容器，用于展示一組資訊

lightning:layout/lightning:layoutItem : Grid容器

lightning:tab/lightning:tabset : Tab标簽

lightning:tile : 瓷磚模型,用于展示一條記錄的相關資訊

按鈕元件

lightning:button: 普通按鈕

lightning:buttonIcon:隻有一個html icon的按鈕

lightning:buttonGroup：一組按鈕

lightning:buttonMenu/lightning:menuItem: 一個drop-down 清單展示action

導航元件

lightning:breadcrumb/lightning:breadcrumbs: 展示目前操作記錄的層級導航

lightning:tree： 樹形結構

lightning:verticalNavigation： 垂直排列的連結清單

可視化元件

lightning:avatar: 對象的可視化表示 （一個圖像）

lightning:badge：包含少量資訊的文本塊标簽 

lightning:datatable： 顯示table布局 

lightning:dynamicIcon： 動畫效果icon

lightning:helptext： hover後提示資訊效果

lightning:icon： 顯示一個圖示

lightning:pill： 展示一個顯示X号的内容，可以顯示或者不顯示

lightning:progressBar： 展示一項操作的程序條

lightning:progressIndicator：程序訓示器，顯示程序線

lightning:spinner: 顯示Loading圖形

字段元件

lightning:checkboxGroup ：複選框 

lightning:combobox ：提供一個使用者輸入的并且可以autocomplete的控件 

lightning:dualListbox ： 兩個list間移動option。類似multi picklist效果 

lightning:fileUpload ： 提供上傳檔案的框

lightning:fileCard ： 展示一系列的上傳的檔案

lightning:input ： 預設展示輸入框，根據type不同展示不同效果。

lightning:radioGroup：展示一組單選按鈕

lightning:select：展示一個包含多個option的菜單

lightning:slider : 展示一個可以滑動效果指定範圍的輸入框 

lightning:inputRichText： 富文本編輯器

lightning:textArea： textArea 

格式化元件

以下标簽都是隻讀的

lightning:formattedDateTime ：格式化 data & time

lightning:formattedEmail ：格式化 email

lightning:formattedLocation  ：使用經緯度格式化Location

lightning:formattedNumber ：格式化數字

lightning:formattedPhone：格式化電話号碼

lightning:formattedRichText：格式化富文本區域

lightning:formattedText：格式化字元串

lightning:formattedUrl：格式化URL

一個元素标簽包含local ID,global ID。local id 作用域為目前的component，使用aura:id 屬性來建立一個local id。aura:id不支援表達式，隻支援普通的字元串值作為local id.

local id 理論上是唯一的，但是不強制唯一，比如一組checkbox元素标簽，可以設定他們的local id是相同的。local id可以用于在javascript中通過local id擷取到元素本身或者元素清單。

eg:<lightning:input type="string" aura:id = "name" value="testValue" />

controller或者helper中可以通過cmp.find("name")即可擷取到 aura:id為name的元素（或者元素清單），如果不存在所要搜尋的aura:id，則傳回undefined.controller.js/helper.js中針對一個元素擷取它的local id，可以通過cmp.getLocalId()方法獲得。

Global id 很像classic中visualforce 元素元件中的id,運作時生成，并且是唯一的。

eg:<lightning:input type="string" id="name" value="testValue" />

global id可以用來區分不同元素的元件執行個體化或者用于debugging操作。針對一個元件元素擷取它的global id,可以通過cmp.getGlobalId()擷取。

三. Controller js介紹

因為component不允許寫任何的js，即使類似onclick="alert(xxx);"這種js也是被禁止的，是以controller js部分作用是至關重要的。他管理着Component中所有的事件驅動操作。

這裡假設我們在'showMyInfo' componet中有一個按鈕名字是'Button1'，綁定了一個'onclick'事件，onclick="{!c.handlerClick}".上面我們說過，針對元素元件引用attribute的值，使用v（v代表了view）。

當我們點選按鈕或者觸發了注冊的事件後，會執行controller.js裡面的方法，需要寫{!c.functionName},其中c可以了解為 client-side controller，functionName為在controller.js中聲明的方法名稱。

當我們為一個component bundle建立一個Controller js時，我們會發現，每個Controller方法裡面預設都有3個參數：

• cmp ： 代表目前操作的action所在的component，這裡指的是showMyInfo
• event：代表目前action操作所觸發的事件，通過事件可以擷取到目前事件所對應的元素；
• helper：helper代表目前的componet對應的helper.js，當然這個參數不是必須的，helper檔案可以寫js内容用來和背景server controller互動。當然，如果你想把和server controller互動的代碼寫在目前的controller js中，也是可以的。

cmp：我們通常用cmp可以擷取和設定attribute值，通過cmp.get('v.attributeName')即可擷取到lightning component中attribute名稱為attributeName的值。通過cmp.set('v.attributeName','testAttributeValue')即可設定lightning componet中名稱為attributeName的attribute的值為testAttributeValue.當然，cmp可不止擷取設定attribute值這麼簡單，還可以通過cmp.getEvent('eventName')擷取注冊的事件等等。我們平時用的cmp比較多的功能就是這兩個了。

event：event代表目前操作的事件，比如當上面的使用者點選了按鈕，可以通過event.getSource()擷取到事件源Button1以及擷取到事件源自身的屬性等資訊；可以擷取到事件源的事件操作。

 helper:helper代表了helper.js的執行個體化變量，你可以通過helper.helperMethod用來處理具體的邏輯，包括和背景互動；處理結果集；功能性的方法重用等等。因為有了helper，你的代碼有了更好的可讀性，可維護性以及可重用性。

下面通過幾行簡單的代碼來了解cmp以及event的用法。

1. var btnClicked = event.getSource();此行代碼可以了解為擷取到點選的button的dom element
2. var btnMessage = btnClicked.get(''v.label"); 通過element的get方法可以擷取到這個元素上面的屬性值，擷取屬性值或者擷取其他的元件中的元素資訊，需要使用'v.'來擷取；
3. component.set("v.message", btnMessage); 更新component中名稱為message的attribute值。
4. controller中有可能有多個方法，每個方法之間使用‘，’分隔；最後一個方法不能有‘，’。

({
    handleClick: function(component, event, helper) {
        var btnClicked = event.getSource();         // the button
        var btnMessage = btnClicked.get("v.label"); // the button's label
        component.set("v.message", btnMessage);     // update our message
    },
　　 handleClick2: function(component,event,helper) {
　　 }
})      

四 Helper js 介紹

 如果是controller.js負責了component中的所有業務邏輯，那麼helper js就承包了所有的業務細節處理或者公用的方法（顯示隐藏loading等）。helper一般需要component這個參數，其他參數可以根據實際需要自動從controller.js擷取以及傳遞。這裡舉例一個調用背景并對傳回資料進行處理的例子。想要連接配接背景，需要準備以下的工作：

1.lightning component 的controller屬性設定此component背景引用的controller,用法和classic用法相同；

2.controller（背景）方法需要為靜态方法，并且需要添加@AuraEnabled注解。如果有classic經驗的可以想一下remote action的背景要求，把@RemoteAction改成@AuraEnabled就好。

createItem: function(component, camping) {
    var action = component.get("c.saveItem");
    action.setParams({
        "camping": camping
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            var items = component.get("v.items");
            items.push(response.getReturnValue());
            component.set("v.items", items);
        } else if(status == "INCOMPLETE") {
            console.log('execute');
        } else if(status == "ERROR") {
　　　　　　　console.log('error');
        }
    });
    $A.enqueueAction(action);
 }      

上述例子功能為背景調用saveItem方法，camping作為參數傳遞到背景，然後異步調用。調用成功後将這個item寫入到前台的camping清單中。

其中有幾點需要注意：

1.我們通常使用component.get('v.something')來調用前台的一些屬性元素等，在這裡使用component.get('c.backgroundMethod')可以調用到背景的方法；

2.通過setParam可以對方法設定參數,通過setCallBack可以對這個方法進行異步處理，我們通常會将這種調用背景的方法進行異步結果處理；

3.response的狀态主要有三種：SUCCESS/INCOMPLETE/ERROR。建議方法中将三種情況都進行處理，比如INCOMPLETE展示遮罩，ERROR/SUCCESS進行相應的業務處理以及解除遮罩等；

4.需要将action放在隊列裡面，讓他排隊進行執行。$A為lightning中封裝的一個global變量，除了enqueueAction方法外還有很多常用的方法，後面會有涉及，有興趣的自行檢視。

總結：此篇隻是泛泛的對lightning componet常用的進行簡單的介紹，并沒有系統的介紹使用功能等，也沒有demo進行整體的連接配接。有興趣的可以自己檢視文檔或者trailhead等學習資料，後期将會寫一些細節的使用。有錯誤的地方歡迎指出，有不懂的歡迎提問。

作者：zero

部落格位址：http://www.cnblogs.com/zero-zyq/

本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接

個人下載下傳了一些相關學習的PDF檔案，如果需要下載下傳請通路百度雲 點選此處通路 密碼：jhuy

如果文章的内容對你有幫助，歡迎點贊~

為友善手機端檢視部落格，現正在将部落格遷移至微信公衆号：Salesforce零基礎學習，歡迎各位關注。