你决定学习框架 x, 你打开 YouTube 或任何搜索引擎, 搜索与 x 框架相关的任何教程, 并在 30 分钟之后突然发出 "Eureka"(高兴地表现)的尖叫 -- 我认为这个框架类似自己之前学过的框架. 你是对的, 你不必要从头开始学习它. 在这篇文章中, 我将向你展示我学习前端框架的经验以及这些框架如何彼此相似的.
每次你决定学习前端框架时, 你定会反复听到这些术语(组件, 路由和管理状态 / 状态管理).
下面我们逐步了解下:
组件
任何框架的核心都是以创建组件来达到复用的目的. 如今, 大多数现代框架都使用 JSX 或 html 模版引擎, 生命周期钩子 -- 提供生命瞬间可见性, 比如创建, 渲染, 注销以及它们发生时的行为能力.
路由
如今, 大多数现代框架都提供 API 来创建和管理客户端路由.
管理状态
有时, 你的数据必须在组件之间共享, 推荐的方法是使其成为中心(中转站).
现在, 所有框架都提供 API 来管理你的状态 (例如 Angular 有一个 Service https://angular.io/guide/architecture-services ,React 现在有 Context API https://reactjs.org/docs/context.html ) 以及当你的数据规模变大之后, 你可以考虑使用像 https://redux.js.org/ 这样的库.
完成基础学习之后, 我们来亲自动手并创建项目.
创建项目
为了理解事物的某些方面, 你需要很好地了解它, 这些知识 (获取) 不是仅仅来自阅读书籍或者观看视频课程. 在这篇文章中, 真实的测试伴随着现实中的真正问题, 会带给你些启发, 并应用在你选择的任何前端框架的项目中.
笔记:
该主题中列出的项目难度逐渐递增, 每个项目会在前一个项目基础中增加.
项目的条理是从最简单到最全面.
1. 查找 & 显示 (模仿)
常用的首个应用是使用其公共的 API 来模仿任何已知站点, 尝试构建一个带下拉列表的搜索栏, 来保存来自端点 API 的结果, 检查其返回的数据, 然后再显示它, 就像有张图像一样 (显示) 或不显示.
端点 API 示例:
- GitHub API https://developer.github.com/v3/
- OMDb API http://www.omdbapi.com/
- Spotify web API https://developer.spotify.com/web-api/
- wunderground API https://www.wunderground.com/weather/api/
- reddit API https://www.reddit.com/dev/api/
你将学到:
使用 HTTP 客户端向端点 API 发起请求
使用键盘事件监听器, 例如, 一旦用户点击进入, 就向端点 API 获取结果数据
学会如何展示单条数据或一组数据
给你插入的数据添加点样式
构建你的布局
主要的详细信息: 列表结果将结果中的每个项目的链接添加到项目详细页面
了解如何将数据从母版页传递到详细信息页
2.Auth App
我在上一节中提到的一些端点 API(可能)需要一些身份验证, 因此在这一节中尝试添加或构建另一个带有登陆 / 注册页面的应用程序. 如果用户登陆了, 则将他 / 她重定向到用户主页, 并阻止访客用户访问(主页), 因为这需要用户登陆的.
你将学到:
路由守卫: 某些页面只允许通过身份验证的用户(访问)
如何发送并保存 JWT(JSON Web 令牌)以发出需要经过身份验证的用户请求
3.CRUD App
增删查改的应用程序是本节中最受欢迎的前端应用程序, 你可以使用本地存储或者使用在线服务 (如 Firebase) 来构建此应用程序, 甚至将它与后端框架集成在一起.
项目实例:
书签应用
To-Do App
你将学到:
验证用户的表单输入, 如果用户输入错误就提示错误信息
如何创建
put,delete,post 和 get
的 HTTP 请求
将你的应用程序和任意后端框架集成
尝试为后端框架添加 auth 功能
4. 聊天应用
在前面的章节中, 对后端的所有请求都是单向的, 你在管理应用程序状态时没有问题. 但在本节中, 我们尝试使用 Web sockets 来构建聊天应用程序, 它是双向的, 我们不能 (总是) 等待响应来更新视图, 我们需要另一种方法来管理我们的客户端状态.
你将学到:
学习如何使用管理状态解决方案, 如 redux for react, ngrx for angular 2+ 或 vuex for vuejs 以及如何将其与客户端应用程序集成
使你的应用更灵活(接收网络状态并通知用户新消息)
来源: https://juejin.im/post/5c9437355188256b74638bb8