很喜歡曾經看到的一句話：以輸出倒逼輸入。以輸出的形式強制自己學習，確實是高效的學習方式，真的很棒。以下僅為個人學習理解，如有錯誤，歡迎指出，共同學習。
1. 什么是Lightning Component框架？
Lightning Component框架是一個UI框架，用於為移動和台式設備開發Web應用程序。這是一個單頁面Web應用框架，用於為Lightning Platform應用程序構建具有動態，響應式用戶界面的單頁應用程序。它在客戶端使用JavaScript，在服務器端使用Apex。
Lightning Component作為Web應用框架，可以輕松的創建自定義應用程序，而不必自己編寫全部代碼。常用的Web應用程序框架有很多， 例如：Ruby on Rails, Grails, AngularJS, Django, CakePHP等等，甚至前面提到的Visualforc component也是一種web框架。
當然，Lighnting Component也可以看成是CS架構。
客戶端主要由兩個元素組成：View和Controller
- View：是XML markup，同時混合了自定義的Aura component靜態HTML標簽，例如：<aura:component>標簽。如果有過Visualforce經驗的小伙伴一定對該格式比較熟悉：namespace:tagName。對於Aura的組件，Salesforce提供了非常完善的參考，各種不同的組件都已經給出參考示例，大大減少了開發和學習成本。具體的地址：https://developer.salesforce.com/docs/component-library/overview/components
- Controller：主要是由JavaScript語言編寫，其目的主要是和服務端進行綁定，獲取所需的數據，並提供給View進行展示。
服務端主要也有兩個元素組成：Controller和Database。
- Controller: 由Apex語言開發（類似於Java語言），Apex與Java一樣，由一個個類文件組成，不同的是Java為.java文件，而Apex為.cls文件。注意，在客戶端的View文件中綁定的是類名稱。
- Database: 使用數據操作語言DML(Data Manipulation Language)對數據進行插入，更新，刪除和創建操作。
2. Aura組件捆綁包
Aura組件便是基於Lighnting Component框架進行的二次開發。
2.1 組件的命名規則
創建組件時，其命名的規則必須滿足如下條件：
- 必須以字母開頭
- 必須僅包含字母數字或下划線字符
- 在命名空間中唯一
- 不能包含空格
- 不能以下划線結尾
- 不能包含兩個連續的下划線
2.2 組件創建的文件
當我們在工程中創建一個新的Aura捆綁包（以下捆綁包都稱為組件）時，工程會自動創建出.auradoc，.cmp，.xml，.css，.design，svg，controller.js，help.js，renderer.js幾個文件。
| 資源 | 資源名稱 | 用途 |
| component | testAura.cmp | 在捆綁包中唯一的必要資源，包含了組件的標記，並且每個捆綁包中只有一個component。 |
| CSS樣式 | testAura.css | 組件的形狀格式 |
| Design | testAura.design | 當組件在Lightning App Builder或者Lightning Page中使用時需要用到該文件 |
| Helper | testAuraHelper.js | Javascript函數，該函數可以被捆綁包中的任何javascript代碼調用 |
| Documentation | testAura.auradoc | 對組件的一些簡單介紹說明 |
| Renderer | testAuraRenderer.js | 客戶端渲染器會覆蓋默認的渲染器 |
| Controller | testAuraController.js | 客戶端的控制函數，用來處理組件中的事件 |
| SVG文件 | testAura.svg | 組件的自定義圖標資源，一般為Lightning App Builder中使用的圖標 |
組件捆綁包中的所有資源都遵循命名規則，並且自動綁定連接。例如：<aura:component controller="TestAuraController">，組件會自動連接TestAuraController.cls類，所以組件內所有資源都可連接該控制類。
2.3 組件的工作原理
組件由自動創建的一系列文件組成，並且每個文件都發揮着不同的功能。其中，組件的主體便是component(.cmp文件)，對於最精簡的組件來講，只修改.cmp文件即可（其他文件使用默認值)，該文件為組件定義了視圖。
當然，對於實際項目開發中，僅僅含有視圖是遠遠不夠的。通常，我們需要修改controller.js和helper.js文件。controller.js與.cmp文件交互，提供視圖中所需要的數據；helper.js與服務器controller.cls交互，獲取數據庫中的數據；controller.js直接調用helper.js中的函數（當然，可以把helper.js中的函數直接寫在controller.js中，直接從controller.js中獲取數據庫中的數據，但該模式不便與維護，不推薦使用）。
如果組件需要與服務器中數據庫進行交互，則還需創建一個Apex控制類，與控制類與數據庫交互，並將數據傳遞給組件。
不同文件之間的聯系，如下圖所示：
3. 組件的配置項和訪問控制
3.1 配置項
在創建Aura組件時，可在該文件中配置組件的配置選項。配置選項都是可選的，所以可以進行任意組合。
在Aura組件中提供如下配置項：
| 配置 | 標記 | 描述 |
| Lightning Tab | implements="force:appHostable" | 創建一個組件，該組件可以作用Lightning Experience或者Salesfroce手機App的導航元素 |
| Lightning Page | implements="flexipage:avaliableForAllPageTypes" and access="global" | 創建一個組件，該組件可以用在Lightning頁面或者Lightning App Builder中 |
| Lighnting Record Page | implements="flexipage:availableForRecordHome, force:hasRecordId" and access="global" | 創建一個組件，該組件可以用在Lightning Experience的記錄的Home頁面 |
| Lighnting Communities Page | implements="forceCommunity:availableForAllPageTypes" and access="global" |
創建一個組件，該組件支持在Community Builder中拖拽功能 |
| Lighnting Quick Action | implements="force:lightningQuickAction" | 創建一個組件，該組件可以充當一個Lightnging quick action |
示例：
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"> </aura:component>
3.2 訪問控制
Aura框架可以通過access屬性自由的控制應用，組件，屬性，接口，事件，方法的訪問權限。access屬性指定資源是否可以被所在命名空間之外使用。
使用范圍
可在如下tag中使用access屬性：
- <aura:application>
- <aura:component>
- <aura:attribute>
- <aura:interface>
- <aura:event>
- <aura:method>
access的值
- private:
- 可在應用，組件，接口，事件或者方法中使用， 不能被外部資源使用（命名空間）。
- 該值可以在<aura:attribute>或<aura:method>中使用。
- 將屬性標記為private會使得將來重構變得更加簡單（畢竟作用域小，所引發的影響也更小）。
- 除了在聲明該屬性的組件，其他組件調用該屬性時會返回undefined錯誤，所以即使繼承自該組件的子組件也不可訪問。
- public:
- 在當前org中都可以訪問。access的默認值便是public。
- global:
- 在所有的org中都可以訪問。
應用訪問控制
access在aura:application標簽中控制app是否可被所在命名控制之外訪問。
| 修飾符 | 描述 |
| public | 僅在當前org中可用。access的默認值。 |
| global | 在所有的org中可用。 |
組件訪問控制
access在aura:component標簽中控制app是否可被所在命名控制之外訪問。
| 修飾符 | 描述 |
| public | 僅在當前org中可用。access的默認值。 |
| global | 在所有的org中可用。 |
屬性訪問控制
access在aura:attribute標簽中控制app是否可被所在命名控制之外訪問。
| 修飾符 | 描述 |
| private | 可在應用，組件，接口，事件或者方法中使用， 不能被外部資源使用（命名空間） |
| public | 僅在當前org中可用。access的默認值。 |
| global | 在所有的org中可用。 |
接口訪問控制
access在aura:interface標簽中控制app是否可被所在命名控制之外訪問。
| 修飾符 | 描述 |
| public | 僅在當前org中可用。access的默認值。 |
| global | 在所有的org中可用。 |
事件訪問控制
access在aura:event標簽中控制app是否可被所在命名控制之外訪問。
| 修飾符 | 描述 |
| public | 僅在當前org中可用。access的默認值。 |
| global | 在所有的org中可用。 |
示例：
<aura:component access="global">
...
</aura:component>
4. 組件Markup和CSS文件
4.1 組件標記
在捆綁包中，以.cmp為后綴的文件稱為標記（Markup，可以理解為視圖），是捆綁包中唯一的必要資源，所以最精簡的捆綁包只包含一個.cmp文件即可。
標記可以包含文本或其他組件的引用，當然也可以聲明當前組件的元數據。
Hello, World！示例：
<aura:component> Hello, world! </aura:component>
在<aura:component>標簽中包含“Hello, world!”文本，當引用該組件時，會打印出“Hello, world”
在markup中集成了絕大多數HTML的標簽，例如<div>, <span>以及<br>等等。（也支持HTML5標簽）
示例：
<aura:component> <div class="container"> <!--Other HTML tags or components here--> </div> </aura:component>
4.2 css樣式
組件的樣式，我們一般在.css后綴文件中定義。
組件中的所有頂級元素都添加了一個特殊的.THIS CSS類，將命名空間添加到CSS文件中，可以有效防止當前組件的CSS樣式被其他組件的CSS文件覆蓋。如果CSS文件不按照該格式編寫，框架會拋錯誤。
示例：
testAura.cmp
<aura:component> <!--使用CSS中.THIS .WHITE類--> <div class="white"> Hello, world! </div> <!--頂級元素使用.THIS類--> <h2>Check out the style in this list.</h2> <div> <!--使用.THIS .RED類--> <li class="red">I'm red.</li> <!--使用.THIS .BLUE類--> <li class="blue">I'm blue.</li> <!--使用.THIS .GREEN類--> <li class="green">I'm green.</li> <!--沒有指定，使用當前模塊樣式--> <li>I'm default.</li> </div> </aura:component>
testAura.css
.THIS { background-color: grey; } .THIS.white { background-color: white; } .THIS .red { background-color: red; } .THIS .blue { background-color: blue; } .THIS .green { background-color: green; }
輸出：
分析：從產生的結果來看，<h2>是頂級元素，直接使用了.css文件中.THIS類得到灰色背景；“I'm default”沒有指定顏色，使用當前模塊<div>的樣式，而<div>是頂級元素，所以使用.THIS類得到灰色背景；其他的指定CSS類，顯示對應樣式。
作者：吳家二少
博客地址：https://www.cnblogs.com/cloudman-open/
本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接