原生Js-msi系统

前言：由于刚入前端时间并不长，之前最近一直处在学习的阶段，现在准备找工作，回首看看之前学的，发现了很多的瑕疵。我分析觉得主要原因在于之前有些东西学的太快，以及一些急功近利的学习方法，回头看来很多基础知识掌握的并不扎实。所以毕业后的近半个多月以来，我一直没有太着急的去装饰一些外表绚丽的简历，而是踏实沉淀一下基础知识。在复习JS的知识中，我发现一个很好的项目-msi(Management Information System)信息管理系统，是百度ife(真的是一个非常好的平台，注重基础又不失难度)的一个实操项目，从逻辑的设计到代码的优化设计全是自己完成的。现在完成了列表的点击自身逻辑与表单交互交叉渲染的逻辑。项目地址如下：https://andy00614.github.io/s...
  下一步工作是准备将程序进行拆分进行webpack打包 -> 学习svg制作数据可视化的图标 -> 增加功能可以保存数据到LocalStorage中，加载时优先从LocalStorage调取。
  总结：做这个项目运用了大量的DOM操作以及数据中数组的嵌套遍历，让我深深的感觉到，当存在很多DOM操作的时候，性能暂且不说，但体验是很差的，非常容易把脑袋搞大。因此我突然有感vue这种MVVM的设计思想的精髓所在。我也意识到在学习一个框架前，将框架的思想和原生的实现进行对比有多么重要。当一个工具和新事物，当理解到他的使用并不是理所应当，而是为了解决更好的产物时，或许才能够灵活运用和深入理解，因此这个整体做完我会用vue再实现一遍分享给大家。

第一步画出这个系统的整体流程图

在写程序前画流程图真的是非常重要，可以帮助我们理清思路，不至于在写程序的时候突然就心猿意马，导致大方向错了。

这个是目前为止一个大的框架思路，当然还要再进行每个功能的细分。
所以第一步是要明确思路，因此可以通过流程图进行程序上的设计

从最简单的设计开始，我们的需求为

• 表单：有两个表单，一个是地区的，它的维度有三个：华北华南和华东;另外一个是商品种类。表单的作用是通过将这几个维度的筛选做一个并集，然后把这个并集表现为表格和图像的形式表现给用户
• 数据处理：如上所述，把并集从完整的中找出来，生成表格。
• 表格：将上一步的并集数据显示出来渲染分表格，表格有一个表头，用于展示商品的种类、地区、以及每月的销售情况。

因此代码设计上：
html:

  <table>
        <caption>商品信息表</caption>
        <tr>
            <th>商品</th>
            <th>地区</th>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
        </tr>
        <tr>
            <th rowspan=num>手机</th>
            <td>华东</td>
            <td></td>*12
        </tr>
        <tr>
            <th rowspan=num>音响</th>
            <td>华南</td>
            <td></td>*12
        </tr>
    </table> 

所以实际到最后应该就有三个div

    <div id="city"></div>
    <div id="product"></div>
    <div id="table-wrapper"></div>

当然这最后最好在js中动态生成。

js伪代码

    input的点击事件 = function() {
        渲染新的表格
    }
    根据选取的表格的状态 = function() {
        进行数据操作；
        返回数据
    }
    通过数据渲染表格 = function() {
        获取刚才的数据
        遍历数据 {
            生成每一行的表格
        }
        将生成的表格给table
    }

就此大体交互的框架已实现完成，现在应该从面到点的思考。首先是表单中增加全选按钮，以及全选按钮和分选的关系

2.表单逻辑

需求如下：

• 点击全选时，如果单个选项中只要有一个不是被选上的状态，则进行全选操作
• 点击全选时，如果单个选项中所有选项都已经是被选上的状态，则无反应
• 点击最后一个未被选中的单个选项后，全选CheckBox也要置为被勾选状态
• 如果当前是全选状态，取消任何一个子选项，则全选CheckBox也要置为未勾选状态
• 不允许一个都不勾选，所以当用户想取消唯一一个被勾选的子选项时，无交互反应，不允许取消勾选

因此我们在程序上应该这样呈现：

    对所有表单事件进行事件代理 = function() {
        如果e.target.id是全选按钮 {
            判断checked是不是被选中{
                如果选中 {
                    其他input全选
                } 没有选中 {
                    其他input全部取消
                }
            }
        }
        遍历所有的input {
            统计选中情况
        }
    }

3.对数据进行处理并渲染

这一步将第一张逻辑图的三四步合在了一起说。
做这一步，有了一个比较复杂的需求：

• 当商品选择了一个，地区选择了多个的时候，商品作为第一列，地区作为第二列，并且把商品这一列的单元格做一个合并，只保留一个商品名称
• 当地区选择了一个，商品选择了多个的时候，地区作为第一列，商品作为第二列，并且把地区这一列的单元格做一个合并，只保留一个地区名称
• 当商品和地区都选择了多于一个的情况下，以商品为第一列，地区为第二列，商品列对同样的商品单元格进行合并
• 当商品和地区都只选择一个的情况下，以商品为第一列，地区为第二列

这个需求的难点在于单元格的合并：首先，第一点要对html的表格基础知识有一定了解可以去看mdn的文档，写的十分详细，也很容易理解；第二点写出一个函数，复用上面所有的要求，只需要传递参数就行。这点我做的暂时不太好，我用了两个函数去复用上面的情况，因此暂时先不细说这一点，等我找到更好的办法再来和大家分享。贴出来