百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第三十九天到第四十一天:我是精明的小卖家(四)

普通

人数129人在学习该课程,有109人已经完成该课程

时间平均用时0.8

课程概述

作业提交截止时间:09-01

第三十九天到第四十一天:我是精明的小卖家(四)

课程目标

今天我们将进行这个任务系列的最后一课,学习Location,Hash等相关知识,来实现最后一个需求

课程描述

先来点简单的

阅读

需求

<button id="a">A</button>
<button id="b">B</button>
<button id="c">C</button>
<div id="cont"></div>
  • 基于以上HTML,点击对应按钮时候,改变div中的内容为按钮的文字。
  • 刷新页面的时候,保持div中的显示
  • 页面URL copy再打开后,保留渲染状态
  • 通过location.hash来实现

设计

按照传统思路,我们会给3个按钮绑定一个事件,事件中来改变id为cont的div中的内容,但在这个小任务中,我们需要改变一下逻辑。

这个需求中的关键,其实是在于通过URL中#后面的部分,来记录页面的状态,页面的渲染是由这个状态来驱动的。所以,点击按钮的时候,应该去做的事情,是更新这个状态。

然后对于状态改变这件事情,增加一个事件响应,来进行渲染。所以整个伪代码变为:

function 解析Hash,获取状态参数() {
    取到需要的值,并返回
}

function 渲染函数() {
    内容 = 解析Hash,获取状态参数()
    cont的innerHTML = 内容
}

按钮点击事件 = function() {
    设置新的hash
}

window.onhashchange = 渲染函数

进来先执行一次渲染函数()

按照上面的基本思想进行代码的编写吧

稍微复杂一点

需求

<button id="a">A</button>
<button id="b">B</button>
<button id="c">C</button>

<button id="d">D</button>
<button id="e">E</button>
<button id="f">F</button>


<div id="contABC"></div>
<div id="contDEF"></div>

现在我们需要记录两个状态

  • abc点击了,把按钮文字显示在contABC中
  • def点击了,把按钮文字显示在contDEF中
  • 同样在页面刷新时,保留之前的渲染状态
  • 页面URL copy再打开后,保留渲染状态

设计

思路和前面一样,只是在获取状态参数的地方稍微复杂一点点,相信你能搞定的

正式来做报表的事情了

现在通过hash的方式

  • 把用户的一些交互状态通过某种方式记录在URL中
  • 分享或再次打开某个URL,需要从URL中读取到数据状态,并且进行页面呈现的还原
  • 需要记录的状态包括:产品的选择以及地域的选择

来学习一下 pushState

阅读

编码

用pushState等代替前面直接操作hash的方式,来实现前面2个小需求及报表页面的需求

提交

把你的代码放在Github后进行提交

总结

依然把今天的学习用时,收获,问题进行记录

下一个任务预告

下一个任务将是全新的一个系列任务,敬请期待

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~