原生Js-msi系统

K_B_Z 发布于2019-08-23 10:54 / 977人阅读

摘要：我也意识到在学习一个框架前，将框架的思想和原生的实现进行对比有多么重要。这个是目前为止一个大的框架思路，当然还要再进行每个功能的细分。表格将上一步的并集数据显示出来渲染分表格，表格有一个表头，用于展示商品的种类地区以及每月的销售情况。

前言：由于刚入前端时间并不长，之前最近一直处在学习的阶段，现在准备找工作，回首看看之前学的，发现了很多的瑕疵。我分析觉得主要原因在于之前有些东西学的太快，以及一些急功近利的学习方法，回头看来很多基础知识掌握的并不扎实。所以毕业后的近半个多月以来，我一直没有太着急的去装饰一些外表绚丽的简历，而是踏实沉淀一下基础知识。在复习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的文档，写的十分详细，也很容易理解；第二点写出一个函数，复用上面所有的要求，只需要传递参数就行。这点我做的暂时不太好，我用了两个函数去复用上面的情况，因此暂时先不细说这一点，等我找到更好的办法再来和大家分享。贴出来

超融合服务器云服务器原生广告原生混编原生开发云原生

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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