小A最终考核

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、文件结构

• html文件分为三部分：登录页面（loginPage.html）、首页面（homePage.html）、用户页面（peoplePage.html）
• 对应的css文件也分为三部分
• js文件分为三部分：login.js、home.js、people.js
• 以及js模块：methods.js、ajax.js、api.js、dynamic.js

二、项目结构 及 流程

• 打开index.html后会执行login.js暴露出来的loginDom方法（里面包含渲染登录页面，以及渲染后的dom操作），点击登录后会执行home.js暴露出来的home方法（里面包含渲染主页面，以及渲染后的dom操作），点击导航栏头像或者动态或评论名字就会执行people.js暴露出的people方法（里面包含渲染个人页面，以及渲染后的dom操作）
• methods.js暴露其他模块会用到的公用方法
• dynamic.js暴露active方法，只要传入渲染的动态数据和渲染的dom就能用，可用性高
• api.js暴露所有需要用到的接口
• login.js是对登录页面的操作
• home.js是对主页面的操作
• people.js是对个人页面的操作

三、介绍js模块（这里面是我抽离出的公用方法）

1. ajax.js

结构语法在形参的应用

好处：

• 可以设置初始值，比在函数内利用对象覆盖原理方便
• 调用函数传入参数时，利用对象解构特性，可以不按照顺序传递

拼接键值对

• 方便get请求，这里用for in遍历对象，再使用substring方法处理字符串

post请求里的formdata和josn格式

• 如果是post JSON格式的数据，是需要设置请求头的，并把数据用JSON.stringify方法转为json格式
• 如果是post form-data格式的数据，不需要设置请求头，因为new formData实例会自动帮你设置请求头，如果你再设置请求头这里会报错（坑）

处理返回值

• 这里resolve出去的内容是没有经过json.parse处理过的数据，原因是可能要用ajax获取xml数据

2. api.js

• 封装ajax接口，并做初步的处理：比如正则验证和接口返回值的初步处理
• 比如下面代码👇
  
  • 说明：如果我需要登录，就调用api.loginByUsername(data) 方法，此方法会根据我提供的data数据进行正则验证，验证成功才发送给后台，然后后台发送数据回来，此登录接口也会对返回值进行初步处理，data.code==200时才返回resolve
• 其他模块如何调用👇
  
• 优点：在本项目内，高可复用；方便修改url和正则验证还有对返回值的处理

3. methods.js

抽离出的公用方法

renderPage（）

• 代码如下👇
  

• 使用方法：renderPage（hml文件地址，要渲染的dom元素）

• 实现效果：使html文件模块化，能把特点html文件里的内容渲染到特定dom元素

• 原理：通过ajax获取地址里的内容，并渲染出来，因为ajax是异步，所以用promise封装

Tip（）

• 代码如下👇
  

• 使用方法：Tip（要提示的内容，背景颜色）

• 实现效果
  
  

sonDom（）

• 代码如下👇
  

• 使用方法：sonDom（父级dom元素，父级dom元素下面的元素的class名字）

• 实现效果：解决了命名空间问题，能准确获取元素

getMsg（）

• 代码如下👇
  
• 使用方法：getMsg（要获取数据的名字）
• 实现效果：因为使用登录模块登录后把用户个人信息（id,username…）存在sessionStorage里面，所以可以通过getMsg（“id”）获取登录用户的id

creatDom（）

• 代码如下👇
  

• 使用方法：creatDom（在哪个dom元素下面创建新dom，新dom的class名字，新dom的类型，插入方法）比如creatDom（document.getElementsByTagName(“body”)[0]，“newdom”，“div”，“after”）

• 实现效果：创建一个dom元素，包含class名字

Dom（）

• 代码如下👇
  
• 实现效果：把通过class获取dom元素的方法封装起来，方便使用

order（）

• 代码如下👇
  
• 使用方法：arr.sort（order（键）） 适用于存放对象的数组，按照对象内的某键值对去排序
• 实现原理：利用闭包，使return出的函数还可以使用field数据

cookie的封装

• 设置cookie的封装，代码如下👇
  
  • 使用方法：setCookie（键，值，保存多少个小时）
• 获取cookie的封装，代码如下👇
  
  • 使用方法：getCookie（键）
  • 实现原理：多个cookie保存时以; 分隔，先用split方法分割成数组，然后遍历数组找到符合的cookie返回出来
• 删除cookie的封装，代码如下👇
  
  • 使用方法：delCookie（键）
  • 实现原理：通过给cookie设置过期时间删除cookie

