前兩篇分別介紹了Component類以及Event類,此篇將會說一下 $A , Action以及 Util。
一. Action
Action類通常用於和apex后台交互,設置參數,調用后台以及對結果進行處理。可以通過component.get("c.functionName")創建一個action類的變量,functionName對應后台@AuraEnabled聲明的方法。通過$A.enqueueAction可以將action加入隊列中等待執行。
常用方法如下:
1.setParam (string key,Object value): 為這個Action設置單一的參數,此參數應該和后台apex中的參數名稱一致;
2.setParams (Object config): 為這個Action設置一組參數,這組參數的名稱應該和后台apex中的參數名稱一致;
3.getName ():獲取Action的Name。比如 var action = component.get("c.functionName"); 則此函數返回functionName;
4.getReturnValue ():獲取Action從server端返回的response;
5.isBackground (): 判斷當前的action在隊列中是前台執行還是后台執行,后台執行返回true,前台返回false;
6.getError ():返回一組錯誤信息;
7.setCallback (Object scope,function callback,String name):當server端action返回以后,callback action將會被執行。方法有三個參數:
- scope:方法被執行的作用域,通常設置為this;
- callback:當server端action完成后,會調用這個callback函數。這個callback函數可以在顯示階段中注冊,通常判斷的顯示階段有三種:SUCCESS/ERROR/INCOMPLETE。通常 getError()方法和ERROR這種階段結合來用;
Demo 舉例:
1. TestActionController: 聲明一個server端方法,用於component初始化調用;
public class TestActionController { @AuraEnabled public static String initData(String testParam) { return 'For test response : ' + testParam; } }
2. TestAction.cmp:初始化調用doInit方法對attribute進行初始化;
<aura:component controller="TestActionController" implements="flexipage:availableForAllPageTypes"> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="testAttribute" type="String" description="test description"/> {!v.testAttribute} </aura:component>
3. TestActionController.js:通過action類調用后台並且對response進行處理。
({ doInit : function(component, event, helper) { var action = component.get('c.initData'); action.setParam('testParam','lightning test action class'); //action.setParams({'testParam':'lightning test action class'}); action.setCallback(this, function(response) { var state = response.getState(); console.log('state : ' + state); if(state === 'SUCCESS') { var responseValue = response.getReturnValue(); console.log('get name : ' + action.getName()); component.set('v.testAttribute',responseValue); } else if(state === 'INCOMPLETE') { console.log('incomplete state'); } else if(state === 'ERROR') { if (errors) { if (errors[0] && errors[0].message) { console.log("Error message: " + errors[0].message); } } else { console.log("Unknown error"); } } }); $A.enqueueAction(action); } })
結果展示:
二. Util
Util類提供了一些方法去判斷變量類型,去動態增加、刪除class等。使用 $A.Util.functionName既可以使用Util類提供的方法。
常用方法如下:
1. addClass (Object element,String newClass):向一個元素添加某個class;
2. hasClass (Object element,String className):判斷某個元素中是否有某個指定的class;
3. removeClass (Object element,String newClass):對某個元素移除某個class;
4. toggleClass (Object element,String className):向某個元素切換(添加/刪除)某個class;
5. isArray (Object obj): 判斷當前的對象是否是一個數組;
6. isEmpty (Object obj):判斷一個對象是否為空,空包括:undefined/null/空數組/空字符串;
7. isObject(Object obj):判斷當前的對象是否為一個valid的對象。valid包括:非DOM元素/非瀏覽器類/非Array/非error/非string/非number.
8. isUndefined (Object obj):判斷對象是否為undefined;
9. isUndefinedOrNull (Object obj):判斷對象是否為undefined或者null;
Demo舉例:
1. TestUtils.css
.THIS.changeUI { background-color: red; }
2. TestUtils.cmp
<aura:component> <div aura:id="testChangeUI">Change This background</div> <br/> <lightning:button onclick="{!c.addStyle}" label="Add Style"/> <lightning:button onclick="{!c.removeStyle}" label="Remove Style"/> <lightning:button onclick="{!c.toggleStyle}" label="Toggle Style"/> </aura:component>
3. TestUtilsController.js
({ addStyle : function(component, event, helper) { var targetComponent = component.find('testChangeUI'); if(!$A.util.hasClass(targetComponent, 'changeUI')) { $A.util.addClass(targetComponent, 'changeUI'); } }, removeStyle : function(component, event, helper) { var targetComponent = component.find('testChangeUI'); if($A.util.hasClass(targetComponent, 'changeUI')) { $A.util.removeClass(targetComponent, 'changeUI'); } }, toggleStyle : function(component, event, helper) { var targetComponent = component.find('testChangeUI'); $A.util.toggleClass(targetComponent, 'changeUI'); } })
結果展示:
當點擊Add Style 以后會顯示紅色背景,點擊Remove Style 以后會將紅色背景移除,點擊Toggle Style將會切換這個樣式的顯示/隱藏。
三. $A
$A 代表Aura Framework 命名空間,包含了以下函數。
1.createComponent (String type,Object attributes,function callback):用於動態創建元素組件主要有三個參數。
type: 想要動態創建的元素組件的類型,可以是Aura Framework中提供的標准的元素組件,也可以是自己自定義的元素組件;
attributes:想要給元素組件傳的參數以及對應的value信息,此參數類型為map;
callback: 回調函數去通知調用者,返回的內容為剛剛創建的元素組件。
這里有兩個例子,一個例子為創建標准的元素組件,一個是自定義的元素組件(這里有demo:https://www.cnblogs.com/zero-zyq/p/9630835.html)
$A.createComponent("aura:text",{value:'Hello World'}, function(auraTextComponent, status, statusMessagesList){ // auraTextComponent is an instance of aura:text containing the value Hello World });
這個官方的demo代表調用此段邏輯會創建一個aura:text組件,組件有一個value的attribute,他的值為Hello World;
2.createComponents (Array components,function callback):和上面的方法區別為創建一組元素組件;
$A.createComponents([ ["aura:text",{value:'Hello'}], ["ui:button",{label:'Button'}], ["aura:text",{value:'World'}] ],function(components,status,statusMessagesList){ // Components is an array of 3 components // 0 - Text Component containing Hello // 1 - Button Component with label Button // 2 - Text component containing World });
3.enqueueAction (Action action,Boolean background):將action 排隊執行;
4.get (String key,function callback):使用屬性語法返回值得引用。通常用於通過指定的Global Value Provider獲取值的引用。Global Value Provider通常有三種:
$Browser: 用於返回當前的硬件或者訪問當前應用的瀏覽器的信息;
$Locale: 用於返回當前用戶的首選的地址;
$Resource: 用於返回你上傳的靜態資源,可以包括 style / image / javascript 等。
除了這三種常用的Global Value Provider, $A.get()還可以有很多的用法,比如
1)$A.get("$Label.namespace.labelName")用於獲取你上傳的custom label的值,如果沒有自己聲明namespace,默認為c;
2)Event中也封裝了一些常用的 Global的方法,如下鏈接所示:https://developer.salesforce.com/docs/component-library/bundle/force:closeQuickAction/documentation, 這些方法也可以使用 $A.get("e.force.方法名稱")去聲明一個值的引用。
關於 $A的其他方法請自行查看。
總結:篇中主要寫了一些我練習lightning時遇到的常用的方法,寫的並不深入。如果想要深入的了解還請自己查看文檔。篇中有錯誤的地方歡迎指出,有不懂得歡迎留言相互交流。有不完善的地方還請指出。