云中漫步

Aura组件的生命周期什么是组件的生命周期?生命周期，故名思意，就是一个物体，从出生，成长，再到它毁灭所经历的一系列阶段。组件也有生命周期的概念，用来描绘组件从创建到销毁的一个过程,在这过程中,每个特定的阶段都会触发一些方法。通常呢，一个组件完整的生命周期中都会经历下面的过程: 构造 → 组件实例化后的准备阶段 渲染 → 组件被添加到dom tree，接下去要进行的渲染阶段 更新 → 用户操作组件，组件的更新阶段 移除 → 组件用完后从dom tree中移除 DOM(Document Object Modal)通过Lightning框架提供的custom renderer函数可以管理和更新组件预定义的DOM结构。 那什么是DOM呢？ HTML和DOM就像是两种不同语言的相同文档，而DOM则被表示为一个JavaScript对象。如果我们修改DOM上的任何东西，HTML也会自动刷新。如果我们在HTML上添加新的元素，DOM也会随之改变，这都是同步发生的，浏览器会去处理这些事。 很多文档对DOM的描述过于复杂，推荐大家看下边这个视频去了解DOM: 老说的 DOM 到底是什 ...

Aura组件的工作原理Aura组件的交互方式掌握Aura组件客户端与服务器端通信时的工作步骤对于合理的构建组件非常有帮助。下图会详细说明一个Lightning组件是如何在客户端和服务端之间进行工作的: 组件的component bundle是由’Component(.cmp) / Controller js(.js) / Helper js(.js)’这三部分构成的。在构建组件时有时会很困惑controller.js和helper.js的职责所在，毕竟helper.js即使没有组件也不会报错。 用户打开页面或者调用组件时，组件会被初始化。 组件初始化时，如果定义了init事件，那么首先init事件将会自动触发。页面初期用到的数据都需要在该事件内获取和设定。 当用户与页面发生交互时，比如点击按钮或者触发某个自定义事件，controller.js中定义的事件方法会被触发。 1234// 比如在controller.js中执行save方法save: function(component, event, helper){ helper.reques ...

Aura的组件属性如何理解组件的attribute?在前端组件化开发中,都会引入state的概念。我们要把组件看成一个状态机。通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致。 在Lightning Aura组件中, 我们通过改变组件的attribute来改变组件的状态。Aura的组件属性类似与Apex中类的成员变量,你可以在整个组件中显示、操作这些变量,从而改变组件的state,然后UI重新渲染,使画面上显示的数据和aura attribute的值保持一致。 如此看来,aura attribute实际上有两个主要目的: 存储交互的数据 组件之间交换数据。 重置组件的attribute？当画面刷新后,组件的state就会被浏览器释放掉。因为我们的组件属性都是存储在浏览器内存中的,所以一旦刷新页面,attribute也会回到初始状态。 为组件定义attribute语法： 1<aura:attribute name="**" type="**" default="**" required=& ...

组件的IDHTML文档是一棵DOM树,树上有很多节点,每个节点一般都会有id属性,id属性具有唯一性,在同一个文档中不能重复,id是该节点的唯一标识。而Aura的组件元素中并不支持Id属性,它有两种类型的ID: Local ID和Global ID。local ID用于定位画面中的aura元素,global ID用于区分同一组件的多个实例,有时在调试代码时也会用到。 Local IDs 使用aura:id属性为组件创建的ID叫local ID,通过component.find(local ID)方法可以获取画面中的aura元素。 local id 理论上是唯一的,但并不强制唯一。比如一组checkbox元素标签,可以给他们设置相同的local id。这时通过component.find(local ID)方法获取到的是元素列表。 aura:id不支持表达式,只能用普通的字符串值作为元素的local id。 只有Aura元素才可以定义aura:id,原生的html标签是没有该属性的。 例: 在controller.js中通过component.find(‘button1’) 可以获取到 ...

