2KB项目,专业的源码交易网站 帮助 收藏 每日签到

Imba:与 JavaScript 兼容的编程言语

  • 时间:2019-05-17 11:56 编辑:2KB 来源:2KB.COM 阅读:532
  • 扫一扫,手机访问
  • 分享
摘要: 英文原文:An
英文原文:An Intro to Imba: the JavaScript-compatible language for lightning fast DOM updates

Imba 是一种开源编程言语,是我们专门为构建 Web 使用顺序而开发的。它会被编译成 JavaScript ,并在现有 JS 生态系统中任务,这意味着你可以将它与 Node、npm 和 Webpack 一同运用。

Imba 最大的长处是,它可以比运用基于虚拟 dom 的库(如 React 和 Vue )更快地生成使用顺序。速度进步要归功于 Imba 处置 DOM 更新的方法,我的协作同伴兼 Imba 创立者 Sindre Osen Aarsaether 在这里说明了这一点

过来几年我不断在运用 Imba ,它的确是一种使人高兴的言语,由于它的语法比 JavaScript 更洁净,从而进步了代码的可读性。

在本文中,我将教你怎么Start本人开发容易的 Imba 使用。在Start创立用户界面之前,我们将先引见一些语法。最初,我将协助你设置你的开发情况,以便你可以继续本人实行 hacking 。

运用 Imba 的项目

可是在我们Start会商代码之前,我想指出,这不单单是在业余项目中运用的一种流畅的言语。Imba 还为至公司供给关键Task使用顺序。

冰岛的鱼类拍卖市场就是一个例子。因为鱼类在冰岛很主要,这个市场占该国经济的1.6%,约3.9亿美元。

所以 Imba 实践上掌控着冰岛 1.6% 的 GDP !

其次,全部进修平台 Scrimba.com 都是用 Imba 搭建的,包含前端和后端。这是一个庞杂的使用顺序,高度依靠于 Imba 的疾速 DOM 和谐。

因而,你今日进修的言语既可以协助你构建大型生产使用,也能够协助你构建较小的辅佐项目。

让我们Start吧!

语法

Imba 语法与 JavaScript 有非常多类似的地方,但它也遭到 Ruby 和 Python 的影响。让我们从一个很轻易了解的例子Start。下面你将看到一个容易的 JavaScript 函数,它前往两个数字中较大的一个,假如它们相等,则前往 false :

运用 JavaScript 写的查找最大值

如今让我们把它翻译成 Imba :

运用 Imba 写的查找最大值

仅仅经过看这两个例子,你可能就能够揣度出 Imba 和 JavaScript 之间的一些主要差别:

  1. function→def。起首,函数关键字已被从头定名为 def 。

  2. 没有圆括号。另外,函数参数没有括在括号中。实践上,在 Imba 中很少需求括号,可是假如你情愿,也能够带上括号。

  3. 缩进。Imba 是基于缩进的。这意味着我们不需求运用大括号,这节俭了空间。

  4. 不需求前往。在 Imba 中,前往是隐式的,这意味着我们不用写 return 。Imba 主动前往函数的最初一个表达式。

这些都不是 Imba 最主要的方面,可是它们联合在一同可使代码比 JavaScript 更简练。跟着本文的深化,这类优势将变得愈加分明。

创立用户界面

让我们继续创立用户界面。这就是 Imba 的真正用处。这意味着 DOM 节点被嵌入到所谓的一等国民的言语中。

假如你来自 React world ,那末可以把它看做是 Imba 在言语中内置了本人的 JSX 。

比方 React 中的以下代码,它只是出现一个按钮,并在单击按钮时将其记载到把持台:

假如我们把这个例子用 Imba 重写,会酿成:

花点工夫比较一下这二者。我盼望你们留意三件事:

  1. 标签是原生的。扩大自 React.Component 的 App 类被转换成更容易的标签 App。这是由于标签是 Imba 言语的原生部分。DOM 标签和定制标签都是如斯。

  2. 没有完毕标签。当我们缩进时,我们不需求封闭标签(例如 </button> )。这节俭了我们大量的打字和空间。

  3. 容易的类语法。在 Imba 中添加类很容易。我们只需给标签添加一个 .container,而不是费事的 className="container"。

您可能还留意到事情处置顺序是分歧的。我们的做法是:tap.logOut,而不是 onClick={this.logOut} 。这只是Imba中处置用户输出的几种办法之一,假如您感兴味,可以在文档中了解更多。

处置数据

如今,让我们看看Imba怎么处置数据。鄙人面的示例中,我修正了我们的使用顺序,以便在App组件的形态中包括一个count变量。此变量将依据用户单击的按钮而增加或减少。

以下是用Imba重写后的模样:

最明显的差别是代码量。

IImba示例的巨细约莫是一半,包含代码行数和字符数。

固然代码行固然是一个粗浅的比较,可是代码的可读性十分主要。更少的行、字符和符号使Imba顺序比React更轻易浏览。

隐式的self

您可能还留意到,我们间接经过 count 拜访实例变量,而不是像在 React 中那样运用 this.state.count 来获得计数值。

在 Imba 中,我们可以取到 self.count 。self 是隐式的,所以我们不需求写出来。Imba 反省用处域中能否有 count 变量,或许 count 能否是 App 自身的实例变量。

可变性

上述两个示例之间的另外一个主要差别是它们怎么处置形态变更。在 Imba 示例中,形态是可变的,由于我们只是间接更改它—— count 变量。

React 中,形态被视为不成变的,而改动它的独一办法是经过 this.setState。

假如您情愿,可以与 Imba 一同运用不成变库。这实践上是不成知论的。在 Scrimba,我们运用可变性,由于我们以为不成变的价格是不值得的。

本文中的一切译文仅用于进修和交换目标,转载请务必注明文章译者、出处、和本文链接。 2KB翻译任务按照 CC 协议,假如我们的任务有进犯到您的权益,请实时联络我们。


2KB项目(www.2kb.com,源码交易平台),提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务

  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【计算机/互联网|】Nginx出现502错误(2020-01-20 21:02)
【计算机/互联网|】网站运营全智能软手V0.1版发布(2020-01-20 12:16)
【计算机/互联网|】淘宝这是怎么了?(2020-01-19 19:15)
【行业动态|】谷歌关闭小米智能摄像头,因为窃听器显示了陌生人家中的照片(2020-01-15 09:42)
【行业动态|】据报道谷歌新闻终止了数字杂志,退还主动订阅(2020-01-15 09:39)
【行业动态|】康佳将OLED电视带到美国与LG和索尼竞争(2020-01-15 09:38)
【行业动态|】2020年最佳AV接收机(2020-01-15 09:35)
【行业动态|】2020年最佳流媒体设备:Roku,Apple TV,Firebar,Chromecast等(2020-01-15 09:31)
【行业动态|】CES 2020预览:更多的流媒体服务和订阅即将到来(2020-01-08 21:41)
【行业动态|】从埃隆·马斯克到杰夫·贝佐斯,这30位人物定义了2010年代(2020-01-01 15:14)
联系我们

Q Q: 7090832

电话:400-0011-990

邮箱:7090832@qq.com

时间:9:00-23:00

联系客服
商家入住 服务咨询 投拆建议 联系客服
0577-67068160
手机版

扫一扫进手机版
返回顶部