原生Js-msi系统

2018-08-10 admin

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

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

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

clipboard.png

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

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

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

因此代码设计上: 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也要置为未勾选状态
  • 不允许一个都不勾选,所以当用户想取消唯一一个被勾选的子选项时,无交互反应,不允许取消勾选

clipboard.png

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

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

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

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

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

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

原文链接:https://segmentfault.com/a/1190000015955107

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37677.html

文章标题:原生Js-msi系统

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
回到顶部