原生Js-msi系統

K_B_Z 發布于2019-08-23 10:54 / 1105人閱讀

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

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

第一步畫出這個系統的整體流程圖

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

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

從最簡單的設計開始，我們的需求為

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

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

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

因此代碼設計上：
html:

商品信息表
商品	地區	1月	2月	3月	4月	5月	6月	7月	8月	9月	10月	11月	12月
手機	華東
音響	華南

所以實際到最后應該就有三個div

當然這最后最好在js中動態生成。

js偽代碼

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

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

2.表單邏輯

需求如下：

點擊全選時，如果單個選項中只要有一個不是被選上的狀態，則進行全選操作

點擊全選時，如果單個選項中所有選項都已經是被選上的狀態，則無反應

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

如果當前是全選狀態，取消任何一個子選項，則全選CheckBox也要置為未勾選狀態

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

因此我們在程序上應該這樣呈現：

    對所有表單事件進行事件代理 = function() {
        如果e.target.id是全選按鈕 {
            判斷checked是不是被選中{
                如果選中 {
                    其他input全選
                } 沒有選中 {
                    其他input全部取消
                }
            }
        }
        遍歷所有的input {
            統計選中情況
        }
    }

3.對數據進行處理并渲染

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

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

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

當商品和地區都選擇了多于一個的情況下，以商品為第一列，地區為第二列，商品列對同樣的商品單元格進行合并

當商品和地區都只選擇一個的情況下，以商品為第一列，地區為第二列

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

云服務器 GPU云服務器原生廣告原生混編原生開發云原生

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96798.html

CloudBest：年度復盤丨盤點2020無處不在的「云原生」

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

Tecode 2022-06-28 18:59 評論0 收藏0
“云原生邊緣計算”會成為“嵌入式計算”的終結者嗎？

摘要：全球最大的開源基金會軟件基金會的董事甚至認為，云原生邊緣計算意味著嵌入式計算的終結。這次我們不妨更加透徹的談談，云原生邊緣計算和嵌入式計算，將如何融合相互借勢。云原生應用，即指專門為在云平臺部署和運行而設計的應用。這是我在【物女心經】專欄寫的第105篇文章。嵌入式計算已經笑傲江湖多年，然而，最近它的地位似乎正在受到某種撼動。全球最大的開源基金會——Apache軟件基金會的董事Roman Sh...

chnmagnus 2019-04-29 15:41 評論0 收藏0
云原生土壤孕育的開源森林

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

MageekChiu 2019-07-01 17:38 評論0 收藏0
云原生土壤孕育的開源森林

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

dongxiawu 2019-06-28 11:19 評論0 收藏0