国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（一）

Steve_Wang_ / 1081人閱讀

摘要：寫在前面之前寫了一篇為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。預(yù)知后話地址為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器到此，需求已經(jīng)明確。

寫在前面

之前寫了一篇 MultiPicker -『為移動(dòng)端而生』的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。鑒于很多人對(duì)這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長(zhǎng)史~

在閱讀本文之前，確保你有稍微看過 MultiPicker 的源碼 喔~

點(diǎn)擊查看源碼 ，也可以在 npm 上找到他們：

日期選擇器 - DateSelector - NPM.

自定義json選擇器 - MultiPicker. NPM.

一、 確認(rèn)需求 & 構(gòu)造函數(shù)的參數(shù)設(shè)計(jì)

想做自定義多級(jí)聯(lián)動(dòng)插件的最主要原因，當(dāng)然還是因?yàn)樵陂_發(fā)過程中頻繁的遇到。
并且對(duì)多級(jí)聯(lián)動(dòng)的產(chǎn)品需求又是奇葩到不行，市面上的插件都滿足不了我們產(chǎn)品的需求。所以，我不得不動(dòng)手自己造。

在造輪子之前，先思考一個(gè)問題：

第1個(gè)問題：『你都見過怎樣的多級(jí)聯(lián)動(dòng)選擇器？』 
比如 日期選擇器 、地區(qū)選擇器 、FAQ選擇器，或者 篩選條件選擇器。

我發(fā)現(xiàn)，日期選擇器和其他選擇器有著本質(zhì)的不同。
日期選擇器可以通過系統(tǒng)函數(shù)計(jì)算得到，而其他選擇器可以統(tǒng)稱為需要自定義json的選擇器。

所以我開始著手打造這兩個(gè)選擇器：
『日期選擇器 - DateSelector』 & 『自定義json選擇器 - MulitiPicker』。

思考第2個(gè)問題：『參數(shù)要怎么靈活和高效地設(shè)置？』

1.我發(fā)現(xiàn)，使用『日期選擇器』有兩個(gè)非常迫切、刁鉆的需求：

①：需要【年】【月】【日】【時(shí)】【分】這五種時(shí)間單位進(jìn)行排列組合；


②：需要時(shí)間范圍精確到分鐘。比如，有一個(gè)特賣產(chǎn)品需要限制時(shí)間可選范圍為【11月11日 - 11:11】開始，并于【12月12日 - 12:12 】結(jié)束。

在設(shè)置參數(shù)的時(shí)候考慮，可以使用一個(gè)數(shù)組來表示時(shí)間點(diǎn)，數(shù)組的每一位都對(duì)應(yīng)一個(gè)時(shí)間單位。
并且，考慮到很多只需要 部分時(shí)間單位 的用戶的用戶體驗(yàn)，所以需要一個(gè)參數(shù)確定用戶需要哪些時(shí)間單位，避免他們?cè)O(shè)置冗余時(shí)間單位帶來的麻煩。

參數(shù) 字符類型 取值 說明
param {Array} eg:[1,1,0,0,0] 設(shè)置單位，元素分別對(duì)應(yīng)設(shè)置["year","month","day","hour","minute"],1為需要，0為不需要,需要為連續(xù)的1

比如，你只需要 【月日時(shí)分】這四個(gè)單位，你可以這樣設(shè)置beginTime:

參數(shù) 字符類型 取值 說明
param {Array} eg:[0, 1, 1, 1, 1] 設(shè)置單位，元素分別對(duì)應(yīng)設(shè)置["year","month","day","hour","minute"],1為需要，0為不需要,需要為連續(xù)的1
beginTime {Array} eg:[3,27,12,12] 3月27日12點(diǎn)12分 設(shè)置開始時(shí)間點(diǎn),空數(shù)組默認(rèn)設(shè)置成1970年1月1日0時(shí)0分開始，數(shù)組的值對(duì)應(yīng)param參數(shù)的對(duì)應(yīng)值。

結(jié)束時(shí)間 endTime 和 recentTime 也是同理。

2.我發(fā)現(xiàn)，使用『自定義json選擇器』有一個(gè)非常迫切、刁鉆的需求：

①：用戶在自定義JSON的時(shí)候期望可以存在不同級(jí)別的聯(lián)動(dòng)。


比如，地區(qū)選擇器中可能同時(shí)存在【北京 → 朝陽】這樣的二級(jí)聯(lián)動(dòng)，也可能存在【廣東 → 深圳 → 福田區(qū)】這樣的三級(jí)聯(lián)動(dòng)。

