react flux todomvc demo 怎么运行

JavaScript014

react flux todomvc demo 怎么运行,第1张

React 标榜自己是 MVC 里面 V 的部分,那么 Flux 就相当于添加 M 和 C 的部分。

Flux 是 Facebook 使用的一套前端应用的架构模式。

一个 Flux 应用主要包含四个部分:

the dispatcher

处理动作分发,维护 Store 之间的依赖关系

the stores

数据和逻辑部分

the views

React 组件,这一层可以看作 controller-views,作为视图同时响应用户交互

the actions

提供给 dispatcher 传递数据给 store

针对上面提到的 Flux 这些概念,需要写一个简单的类库来实现衔接这些功能,市面上有很多种实现,这里讨论 Facebook 官方的一个实现 Dispatcher.js

单向数据流

先来了解一下 Flux 的核心“单向数据流“怎么运作的:

Action ->Dispatcher ->Store ->View

更多时候 View 会通过用户交互触发 Action,所以一个简单完整的数据流类似这样:

flux overview

整个流程如下:

首先要有 action,通过定义一些 action creator 方法根据需要创建 Action 提供给 dispatcher

View 层通过用户交互会触发 Action

Dispatcher 会分发触发的 Action 给所有注册的 Store 的回调函数

Store 回调函数根据接收的 Action 更新自身数据之后会触发一个 change 事件通知 View 数据更改了

View 会监听这个 change 事件,拿到对应的新数据并调用 setState 更新组件 UI

所有的状态都由 Store 来维护,通过 Action 传递数据,构成了如上所述的单向数据流循环,所以应用中的各部分分工就相当明确,高度解耦了。

这种单向数据流使得整个系统都是透明可预测的。

Dispatcher

一个应用只需要一个 dispatcher 作为分发中心,管理所有数据流向,分发动作给 Store,没有太多其他的逻辑(一些 action creator 方法也可以放到这里)。

Dispatcher 分发动作给 Store 注册的回调函数,这和一般的订阅/发布模式不同的地方在于:

回调函数不是订阅到某一个特定的事件/频道,每个动作会分发给所有注册的回调函数

回调函数可以指定在其他回调之后调用

基于 Flux 的架构思路,Dispatcher.js 提供的 API 很简单:

register(function callback): string 注册回调函数,返回一个 token 供在 waitFor() 使用

unregister(string id): void 通过 token 移除回调

waitFor(array ids): void 在指定的回调函数执行之后才执行当前回调。这个方法只能在分发动作的回调函数中使用

dispatch(object payload): void 分发动作 payload 给所有注册回调

isDispatching(): boolean 返回 Dispatcher 当前是否处在分发的状态

dispatcher 只是一个粘合剂,剩余的 Store、View、Action 就需要按具体需求去实现了。

接下来结合 flux-todomvc 这个简单的例子,提取其中的关键部分,看一下实际应用中如何衔接 Flux 整个流程,希望能对 Flux 各个部分有更直观深入的理解。

在实践中学习

我猜你可能也预料到我会这么说。

首先,请把你的成见放到一边。我并没有说你必须抛弃所有别的学习方法。

所有的在线教程和教学视频自然有他们各自的功效,待会儿我也打算展开来介绍一下。先举个例子,有时了解一种新的技术或框架,阅读教程文档就是最有效的办法。

问题的关键在于,我们总会(至少我自己是)把时间耗在那些让我们感觉轻松的学习方式上。即使到了我们该独立完成一些事情的时候,看视频跟教程简直是太轻松了,就好像把饭递到了我们的嘴边。而且让我们自我感觉良好,我明明是在看教学视频啊?我明明是在读教学文档啊?我不是在学习么?谁敢说我在浪费时间?我明明是在填补知识上的空白!

更可怕的是我们总倾向于相信这样的学习方法是最有效的。享受安逸,不思进取是人性的弱点。我也自欺欺人了很久。

把你的头脑放清醒

动手做项目??听起来并不新鲜,我们内心深处都明白这是利用自己时间和精力的最好方式,能够让我们更快地达到自己的目标。但我们为什么不愿意去做呢?懒惰??

