本文内容采用连载形式，每一次新的内容可能与之前的内容相关联，我通过标题中最后的数字用以区分文章的先后次序，以便于读者在阅读文章时了解整个项目的发展脉络。

作家管理系统之Web应用（四）
作家管理系统之Web应用（三）
作家管理系统之Web应用（二）
作家管理系统之Web应用（一）

前四篇文章介绍了作家管理系统的页面设计，我们从零开始，仅仅使用原生CSS实现了两栏页面的布局，左边栏展示了作者列表，右边栏展示了作者的详细信息，最后创建输入对话框完成作者信息输入页面。如果只是使用HTML和CSS创建漂亮的页面，而没有交互动作，那么这不能称之为一个Web应用，现在的项目中还缺少一项重要的功能：让页面与用户进行交互，这项工作是由Javascript语言通过操作DOM或BOM实现的，本文将重点介绍如何使用Javascript语言进行交互。

数据展现功能

一个应用中最重要的元素就是数据，数据是整个应用的基础。其实在之前的四篇文章中，我们也有意地参考了数据在应用中的样子，即它都包含哪些内容，以及采用什么方式的布局才能更好地将其展现给用户等，围绕着数据信息设计出了对应的页面，所谓的页面交互无非就是：用户把数据给程序，程序对数据进行处理，之后再将数据展现给用户。

本项目中的数据主要为作者信息，比如姓名、地址、出生日期等，我们要将这些信息展现在页面上。但是，如果数据信息比较多、类型比较复杂时，应用在展现信息的时候就需要对这些数据进行有步骤、有条件、有重点地展示，这称为对数据的控制，这类控制信息也属于应用中数据的一部分，只是它不直接显示在界面上，而是控制哪些数据在什么时候展示在什么位置。下文我们将结合代码说明数据在页面展示中的重要性。

本例中所有的应用都存放于一个数据结构中，称之为context变量，它的初始状态为一个空对象{}，表示整个应用运行时的上下文信息，其中，通过context.authors表示所有的作者信息，首先看一下需要展示的作者数据信息格式是什么样子的，如下图1所示

图1

这个author对象包含了一个作者的所有信息，比如姓名、性别和日期等，作者对象的每一个属性对应的含义是什么呢？通过下表1列出具体含义

表1

应用初始化

数据初始化(initData)

本应用的数据初始化包括两部分内容：一部分内容是预构建一些作者信息，另一部分内容是初始化页面中的某些控件，比如获取控件对应的对象或添加控件的响应事件等。初始化数据使用的函数为initData，它的功能是构建4个作者的数据，如下图2所示：

图2

图2中只展示了第一个作者的数据，隐藏了其它的三个作者的数据。初始化执行完成之后，用户可以通过context.authors数组访问当前页面中所有的作者信息，比如在创建新的作者时，可以向context.authors通过push方法添加作者数据；展示其中一个作者的信息时，可以通过下标的方式访问context.authors[1]。

UI初始化(initUi)

UI初始化工作可以分为以下几个部分：

1.初始化左侧栏控件；

2.初始化右侧栏控件;

3.初始化对话框控件；

4.使用数据初始化作者列表；

5.使用第一条数据初始化右侧栏作者信息；

定义一个应用整体初始化函数initUi，它在程序启动的时候就会自动执行，在这个初始化界面函数中再进行各子界面的初始化操作，图3中列出了initUi函数的定义：

图3

图3中第412行代码调用了函数initLeftPanel，它执行的是左侧栏控件初始化工作；第413行代码调用了函数initRightPanel，它执行的工作是初始化右侧栏界面；第414行代码执行的是初始化对话框界面；第415行代码initListView函数是使用context.authors中的数据创建作者列表；第416行代码initDetailView函数使用context.authors中的第一个作者数据填充右侧栏详情页界面。

初始化左侧栏控件（initLeftPanel）

初始化左侧栏控件主要是获取左侧列表中列表元素，通过图4第371行代码得到.left-list类元素，并将其对应的对象设置为context.authorList，之后再访问左侧栏的时候，就可以通过对象context.authorList来访问。

图4

这个含有.left-list类的元素在HTML中的定义如图5所示，在整个HTML页面中只有一个元素的class含有.left-list，所以，通过图4中第371行代码查询到的元素就是这个div元素。第372行代码为这个div元素添加了点击事件的处理器，我们将在后续进行详细介绍。

图5

