salesforce lightning零基礎學習(十) Aura Js 淺談三: $A、Action、Util篇
前兩篇分別介紹了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時遇到的常用的方法，寫的並不深入。如果想要深入的了解還請自己查看文檔。篇中有錯誤的地方歡迎指出，有不懂得歡迎留言相互交流。有不完善的地方還請指出。
salesforce lightning零基礎學習(十) Aura Js 淺談三: $A、Action、Util篇