manbetx手机版登陆零到嗡 - 行动3

在这第三文章中,我们就来看看这款应用是如何初始化和渲染。的源代码上可以找到GitHub上

注意:我强烈建议阅读以前的帖子首先,如果你还没有这样做的话。

为了增加理解,我们将通过跳两个文件,并通过他们不会去从上到下。

国家

大多数应用程序,至少是有趣的,有某种状态的。在我们的例子中,我们存储两个数据点:

关于嗡令人兴奋的是,我们把所有的状态正好到一个地方:

(DEF应用状态(原子{:表示:所有:待办事项[]}))

符号应用程序状态结合到原子地图的:视图过滤器(显示)被设置为“所有”和待办事项是一个空的集合。

正如你看到的,地图可以通过大括号来定义:{键VAL1 ... keyN VALN}很高兴知道:元件的不均匀数目导致一个编译器错误)。或者,你可以只设置一个对之间由于逗号被视为在Clojurescript空格。

一个原子是所谓的参考值,这意味着它基本上指向不可改变的数据。为什么我们不能只用一个简单的符号,使之指向新的数据发生变化后?那么,一个原子有当你改变它的值与注册观察家的能力交换!(要么重启!)。嗡利用这对状态的改变重新渲染组件。

通过推动所有的应用程序状态的向系统的边缘,由于只有一个单一的可变对象现在的代码的其余部分保持功能。在一个特定的地方把国家降低了复杂性,因此是推理要容易得多。

现在,我们将满足嗡的第一次!最后,是吧?所以首先我们需要加载它:

(NS todomvc.app(:要求[om.core:为OM:包括-宏真] [om.dom:为DOM:包括-宏真] [...])

宏 - 因为它们是一种特殊的功能 - 不能装入标准要求但通过需要的宏。然而,如果宏是在同一个命名空间 - 在这种情况下 - 增加:包括-宏真有同样的效果。

要启动应用程序,我们需要使用的功能OM /根并告诉它

(OM /根todoapp ;;(a)中的应用程序状态;;(B){:靶(.getElementById JS /文档 “todoapp”)});;(C)

嗡会把它从这里开始。它开始渲染循环和状态改变时,它会更新一个批次的组件(非常有效地通过利用浏览器的requestAnimationFrame)。

现在到了亟待解决的问题:什么是待办事项应用程序内

组件“待办事项应用程序内”

待办事项应用程序内是有两个参数的函数:状态和底层阵营部件所有者(Om为您创建的)。

(DEFN待办事项应用内[{:按键[待办事项]:作为状态}所有者]; ...)

你可能想知道为什么第一个参数看起来那么奇怪。这是ClojureScript在工作中一个强大的功能:解构。基本上,它可以让你绑定符号的数据结构的部分。在这种情况下[:按键[待办事项]]是一个快捷方式[待办事项:待办事项]- 关键的两个绑定值待办事项从状态给符号待办事项。该:是可选的,并允许定义一个别名为整个结构,在这种情况下。如果您想了解更多关于这一点,我推荐阅读Clojure的:解构

让我们来看看函数体:

(DEFN待办事项应用内[{:按键[待办事项]:作为状态}所有者](具体化OM / IRender(渲染[_];创建DOM元素...)

你注意到的第一件事是具体化。它的计算结果为一个新的对象实现所有指定的协议。协议是“命名集的命名方法和他们的签名”。

在这里,OM / IRender协议被实现。它有一个给予函数 - 很明显 - 呈现组件的HTML。它是由庵,每当它检测到组件的状态的改变调用。注意:第一个参数是组件本身的实例,它与忽略_因为它是没有必要的。

有几种方案中嗡映射或多或少直接反应的生命周期的步骤:

基本上有:

你永远也不会尝试实施的唯一协议是IShouldUpdate因为这是真的庵眼前一亮:它运行之间的新旧状态进行比较,以决定是否重新呈现组件或没有。而且,由于在ClojureScript数据结构是不可变的,只需要一个简单的平等检查 - 这是出奇的快相比,一块比较反应的昂贵的一块。这就是为什么目前庵在粉碎基准纯React.js应用的主要原因。

让我们回到给予从上面的函数:

(DOM / DIV零(头)(DOM /输入#js {:id为 “新待办事项”:参考 “新野”:占位符 “需要采取哪些措施?”:#的onkeydown(输入 - 新的todo%国家所有者)})(上市状态)(页脚状态)))))

它与OM公司的帮助下创建的实际DOM elemensom.dom命名空间以前导入。这些DOM函数直接映射反应的DOM API,这意味着DOM / DIVReact.DOM.div并具有相同的参数:

在这种情况下,根元素有四个孩子:输入字段以及标题,列表和页脚 - 只有三个功能。如你看到的,如果没有道具使用。

让我们在文本输入细看:

(DOM /输入#js {:id为 “新待办事项”:占位符 “需要采取哪些措施?”:#的onkeydown(输入 - 新的todo%国家所有者)})

正如我们以前见过,道具设置一个ID占位符这将呈现为HTML标记属性值。onkeydown事件注册一个事件处理程序,用户大火后按下某个键 - 调用进入新-待办事项与事件,所有者

注意:#(...)功能字面。基本上它是短版(FN [EVT](输入新-待办事项EVT状态所有者))。所以是函数的第一个参数,2%第二等等。

让我们回到给予从上面,所述功能页脚是不是特别有趣 - 让我们一起来看看清单代替:

(DEFN上市[{:按键[待办事项表示编辑]:作为状态}](DOM /部分#js {:ID “主”:式(隐藏(空待办事项))?}(DOM /输入#js {:ID“全部切换" :type "checkbox" :onChange #(toggle-all % state) :checked (every? :completed todos)}) (apply dom/ul #js {:id "todo-list"} (list-items todos showing editing))))

待办事项列表被包裹在一个<节>用id主要。当没有待办事项(通过使用它被隐藏效用函数我们上次讲过)。在里面我们发现了一个复选框,只有当每个todo项目标记为“完成”时才会选中该复选框。在更改时,它调用全部切换事件处理程序。另外一个