manbetx手机版登陆零到嗡 - 法6

欢迎来到我们的下一个动作。今天,我们要满足一些额外的库,将帮助我们编写大嗡的应用。让我们开始吧!

与往常一样,我强烈建议阅读以前的帖子首先,如果你还没有这样做的话。

sablono

在以前的文章中,我向您展示了应用程序的用户界面的呈现方式:

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

正如你所看到的,DOM / *HTML元件接收地图上的属性:#js {...}要么对于没有属性。这一切有点尴尬。没有设计师将永远是快乐与此有关。而这正是sablono可以帮助你把代码变成这样:

(HTML [:DIV(头):输入{:id为“新待办事项”:参考“新野”:占位符“需要采取哪些措施?”:上键按下#(输入 - 新的todo%国家所有者)}](清单状态COMM)(页脚状态)])))

嗯,好多了!每个HTML元素是通过在一个矢量的开始的关键字来表示。然后,可选的映射定义了它的属性。一切必须评估到另一个HTML元素,依此类推。所有属性匹配ClojureScript的默认命名约定,并自动转换为骆驼套管版本上渲染。

要开始使用sablono你只需要包括它的命名空间和宏:

(NS todomvc.app(:要求[...] [sablono.core:为HTML:指的宏[HTML])

注意,通过使用sablono编译后的输出192从KB(KB 47 gzip压缩)至201 KB生长(48 KB gzip压缩)。

秘书

对于路由,这意味着应用程序状态和浏览器URL的对应关系,我们可以用秘书(伟大的名字,对吧?)。

当我们在看的命名空间声明app.cljs我们可以看到路由所需的各种物品:

(NS todomvc.app(:要求[...] [goog.events:作为事件] [secretary.core:作为秘书:包括-宏真:参见[defroute])(:进口[goog历史] [goog。历史事件类型))

这是相当多的。让我们看看我们在这里:

首先,让我们定义的路由规则:

(defroute “/”[](交换的应用程序状态ASSOC:表示:所有))(defroute “/:过滤器”[过滤](交换的应用程序状态ASSOC:示出(关键字过滤器)))

有两条路线。当第一个匹配,它集:显示应用程序状态的进入所有。当第二之一匹配它它设置为的值过滤

但如何路由连接到浏览器?这就是我们从谷歌闭合模块开始发挥作用:

(DEF历史(历史)。)(活动/收听历史EventType.NAVIGATE(FN [E](秘书/调度!(令牌E))))(.setEnabled历史真)

谷歌的封闭的一个新实例历史创建和新的事件侦听器调用秘书调度!与当前的历史状态的功能(该事件的代币场),它的每个导航事件。

注意:由于的setEnabled方法将立即触发当前位置的事件,它来的事件监听器后。

在这里用户可以导航到不同的URL的唯一地方是页脚组件

(DEFN页脚[{:按键[待办事项]:作为状态}](让[计数(计数(删除:已完成待办事项))SEL( - >(zipmap [:所有:活性:补](重复 “”))(缔合(:表示状态) “选择”))](HTML [:页脚{:ID “页脚”:式(隐藏(空待办事项?))} [:跨度{:ID “待办事项数”} [:强计](STR “”(以复数数 “项目”) “左”)] [:UL {:ID “过滤器”} [:利[:一个{:HREF “#/”:类(SEL:所有)} “全部”] [:LI [:一个{:HREF “#/活性”:类(SEL:活性)} “活动”] [:LI [:一个{:HREF “#/完成”:类(SEL:完成)} “已完成”]]]])))

我们可以看到,有三种可能的路由状态:所有活性完成。对于每个状态有在触发相应路线页脚的超链接。仅此而已吧!

顺便说,从上个帖子的原始嗡应用已列入书记。编译为JavaScript它是192字节(47 KB gzip压缩),但没有任何路由它缩小到172 KB(KB 40 gzip压缩)。

OM-工具

棱是庵和一个非常早期采纳者OM-工具它们提供的工具来帮助收集消除一些烦恼,并添加额外的功能。要开始,你需要包括命名空间:

(NS todomvc.app(:要求[...] [OM-tools.core:指的宏[defcomponent])

这是怎样的待办事项项目组件看上去像到现在为止:

(DEFN待办事项项[待办事项所有者](具体化OM / IInitState(INIT状态[_] ...)OM / IRenderState(渲染状态[_状态] ...)

这是一个很大的样板代码!OM-工具添加了一个名为新宏defcomponent带来简单吧:

(defcomponent待办事项项[待办事项所有者](INIT状态[_] ...)(渲染状态[_状态] ...)

它使组件定义更小,更易于阅读。

另一大特点是多彩的整合模式库,让声明性数据描述和验证。我可以写一个完整的博客文章,但幸运的是,棱光已经做了。因此,我将突出我们的小TodoMVC应用如何工作的。首先,我们需要包括模式图书馆:

(NS todomvc.app(:要求[...] [OM-tools.core:指的宏[defcomponent])

然后,我们定义了一个TODO的模式:

(DEF待办事项{:的id / STR:标题S /海峡:已完成S /布尔})

这是不言自明至今。现在,我们可以添加架构嗡组件参数:

(defcomponent待办事项项[TODO: - 藤所有者] ...

:- 去做连接参数的模式。现在,在理论上,是创建组件时的参数进行验证。但在此之前,我们需要启用验证:

(S /与-FN验证(OM /根todoapp应用状态{:靶(.getElementById JS /文档 “todoapp”)}))

不幸的是,当我尝试这样做也没有工作。我还没有发现这种情况的原因还没有,但它可能是因为该组件是通过创建集结所有。不确定。但OM-工具例如实际工作,所以去那边看看它在行动。

无论如何,让我们来这里的目的:让我们明确地验证模式。

(defcomponent待办事项项[TODO: - 托多所有者](INIT状态[_](S /验证待办事项待办事项)

现在,当我们创建领域的新的Todocompletd它导致一旦一个错误待办事项项目组件创建:

未捕获的错误:值不匹配模式:{:完成缺少要求的键,:completd不允许键}

这意味着我们可以及早发现错误,防止一些人微妙的错误,我们都知道,爱的动态语言。所有这些改进是有代价的,虽然:生成的JavaScript代码加起来是264 KB(61 KB gzip压缩的)现在。

还有一些其他的事情库带来的表 - 像混入 - 所以一定要看看进入文件


以上就是今天。你已经看到一些库如何帮助您获得更多的价值出来庵。

斯蒂芬·贝肯

通过贸易软件开发人员。大部分时间在不断持续追求简洁,优雅和美丽代码。或者刚刚做的东西在中间。

评论本站由Disqus