妙味学员作品:完善的移动端项目 - 网易云阅读

前言

相信各位小伙伴在学习前端的过程中,都有过模仿经典的经历。这个过程,是检测我们所学的知识是否扎实全面的实战演练,以备以后自己真正独立走向“战场”。
然而很多小伙伴在模仿过程中都是囫囵吞枣,潦草的觉得自己会了就结束,并没有做到足够耐心细致的去挖掘经典中每一个小的细节技巧,如此一来,难免错失许多实用技巧。
而妙味北京实体班学员 孙红梅 却不是这样。她对自己、对项目有着非常认真细致的要求。接下来我们就来聊聊她的作品,这是一个功能非常完善的移动端作品:网易云阅读。

学员项目地址:请扫描二维码观看

项目介绍

网易云阅读器是一款国内最大的在线阅读平台 APP,完美适配多终端、海量的经典作品、功能全面,是一款深受欢迎的云阅读器。本作品也是 孙红梅 同学对此项目的一次全面学习。

功能介绍

1. 注册登录登出

一个云阅读器首先就是要有自己的账号了。在作品中,即可注册账号,进行登录登出的操作。一个属于你的云阅读账号就完成了。功能上实现了历史记忆存储功能,这样下次就不需要反复的输入账号密码等。

2. 搜索功能

在庞大的存储空间中,搜索功能是必不可少的。通过关键字的搜索,就可以精准的查询到你想要的数据内容了。(例如:我们在搜索栏输入 Java,点击“放大镜”搜索按钮;对应着相关 Java 书籍就都显示出来了)

3. 首页轮播

当你不知道想要看什么样的书籍时,首页轮播功能显得尤为重要,它可以为你推荐热销畅销书籍,轮播供你选择。在静态的页面中加入了动态元素,让项目内容更加丰满。

4. 分类排行查询

如果你有明确的阅读类型目标,却不知道该选择哪一本书时,分类和排行功能可以轻松的帮你大忙。

5. 文章阅读

当你阅读时,目录查找、视图切换、下载、夜间阅读等实用、个性化的功能,将会为你的视力保驾护航。

这就是妙味学员 孙红梅 的移动端产品,几乎涵盖了云阅读的全部功能需求。 孙红梅 同学把她的细腻心思和全面的技术能力,完美的展现在了网易云阅读项目中。


下面是孙同学对该项目开发的介绍:

项目名称:网易云-移动端阅读器

开发周期:14天

技术构架 :

webpack + react + react-router-dom + es6 + ajax

核心技术及功能 :

  • react:
    • 只关注 view 层, 操作 vdom 并将数据映射到页面,可以结合多种数据流管理实践、组件化。
  • react-router-dom:
    • 因为它涉及到多个视图, 所以在引用里面有引入了 react-router-dom,让我更方便的切换显示相应的组件;
    • React-router 升级到 4.0 之后,路由即组件的思想让代码的逻辑更加清晰。
  • 历史管理、本地存储:
    • 用 react 自带的属性 history,location,match 属性,路由的数据存储和传递,H5 新方法localStorage 做本地存储。
  • 搜索:
    • 用来搜索相关书籍,并用路由处理搜索页面的切换,不刷新页面,搜索组件保持一直在顶部,它会记录你的搜索记录;
    • 搜索记录会存储在本地,当然也可以删除记录。
  • 用户注册和登录:
    • 首先注册和登录之前都会进行前端验证,一方面是提升用户体验,一方面是减小后端压力;
    • 如果前端验证通过,会发起登录和注册请求,接受到后端的返回的结果后,如果成功则会跳转到用户信息页,在 ajax 请求成功后 push 过去就好了,如失败就给出提示;
  • 自动登录和登出:
    • 如果页面有刷新, 首先会请求一次自动登录的接口, 它会告知我之前有没有登录过;
    • 如果之前有登录过, 那么这一次请求带过去的 cookie 就会跟之前服务器帮我记录的 session 匹配起来。 如果服务器能帮我找到相应的 session, 那么说明我之前有登录过;
    • 自动登录的接口也会直接给我一些用户的信息;
    • 登出操作会发送一次请求给后端, 后端会删除跟当前请求的客户端( 唯一的 cookie ) 相对应 session;
  • 后退:
    • 直接使用 history 里面的 goBack() 方法, 其实就是每次回退只是读取 history stack 里的前一个 entry,跟点击浏览器的后退按钮一样;
  • 点击更多功能:
    • 此点击动作抽离出来作为一个组件,点击时传递数据,并路由切换组件,拿到字段请求数据并渲染视图;
  • 其他:
    • 轮播:采用 react-swiper 插件处理轮播;
    • 详情页:拿到每本书的 id,跳转的时候通过路由跳转时可以传递一个 state, 把 id 当一个 state 传递给要跳转到的组件再渲染视图
    • 文章阅读页面 :
    • 目录和图书文章内容用正则处理并渲染视图,有字体、夜间、下载、目录切换等简单功能,都只是用改变 vdom 的状态;

技术难点 :

  • 组件的设计逻辑:
    • 组件要拆分成怎样的一个细粒度是一个问题, 开始使用 react 的初期按照 UI 来拆分组件是个不错的办法, 现在按照数据来拆分组件是个更好的选择;
  • 路由的设计逻辑:
    • 把视图公用的部分放在同一个 Route, 这样可以让组件得到更多的重用。
  • state 的设计:
    • state 要尽量保持简洁, 能够计算出来的值不需要放在 state 里面, 组件不应该放在 state 里面;

小结

  • webpack 可以帮助我分析我应用的模块依赖, 并进行模块打包, 它有众多强大的 loader 帮我处理各种文件内容,比如 less 文件,jsx 的语法, es6 的语法。
  • react 这种基于组件化开发的方式能够让项目更容易维护。它通过 virtual DOM 隔离了对真实 dom 的操作,操作 virtual DOM 的方式让我们对 DOM 的操作稍微方便了一点。把注意力从复杂的 dom 操作转移到了对数据的维护, 我们只要保证数据的正确,就能够得到确定的 UI 显示。因为 react 的核心就是把数据映射到页面;
  • react-router-dom 让单页应用的视图切换变得更加方便和简单,并且 browserHistory 会记录我的浏览历史,同时 history 能够让我更方便的读取 history stack 里面的某一个 entry。

以上就是 孙红梅 的作品介绍。
小伙伴们,你会通过什么类型的作品来检测自己所学呢?
你会去做这样一件较为完善的移动端项目吗??

学员项目地址:请扫描二维码观看


孙红梅 是妙味北京实体班学员,正是经历了前端基础阶段系统全面的学习,才有后面较为完善的移动端作品。

在这个动辄就叫嚣着要研究最新流行的各种框架库、各种编程思想设计模式……而少有人注重基础知识训练的时代,孙红梅 却反其道而行之,毫不放松每一个基础知识的细节研究,反倒成了稀缺型的技术人才。

正打算学习的你,要选择哪一条学习路径呢?


妙味超值远程课推荐:

  • 这是一场关于编程界“造轮子”的话题讨论;
  • 这是一次对稀缺原生技能人才的提升计划;
  • 这是一波《移动端原生技法精粹揭秘》的全面演练。

九月,收获的季节。妙味讲师 莫涛 将带大家收获移动端原生组件开发实战技术揭秘!

课程超值价:199 元/套

上课时间:20 : 30 ~ 22 : 30

课程详情:

http://www.miaov.com/index.php/news/newsDetail/nid/155

课程咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690

想了解妙味最新公开课消息?长按二维码关注吧:

妙味网友
请登录后留言,请登录注册