这是一个创建于 1549 天前的主题，其中的信息可能已经有所发展或是发生改变。
题主目前学习了 reactjs,redux,react-router,styled-component,了解些 npm script,webpack
先前也做了一些 demo，比如计算器，用 hn 的 api 做了简单的页面
现在，想做一些稍微复杂的 demo，感觉很难下手。
我去 Github 上，搜了一些项目，比如音乐播放器，商城，后台管理系统之类的，从第一次 commit 开始看，好多地方看不懂，不知道别人整体的构思是怎么样的。这样就感觉很难看下去。
v 友们是怎么学习别人的前端项目的呢？
先前也做了一些 demo，比如计算器，用 hn 的 api 做了简单的页面
现在，想做一些稍微复杂的 demo，感觉很难下手。
我去 Github 上，搜了一些项目，比如音乐播放器，商城，后台管理系统之类的，从第一次 commit 开始看，好多地方看不懂，不知道别人整体的构思是怎么样的。这样就感觉很难看下去。
v 友们是怎么学习别人的前端项目的呢？
第 1 条附言 · 2020-09-07 12:19:44 +08:00
参考 v 友的回答后，有了一点想法：
先做基本的一些功能组件，各种组件都写一下。
然后，根据组件化思想，大项目也是由各种基础的组件构成的，
后面再去看别人的完整项目可能也会容易一些。
如何知道有哪些组件，
个人想法就是，参考网课目录，参考他人项目 /产品，自己思考
先做基本的一些功能组件，各种组件都写一下。
然后，根据组件化思想，大项目也是由各种基础的组件构成的，
后面再去看别人的完整项目可能也会容易一些。
如何知道有哪些组件，
个人想法就是，参考网课目录，参考他人项目 /产品，自己思考
第 2 条附言 · 2020-09-07 12:21:10 +08:00
处于个人原因，就不选择网课了
一个是网课比较贵，负担不起
二是，难道别人都是看网课学的？感觉也不太现实，应该有别的途径
一个是网课比较贵，负担不起
二是，难道别人都是看网课学的？感觉也不太现实，应该有别的途径
第 3 条附言 · 2020-09-27 16:16:20 +08:00
时隔 20 天，随便说几句
参照了 v 友的意见，找了下视频，有些难找。。。
后面还是自己硬着头皮看了个 GitHub 上的项目，然后尝试写了些小的 demo，感觉好了一些。
感觉自己基础有些不够扎实，所以之前看的时候有些障碍。
感觉还是开源好，能够免费学东西。。。
参照了 v 友的意见，找了下视频，有些难找。。。
后面还是自己硬着头皮看了个 GitHub 上的项目，然后尝试写了些小的 demo，感觉好了一些。
感觉自己基础有些不够扎实，所以之前看的时候有些障碍。
感觉还是开源好，能够免费学东西。。。
 |
