Ajax数据联调项目师徒计划

Posted 2021-04-15 IT项目练习生

本师傅是去年在棒棒团自学，今年一年时间薪资一万五。

预览

1、项目标题：

棒棒团音乐电台

2、项目功能：

2）下半部借助轮播实现了一个简单的选择功能。

3、项目技术细节介绍：

1）响应式布局，实现方式是，垂直方向以vh为基准单位，无论在什么样的尺寸下，页面的高度都是刚好充满全屏，水平放方向上是加多个媒体查询，简洁高效。

2）页面的功能分离，是使用事件发布订阅模式实现的。简单的封装了一个 Eventcenter，下半部只负责监听用户的选择，并fire相关信息，上半部收件信息后，做相应的加载，一定意义上实现了解耦。

3）歌词加载自动加载功能，将得到的整份歌词按 'date':'lyric' 的形式存储在一个对象中，然后监听 audio 的 play 事件，获取 currentTime ，并以 currentTime 为 key ，匹配相应的 date，获取到对应的 lyric 后，加载到 html 中的 dom 节点中。

4、项目中遇到的问题：

1）ul绝对定位之后，消失不见了。与z-index无关，父元素必须有高度才行；

2）footer区点击过快时，连续滚动。加一个锁，使动画在播放过程中不能再被触发；

3）scroll 事件无法触发。绑定的元素必须有固定的height 且 overflow: scroll；

4）刚开始自己在定义一个事件的时候，涉及到其他事件后就立马添加代码，后面导致代码过多，回看时逻辑紊乱。尽量能独立出来的功能就分离出来写成一个函数，后面再用到时只需一个简单的引用。

5、项目收获：

加深了对CSS3的理解和应用，除自己定义animate外，还学会了使用 jQuery 的 animate 插件；

熟悉了响应式布局；

在原理上理解了Ajax请求，理解了跨域，并掌握了跨域的三种方法：jsonp、cors、降域；

养成了优化代码、模块分离的书写习惯；

对节流开始重视。

6、技术栈关键字：

jQuery、jQuery插件、Ajax、JSONP、CSS3、响应式、发布订阅式、动态添加DOM节点

适合人群：适用于初步学完前端基础知识的自学者，另外对 jquery 和 Ajax 有概念认识

费用：399把数据对接练好工作独立开发和后端在一起也不怕 

报名请添加阳叔微信sunyangsheep，或扫码报名：