我在先前的一篇文章(要是你正在被惰性折磨可以读读)中谈论过懒惰,所以让我来解释一下为什么我在这个问题上如此坚决,然后说服你把精力集中到开发项目上来。

就好像黑客帝国里的男主角一样,面前摆着红色和蓝色的两个药丸。我们可以选择继续蒙蔽自己,在自我感觉良好和安逸的幻象里继续自欺欺人;也可以选择吃下红色的药丸,然后面对现实,不断接受更难的挑战才能取得真正的进步。(如果你还没有看过黑客帝国,那你最好还是去看看)

下面是我在实践中总结的,一些可以帮助你立即着手开始完成开发实践项目的建议。

事实上你需要的时间可能远远少于一年(难以置信?)

我并不是信口开河,而是和很多Free Code Camp多隆多学习小组的成员聊天,以及遍布全世界的学员们的经验总结得出的这个结论。

我发现在大多数情况下,学员们都能够在完成FCC的前端开发认证之前就找到工作。他们开发了一些课程中的项目,然后开始投简历,很快就找到了一份Web开发的工作。

如果你一直关注着FCC的频道,你一定能够找到很多类似的案例。(译者注:我所了解到最快找到工作的案例是一位来自大连网名叫做浮生的同学,仅用了一个月在FCC上学习前端开发,同时投递简历,就成功地在拉勾网上找到了一份8K每月的工作)

需要注意的是,不同的地区对Web开发者的需求不同。以多隆多为例,这儿有无数的前端开发者岗位等你应聘。(译者注:北上广深一类的也一样,需求还是很大。)

FCC官方建议你应该完成总计2080小时的课程学习。这样你掌握的知识和技能也能让你应聘到更高级的职位。

保证你掌握了一定的基础

我确信,在你刚开始学习的时候,必然要通过一些教程和在线交互学习来奠定HTML/CSS/JavaScript的基础,学习编程的思维方式,熟悉一些最核心、基本的知识点。

如果什么都不了解就开始尝试做项目,必然会很有挫败感。但是掌握基础的时间也不要拖太久,入门其实真的挺快的。

我当初学习HTML/CSS/JavaScript的时候,通过不同的途径学习了很多相似的内容,想着这样也许会让我对知识的掌握更全面。它们确实有所帮助,但我后来才意识到,这些资源挡住了我去学习更具挑战更有趣的知识的脚步。不要陷入死循环,反复地浏览那些你已经了解了的内容。

不要好高骛远

仰望星空是不错,但我们还需要脚踏实地。我总是听人说:“我想要开发一个在线应用,人们可以在上面为他们的宠物创建账户,上传照片,支持地理定位还有别的??我最近才刚开始学写代码,但我已经准备好实现我的想法了。”每每听到这里我整个人都斯巴达了。

我可以很容易地预见这类人先是定下宏伟的目标,充满激情举步维艰地做着努力,逐渐发现他们的才华配不上他们的野心,然后开始感到失落,直到半途而废。

最糟糕的结果是这样的人最后放弃完成开发项目,甚至从此放弃学习编程。

所以我推荐从简单的小项目入手,每当你完成一个,都会积攒起成就感,并且对大项目的结构也能有一个更好的了解。

例如一位作家打算写一部鸿篇巨著,必然要先通过写一些小故事,聆听人们的意见,提升文笔水平,待万事俱备之后才能真正开始。

从哪里找到练手的好点子

我所了解的最好地方就是FCC了。

以前每次我问我的开发者朋友,我着手开发的第一个项目应该是什么?他们总是没有一点新意地回答我说做一个TO-DO List(待办事项)应用吧。要是我们还继续开发TO-DO List,总有一天它们会淹没整个互联网。(译者注:有一个项目,收集了用所有js框架开发的待办事项应用TodoMVC)

