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

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

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

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

從最簡(jiǎn)單的設(shè)計(jì)開(kāi)始，我們的需求為

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

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

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

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

  *12
        *12
        

        
商品信息表
        

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

            
手機(jī)
            
華東
            

        

            
音響
            
華南
            

    
 

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

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

js偽代碼

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

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

需求如下：

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

點(diǎn)擊全選時(shí)，如果單個(gè)選項(xiàng)中所有選項(xiàng)都已經(jīng)是被選上的狀態(tài)，則無(wú)反應(yīng)

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

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

不允許一個(gè)都不勾選，所以當(dāng)用戶(hù)想取消唯一一個(gè)被勾選的子選項(xiàng)時(shí)，無(wú)交互反應(yīng)，不允許取消勾選

因此我們?cè)诔绦蛏蠎?yīng)該這樣呈現(xiàn)：

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

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

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

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

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

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

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