manbetx手机版登陆

这是关于Om系列博客文章的第一部分。如果你对Om一无所知,也不用担心!你会一步一步地学习所有的东西。以下是基本要点:Om是针对Facebook反应的ClojureScript接口。如果你还不明白,别担心!

请注意:我只是开始学习的反应。js, ClojureScript和Om。所以这是我自己学习的方式:带你和我一起去。但是,需要具备现代web开发的基本知识。

在舞台上

从实践中学习很有趣。我们将在一个小todo应用的帮助下学习Om。

如果你是一个web开发人员,没有听说过TodoMVC然而,在过去的几年里,你要么失业,要么处于昏迷状态(除了反应。js,你没有错过什么)。它是一个“提供了今天大多数流行的JavaScript框架实现的相同Todo应用程序的项目”。

它看起来是这样的:

作为本系列的基础,我将使用anTodo应用程序的实现是Om的创造者自己写的,大卫·诺兰。你可以玩应用程序看看它能做什么。

演员

让我们看看我们的努力需要什么技术。

React.js

React.js是来自Facebook的用于构建用户界面的JavaScript库。可以把它想象成MVC中的V。它保持数据和DOM同步非常通过使用内存中的(虚拟)DOM一次性批处理所有更新,可以高效地完成。这也正是3D引擎的工作原理。

ClojureScript的

ClojureScript的是一种可编译为JavaScript的Clojure方言。它是一种动态类型的函数式编程语言,特别关注不可变的数据结构。

谷歌关闭工具

谷歌关闭工具包含一个JavaScript库,其中包含用于丰富的、跨浏览器的web应用程序的实用工具和一个用于优化JavaScript的编译器。

光表

光表是一个开源的IDE,主要面向Clojure/ClojureScript开发。它最有趣的特性之一是代码的内联求值。

Leiningen

Leiningen是用于Clojure的基于jvm的构建工具。它的cljsbuild插件自动将ClojureScript编译成JavaScript。

Om

最后,Om是将React的函数特性与函数语言ClojureScript及其不可变的数据结构结合在一起的神奇粘合剂,在此过程中简化了应用程序架构并显著提高了性能。

法1

首先,让我们尝试运行应用程序。如果我们签出我的-稍微修改的版本的原始-从GitHub-我们将看到一堆文件:

bower_components/ todomvc-common/ src/ todomvc/ app.cljs项。cljs跑龙套。cljs鲍尔。json index . html项目。clj readme.md

bower.json清单文件是为鲍尔它管理外部资源。在本例中,它将样式表和图像下载到todomvc-common对我们来说。

index . html是我们在浏览器中打开的HTML文件,用来展示我们的应用程序。

和…该死的!

GET file:///…/out/goog/base.js net::ERR_FILE_NOT_FOUND索引。GET file:///…/app.js net::ERR_FILE_NOT_FOUND索引。未捕获的引用错误:goog未定义

好吧,让我们看看这个文件,看看哪里出错了:

< >头[…[link rel="stylesheet" href="bower_components/todomvc-common/base。身体css " > < /头> < > <节id = " todoapp " > < /节>[…] < script src = " http://fb.me/react-0.11.1。js " > < /脚本> < script src = " / google /基地。js " > < /脚本> < script src = "应用程序。脚本脚本js " > < / > < > goog.require(“todomvc.app”);脚本< / > < /身体>

该文件加载了一堆脚本,如果您查看当前的目录,您会很快注意到:大多数脚本还不存在。我们需要先建造它们!

这就是我们需要的project.clj。它包含Leiningen项目的构建配置。接下来,我们运行:

$ leiningen cljsbuild一次dev编译ClojureScript。从["src"]编译"app.js"…

现在我们有一个新文件叫做app.js和一个文件夹里面有很多文件。如果我们刷新浏览器,问题就消失了,我们看到了一个功能强大的Todo应用程序。

如果我们调查app.js我们会看到这样的情况:

goog.addDependency(“基地。js”[“google”],[]);goog.addDependency(“. . / cljs /读者。js”,[' cljs。读者'],[' google。弦”、“cljs.core ']);goog.addDependency(“. . / om / dom。js”,[' om。dom的]、[' cljs.core ']);[…]

这是谷歌闭包。它的特点是模块加载器。每个ClojureScript文件都转换成一个闭包模块。每个模块可以依赖于许多其他模块。在/公司/ base.js。应用程序的所有依赖项都定义在app.js。要启动我们的应用程序,我们需要加载主模块:goog.require(“todomvc.app”)。这就是index . html所做的事。

第一幕到此结束。在法2我们将详细查看ClojureScript的源代码。

Stephan本克先生

软件开发人员的职业。大部分时间都在追求代码的简单、优雅和美丽。或者只是在两者之间完成一些事情。

评论的Disqus