FCC提供了很多有趣的小项目,按照从易到难的顺序排列。更妙的是每个小项目都专门教你掌握特定的知识点。例如致敬网页检验你对HTML/CSS的掌握,天气应用教你怎么使用API,JavaScript计算器锻炼提升你的js技能等。

FCC是你尝试开发实践项目最好的地方。你完成的每个作品都能够在社区中得到反馈,在你完成之后也可以看看别的同学是怎么实现相同的功能的。另外你也可以通过搜索引擎寻找酷炫的练手项目。(译者注:有什么利于锻炼技术好玩儿的网站项目?-余博伦的回答)

先规划后动手

每当你着手开始一个项目的开发时,先把你要实现的功能列出来。可以通过罗列用户需求的方式,例如“当用户点击播放按钮时可以播放音乐”“用户可以输入邮箱密码登录也可以通过Facebook登录”。

你的代码最好也保持一定结构,在你正式编码之前。可以先写一些“伪代码”————其实就是用文字描述你开发项目的每个功能模块。

遭遇挫折很正常

像我之前说过的,踩坑受挫是很正常的事情。这并不能证明我们的智商有问题,只是我们还没接触过一些知识罢了。不管是在学习还是在工作中,你总有受挫的时候。

你越早坦然面对越好。这将有助于你更快取得进步。编程本身就是一种创造性解决问题的思维。假若你没有遇到难倒你的问题,一定是因为你没去迎接挑战。旱鸭子是学不会游泳的!

最最最重要的,一定不要怀疑自己的智商。我遇到过很多人,他们最开始轻松加愉快地完成基础的HTML/CSS/JS小任务,每天能刷30-40关,然后遇到了初级算法题,结果每天只能做1-5道题,之后他们就开始怀疑自己的智商,认为自己不够聪明,不合当程序员。

保持循序渐进

你需要找到位于“你能轻松解决的问题”和“企及不了的难度”之间的练手项目。(译者注:就像在用Keep运动软件训练时说的:身体很累但还能坚持,强度就是合适的)

我已经谈论了很多不断重复学习简单知识的危害,现在让我们来看看反面:困难的事情。

当你面对困难的任务时,你首先应该想到的是试着去完成它。

从最基本的结构开始,尝试写出代码。要是你遇到了一连困扰你三天的难题,那么先把它放到一边,在找一些类似但是更简单的事情来做。

我的体会是,当我在做别的事情时,尚未解决的难题仍然在我的潜意识里,我时不时的会思考解决它的方法。也许在我洗澡或者洗盘子的时候,灵光就突现了!

虽然这也时灵时不灵。但我想表达的观点是:不断接受小的挑战才能逐渐取得进步,其余的都是浪费时间。

适应能力是作为开发者(或者希望取得成就的人)必备的一项品质。准备好面对困难、迎接挑战、接受对你作品和设计以及解决方案的批评,未雨绸缪。

你会怯场么?去你的当地社区给大家教Web开发基础吧,或者报名参加一些讨论会。

为每一天都制定目标

为了更快进步,你需要每天都取得一定进展。

不要制定结果目标(例如今天要完成某项功能的开发),为每天确定一段固定的编程时间,每天不要超出半个或一个小时。

我知道你可能会急功近利定下每天编程3小时的目标还尝试着坚持下去。但这注定是不能长久的。有一个合理的时限————例如每天半小时,你知道你肯定能够达到这个目标,而且你可能还有多的一个半小时用来学习编程。这种感觉很棒,因为很多时候你都算超额完成了。

设定时限目标不仅仅是一种心理暗示。试想你有一个重大任务需要完成,你不停的延误直到最终期限将至,你好不容易拼命完成了,结果差强人意,但你整个人都精疲力竭了。要知道,自学的时候除了你自己,没有人会督促你。

假如你设定的是结果目标的话,你并不能保证自己每天都完成某项功能的开发,而一旦你完不成,便会有挫败感。负面情绪的累积慢慢也会打消你学习编程的热情。

对于时限目标来说,你每天都在取得进展。没有人在意你今天是否完成了某项功能的开发,重点是这一天你确实投入一定时间去学习了。这才是保持你动力的源泉。

