Lightning 開發的一些總結(二)

目前手上的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與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開發的組件