4. dynamic.js

• 暴露出一个active（要展示的动态数据，渲染在哪个dom元素）接口
• 具体看下面部分

四、基础功能

1. 登录

• 代码如下👇（邮箱登录类似）
  
• 流程：获取账号和密码 ——>>调用api.loginByUsername方法把账号密码发送给后台（正则验证在api.loginByUsername()方法里面，上面介绍 api.js 里面说过）——>> 登录成功后把后台返回的用户数据存储在session里面，如果勾选了保存密码选项，就调用setCookie把账号密码存进cookie ——>>然后调用renderPage方法渲染首页面(home（）是首页面的初始化函数，下面会说)——>> 如果账号密码错误，或者输入有问题会被catch捕获
• 优点：把输入错误和后台返回的错误统一捕获

2. 注册

• 代码如下👇
  
• 流程：获取账号、邮箱、密码 ——>> 调用api.register方法把注册信息传给后台（正则验证在api.register方法里面，上面介绍 api.js 里面说过） ——>> 注册成功后调用usernamePage方法切换到登录页面，注册失败就清空输入框，并提示失败原因 ——>> 如果是输入失败就被catch捕获并提示
• 优点：注册成功后会自动跳转登录页面并提示；注册失败会清空输入框并提示失败原因；输入失败会提示输入失败原因
• 关于 usernamePage（） 等其他切换页面方法介绍，代码如下👇
  
• 关于 display（） 和 clear（） 方法介绍，代码如下👇
  
• 我为什么要设置display方法和clear方法

3. 自动登录 以及 退出登录

这俩个密不可分，我统一放在这里讲

• 自动登录代码如下👇
  
  • 流程：打开页面会自动执行此匿名函数 ——>> 通过getCookie方法获取邮箱或者账号，如果获取的是账号就执行loginByUsername登录模块，如果获取的是邮箱就执行loginByEmail方法
  • 优点：抽离出登录函数模块，使代码整洁
• 退出登录代码如下👇
  
  • 流程：点击退出登录按钮后 ——>> 执行renderPage方法，加载登录页面 ——>> 然后要删除cookie里面的账号邮箱和密码（关键：因为你退出登录后，出于实际考虑是不可能再自动登录的）
  • 优点：退出登录后会提示退出成功；退出登录会切换到登录页面；退出登录后会自动删除保存的账号和密码

4. 找回密码 及 获取验证码

• 获取验证码代码如下👇
  
  • 流程：点击获取验证码按钮后设置codekey=false ——>> 调用api.getCode方法发送邮箱给后台获取验证码 ——>> 发送成功后开始倒计时60秒，倒计时结束后才把codekey设置为true
  • 优点：设置了倒计时，提高用户体验；设置了节流阀，防止用户短时间内多次点击获取验证码按钮；邮箱输入错误会进行提醒
• 找回密码代码如下👇
  
  • 流程：点击找回密码按钮 ——>> 调用api.rememberPwd方法把数据传给后台 ——>> 找回密码成功后调用usernamePage方法切换到登录页面
  • 优点：没输入邮箱和验证码以及密码会提醒；找回密码成功后会切换到登录页面，以及提示修改成功

5. 上传头像 以及 显示个人头像和个人信息

• 前提：登录成功后，把用户数据存储在
• 显示个人头像和个人信息函数如下👇
  
• 优点：检测传入数据如果是登录用户的数据就渲染邮箱年龄等信息，因为后台没有给接口获取别人的这些信息，所以要做判断是否渲染； 设置默认头像，如果用户头像没上传的话，就加载默认头像
• 效果图：
  
  
  
• 上传头像代码如下👇
  
• 流程：判断是不是登录用户，只有是登录用户才能上传头像 ——>> 点击头像弹出上传头像按钮，点击上传头像按钮后调用api.uploadHeadImg方法，把数据传给后台 ——>> 然后更新个人信息卡
• 优点：没上传头像点击上传按钮会提示；上传头像后更新session数据，方便其他模块调用；
• 缺点：没有做图片回显，无法在确认上传头像前看到你上传的图片。css做的很难看
• 反思：封装了回显函数，回显方法我二轮培训任务用过，这次忘记用了。回显函数如下👇
  

6. 修改个人信息

• 首先看师兄提供的接口👇：可以看到除了id其他都是可选的，所以需要前端判断用户要更改哪些然后上传
  
• 修改个人信息代码如下👇
  