另一个妙处是,每当你坐下来写代码,各种点子和解决方案就会思如泉涌,就好像写文章来了灵感一样。这比你强迫自己坐下并抱有不切实际的期望强多了。

不要分散你的精力

每当你在开发一个项目中遇到瓶颈时,你总会想着先把它放到一边再做点别的。

你又会感觉良好一段时间,直到你新开展的项目也遇到了障碍。这样你手头就有两个未完成的项目了,如果放任就会陷入恶性循环。

解决的办法就是,在同一时刻最多只开展两个项目,当其中一个遇到了问题实在解决不了就去做另一个,另一个也遇到问题就放在再回头来看这个。一定不要再分散你的精力了。(译者注:这就好像做作业的时候,写写语文再写写数学就不会那么痛苦。)

取得真正的进步

这就是你没法通过教程学习掌握的东西。你感觉学完了教程就好像掌握了某项技术的所有关键。可当真的让你用这项技术去开发个项目时你就傻眼了。

为什么总是这样?因为教程已经是编写教程的人对某项技术的理解(译者注:学习教程就好像吃别人嚼过的),而且一篇教程根本不可能归纳所有要点。

不断地遇到困难克服困难才能不断进步。

不要完美主义

你并不是要创造什么惊天地泣鬼神震惊整个业界的大发明。

你要做的只是完成题目的要求,通过开发项目来学习编程技术/语言特性/框架功能??

然后再尽力改进你的项目,外观设计也罢,功能品质也好。

但也要适可而止。你并不是在参加国际艺术锦标赛。你只是通过开发这些小项目来练手学习,不要被它们吓着了。

欲速则不达。

要是我在写这篇文章开始时就担心写好写不好,写得不够好,我就写不到这里了。我只是知道这是一个人们都比较关注的话题,我自己也需要总结一下我所了解的,最后能够帮助一些人解决他们在编程学习过程中遇到的实际困难,这就足够了。

要是所有的事情都必须完美,还会有素描在艺术界的容身之处么?正是不完美才造就了独一无二。(译者注:这里最好的例子应该是断臂维纳斯。)

保持你的创造力

不要死板的好像你开发出来的项目必须和题目的示例一样。编程不只是科学更是艺术。

对于前端开发来说就更是这样了。

假如你正在开发随机名言获取器,你完全可以选择自己最喜欢角色的经典台词作为内容。假如你正在开发一个游戏,你可以随意设计界面和音乐。

特立独行,释放真我!在你的项目里烙上自己独特的符号。

除了满足题目要求之外,剩下的事情怎么做完全取决于你。

这是我之前开发的一个禅意计算器,对比一下题目上原本的计算器示例,你完全可以发挥自己的想象力。

Web开发,编程,都给了我们充分的自由,永远不要局限自己。成为你想成为的人,做你想做的事,面对生活中的所有都是这样,包括写代码也一样。

有个性的东西才有感觉!想想超现实主义画家毕加索。一般单独看画你能认出来是谁画的么?但毕加索的你一眼就能看出来。

前端大牛

获得你开发项目的反馈

开发实践项目还有一个好处,就是你可以把你的作品分享给别人,获取真实的反馈。

但要注意别把你的小项目发给那些爱吹毛求疵的人。试着去找一些真正的开发者,或者比你稍微厉害一点的同学。让他们看看你的代码并给你一些建议。哪里可以提高,哪里写的比较好,哪里不是。

这对你的学习进步大有裨益,因为从别人的角度可以看到那些你遗漏了的东西。

关注小编并私信“学习”获取免费前端教程

本地日期时间(<input type=”datetime-local”/>)

属性 描述   值

这是HTML里input元素的通用属性。就是输入框里的数据。  

min    日期或时间的最小值  

max    日期或时间的最大值  

step    步长。不同的类型有不同的缺省步长。

Date – 缺省是1天

Week – 缺省是1周

Month – 缺省是1月

Time – 缺省是1分钟

DateTime – 缺省是1分钟

Local DateTime – 缺省是1分钟