salesforce lightning零基礎學習(八) Aura Js 淺談一: Component篇

我們在開發lightning的時候，常常會在controller.js中寫 component.get('v.label'), component.set('v.label','xxValue');

小伙伴肯定有疑問這些方法是怎么定義的，lightning到底有多少已經聲明的方法可供我們使用，此篇主要講述aura framework為我們提供的 component的js的主要方法。

本人salesforce環境切換到lightning，URL為：https://zero-zhang-dev-ed.lightning.force.com。

每個人的URL不同，URL 保留到force.com，然后添加一下URL: /auradocs/reference.app 即可看到aura的文檔，aura文檔里面給我們提供了aura framework 所有的支持的標簽的描述以及使用，js的描述以及使用等等。此篇我們只是對 component的js進行說明，其他感興趣的可以自行查看。

 點擊JavaScript API, 切換到 Component，可以查看到 Aura提供的所有的方法，常用的部分方法描述如下：

 

1. set (String key, Object value)：此方法最為常見了，對 attribute 設置值的引用。

eg: component.set("v.testAttribute","hello lightning") : 此賦值邏輯代表 對 testAttribute 這個attribute 賦值，內容為“hello lightning”; 此方法通常用於對attribute賦值，這里不多做舉例；

2.get(String key)：此方法也是最為常見的，使用屬性語法返回引用的值。通常有兩種用法：

　　1)component.get("v.testAttribute"): 此邏輯代表獲取當前component中attribute名稱為testAttribute的值；

　　2)componnet.get("c.testAction"): 此邏輯代表獲取后台apex controller中的 testAction方法，用於和后台交互操作，返回類型為Action對象變量，后期會對Action進行說明；

3.find(String | Object name)：此方法用於通過local id 獲取到指定的 component。我們知道lightning每個元素都默認有一個屬性:aura:id， 此屬性用來標記這個組件元素的local id，理論上local id是唯一的，但是實際操作中可以不唯一，所以find這個方法返回值可以有多種形式，如果 component中針對所查的local id有不止一個，則返回一個數組來盛接，如果有一個，則直接返回當前元素，如果不存在，則直接返回undefined；

 eg: component.find("helloWorld"): 此邏輯代表獲取 component 中local id為helloWorld的組件元素，如果不存在則返回undefined；

4.getLocalId(): 此方法用於獲取組件元素的local id, 此方法通常用於通過事件獲取事件的元素組件以后，獲取元素組件的local id;

eg: TestComponent.cmp

<aura:component>
    <lightning:button id="Global_Id" aura:id="Local_Id" label="Get Local Id" 
                      onclick="{!c.getLocalId}"/>
</aura:component>

Controller.js 端

({
    getLocalId : function(component, event, helper) {
        var button = event.getSource();
        console.log(button.getLocalId());
    }
})

5. getGlobalId(): 此方法用於獲取組件元素的global id, 此方法通常用於事件獲取事件元素組件以后，獲取元素組件的global id;

eg:

將上面的方法改成 getGlobalId即可；

({
    getGlobalId : function(component, event, helper) {
        var button = event.getSource();
        console.log(button.getGlobalId());
    }
})

 6.getName()：此方法用來獲取當前的組件元素的名稱。例如上面的TestComponent.cmp， 當我們在getGlobalId 增加 console.log(component.getName());時會打印出TestComponent；

 7.getEvent(String eventName)：通過component中注冊的事件名稱獲取事件的實例化對象；

我們假設 component 中注冊了一個事件 testEvent , 它對應了一個handler名字為 testHandler,當我們點擊某個button時，會觸發后台的方法,此方法用於獲取到事件對象並觸發此事件，執行此事件對應的handler；

testButtonHandler : function(component,event,helper) {
    var testEvent = component.getEvent('testEvent');
    testEvent.setParam('testEventParam','testValue');
    testEvent.fire();
}

8.getReference(String key)：此方法通常用於動態創建component時使用，通過屬性語法返回這個值的一個實體引用。比如動態創建 button時，我們想讓他的handler為controller.js中已有的一個方法testHandler作為handler，我們就可以使用 getReference('testHandler')獲取到這個方法的實體引用，在$A.createComponent我們在對這個進行demo。除了可以經常用於動態創建component，我們也可以在addEventHandler進行使用，下面的函數會有此種方式的demo；

9.addEventHandler (String event, function handler, String phase, Boolean includeFacets)：動態的創建事件的handler，此方法有幾個參數：

event: event的名字，這個名字需要和 aura:registerEvent名字保持一致；

handler：針對這個事件想要動態處理的handler，此handler可以有兩種方式，一種是通過 component.getReference方法使用現有的handler，另外一種是通過異步方法塊去執行handler部分；

phase：Bubble / Capture, 對這部分不了解的可以參看：https://www.cnblogs.com/zero-zyq/p/9313371.html

includeFacets：如果設置為true，則嘗試捕捉通過facet生成的元素的事件；

 我們在https://www.cnblogs.com/zero-zyq/p/9313371.html有過demo測試過多層元素套用情況下事件階段的展示，我們將eventBubblingEmitterController.js進行代碼修改：使用動態創建事件handler方式進行創建，當按照事件執行排序執行到eventBubblingEmitter.component時，會執行testEventHandler方法。

({
    fireEvent : function(cmp) {
        cmp.addEventHandler('bubblingEvent', cmp.getReference('c.testEventHandler'));
        var cmpEvent = cmp.getEvent("bubblingEvent");
        cmpEvent.fire();
    },
    testEventHandler : function(cmp) {
        console.log('test event handler');
    }
})

執行效果：

 總結：此篇只是簡單的描述了Aura Framework中的Component 類常用的方法，其他的方法感興趣的自行查看，篇中有錯誤的內容歡迎指出，不懂得歡迎留言。