Salesforce学习之路（十）Aura组件工作原理

很喜欢曾经看到的一句话：以输出倒逼输入。以输出的形式强制自己学习，确实是高效的学习方式，真的很棒。以下仅为个人学习理解，如有错误，欢迎指出，共同学习。

---

 

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/wu-kai/

本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接