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方法,用於和後臺互動操作;
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物件常用的方法,其他的方法感興趣的自行檢視,篇中有錯誤的內容歡迎指出,不懂得歡迎留言。