使用ivx小模塊製作日曆的經驗總結

在ivx中很多常用功能都已經封裝成了拓展組件供大家使用,其實我們還可以將常用的自定義功能寫成一個小模塊實現複用。在ivx中小模塊有以下分類:前臺小模塊(相對定位/絕對定位)、後臺小模塊和綜合小模塊(相對定位/絕對定位),其中綜合小模塊會包含前臺和後臺的部分,也因此前臺小模塊和總和小模塊會涉及到前臺的舞臺佈局,所以會帶有相對定位和絕對定位的屬性

一.小模塊
1.創建與保存
點擊下圖位置並選擇小模塊類型即可添加一個小模塊,製作完成後可以就可以進行保存和上傳,這樣在其他案例中就可以從雲端下載進行復用了。
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
2.公共數據
我們可以看到小模塊內部除了我們要自定義添加的佈局組件外還包含公共數據、公共方法和自定義事件三個部分,下面我們來分別說一下它們的使用方法。首先是公共數據,這裏一般添加的是需要與外部交互的數據變量,我們通過小模塊外的組件設置小模塊屬性的時候就是設置這些公共數據的值。同樣,外部組件和變量也可以通過獲取小模塊的屬性來的得到這些公共數據。
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
3.公共方法
公共方法中我們一般添加動作組,也就是小模塊內部在實現業務邏輯時執行的的動作,通過外部組件我們能夠調用小模塊執行公共方法中的某一動作組。
使用ivx小模塊製作日曆的經驗總結
4.公共事件
ivx中一般組件都會有觸發事件,小模塊也一樣,不過需要我們去主動添加和設置,小模塊的自定義事件觸發後可以調用外部組件執行一些動作。總結一下就是外部組件和小模塊通過公共數據進行數據傳遞,然後外部組件通過公共方法操作小模塊,而小模塊通過自定義事件來操作外部組件。
使用ivx小模塊製作日曆的經驗總結
二.日曆模型
現在我們用小模塊來實現一個日曆模型。首先看一下佈局,小模塊的上半部分使用絕對定位容器做了一個操作行,展示了年份和月份,並且添加了翻看前一月和後一月日曆以及關閉日曆的按鈕,下半部分是用循環創建制作了日曆表。公共數據中添加了數值變量month、year,公共方法爲生成日曆,自定義事件爲點擊某天。
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
1.首先點擊小模塊外部的按鈕組件,會將當前系統的年份和月份分別賦值給日曆小模塊公共數據中的year和month,然後讓小模塊執行公共方法生成日曆。
使用ivx小模塊製作日曆的經驗總結
2.公共方法——生成日曆
在公共方法生成日曆中首先會檢查year和month的值,如果不是正常值就讓小模塊內部的系統組件獲取當前時間的年份和月份重新賦值。然後執行函數fungetmonth(),生成當月日曆表,並讓小模塊內部的組件顯示。
使用ivx小模塊製作日曆的經驗總結
3.函數fungetmonth()

函數的作用就是生成當前月的日曆表,傳入參數就是公共數據中的year和month,返回結果爲一個二維數組。

首先函數組件中自定義了一個函數fungetmonth,接收參數也爲year和month,這部分的功能是獲取當前月份總天數。例如我們傳入2020年4月,然後通過getDate獲取2020年4月0號的日期,這時返回的是2020年3月的最後一天的日期,就能知道3月一共有多少天。不過要注意JS語言中month的值是從0到11的,系統組件獲取的是4月,我們將4傳入函數函數讀取到的是5月,所以返回的正好是4月的最後一天。
使用ivx小模塊製作日曆的經驗總結
接下來,創建一個六行七列的二維數組(按星期每行七天,另外一個月最多可以排六行),再獲取當前月份第一天(注意這裏month就是減1的了),之後執行一個小循環判斷出當前月份第一天是星期幾,最後將剩餘日期依次填入二維數組並返回最終結果。
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
4.循環創建
當函數組件將返回結果賦值給二維數組月份日曆,我們以其爲數據來源進行一個兩層的循環創建,展示出整個月份日曆表。
使用ivx小模塊製作日曆的經驗總結
5.自定義事件——點擊某天
當點擊某一日期時,會觸發自定義事件點擊某天,並將該日期的年月日賦值給事件的參數。這樣,小模塊就可以在觸發事件中讓外部組件執行一些動作,案例中我們讓系統顯示一個提示語,內容就是點擊日期的年月日。
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
6.月份切換和關閉日曆
最後是月份切換和關閉日曆的事件,點擊關閉圖標,我們重新讓組件隱藏即可,因爲這個都是小模塊內部的組件所以不需要公共方法和事件直接執行即可,然後是切換月份,我們直接將month加減1然後更新數據到小模塊,重新調用公共方法生成日曆。
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
使用ivx小模塊製作日曆的經驗總結
總結
最後說明一下小模塊中公共數據的更新當前數據至小模塊動作,我們在小模塊內部更新公共數據的值時,如果不添加這條動作,那麼小模塊內的公共數據已經被修改後顯示的會是更新後的數據,但是從外部獲取小模塊屬性時獲取到的會依舊是更新之前的值,所以更新以及賦值後一定要記得加上這條動作。
使用ivx小模塊製作日曆的經驗總結

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章