组件化的可编辑数据表格

在前端开发中,越来越强调“组件化”的概念。所谓组件化，指解耦复杂系统时将多个功能模块拆分、重组的过程，由多种属性、状态反映其内部特性。特别是在vue，react等框架中，使用的更为频繁。下面我来讲述一下本次“可编辑表格的改进”的设计思路，实现方法，核心代码。

前端开发中，很多思路（核心）都是“以数据驱动页面”，它的关键是”以数据驱动页面”,意思是页面是靠数据支撑的，页面的大小也是灵活的可变的，同样是由数据撑起的，可见数据在web设计与开发中的重要性。所以页面布局固然重要，但更重要的，还是我们站在开发者的角度，思考怎样让数据更好的展示给用户，以实现交互。正所谓组件化，就是把每个功能较为详细的拆分一一实现以达到目的。设计思路如下：在HTML中写入简单代码（简单构建文字，表格即可），因为数据是随着JSON文件改变的，所以没有必要在HTML中写入数据。给出CSS后，重要的就是JS代码，以及JSON文件的引用。首先要获取元素，如getElementsByClassName，getElementsByTagName等，

在操作DOM元素中，永远都是先获取元素。接着我们定义按钮，以及存放成绩和标题的数据（用数组保存）。在数据展示方面，我们使用Ajax技术中的new XMLHttpRequest()方法

请求数据方式为‘get’，请求的数据存放在JSON文件中，用函数来生成HTML（目前JSON文件的内容不会随着网页的改变而改变，因为没有完全使用Ajax技术，当完全使用Ajax技术时，JSON server是我们常用的方法）。接着是渲染DOM内容，就是将JSON文件的内容取出，填充在HTML定义的表格中，表格的内容分别对应JSON文件的每一个节点，再用函数判断表格是否结束。接着是用数组生成总分栏（更新，删除，操作）目前操作只有删除。添加总分栏统计所有分数，操作难用来放“操作”按钮，给指定单元格设置可编辑权限，给单元格添加点击事件，给删除按钮添加删除功能，删除后则此行不存在等功能（分别对应各种各样的函数）。这就是大致的思路方法等。

综上所述，在开发中，“以数据驱动页面”这一思路非常重要，它不仅能减少HTML代码的量，而且在JSON文件中，数据能够更快捷地修改，能达到更好的交互效果。总体来说，使用JSON或JSON Sserver能极大提高我们的开发效率，我们在构思页面的时候，代码布局固然重要，但更重要的是数据的展示方法（有时用户也更侧重于数据）；所以我们在开发时，可以有一个基本构思，更能提高我们的开发效率和交互能力。