「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

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

作家管理系统之Web应用(四)
作家管理系统之Web应用(三)
作家管理系统之Web应用(二)
作家管理系统之Web应用(一)

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

数据展现功能

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

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

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

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

图1

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

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

表1

应用初始化

数据初始化(initData)

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

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

图2

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

UI初始化(initUi)

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

1.初始化左侧栏控件;

2.初始化右侧栏控件;

3.初始化对话框控件;

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

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

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

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

图3

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

初始化左侧栏控件(initLeftPanel)

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

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

图4

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

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

图5

初始化右侧栏(initRightPanel)

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

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

图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行代码分别设置了对话框按钮“确认”和“取消”的点击事件处理器,稍后,在右侧栏详情章节介绍。

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

图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完成了头像背景色的设置功能。

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

图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中的代码初始化完成的,在这里,使用了第一个作者的信息对其依次进行了赋值。

「项目实战」.作家管理系统之Web应用(五)(欲开发一个基于web的书籍销售系统)

图9

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

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

作家管理系统之Web应用(四)
作家管理系统之Web应用(三)
作家管理系统之Web应用(二)
作家管理系统之Web应用(一)

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年7月5日 上午10:48
下一篇 2022年7月5日 上午10:50

相关推荐