Lightning 开发的一些总结(二)

原创
2018/04/05 00:01
阅读数 1.9K

目前手上的Lightning项目的开发已经进入UAT阶段,从接触Lightning开发到目前已经经历了两个项目,从最初的简单页面,到目前这个项目中的涉及到的一个复杂页面,前后从原型到完成功能花费1个多月,从最初把整个组件内容写到一个Component中到目前这个项目中,将该复杂页面分解成若干个组件,再把这些组件组合成一个Component,使逻辑更清晰,学会利用Lightning的中的事件解决组件中的通信问题,踩过许多坑,每做完一个项目我们都需要总结下这个项目那个地方没有做好,在做下一个项目的时候怎么改进,做的好的地方,方便具有相似的项目参考

1. CSS

对于Lightning开发CSS是必不可少的,有做过Lightning开发的同学,应该已经认识到Lightning是单页面应用程序及富客户端,偏前台,跟之前做VF页面有较大的区别,大量的页面交互控制放到了浏览器端,比如在做VF页面时,如果是这种情况,页面一个表单,用户填写完,在表单下面是一个"下一步"按钮,以前做VF页面时,我们是在Apex Controller中定义一个标识,点击下一步时,当标识为某个值时,表单页面不渲染(不一定等于隐藏),而在Lightning中,我们是在JS Controller中控制,这时一般通过页面的隐藏与显示,并不需要与服务端通信,效率更高,在VF中著名的135K限制在Lightning中也不存在了.

我们在Lightning中使用CSS时一般更多的是在布局上,很少在一些特效上,所以在学习CSS时可以有些针对性,涉及到动画之类的可以忽略掉,提到布局,就是盒子模型及选择器.

1

如上截图,1与6处,很明显的有效大的空白, 控件位置摆放不合理,2处有空白处,3处的下拉列表过宽,4,5处没有对齐 如果不会CSS,那这些就只能看代码中怎么摆放控件的,浏览就怎么显示,这类问题我们可以请教前端同学,或者学习些基本的CSS先布局,再放控件,通过浏览器的控制台微调整.Lightning Component中有个文件专门用来写CSS样式的.

lightning:input 中的label是必备的,但是有的时候,我只想显示文本框,而不需要显示label,有些人说那我把label给个空格,不巧的是,label在页面中是占位置的,我们在lightning:input中定义的class,最终作用于如截图中查看元素中的红框处,对应的是一个DIV,我们通过这里可以看到,lightning:input 在翻译成html时,是一个div,这个div下面有label与另一个div,展开这个div才是一个input元素 这时候我们可以通过CSS后代选择器将label 隐藏掉

学习CSS

  1. W3C
  2. 关于盒子模型博客
  3. CSS的文章网上有许多

2.JS

对于JS只需要了解一些基础,Lightning 并没有引入新的技术,可以这样理解apex是对java的封装,那么Lightning 对JS的封装,用的多的也就是那些if判断与循环,再加上JSON的方法及数组的操作,再配合Lightning框架的一些api,如$A.下面常用的方法,与后台的数据交互方法,如果对JS很熟悉就可以封装些操作,简化代码,同时Lightning支持引入外部JS框架如果JQuery及基于JQuery的插件,但是要注意引入后避免与Lightning的冲突,因为毕竟在Component中调用方法,和传统的页面调JS方式不一样. 学习JS 可以在W3C上学习.

3.HTML5

Lightning Component支持HTML5,所以我们可以使用HTML5的一些特性,比如在第一个项目中,需要通过上传csv,批量导入数据,以前在VF中我们的做法是通过VF标准控件,绑定后台一个blob属性,但是这样做,apex需要解析csv,比较麻烦,同时各种限制,这里我们使用的方法是通过HTML5提供的FileReader来读取文件,将内容通过PapaParse.js插件转换为JSON到后台解析为对象,apex在处理对象就比较方便.

4.Lightning框架

  1. 需要知道Lightning的基本组件Lightning:xxx 及 Aura:xxx
  2. 需要知道Lightning 组件开发的流程,及数据是怎么从输入框到JS控制类,再怎么传递到后台Apex中,后台数据是怎么展示到前台页面
  3. 熟悉Lightning的表达式{!}与{#}的区别,以及表达示中支持的函数
  4. 熟悉Lightning的api如 $A.util下的函数
  5. 组件之间的通信(Event,属性,...) 及熟悉框架自带的事件如:刷新,创建,跳转....

5.SLDS

SLDS是Salesforce官方的CSS框架,有大量的组件,复用,比如用的比较多就是表格,表头固定,文本过长带省略号等特点

  1. 这里有个不明白点,他的样式的类名的规则"slds-notify slds-notify_alert"

6.常见的开发功能点

  1. 表格展示数据
  2. 批量数据新建,编辑,删除(最多)
  3. 表单填写

7.常用到的点

  1. 得到普通html元素上自定义属性(event.currentTarget.getAttribute('xxx');)

  2. 得到Lightning:xx 元素上的属性(event.getSource().get('v.value')),不支持自定义属性

  3. $A.get("e.force:showToast") 用来展示消息

  4. SLDS中的Card组件,模态框组件,表格组件

  5. 监听刷新事件

     <aura:handler event="force:refreshView" action="{!c.refresh}" />
    
  6. 引入外部JS/CSS

     <ltng:require scripts="{!join(',', $Resource.XXX)}" styles="{!join(',', $Resource.XXX)}"/>
    

8.不足地方

  1. 缺少Lookup组件,目前我们使用的是在网上找的一个组件,勉强能满足功能,之前的方式是采用弹出层,搜索+列表方式这样跟标准的lookup不一致
  2. 当一个内部类的属性是一个sObject时,这时页面上使用的是这个属性下字段绑定输入框时,不能绑定值,只能在内部类中定义属性这样就导致需要定义太多的内部类属性,也增加了转换到sObject的麻烦
  3. 表达式{!}不支持取Map的值(当批量操作时,我点击删除某条记录,我只能在删除的a链接上自定义一个属性填充一个id值,在js 控制类中我需要遍历集合+if判断找出我当前操作的是那条记录,在ES6后,js支持map)
  4. ......

9.暂未使用到的

  1. 目前开发的组件没有考虑性能问题
  2. Lightning的缓存机制
  3. 在SF1上使用Lightning开发的组件
展开阅读全文
加载中
点击加入讨论🔥(1) 发布并加入讨论🔥
打赏
1 评论
0 收藏
0
分享
返回顶部
顶部