成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

原生Js-msi系統(tǒng)

K_B_Z / 1112人閱讀

摘要：我也意識到在學(xué)習(xí)一個框架前，將框架的思想和原生的實現(xiàn)進(jìn)行對比有多么重要。這個是目前為止一個大的框架思路，當(dāng)然還要再進(jìn)行每個功能的細(xì)分。表格將上一步的并集數(shù)據(jù)顯示出來渲染分表格，表格有一個表頭，用于展示商品的種類地區(qū)以及每月的銷售情況。

前言：由于剛?cè)肭岸藭r間并不長，之前最近一直處在學(xué)習(xí)的階段，現(xiàn)在準(zhǔn)備找工作，回首看看之前學(xué)的，發(fā)現(xiàn)了很多的瑕疵。我分析覺得主要原因在于之前有些東西學(xué)的太快，以及一些急功近利的學(xué)習(xí)方法，回頭看來很多基礎(chǔ)知識掌握的并不扎實。所以畢業(yè)后的近半個多月以來，我一直沒有太著急的去裝飾一些外表絢麗的簡歷，而是踏實沉淀一下基礎(chǔ)知識。在復(fù)習(xí)JS的知識中，我發(fā)現(xiàn)一個很好的項目-msi(Management Information System)信息管理系統(tǒng)，是百度ife(真的是一個非常好的平臺，注重基礎(chǔ)又不失難度)的一個實操項目，從邏輯的設(shè)計到代碼的優(yōu)化設(shè)計全是自己完成的。現(xiàn)在完成了列表的點擊自身邏輯與表單交互交叉渲染的邏輯。項目地址如下：https://andy00614.github.io/s... 
??下一步工作是準(zhǔn)備將程序進(jìn)行拆分進(jìn)行webpack打包 -> 學(xué)習(xí)svg制作數(shù)據(jù)可視化的圖標(biāo) -> 增加功能可以保存數(shù)據(jù)到LocalStorage中，加載時優(yōu)先從LocalStorage調(diào)取。
??總結(jié)：做這個項目運用了大量的DOM操作以及數(shù)據(jù)中數(shù)組的嵌套遍歷，讓我深深的感覺到，當(dāng)存在很多DOM操作的時候，性能暫且不說，但體驗是很差的，非常容易把腦袋搞大。因此我突然有感vue這種MVVM的設(shè)計思想的精髓所在。我也意識到在學(xué)習(xí)一個框架前，將框架的思想和原生的實現(xiàn)進(jìn)行對比有多么重要。當(dāng)一個工具和新事物，當(dāng)理解到他的使用并不是理所應(yīng)當(dāng)，而是為了解決更好的產(chǎn)物時，或許才能夠靈活運用和深入理解，因此這個整體做完我會用vue再實現(xiàn)一遍分享給大家。
第一步畫出這個系統(tǒng)的整體流程圖

在寫程序前畫流程圖真的是非常重要，可以幫助我們理清思路，不至于在寫程序的時候突然就心猿意馬，導(dǎo)致大方向錯了。

這個是目前為止一個大的框架思路，當(dāng)然還要再進(jìn)行每個功能的細(xì)分。
所以第一步是要明確思路，因此可以通過流程圖進(jìn)行程序上的設(shè)計

從最簡單的設(shè)計開始，我們的需求為

表單：有兩個表單，一個是地區(qū)的，它的維度有三個：華北華南和華東;另外一個是商品種類。表單的作用是通過將這幾個維度的篩選做一個并集，然后把這個并集表現(xiàn)為表格和圖像的形式表現(xiàn)給用戶

數(shù)據(jù)處理：如上所述，把并集從完整的中找出來，生成表格。

表格：將上一步的并集數(shù)據(jù)顯示出來渲染分表格，表格有一個表頭，用于展示商品的種類、地區(qū)、以及每月的銷售情況。

因此代碼設(shè)計上：
html:

  *12
        *12
        

        商品信息表
        

            商品
            地區(qū)
            1月
            2月
            3月
            4月
            5月
            6月
            7月
            8月
            9月
            10月
            11月
            12月
        

        

            手機(jī)
            華東
            

        

            音響
            華南

所以實際到最后應(yīng)該就有三個div

當(dāng)然這最后最好在js中動態(tài)生成。

js偽代碼

    input的點擊事件 = function() {
        渲染新的表格
    }
    根據(jù)選取的表格的狀態(tài) = function() {
        進(jìn)行數(shù)據(jù)操作；
        返回數(shù)據(jù)
    }
    通過數(shù)據(jù)渲染表格 = function() {
        獲取剛才的數(shù)據(jù)
        遍歷數(shù)據(jù) {
            生成每一行的表格
        }
        將生成的表格給table
    }

就此大體交互的框架已實現(xiàn)完成，現(xiàn)在應(yīng)該從面到點的思考。首先是表單中增加全選按鈕，以及全選按鈕和分選的關(guān)系

2.表單邏輯

需求如下：

點擊全選時，如果單個選項中只要有一個不是被選上的狀態(tài)，則進(jìn)行全選操作

點擊全選時，如果單個選項中所有選項都已經(jīng)是被選上的狀態(tài)，則無反應(yīng)

點擊最后一個未被選中的單個選項后，全選CheckBox也要置為被勾選狀態(tài)