• 流程：点击提交按钮 ——>> 获取所有input输入框，判断哪些输入框内填写了信息，如果填写了就添加进data对象里 ——>> 调用api.updateUserData方法把data数据传给后台 ——>> 然后更新个人信息卡，和session数据方便其他模块调用
• 优点：对性别和年龄输入框进行验证；没有通过多选按钮判断用户输入，方便用户；提交完成后清空输入框
• 缺点：忘记对邮箱和名字以及电话号码做验证了
• 预览👇

7. 动态 （个人及所有人）

展示动态（简略和详细）

• 先看效果图👇
  

• 基础的实现思路：获取数据，根据数据多少渲染多少动态（按需渲染，我整个项目里面都按照这个思路）按需渲染代码如下👇；
  

• 显示多少条评论的实现思路：师兄给的动态数据并没有给出评论数，所以我在根据数据渲染动态的过程中，根据每条数据里面的id拿到每条数据对应的评论数据；

• 简略内容的实现思路：

  • 判断动态有没有图片，有就创建图片盒子，并加载第一张图片；实际效果看下面图片👇
  • 对多文字的处理，代码如下👇
    

• 详细内容的实现思路：拿到所有数据，把渲染简略内容的地方替换掉，全部渲染出来

• 优点：渲染动态的图片时是等图片下载完成，才插入动态内，减少了页面卡顿。实现代码如下👇
  

添加动态

• 添加多张图片实现思路：添加多少张图片就创建多少input控件，然后获取所有input控件内的内容append进new FormData（）里面。代码如下👇
  
• 添加动态后及时显示出来实现思路：我这里实现的方法是通过重新获取一次动态数据，按照时间顺序倒序处理，如何重新渲染出来。最好的解决办法是不重新渲染全部，我评论那里就是用这种办法，我下面会介绍。按时间排序代码如下👇
  

删除动态

• 实现思路：上面已经渲染出每条评论了，接下来遍历每条评论拿到每条评论对应的数据，数据内包含发布者的id和对应动态的id，然后通过 getMsg(“id”) 拿到存储在session里的登录用户id，对比，如果相同就渲染删除节点；点击删除节点时提示是否删除，如果点击确认就调用 api.deleteDiary 方法把对应的动态id发送到后台，最后移出这条动态节点并提示删除成功
• 代码如下👇
  

点赞动态

• 实现思路：上面已经渲染出每条评论了，接下来遍历每条评论拿到每条评论对应的数据，数据内包含是否点赞isLike和点赞数likesNum。设置初始的 likeKey=true 根据isLike判断是否已经点了赞了。如果已经点了赞了设置 likeKey=false，点击按钮的话就只能向后端发送取消点赞的请求并且页面点赞数减一；反之
• 代码如下👇
  

封装动态函数，方便其他模块调用

• 这里就是dynamic.js暴露出的函数：active（data,dom）
• data是获取的动态数据，比如搜索接口获得的数据、动态接口获得的数据、按id获取的动态数据
• dom是把数据渲染到哪里
• 可以用在哪：搜索动态、热门动态、切页动态、所有人空间动态

8. 搜索动态

• 首先感谢师兄给的接口直接就返回搜索结果，不用前端去获取搜索结果

• 实现的效果图如下👇 （做到对搜索关键字描红处理）
  

• 实现思路：其实就是对搜索结果进行处理，然后把数据进行展示。首先获取搜索关键字，把关键字变为自定义正则，然后用map函数去遍历后台返回的搜索结果并用正则去匹配，匹配成功就调用字符串的replace方法更换。具体代码如下👇
  

五、加分功能

1. 七天免登录的实现

• 实现思路：登录时保存登录账号和密码，通过设置cookie的expires设置账号和密码的过期时间

• 具体代码如下👇已封装
  

2. 展示热门动态排行榜

• 实现效果图如下👇
  

• 调用的自定义方法及模块：order（）、active()

• 实现思路：首先获取后台数据，然后根据每条动态的likesNum进行排序，然后调用 active（） 方法渲染出来动态。具体代码如下👇
  

3. 动态分页

• 实现效果如下👇

• 实现思路：主要就是定义一个公用的index，然后下一页和上一页、回到首页以及前往多少页都是改变这个index，接着就是调用后台接口把index传过去，拿到index页的数据，调用active方法显示出来。只要active方法封装好，并做一些判断，比如：到最后一页时，下一页按钮消失；到第一页时上一页按钮消失；如果跳转到不存在的页数就提示页数不存在。具体代码如下👇
  

4. 动态出现更新提示