在深入Salsforce前端框架(二)篇中已经梳理了Aura框架的特性。此篇会着重讲解Aura组件的组件结构。 Aura ComponentsAura Component是构成Lightning应用的基本单元,它可以是一个完整的应用或者只是一行文本,这取决于开发者如何更好的对页面进行合理的划分,并且提前规划好各个组件之间如何传递信息。组件最终会在浏览器中渲染生成HTML DOM 元素。 Lighnting Componen也可以看成是CS架构,Aura Component是客户端负责画面的呈现和用户交互，组件绑定的Apex Controller作为服务端,负责与DB的交互。 创建Aura组件开启My Domain在创建Lightning组件前,你的org必须启用My Domain。出于安全考虑，Lightning Components要求为每一个org定义一个自定义的Salesforce域名。当启用My Domain后,链接到Lightning资源的格式会变为https://xxx.lightning.force.com。 Lightning组件不能与供应商的Lightning组件共 ...

深入Salsforce前端框架(三)上一篇主要介绍了Aura组件的核心设计架构，让大家对组件化的设计思想，事件驱动架构，以及Lightning Locker Service有了基本的认识。此篇会着重介绍Lightning Web Component组件，让大家对lwc组件的核心以及相关的web标准有更深刻的体会。 什么是 Lightning Web Component (LWC)?LWC是Salesforce基于最新的Web标准构建的开源前端框架。LWC引入了许多新的Web标准技术去开发组件,比如 Web Component, Templates, shadow DOM,并且支持ECMAScript 6及以上版本中可用的新语言.作为Aura的替代品,LWC组件能与Aura组件共存，交互，共通构建Lightning应用。 LWC诞生背景2014年，Salesforce就推出了Lightning Component和Aura框架，开发者可以在平台上构建组件化的应用。虽然当时前端技术还没有迎来爆发性的增长，但通过aura bundle生成的组件，虽然在服务端渲染，但性能还是可圈可点的。借助a ...

深入Salsforce前端框架(二)此篇会结合官方开发者文档，着重介绍一下Lightning Aura组件。使小伙伴们在学习该组件的具体用法前，对组件的核心特性有一个基本认识。 什么要引入Aura框架? 移动端优先原则移动端设备的普及让企业的业务部门开始使用不同的移动设备去处理日常事务。但是传统的Visualforce页面在移动端的体验并不好，如果在构建VF页面时没有引入响应式的CSS框架，我们在手机端就无法正常操作Vf页面构筑的应用。Lightning组件使用响应式设计的Web页面，画面会根据浏览器窗口变化，达到自适应的效果，并且支持最新的浏览器标准。在aura组件中，我们不引入Bootstrap就可以完美解决设备兼容性问题，不引入jQuery就解决了浏览器兼容性问题，提高开发效率的同时也提高了用户体验。 开箱即用的组件库Salesforce为我们封装好了大部分常用的lightning组件，并提供了详尽的文档说明。在构建画面前，首先检查组件库，看是否有满足所需功能的组件。利用这些现成的组件可以节省造轮子的时间。比如，现在客户要求在画面上加一个轮播组件来滚动商品信息。这种复杂的组件如 ...

深入Salsforce前端框架Salesforce的生态系统允许开发者在Force.com平台上进行二次开发,使用Salesforce提供的丰富API接口构建满足业务的”应用程序”。在满足业务各种脑洞需求的同时,强大的定制化能力也赋予了产品持续的生命力。近十年随着前端技术的发展,很多新项目都开始了MVVM的转型,Salesforce也在不断推出符合最新web标准的新框架。 s-controls-control是SFDC最早的前端框架,画面就是一个单纯的html,开发者还需要在js中调用API来实现DML操作,无论是安全性还是用户体验都很不友好。s-control也无情的被Visualforce所取代。2010年3月之后，从未创建s-control的组织，以及新的组织，将不被允许创建它们。现有的s-control将不受影响，仍然可以编辑。建议将s-controls移动到Visualforce。你需要创建一个custom button或custom link来显示s-control画面。或者将s-control放入web tab中让用户使用。 Visualforce PageVisua ...