如果當(dāng)前是全選狀態(tài)，取消任何一個子選項，則全選CheckBox也要置為未勾選狀態(tài)

不允許一個都不勾選，所以當(dāng)用戶想取消唯一一個被勾選的子選項時，無交互反應(yīng)，不允許取消勾選

因此我們在程序上應(yīng)該這樣呈現(xiàn)：

    對所有表單事件進(jìn)行事件代理 = function() {
        如果e.target.id是全選按鈕 {
            判斷checked是不是被選中{
                如果選中 {
                    其他input全選
                } 沒有選中 {
                    其他input全部取消
                }
            }
        }
        遍歷所有的input {
            統(tǒng)計選中情況
        }
    }
3.對數(shù)據(jù)進(jìn)行處理并渲染

這一步將第一張邏輯圖的三四步合在了一起說。
做這一步，有了一個比較復(fù)雜的需求：

當(dāng)商品選擇了一個，地區(qū)選擇了多個的時候，商品作為第一列，地區(qū)作為第二列，并且把商品這一列的單元格做一個合并，只保留一個商品名稱

當(dāng)?shù)貐^(qū)選擇了一個，商品選擇了多個的時候，地區(qū)作為第一列，商品作為第二列，并且把地區(qū)這一列的單元格做一個合并，只保留一個地區(qū)名稱

當(dāng)商品和地區(qū)都選擇了多于一個的情況下，以商品為第一列，地區(qū)為第二列，商品列對同樣的商品單元格進(jìn)行合并

當(dāng)商品和地區(qū)都只選擇一個的情況下，以商品為第一列，地區(qū)為第二列

這個需求的難點在于單元格的合并：首先，第一點要對html的表格基礎(chǔ)知識有一定了解可以去看mdn的文檔，寫的十分詳細(xì)，也很容易理解；第二點寫出一個函數(shù)，復(fù)用上面所有的要求，只需要傳遞參數(shù)就行。這點我做的暫時不太好，我用了兩個函數(shù)去復(fù)用上面的情況，因此暫時先不細(xì)說這一點，等我找到更好的辦法再來和大家分享。貼出來

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96798.html

相關(guān)文章

  • CloudBest：年度復(fù)盤丨盤點2020無處不在的「云原生」

    摘要：華為云華為云在云原生這場游戲中，最具競爭力的玩家之一。年，金山云在云原生領(lǐng)域推出了三款重磅產(chǎn)品星曜裸金屬服務(wù)器云服務(wù)器和云盤。在線上智博會上，浪潮云發(fā)布了經(jīng)過全新迭代升級的浪潮云，進(jìn)一步提升平臺云原生服務(wù)能力。面對數(shù)字時代復(fù)雜系統(tǒng)的不確定性，傳統(tǒng)的 IT 應(yīng)用架構(gòu)研發(fā)交付周期長、維護(hù)成本高、創(chuàng)新升級難，煙囪式架構(gòu)，開放性差、組件復(fù)用度低，這些都成為了企業(yè)業(yè)務(wù)快速增長的瓶頸。而云原生以其敏捷、...

    Tecode 評論0 收藏0

  • “云原生邊緣計算”會成為“嵌入式計算”的終結(jié)者嗎？

    摘要：全球最大的開源基金會軟件基金會的董事甚至認(rèn)為，云原生邊緣計算意味著嵌入式計算的終結(jié)。這次我們不妨更加透徹的談?wù)劊圃吘売嬎愫颓度胧接嬎悖瑢⑷绾稳诤舷嗷ソ鑴?。云原生?yīng)用，即指專門為在云平臺部署和運行而設(shè)計的應(yīng)用。這是我在【物女心經(jīng)】專欄寫的第105篇文章。嵌入式計算已經(jīng)笑傲江湖多年，然而，最近它的地位似乎正在受到某種撼動。全球最大的開源基金會——Apache軟件基金會的董事Roman Sh...

    chnmagnus 評論0 收藏0

  • 云原生土壤孕育的開源森林

    摘要：在這個風(fēng)起云涌的時代，云原生技術(shù)作為孕育這些高科技的土壤，亦是備受世人關(guān)注。結(jié)合可靠的自動化手段，云原生技術(shù)使工程師能夠輕松地對系統(tǒng)作出頻繁和可預(yù)測的重大變更。 showImg(https://segmentfault.com/img/bVbpMA1?w=1200&h=300); 當(dāng)今的社會是高速發(fā)展的新型科技社會，互聯(lián)網(wǎng)、物聯(lián)網(wǎng)、人工智能等一系列新鮮事物如雨后春筍般噴薄而出，并以前所...

    MageekChiu 評論0 收藏0

  • 云原生土壤孕育的開源森林

    摘要：在這個風(fēng)起云涌的時代，云原生技術(shù)作為孕育這些高科技的土壤，亦是備受世人關(guān)注。結(jié)合可靠的自動化手段，云原生技術(shù)使工程師能夠輕松地對系統(tǒng)作出頻繁和可預(yù)測的重大變更。 showImg(https://segmentfault.com/img/bVbpMA1?w=1200&h=300); 當(dāng)今的社會是高速發(fā)展的新型科技社會，互聯(lián)網(wǎng)、物聯(lián)網(wǎng)、人工智能等一系列新鮮事物如雨后春筍般噴薄而出，并以前所...

    dongxiawu 評論0 收藏0

發(fā)表評論

0條評論

K_B_Z

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<