所以要設(shè)計(jì)一種JSON的格式規(guī)范，既能夠讓用戶更方便的表達(dá)自己想要的JSON，又能讓插件能夠順利讀到JSON深度，從而動(dòng)態(tài)適應(yīng)聯(lián)動(dòng)。
經(jīng)過考慮，認(rèn)為最利落的JSON格式是對(duì)象數(shù)組，并且每個(gè)對(duì)象的屬性有以下幾個(gè)：

屬性 字符類型 說明
id {String} 該級(jí)聯(lián)動(dòng)的唯一標(biāo)識(shí)
value {String} 該級(jí)聯(lián)動(dòng)顯示的內(nèi)容
child {Array} 該級(jí)聯(lián)動(dòng)是否需要子聯(lián)動(dòng)，如需要?jiǎng)t繼續(xù)傳入數(shù)組，如不需要子聯(lián)動(dòng)，則不用設(shè)置child這個(gè)屬性

其中，child屬性可以一直向下迭代，并不要求同一級(jí)聯(lián)動(dòng)的各個(gè)對(duì)象要具有相同的子聯(lián)動(dòng)。

預(yù)知后話 
Github地址:『為移動(dòng)端而生』的自定義多級(jí)聯(lián)動(dòng)選擇器 


到此，需求已經(jīng)明確。


預(yù)知后話，后兩天見分曉


我是嘉寶Appian，一個(gè)賣萌出家的算法妹紙。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54385.html

相關(guān)文章

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（四）

    摘要：寫在前面之前寫了一篇為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。具體實(shí)現(xiàn)步驟如下先傳入一個(gè)需要計(jì)算深度的對(duì)象給，判斷如果還有則迭代，并計(jì)算深度。如果增加了聯(lián)動(dòng)級(jí)數(shù)需要來判斷，則為新增加的聯(lián)動(dòng)綁定新的事件。 寫在前面 之前寫了一篇 MultiPicker -『為移動(dòng)端而生』的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。鑒于很多人對(duì)這種手寫插件的過程很好奇，所以寫了幾篇文章，來說...

    ssshooter 評(píng)論0 收藏0

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（四）

    摘要：寫在前面之前寫了一篇為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。具體實(shí)現(xiàn)步驟如下先傳入一個(gè)需要計(jì)算深度的對(duì)象給，判斷如果還有則迭代，并計(jì)算深度。如果增加了聯(lián)動(dòng)級(jí)數(shù)需要來判斷，則為新增加的聯(lián)動(dòng)綁定新的事件。 寫在前面 之前寫了一篇 MultiPicker -『為移動(dòng)端而生』的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。鑒于很多人對(duì)這種手寫插件的過程很好奇，所以寫了幾篇文章，來說...

    cgspine 評(píng)論0 收藏0

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（四）

    摘要：寫在前面之前寫了一篇為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。具體實(shí)現(xiàn)步驟如下先傳入一個(gè)需要計(jì)算深度的對(duì)象給，判斷如果還有則迭代，并計(jì)算深度。如果增加了聯(lián)動(dòng)級(jí)數(shù)需要來判斷，則為新增加的聯(lián)動(dòng)綁定新的事件。 寫在前面 之前寫了一篇 MultiPicker -『為移動(dòng)端而生』的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。鑒于很多人對(duì)這種手寫插件的過程很好奇，所以寫了幾篇文章，來說...

    leiyi 評(píng)論0 收藏0

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）

    摘要：寫在前面之前寫了一篇為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。預(yù)知后話地址為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器到此，時(shí)間選擇器的核心算法就已經(jīng)基本掌握了。 寫在前面 之前寫了一篇 MultiPicker -『為移動(dòng)端而生』的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。鑒于很多人對(duì)這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長(zhǎng)史~ 在閱讀本文之前，確保你有稍微看過 ...

    ls0609 評(píng)論0 收藏0

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）

    摘要：寫在前面之前寫了一篇為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。預(yù)知后話地址為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器到此，時(shí)間選擇器的核心算法就已經(jīng)基本掌握了。 寫在前面 之前寫了一篇 MultiPicker -『為移動(dòng)端而生』的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。鑒于很多人對(duì)這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長(zhǎng)史~ 在閱讀本文之前，確保你有稍微看過 ...

    zzzmh 評(píng)論0 收藏0

  • 如何造一個(gè)移動(dòng)端的聯(lián)動(dòng)選擇器（三）

    摘要：寫在前面之前寫了一篇為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。預(yù)知后話地址為移動(dòng)端而生的自定義多級(jí)聯(lián)動(dòng)選擇器到此，時(shí)間選擇器的核心算法就已經(jīng)基本掌握了。 寫在前面 之前寫了一篇 MultiPicker -『為移動(dòng)端而生』的自定義多級(jí)聯(lián)動(dòng)選擇器，得到了很多人的關(guān)注。鑒于很多人對(duì)這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長(zhǎng)史~ 在閱讀本文之前，確保你有稍微看過 ...

    since1986 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<