• 实现思路：登录后获取一次所有动态并保存在originData里，然后每隔2秒获取一次后台数据保存在newData里，获取到newData后与originData取差集并保存在diff内，然后newData覆盖originData，开始下一次获取后台数据。取差集代码如下👇
  
• 实现的效果： 你登录期间如果有更新了8条动态，会显示总数。如果你点击了8条动态，会显示没有新动态，并重新开始计数
• 缺点：没有合理利用引用值，不太懂内存空间问题，我感觉我这样会导致内存泄漏，如果时间长了
• 未来可实现功能：显示更新的内容，我现在只是显示了更新的数目
• 全部代码如下👇
  

5. 动态评论（重点）

• 重难点：
  • 对评论数据的处理
  • 删除评论带来的祸患
  • 做到不重新渲染评论的前提下添加评论和回复并且自带事件
  • 说明：就是比如我添加一条评论，我不刷新评论页面就能及时看到该条评论，并且自带事件。为什么这么说呢，因为师兄给的添加评论接口添加成功后并没有返回你添加的评论的id，如果是添加评论并通过刷新评论及时看到该条评论就不需要返回该评论的id
  • 希望下面我能说清楚这些问题，并说出我的解决方法

• 对评论数据的处理

  • 最终想实现的效果：prior为0的评论作为一级评论，prior不为0的评论全作为二级评论，并且知道是回复谁的。效果图如下👇
    
  • 实现思路：后台返回的数据是扁平化的，通过arrToTree方法把扁平化的数据变为树状图，然后通过treeToArr方法把prior不为0的评论全部扁平化作为prior为0的回复。arrToTree和treeToArr方法如下👇
    
  • 数据处理完后就开始渲染一级评论，每个一级评论下面最多渲染两个二级评论，剩余的二级评论隐藏，渲染一级评论代码和二级评论代码如下👇
    
    

• 删除评论带来的祸患

  • 为什么这么说呢，因为如果我一条评论下面有回复1，回复1下面有回复2，回复2下面有回复3。如果这时我删除回复2，下次渲染该评论区时是渲染不出来回复3的，因为回复3找不到父级。后台应该返回被删除的回复2，只是回复2的内容被删除。
  • 这里我解决办法就是按部就班，不渲染被删除评论下面的所有回复

• 不重新渲染评论区的前提下添加评论和回复并且自带事件

  • 实现效果如下👇
    

  • 实现思路：把新添加的评论或回复插入到评论区（要判断是通过appendChild还是insertBefore插入），并且向后台发送这条评论数据，因为后台没有返回这条新评论的id，所以如果要给新添加的评论或回复添加删除事件（需要这条评论的id）的话，就要用差集的方法获取新增加评论或回复的id （点击回复按钮时获取一次评论数据，发布时获取一次评论数据，俩次数据差值就是新增加的评论）

  • 思考：我增加个人动态那用了刷新所有动态获取新增动态，俩种方法实现难度上第二种也就是我这添加评论这种方法比较难，但是效果是最好的

6. 相册（没做完）

• 只做了懒加载，添加相册和添加照片能用，但是要刷新一些，没有做到及时显示出来和接口的验证
• 封装了懒加载函数（使用前提是把获取到的图片地址加到data-src中）
  

7. 一键切换主题和白天黑夜模式（未做）

六、项目亮点–反思–感想–总结

• 亮点

  • 搜索功能对搜索关键字进行描红

  • 对动态图片进行了优化，运用promise使图片下载完成才放入页面

  • 在本项目内封装了高可用的active函数，只要传入动态数据和要渲染的dom就能使用。

  • 没有滥用全局变量

  • 登录信息保存在session中，方便所有模块调用

  • 功能模块化，使用某个模块时只要传入数据和要渲染的dom就能用。如下图👇
    

• 反思

  • css没怎么写，差不多就是没写，页面太丑了

  • 很多验证忘记做了，比如发送空白评论，修改个人信息那的邮箱电话忘记做正则验证了

  • 个人相册没做完

  • 有些js代码还是没能抽离出方法简化，比如动态那的删除功能我觉得要抽离出来给增加动态用，还有求俩组数据的差值

  • 没有做加载相关的东西就只做了个头像的转圈圈

  • 等等很多很多

• 感想

  • 这门语言也学了接近三个月了，断断续续的。这门语言的特点就是入手简单，但是如果想要写出好代码是很难的

• 总结

  • 总体下来的流程差不多都是：拿到数据，处理数据，渲染数据，加上事件，人性化程序