1
murmur 2020-09-07 11:04:29 +08:00  4
去慕课买个课学一下就可以了，讲的还不错，没有前端基础突然上全家桶是很痛苦
尤其是 redux，哪个设计太恶心了，很多项目没必要这么复杂的状态管理 |
|
2
murmur 2020-09-07 11:06:30 +08:00 1
所以说 vue 的 vuex 做了两个重大简化
1 、action 的官方推荐不要求定义常量，当然我认为这个是 js 编辑器的锅，不定义常量没法自动补全 2 、可以直接 disptach 字符串，不要求做 action creator，需要参数直接 dispatch 传参就行了 |
|
4
murmur 2020-09-07 11:33:04 +08:00 2
我谈一下我看教程和实际项目的区别
教程（ demo 项目）为了演示某个框架的特色，会做完全的剥离和规范化，react 开发很多人特别在乎这个副作用、纯函数这个东西，如果是小的项目，一般的 ajax 操作可能就直接写到组件里，然后数据 state 搞定就完了，因为这些东西既不可能被复用，也不会传递给太深的组件，但是按照一些教程，他会把相关的东西都扔到 action 里，这样本来你触发 ajax 操作应该在当前文件就找到对应代码，“工程”化后直接不知道就扔到哪个 action 里了，如果你没有好的 ide 代码定位都是个问题。同样的还有组件拆分，如果是简单的 list，我们会直接 list 、listitem 在一个组件做完，但是按照“工程”化之后，list 、listitem 要做到 2 个组件来，一是文件拆开了，二是多了很多参数传递，透传也是传参也增加阅读负担，还是有些人认为 ul/li 这种写法下看不出谁是 list，谁是 listitem 呢？ 所以没人给你说，这种拆的碎碎碎碎碎的工程是真的难读。 |
|
5
murmur 2020-09-07 11:49:44 +08:00 1
不同项目的侧重点不一样，我认为只有复杂到 app 替代品，而且是生产力 app，才真的需要巨复杂的状态管理
因为前端最终要服务用户，你定义了巨复杂的状态，说明你有巨复杂的功能，除非这东西真的巨复杂，否则你让用户怎么学习呢 就比如你看的音乐播放器，他的重点在哪里 1 、炫酷的界面，面向用户的娱乐产品，界面不行 59 分起步，比如你可以学习的，那个旋转的唱片封面是怎么做的 2 、播放器，废话，播放器的核心当然是放歌，怎么读取加密信息，怎么反下载，怎么控制音量、自动重复，拖条，超越系统音量是怎么实现的？ 3 、歌词同步，现在还要要求反过来拖动歌词定位音乐 这些东西都是前端的基础，有 css，有 js，而且交互也够多，我认为这才是你要学习的重点 |
 |
6
hyyou2010 2020-09-07 12:03:50 +08:00 1
我大概会从两个角度看：
1，看页面结构是怎样搭积木的，因为这类框架最优秀的地方就是小结构搭积木为大结构 2，根据点击看路由变化，路由变迁也就是整个 UI 界面的操作流程 |
 |
7
yhxx 2020-09-07 12:48:11 +08:00 1
https://panjiachen.github.io/vue-element-admin-site/zh/guide/
后台管理系统可以看看这个大佬的 反正别被 xx 棒棒团 xx 自学团之类的割了韭菜就好 |
 |
8
IGJacklove 2020-09-07 12:52:53 +08:00 1
找个教程跟着做个项目了解个大概就差不多了,其他就看看开源项目基本都能看懂.项目其实没啥好学的,如果时间充裕可以多花点时间巩固一下基本功,多看看书,js,css 什么的.网上一大堆录播实战课程,跟着做一个基本能了解个大概.
|
 |
11
Pho3nix 2020-09-07 13:23:39 +08:00
网课：tb/公开课
|
 |
12
enchilada2020 2020-09-07 13:24:45 +08:00 via Android
写个博客先？
|
 |
13
1490213 2020-09-07 16:59:17 +08:00 via Android 1
我是后端，目前学前端两个月，过程如下:
1. 高级程序设计，ES6 入门，CSS，HTML 浏览了一下 MDN 目录。 2. 看了 vue 文档，文档里的示例写了一下，找了一个 GitHub 的 admin 系统，学着写页面，顺便看 element，vuex，vue-router，axios 。 3. 研究 vue 内部实现，主要是模板编译过程，vnode diff，双向绑定，nexttick，模仿 vue 的模板编译自己实现了一个小的匹配 html 和一些拓展语法的 parser，以及一个简单的 js 订阅发布机制，顺便根据里面的用法进一步学了一些 js 知识，如微任务宏任务，promise 实践，js 函数执行栈，eventloop 等。 接下来准备看看 node 和 webpack 。 |
 |
14
fouo 2020-09-07 17:13:08 +08:00 1
B 站那么多优质免费网课
|
 |
15
Jinnn 2020-09-07 17:52:33 +08:00 1
入门的话推荐 b 站的网课, 网课有很多带你走完一个项目的, 初学阶段非常合适
等到你对这些项目有一定的了解之后, 在做自己的项目, 就不用看网课了, 看各种文档就好 个人认为, 网课可以缩短前期学习熟悉的时间, 如果你觉得很难下手, 不知道别人的构思的话 |
Select Language