初始化右侧栏(initRightPanel)

右侧栏界面的初始化函数为initRightPanel，这个函数创建了右侧栏中每一个需要显示作者信息的控件变量，并将这些变量保存至应用上下文变量context中，如图6代码所示

图6

图6第395-405行代码，通过使用id选择器(#id)获取对应的DOM对象，只有最后一个使用了局部变量createAuthorButton，其它的全部保存至context变量中，这样后续在其它函数中访问这些DOM元素时，通过context变量就可以访问对应的元素了，而无需再次调用查询函数。为什么在第405行代码中使用了一个局部变量呢？原因是：这个按钮对象只是添加了一个事件处理器，之后便不会再次使用这个createAuthorButton对象，无需将其保存至context变量中。第408行代码为按钮createAuthorButton添加了一个click事件，click事件处理的具体内容在右侧栏详情页章节中介绍。

初始化对话框(initDialog)

初始化对话框调用的函数是initDialog，它的主要功能也是获取DOM树中的元素，并将其存放至context中，图中第377行代码获取的是对话框对象，它与其它的HTML元素一样，都属于普通的HTML元素，本例中为一个div元素。之后的第378-387行代码，使用querySelector函数并指定对应的id值查询到对应的元素对象，并存放至context变量中，这些对象变量将会在更新详情时由其它函数通过context访问。最后的第389和390行代码分别设置了对话框按钮“确认”和“取消”的点击事件处理器，稍后，在右侧栏详情章节介绍。

图7

初始化左侧栏(initListView)

初始化左侧栏是通过函数initListView来实现的，它的主要功能是使用context.authors中的数据构建作者列表，一条作者数据对应于一个列表视图。图8中initListView函数只是调用了createAuthorsList函数，此函数通过访问context.authors数组的map方法将每一个author对象转换为一个div元素，map函数调用完成后会生成一个类型为div元素的数组，最后通过遍历这个数组将每一个div追加到.left-list类元素中，完成整个列表的构建。

在图8中，执行将author数据转换为列表条目的函数为createAuthorUi，这个函数首先通过第434行代码创建一个div元素，第435行设置这个div的class的值为.item，即添加这个条目的样式，之后第440-445行设置这个div的内部元素，使用第442行代码设置作者的姓名，第443行代码设置作者的国籍，最后为了便于区分每一个作者的头像，我们使用了一个颜色数组，一共含有4个不同的颜色值，根据作者的id值生成不同的颜色值，并将这个颜色值设置为头像元素的背景色，代码第446和447完成了头像背景色的设置功能。

图8

初始化右侧栏（initDetailView）

初始化右侧栏主要功能是将context.authors中的第一条数据显示在对应的DOM元素上，图9第420行代码从context.authors数组中取出第一个author对象，并将它传递给函数updateAuthorDetail，此函数分别在第435和436行代码处调用updatePhoto和updateGender两个函数，分别更新了详情页的头像颜色和性别信息。头像颜色值的设置使用了第426行代码中的backgroundColor属性，并按照这个作者的id值求余得到颜色数组的下标值。性别信息的显示是通过author对象的gender属性判断是否为‘man’，如果是的话，显示为“男”，否则显示为“女”；代码第437-443行根据author对象的属性设置对应的元素的innerHTML内容，这些context的对象成员都是通过图6中的代码初始化完成的，在这里，使用了第一个作者的信息对其依次进行了赋值。

图9

至此，这个界面的初始化工作就已经完成了，我们再来总结一下整个初始化流程是如何进行的。首先是构造4个作者的数据，完成数据初始化；第二步是获取DOM树中的元素，将其保存到上下文中，以便后续使用；第三步是使用作者列表数据构建左侧栏列表，使用作者数组中的第一条数据初始化右侧栏中的详情数据，这就是整个初始化所作的工作。

初始化完成之后，我们就可以添加各个控件的事件处理逻辑，比如通过点击按钮弹出一个对话框，通过“确定”按钮生成一个新的作者条目等，这些内容都在下一篇文章中进行介绍，谢谢各位的阅读 ，我们下一篇文章见！

作家管理系统之Web应用（四）
作家管理系统之Web应用（三）
作家管理系统之Web应用（二）
作家管理系统之Web应用（一）

本文为《作者管理系统之Web应用》的第五篇文章，其它的内容可以查看之前或之后的文章，您的反馈是对我最大的鼓舞，谢谢大家。