威尼斯人线上娱乐

【威尼斯人线上娱乐】HTML也得以静态编写翻译,不合乎复杂的前端项目

15 3月 , 2019  

虚拟 DOM 已死?

2016/10/24 · 基本功技术 ·
1 评论 ·
DOM

本文小编: 伯乐在线 –
ThoughtWorks
。未经笔者许可,禁止转载!
欢迎参加伯乐在线 专辑我。

本连串文章:

  • 《干什么 ReactJS
    不吻合复杂的前端项目?》
  • 《React.Component
    损害了复用性?》

本种类的上一篇小说《React.Component
损害了复用性?》斟酌了什么样在前端开发中编辑可复用的界面成分。本篇文章将从性质和算法的角度相比Binding.scala 和其余框架的渲染机制。

Binding.scala 完成了一套精确数据绑定机制,通过在模板中使用 bind
for/yield 来渲染页面。你可能用过一些别的 Web
框架,大多选用脏检查也许虚拟 DOM 机制。和它们比较,Binding.scala
的可相信数据绑定机制使用更简便易行、代码更硬朗、品质更高。

本文我杨博。

HTML也得以静态编写翻译?

2016/11/30 · HTML5 · 1
评论 ·
binding.scala,
React,
前端

正文小编: 伯乐在线 –
ThoughtWorks
。未经小编许可,禁止转发!
欢迎加入伯乐在线 专栏撰稿人。

More than React种类小说:

《More than
React(一)为啥ReactJS不相符复杂的前端项目?》

《More than
React(二)React.Component损害了复用性?》

《More than React(三)虚拟DOM已死?》

《More than
React(四)HTML也得以静态编写翻译?》


《More than
React》种类的上一篇小说《虚拟DOM已死?》相比了Binding.scala和任何框架的渲染机制。本篇小说军长介绍Binding.scala中的XHTML语法。

缘何 ReactJS 不符合复杂的前端项目?

2016/08/17 · JavaScript
· 15 评论 ·
React,
ReactJS,
前端

本文小编: 伯乐在线 –
ThoughtWorks
。未经小编许可,禁止转发!
迎接插足伯乐在线 专辑小编。

《More than
React》类别的小说会一起分成五篇。本文是率先篇,介绍用ReactJS开发时相遇的种种难题。前面四篇小说的每一篇将会分别详细研讨之中三个题材,以及Binding.scala如何化解那几个题目。

ReactJS虚拟DOM的缺点

比如, ReactJS 使用虚拟 DOM 机制,让前者开发者为各类组件提供1个
render 函数。render 函数把 propsstate 转换来 ReactJS 的虚拟
DOM,然后 ReactJS 框架依照render 再次来到的虚拟 DOM 创立相同结构的诚实
DOM。

每当 state 更改时,ReactJS 框架重新调用 render 函数,获取新的虚构
DOM 。然后,框架会相比上次生成的杜撰 DOM 和新的杜撰 DOM
有何样差距,进而把差距应用到真正 DOM 上。

那般做有两大弱点:

  1. 每次 state 更改,render 函数都要生成完全的杜撰 DOM,哪怕 state
    改动相当的小,render函数也会完全计算2遍。如果 render
    函数很复杂,那个进程就会白白浪费很多计量财富。
  2. ReactJS 框架相比较虚拟 DOM
    差距的进度,既慢又简单出错。比如,你想要在有些 <ul>
    列表的顶部插入一项 <li> ,那么 ReactJS 框架会误以为你改改了 <ul>
    的每一项 <li>,然后在尾部插入了一个 <li>

那是因为 ReactJS 收到的新旧多少个虚拟 DOM 之间相互独立,ReactJS
并不知道数据源产生了如何操作,只可以根据新旧七个虚拟 DOM
猜测急需执行的操作。自动的测度算法既不准又慢,必供给前端开发者手动提供
key 属性、shouldComponentUpdate 方法、componentDidUpdate 方法或然
componentWillUpdate 等措施展才能能援救 ReactJS 框架猜对。

前端 binding.scala data-binding scala.js web

任何前端框架的标题

背景介绍

2018年 4 月,作者第3次在某些客户的档次中接触到ReactJS 。

自笔者意识ReactJS要比小编原先用过的AngularJS不难很多,它提供了响应式的数据绑定功效,把多少映射到网页上,使小编得以轻松达成相互之间简单的网站。

威尼斯人线上娱乐 ,可是,随着作者进一步浓密的行使ReactJS,作者发现用ReactJS编写交互复杂的网页很狼狈。
小编希望有一种方法,能够像ReactJS一样简单化解不难难题。其余,还要能不难化解复杂难点。

于是笔者把ReactJS用Scala重新写了贰个。代码量从近两千0行降到了壹仟多行。

用那一个框架达成的TodoMVC应用,只用了154行代码。而用ReactJS达成平等功效的TodoMVC,需要488行代码。

下图是用Binding.scala实现的TodoMVC应用。

威尼斯人线上娱乐 1

这一个框架就是Binding.scala。

AngularJS的脏检查

除却类似 ReactJS 的杜撰 DOM 机制,其余流行的框架,比如 AngularJS
还会动用脏检查算法来渲染页面。

就好像 AngularJS 的脏检查算法和 ReactJS
有同样的欠缺,不可能获悉情状修改的意向,必须完全重新计算 View
模板。除此之外,AngularJS 更新 DOM
的限制往往会比实际所需大得多,所以会比 ReactJS 还要慢。

本种类的上一篇文章组件对复用性有剧毒?研究了什么样在前端开发中编辑可复用的界面元素。本篇小说上将从性质和算法的角度比较Binding.scala 和此外框架的渲染机制。

对HTML的欠缺帮忙

以前作者们应用任何前端框架,比如Cycle.js
、Widok、ScalaTags时,由于框架不支持HTML语法,前端工程师被迫浪费大量日子,手动把HTML改写成代码,然后稳步调节和测试。

即正是支撑HTML语法的框架,比如ReactJS,扶助景况也很东鳞西爪。

比如说,在ReactJS中,你不能够如此写:

JavaScript

class BrokenReactComponent extends React.Component { render() { return (
<ol> <li class=”unsupported-class”>不支持 class
属性</li> <li style=”background-color: red”>不支持 style
属性</li> <li> <input type=”checkbox”
id=”unsupported-for”/> <label for=”unsupported-for”>不支持 for
属性</label> </li> </ol> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class BrokenReactComponent extends React.Component {
  render() {
    return (
      <ol>
        <li class="unsupported-class">不支持 class 属性</li>
        <li style="background-color: red">不支持 style 属性</li>
        <li>
          <input type="checkbox" id="unsupported-for"/>
          <label for="unsupported-for">不支持 for 属性</label>
        </li>
      </ol>
    );
  }
}

前端工程师必须手动把 classfor 属性替换成 className
htmlFor,还要把内联的 style
样式从CSS语法改成JSON语法,代码才能运维:

JavaScript

class WorkaroundReactComponent extends React.Component { render() {
return ( <ol> <li className=”workaround-class”>被迫把 class
改成 className</li> <li style={{ backgroundColor: “red”
}}>被迫把体制表改成 JSON</li> <li> <input
type=”checkbox” id=”workaround-for”/> <label
htmlFor=”workaround-for”>被迫把 for 改成 htmlFor</label>
</li> </ol> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class WorkaroundReactComponent extends React.Component {
  render() {
    return (
      <ol>
        <li className="workaround-class">被迫把 class 改成 className</li>
        <li style={{ backgroundColor: "red" }}>被迫把样式表改成 JSON</li>
        <li>
          <input type="checkbox" id="workaround-for"/>
          <label htmlFor="workaround-for">被迫把 for 改成 htmlFor</label>
        </li>
      </ol>
    );
  }
}

那种开发情势下,前端工程师固然能够把HTML原型复制粘贴到代码中,但还亟需大量改建才能实际运维。比Cycle.js、Widok恐怕ScalaTags省频频太多事。

题材一:ReactJS组件难以在千丝万缕交互页面中复用

ReactJS中的最小复用单位是组件。ReactJS的零件比AngularJS的Controller和View
要轻量些。 每种组件只供给前端开发者提供二个 render 函数,把 props
state 映射成网页成分。

这么的轻量级组件在渲染不难静态页面时很好用,
可是如若页面有相互,就必须在组件间传递回调函数来处总管件。

作者将在《More than React(二)组件对复用性有剧毒?》中用原生DHTML
API、ReactJS和Binding.scala实现同一个急需复用的页面,介绍Binding.scala怎么着简单完成、简单复用复杂的交互逻辑。

Binding.scala的纯粹数据绑定

Binding.scala 使用规范数据绑定算法来渲染 DOM 。

在 Binding.scala 中,你能够用 @dom 评释证明数据绑定表明式。@dom
会自动把 = 之后的代码包装成 Binding 类型。

比如:

@dom val i: Binding[Int] = 1 @dom def f: Binding[Int] = 100 @dom val
s: Binding[String] = “content”

1
2
3
@dom val i: Binding[Int] = 1
@dom def f: Binding[Int] = 100
@dom val s: Binding[String] = "content"

@dom 既可用于 val 也得以用来 def ,能够表明包蕴 IntString
在内的任何数据类型。

除去,@dom 方法还是能够直接编写 XHTML,比如:

@dom val comment: Binding[Comment] = <!– This is a HTML Comment
–> @dom val br: Binding[HTMLBRElement] = <br/> @dom val seq:
Binding[BindingSeq[HTMLBRElement]] = <br/><br/>

1
2
3
@dom val comment: Binding[Comment] = <!– This is a HTML Comment –>
@dom val br: Binding[HTMLBRElement] = <br/>
@dom val seq: Binding[BindingSeq[HTMLBRElement]] = <br/><br/>

这些 XHTML 生成的
Comment

HTMLBRElement
是 HTML
【威尼斯人线上娱乐】HTML也得以静态编写翻译,不合乎复杂的前端项目。Node
的派生类。而不是
XMLNode。

每个 @dom 方法都能够凭借其余数据绑定表明式:

val i: Var[Int] = Var(0) @dom val j: Binding[Int] = 2 @dom val k:
Binding[Int] = i.bind * j.bind @dom val div:
Binding[HTMLDivElement] = <div>{ k.bind.toString }</div>

1
2
3
4
val i: Var[Int] = Var(0)
@dom val j: Binding[Int] = 2
@dom val k: Binding[Int] = i.bind * j.bind
@dom val div: Binding[HTMLDivElement] = <div>{ k.bind.toString }</div>

透过那种措施,你能够编写 XHTML 模板把数据源映射为 XHTML
页面。这种精确的照射关系,描述了数据里面包车型地铁涉及,而不是 ReactJS 的
render
函数那样描述运算进度。所以当数码发生变更时,只有受影响的有的代码才会再一次总计,而不须要重新计算整个
@dom 方法。

比如:

val count = Var(0) @dom def status: Binding[String] = { val startTime
= new Date “本页面早先化的年华是” + start提姆e.toString + “。按钮被按过”

  • count.bind.toString + “次。按钮最后二遍按下的时间是” + (new
    Date).toString } @dom def render = { <div> { status.bind }
    <button onclick={ event: 伊夫nt => count := count.get + 1
    }>更新情状</button> </div> }
1
2
3
4
5
6
7
8
9
10
11
12
13
val count = Var(0)
 
@dom def status: Binding[String] = {
  val startTime = new Date
  "本页面初始化的时间是" + startTime.toString + "。按钮被按过" + count.bind.toString + "次。按钮最后一次按下的时间是" + (new Date).toString
}
 
@dom def render = {
  <div>
    { status.bind }
    <button onclick={ event: Event => count := count.get + 1 }>更新状态</button>
  </div>
}

以上代码可以在ScalaFiddle实在运作一下试试。

注意,status
并不是3个平淡无奇的函数,而是描述变量之间涉及的分外表达式,每回渲染时只实行当中有的代码。比如,当
count 改变时,唯有位于 count.bind 未来的代码才会重新总括。由于
val startTime = new Date 位于 count.bind
在此之前,并不会另行总计,所以会直接保持为开辟网页第①遍执行时的初阶值。

些微人在上学 ReactJS 大概 AngularJS 时,须要学习 key
shouldComponentUpdate$apply$digest 等复杂概念。那个概念在
Binding.scala 中常有不设有。因为 Binding.scala 的 @dom
方法描述的是变量之间的涉嫌。所以,Binding.scala
框架知道确切数据绑定关系,能够自动物检疫查和测试出需求更新的纤维部分。

Binding.scala 完结了一套精确数据绑定机制,通过在模板中使用 bind
for/yield 来渲染页面。你恐怕用过一些此外 Web
框架,大多采纳脏检查只怕虚拟 DOM 机制。和它们相比较,Binding.scala
的规范数据绑定机制使用更简便易行、代码更硬朗、品质更高。

不协作原生DOM操作

除此以外,ReactJS等片段前端框架,会生成虚拟DOM。虚拟DOM不可能合作浏览器原生的DOM
API
,导致和jQuery、D3等其余库协作时困难重重。比如ReactJS更新DOM对象时平常会损坏掉jQuery控件。

Reddit诸多人切磋了那几个难点。他们不曾章程,只好弃用jQuery。小编司的某客户在用了ReactJS后也被迫用ReactJS重写了大气jQeury控件。

题材二:ReactJS的虚拟DOM 算法又慢又不准

ReactJS的页面渲染算法是虚构DOM差量算法。

开发者须要提供 render 函数,根据 propsstate 生成虚拟 DOM。
然后 ReactJS 框架依照 render 重临的虚构 DOM 成立相同结构的真人真事 DOM.

每当 state 更改时,ReacJS 框架重新调用 render 函数,获取新的虚构 DOM
。 然后,框架会相比上次生成的虚拟 DOM 和新的虚拟 DOM
有哪些差距,然后把差别应用到真正DOM上。

这么做有两大毛病:

  1. 每次 state 更改,render 函数都要生成完全的虚拟 DOM. 哪怕 state
    改动非常小,render函数也会全体计算贰遍。若是 render
    函数很复杂,那一个进度就白白浪费了重重测算资源。
  2. ReactJS框架相比虚拟DOM差距的长河,既慢又便于失误。比如,倘若你想要在有些
    <ul>列表的顶部插入一项 <li> ,那么ReactJS框架会误以为你改改了
    <ul> 的每一项 <li>,然后在底部插入了贰个 <li>

那是因为
ReactJS收到的新旧多少个虚拟DOM之间相互独立,ReactJS并不知道数据源发生了什么操作,只好根据新旧七个虚拟DOM来猜测亟需履行的操作。
自动的推断算法既不准又慢,必须要前端开发者手动提供 key
属性、shouldComponentUpdate 方法、componentDidUpdate 方法也许
componentWillUpdate 等办法才能帮忙 ReactJS 框架猜对。

自家将在《More than
React(三)虚拟DOM已死?》中对比ReactJS、AngularJS和Binding.scala渲染机制,介绍简单质量高的Binding.scala精确数据绑定机制。

结论

本文比较了虚拟 DOM 、脏检查和准确数据绑定二种渲染机制。

AngularJS ReactJS Binding.scala
渲染机制 脏检查 虚拟DOM 精确数据绑定
数据变更时的运算步骤
  1. 重复检查数据是否更改
  2. 大范围更新页面,哪怕这部分页面根本没有修改
  1. 重新生成整个虚拟DOM
  2. 比较新旧虚拟DOM的差异
  3. 根据差异更新页面
  1. 直接根据数据映射关系,更新最小范围页面
检测页面更新范围的准确性 不准 默认情况下不准,需要人工提供keyshouldComponentUpdate才能准一点
需要前端工程师理解多少API和概念才能正确更新页面 很多 很多 只有@dombind两个概念
总体性能 非常差

那三种机制中,Binding.scala
的确切数据绑定机制概念更少,功用更强,性能更高。笔者将在下一篇文章中牵线
Binding.scala 怎么样在渲染 HTML 时静态检查语法错误和语义错误,从而幸免 bug

1 赞 收藏 1
评论

ReactJS 虚拟 DOM 的缺点

譬如, ReactJS 使用虚拟 DOM 机制,让前者开发者为每一种组件提供2个
render 函数。render 函数把 propsstate 转换到 ReactJS 的杜撰
DOM,然后 ReactJS 框架依照 render 再次来到的杜撰 DOM 创立相同结构的真正
DOM.

每当 state 更改时,ReacJS 框架重新调用 render 函数,获取新的虚拟 DOM
。然后,框架会比较上次生成的杜撰 DOM 和新的虚构 DOM
有何样分化,然后把差距应用到实在 DOM 上。

那样做有两大毛病:

  1. 每次 state 更改,render 函数都要生成完全的虚构 DOM. 哪怕 state
    改动一点都不大,render函数也会完全总括三回。如果 render
    函数很复杂,这几个进程就白白浪费了成都百货上千乘除能源。
  2. ReactJS 框架比较虚拟 DOM
    差别的进度,既慢又不难出错。比如,要是你想要在有个别 <ul>
    列表的顶部插入一项 <li> ,那么 ReactJS 框架会误以为你改改了 <ul>
    的每一项 <li>,然后在底部插入了1个 <li>

那是因为 ReactJS 收到的新旧多少个虚拟 DOM 之间交互独立,ReactJS
并不知道数据源发生了怎么样操作,只好遵照新旧多少个虚拟 DOM
猜测急需执行的操作。自动的思疑算法既不准又慢,必需求前端开发者手动提供
key 属性、shouldComponentUpdate 方法、componentDidUpdate 方法依然
componentWillUpdate 等措施展才能能支持 ReactJS 框架猜对。

Binding.scala中的XHTML

现行反革命有了Binding.scala ,能够在@dom措施中,直接编写XHTML。比如:

JavaScript

@dom def introductionDiv = { <div style=”font-size:0.8em”>
<h3>Binding.scala的优点</h3> <ul>
<li>简单</li> <li>概念少<br/>功能多</li>
</ul> </div> }

1
2
3
4
5
6
7
8
9
@dom def introductionDiv = {
  <div style="font-size:0.8em">
    <h3>Binding.scala的优点</h3>
    <ul>
      <li>简单</li>
      <li>概念少<br/>功能多</li>
    </ul>
  </div>
}

以上代码会被编写翻译,直接创立真实的DOM对象,而没有虚构DOM。

Binding.scala对浏览器原生DOM的帮衬很好,你能够在那么些DOM对象上调用DOM
API,与 D三 、jQuery等别的库交互也全然没有毛病。

ReactJS对XHTML语法的欠缺不全。相比较之下,Binding.scala帮助完全的XHTML语法,前端工程师能够直接把规划好的HTML原型复制粘贴到代码中,整个网站就足以运作了。

标题三:ReactJS的HTML模板成效既不完备、也不硬朗

ReactJS支持用JSX编写HTML模板。

力排众议上,前端工程师只要把静态HTML原型复制到JSX源文件中,
增添一些变量替换代码, 就能改造成动态页面。
理论上那种做法要比Cycle.js、Widok、ScalaTags等框架更符合复用设计师提供的HTML原型。

糟糕的是,ReactJS对HTML的帮衬四分五裂。开发者必须手动把classfor质量替换到classNamehtmlFor,还要把内联的style体制从CSS语法改成JSON语法,代码才能运维。
这种开发格局下,前端工程师即使能够把HTML原型复制粘贴到代码中,但还索要大批量改造才能实际运维。
比Cycle.js、Widok、可能、ScalaTags省不断太多事。

除开,ReactJS还提供了propTypes编写制定校验虚拟DOM的合法性。
但是,这一机制也漏洞百出。
固然内定了propTypes,ReactJS也不能够在编译前提前发现错误。唯有测试覆盖率很高的类型时才能在各类组件使用其余零件时开始展览校验。
即便测试覆盖率很高,propTypes依然不能够检查和测试出拼错的属性名,假诺你把onClick写成了onclick
ReactJS就不会报错,往往造成开发者额外开支多量年华排查贰个很简单的bug。

自家将在《More than
React(四)HTML也得以编写翻译?》中相比较ReactJS和Binding.scala的HTML模板,介绍Binding.scala怎么着在全体协助XHTML语法的还要静态检查语法错误和语义错误。

有关笔者:ThoughtWorks

威尼斯人线上娱乐 2

ThoughtWorks是一家中外IT咨询公司,追求优异软件品质,致力于科学技术驱动商业变革。擅长营造定制化软件出品,帮忙客户快捷将定义转化为价值。同时为客户提供用户体验设计、技术战略咨询、组织转型等咨询服务。

个人主页 ·
作者的稿子 ·
84 ·
  

威尼斯人线上娱乐 3

AngularJS 的脏检查

除外类似 ReactJS 的虚拟 DOM 机制,其余流行的框架,比如 AngularJS
还会动用脏检查算法来渲染页面。

接近 AngularJS 的脏检查算法和 ReactJS
有同一的后天不足,不能得知情状修改的打算,必须完全重新总括 View
模板。除此之外,AngularJS 更新 DOM
的限量往往会比其实所需大得多,所以会比 ReactJS 还要慢。

Binding.scala中XHTML的类型

@dom主意中XHTML对象的品类是Node的派生类。

比如,<div></div>
的项目正是HTMLDivElement,而
<button></button> 的花色正是
HTMLButtonElement。

此外, @dom
评释会修改总体艺术的再次来到值,包装成多个Binding。

JavaScript

@dom def typedButton: Binding[HTMLButtonElement] = {
<button>按钮</button> }

1
2
3
@dom def typedButton: Binding[HTMLButtonElement] = {
  <button>按钮</button>
}

注意typedButton是个原生的HTMLButtonElement,所以能够一直对它调用 DOM
API。比如:

JavaScript

@dom val autoPrintln: Binding[Unit] = {
println(typedButton.bind.innerHTML) // 在控制巴尔的摩打字与印刷按钮内部的 HTML }
autoPrintln.watch()

1
2
3
4
@dom val autoPrintln: Binding[Unit] = {
  println(typedButton.bind.innerHTML) // 在控制台中打印按钮内部的 HTML
}
autoPrintln.watch()

那段代码中,typedButton.bind.innerHTML 调用了 DOM API
HTMLButtonElement.innerHTML。通过autoPrintln.watch(),每当按钮产生更新,autoPrintln中的代码就会实施壹次。

标题四:ReactJS与服务器通讯时索要复杂的异步编程

ReactJS从服务器加载数据时的框架结构能够看做MVVM(Model–View–ViewModel)情势。
前端工程师须求编写制定一个数据库访问层作为Model,把ReactJS的state当做ViewModel,而render用作View。
Model负责访问数据库并把多少设置到state(即View
Model)上,可以用Promise和fetch API实现。
然后,render,即View,负责把View Model渲染到页面上。

在这一体流程中,前端程序员要求编写制定大批量闭包组成的异步流程,
设置、访问状态的代码五零四散,
一非常大心就会bug丛生,即便战战兢兢的处理种种异步事件,也会造成程序变得复杂,既难调试,又难保证。

自身将在《More than
React(五)为何别用异步编制程序?》中相比较ReactJS和Binding.scala的数码同步模型,介绍Binding.scala如何自动同步服务器数据,幸免手动异步编制程序。

Binding.scala 的准确数据绑定

Binding.scala 使用规范数据绑定算法来渲染 DOM 。

在 Binding.scala 中,你可以用 @dom 申明注脚数据绑定表明式。@dom
会自动把 = 之后的代码包装成 Binding 类型。

比如:

@dom val i: Binding[Int] = 1
@dom def f: Binding[Int] = 100
@dom val s: Binding[String] = "content"

@dom 既可用以 val 也得以用来 def ,能够表明包蕴 IntString
在内的其它数据类型。

除外,@dom 方法还能直接编写 XHTML,比如:

@dom val comment: Binding[Comment] = <!-- This is a HTML Comment -->
@dom val br: Binding[HTMLBRElement] = <br/>
@dom val seq: Binding[BindingSeq[HTMLBRElement]] = <br/><br/>

这些 XHTML 生成的
Comment

HTMLBRElement
是 HTML
Node
的派生类。而不是 XML
Node。

每个 @dom 方法都能够借助别的数据绑定表明式:

val i: Var[Int] = Var(0)
@dom val j: Binding[Int] = 2
@dom val k: Binding[Int] = i.bind * j.bind
@dom val div: Binding[HTMLDivElement] = <div>{ k.bind.toString }</div>

透过这种方法,你可以编写 XHTML 模板把数据源映射为 XHTML
页面。那种精确的照射关系,描述了多少里面包车型客车关联,而不是 ReactJS 的
render
函数那样描述运算进度。所以当数码产生变动时,唯有受影响的有的代码才会再一次总括,而不需求重新计算整个
@dom 方法。

比如:

val count = Var(0)
@dom def status: Binding[String] = {
  val startTime = new Date
  "本页面初始化的时间是" + startTime.toString + "。按钮被按过" + count.bind.toString + "次。按钮最后一次按下的时间是" + (new Date).toString
}
@dom def render = {
  <div>
    { status.bind }
    <button onclick={ event: Event => count := count.get + 1 }>更新状态</button>
  </div>
}

如上代码能够在ScalaFiddle事实上运营一下尝试。

注意,status
并不是几个普普通通的函数,而是描述变量之间涉及的非正规表明式,每一趟渲染时只举办在那之中一些代码。比如,当
count 改变时,唯有位于 count.bind 今后的代码才会再也总括。由于
val startTime = new Date 位于 count.bind
从前,并不会再一次总计,所以会直接维系为打开网页第②次实施时的起始值。

稍许人在读书 ReactJS 只怕 AngularJS 时,需求学习 key
shouldComponentUpdate$apply$digest 等复杂概念。那么些概念在
Binding.scala 中根本不设有。因为 Binding.scala 的 @dom
方法描述的是变量之间的关联。所以,Binding.scala
框架知道确切数据绑定关系,可以自动物检疫查和测试出须要更新的微小部分。

其他HTML节点

Binding.scala支持HTML注释:

JavaScript

@dom def comment = { <!– 你看不见作者 –> }

1
2
3
@dom def comment = {
  <!– 你看不见我 –>
}

Binding.scala也支持CDATA块:

JavaScript

@dom def inlineStyle = { <section> <style><![CDATA[
.highlight { background-color:gold } ]]></style> <p
class=”highlight”>Binding.scala真好用!</p> </section> }

1
2
3
4
5
6
7
8
9
10
@dom def inlineStyle = {
  <section>
    <style><![CDATA[
      .highlight {
        background-color:gold
      }
    ]]></style>
    <p class="highlight">Binding.scala真好用!</p>
  </section>
}

结论

就算Binding.scala初看上去很像ReactJS,
但隐藏在Binding.scala背后的体制更简便、更通用,与ReactJS和Widok截然区别。

由此,通过简化概念,Binding.scala灵活性更强,能用通用的办法消除ReactJS化解不了的纷纷难点。

比如,除了上述四个地点以外,ReactJS的情景管理也是来之不易难点,即使引入Redux大概react-router那样的第②方库来拍卖意况,会促成架构变复杂,分层变多,代码绕来绕去。而Binding.scala能够用和页面渲染一样的多寡绑定机制描述复杂的景色,不需求此外第一方库,就能提供服务器通讯、状态管理和网址分发的功能。

以下表格中列出了上述Binding.scala和ReactJS的法力差距:

Binding.scala

ReactJS

复用性

微小复用单位

方法

组件

复用难度

不管交互内容照旧静态内容都简单复用

不难复用静态内容组件,但麻烦复用交互组件

页面渲染算法

算法

准确的数码绑定

虚拟 DOM

性能

正确性

电动保险科学

亟待开发者手动设置 key 属性,不然复杂的页面会混杂。

HTML 模板

语法

Scala XML 字面量

JSX

是或不是援助 HTML 或 XHTML 语法

一体化援救 XHTML

残缺帮忙。不奇怪的 XHTML 不恐怕编写翻译。开发者必须手动把 classfor
属性替换来 classNamehtmlFor,还要把内联的 style 样式从 CSS
语法改成 JSON 语法。

怎么样校验模板语法

电动编写翻译时校验

运维时通过 propTypes 校验但不能检查和测试大约的拼写错误。

服务器通信

机制

电动远程数据绑定

MVVM + 异步编制程序

达成难度

简单

复杂

其他

怎么分担网址或然锚点链接

支撑把网址当成普通的绑定变量来用,无需第②方库。

不扶助,供给第①方库 react-router

效益完备性

完整的前端开发消除方案

自个儿只包蕴视图部分机能。需求卓殊驾驭 react-router 、 Redux
等第3方库才能落到实处全体的前端项目。

学习曲线

API 不难,对没用过 Scala 的人来说也很好懂

上心灵。但功效太弱导致早先时期学习第3方库时曲线陡峭。

Binding.scala

ReactJS

三个多月前,小编在Scala.js的论坛发表Binding.scala时,当时Scala.js社区最风靡的响应式前端编制程序框架是Widok。TimNieradzik是Widok的撰稿人。他在见到本人发表的框架后,赞叹那个框架是Scala.js社区最有前景的
HTML 5渲染框架。

她是对的,三个月后,未来Binding.scala已经济体制革新为Scala.js社区最风靡的响应式前端编制程序框架。

Awesome
Scala网站对待了Scala的响应式前端编制程序框架,Binding.scala的外向程度和流行度都比Udash、Widok等其余框架要高。

威尼斯人线上娱乐 4

自身在近日的几个类型中,也稳步扬弃JavaScript和ReactJS,改用Scala.js和Binding.scala搭建新时代的前端技术栈。

结论

正文比较了虚拟 DOM 、脏检查和规范数据绑定二种渲染机制。

这三种体制中,Binding.scala
的确切数据绑定机制概念更少,作用更强,品质更高。小编将在下一篇小说中介绍
Binding.scala 怎样在渲染 HTML 时静态检查语法错误和语义错误,从而幸免 bug

内嵌Scala代码

除却能够把XHTML内嵌在Scala代码中的 @dom 方法中,Binding.scala 还协助用
{ ... } 语法把 Scala 代码内嵌到XHTML中。比如:

JavaScript

@dom def randomParagraph = { <p>生成2个无限制数: {
math.random.toString }</p> }

1
2
3
@dom def randomParagraph = {
  <p>生成一个随机数: { math.random.toString }</p>
}

XHTML中内嵌的Scala代码能够用 .bind 绑定变量或许调用别的 @dom
方法,比如:

JavaScript

val now = Var(new Date) window.setInterval(一千) { now := new Date }
@dom def render = { <div> 今后时间:{ now.bind.toString } {
introductionDiv.bind } { inlineStyle.bind } { typedButton.bind } {
comment.bind } { randomParagraph.bind } </div> }

1
2
3
4
5
6
7
8
9
10
11
12
13
val now = Var(new Date)
window.setInterval(1000) { now := new Date }
 
@dom def render = {
  <div>
    现在时间:{ now.bind.toString }
    { introductionDiv.bind }
    { inlineStyle.bind }
    { typedButton.bind }
    { comment.bind }
    { randomParagraph.bind }
  </div>
}

上述代码渲染出的网页中,时间会动态改变。

连锁链接

  • Binding.scala
    项目主页
  • Binding.scala • TodoMVC
    项目主页
  • Binding.scala • TodoMVC
    DEMO
  • Binding.scala • TodoMVC 以外的别样
    DEMO
  • JavaScript 到 Scala.js
    移植指南
  • Scala.js 项目主页
  • Scala API
    参考文书档案
  • Scala.js API
    参考文书档案
  • Scala.js DOM API
    参考文书档案
  • Binding.scala连忙上手指南
  • Binding.scala
    API参考文书档案
  • Binding.scala 的 Gitter
    聊天室

    1 赞 5 收藏 15
    评论

强类型的 XHTML

Binding.scala中的XHTML 都协助静态类型检查。比如:

JavaScript

@dom def typo = { val myDiv = <div
typoProperty=”xx”>content</div> myDiv.typoMethod() myDiv }

1
2
3
4
5
@dom def typo = {
  val myDiv = <div typoProperty="xx">content</div>
  myDiv.typoMethod()
  myDiv
}

由于以上代码有拼写错误,编写翻译器就会报错:

JavaScript

typo.scala:23: value typoProperty is not a member of
org.scalajs.dom.html.Div val myDiv = <div
typoProperty=”xx”>content</div> ^ typo.scala:24: value
typoMethod is not a member of org.scalajs.dom.html.Div
myDiv.typoMethod() ^

1
2
3
4
5
6
typo.scala:23: value typoProperty is not a member of org.scalajs.dom.html.Div
        val myDiv = <div typoProperty="xx">content</div>
                     ^
typo.scala:24: value typoMethod is not a member of org.scalajs.dom.html.Div
        myDiv.typoMethod()
              ^

有关作者:ThoughtWorks

威尼斯人线上娱乐 5

ThoughtWorks是一家中外IT咨询公司,追求杰出软件质量,致力于科学技术驱动商业变革。擅长构建定制化软件出品,支持客户高效将概念转化为价值。同时为客户提供用户体验设计、技术战略咨询、协会转型等咨询服务。

个人主页 ·
笔者的稿子 ·
84 ·
  

威尼斯人线上娱乐 6

内联CSS属性

style 属性设置内联样式时,style 的值是个字符串。比如:

JavaScript

@dom def invalidInlineStyle = { <div style=”color: blue;
typoStyleName: typoStyleValue”></div> }

1
2
3
@dom def invalidInlineStyle = {
  <div style="color: blue; typoStyleName: typoStyleValue"></div>
}

如上代码中设置的 typoStyleName 样式名写错了,但编写翻译器并不曾报错。

要想让编译器能检查内联样式,能够用 style: 前缀而不用 style
属性。比如:

JavaScript

@dom def invalidInlineStyle = { <div style:color=”blue”
style:typoStyleName=”typoStyleValue”></div> }

1
2
3
@dom def invalidInlineStyle = {
  <div style:color="blue" style:typoStyleName="typoStyleValue"></div>
}

那就是说编写翻译器就会报错:

JavaScript

typo.scala:28: value typoStyleName is not a member of
org.scalajs.dom.raw.CSSStyleDeclaration <div style:color=”blue”
style:typoStyleName=”typoStyleValue”></div> ^

1
2
3
typo.scala:28: value typoStyleName is not a member of org.scalajs.dom.raw.CSSStyleDeclaration
        <div style:color="blue" style:typoStyleName="typoStyleValue"></div>
         ^

那样一来,能够在编辑代码时就领悟属性有没有写对。不像原生JavaScript /
HTML / CSS那样,碰到bug也查不出来。

自定义属性

一旦你须要绕开对品质的体系检查,以便为HTML成分添加定制数据,你能够属性加上
data: 前缀,比如:

JavaScript

@dom def myCustomDiv = { <div
data:customAttributeName=”attributeValue”></div> }

1
2
3
@dom def myCustomDiv = {
  <div data:customAttributeName="attributeValue"></div>
}

那样一来Scala编写翻译器就不会报错了。

结论

本文的欧洲经济共同体DEMO请访问
ScalaFiddle。

从这么些示例能够看出,Binding.scala 一方面援助完整的XHTML
,能够从高保真HTML
原型无缝移植到动态网页中,开发进程极为顺畅。另一方面,Binding.scala
可以在编写翻译时静态检查XHTML中冒出语法错误和语义错误,从而制止bug 。

以下表格比较了ReactJS和Binding.scala对HTML语法的帮衬程度:

ReactJS Binding.scala
是否支持HTML语法? 残缺支持
是否支持标准的style属性? 不支持,必须改用 JSON 语法
是否支持标准的class属性? 不支持,必须改用className
是否支持标准的for属性? 不支持,必须改用htmlFor
是否支持HTML注释? 不支持
是否兼容原生DOM操作? 不兼容
是否兼容jQuery? 不兼容
能否在编译时检查出错误? 不能

本人将在下一篇小说中牵线 Binding.scala
怎样落到实处服务器发送请求并在页面展现结果的流水生产线。

连带链接

  • Binding.scala
    项目主页
  • Binding.scala • TodoMVC
    项目主页
  • Binding.scala • TodoMVC
    DEMO
  • Binding.scala • TodoMVC 以外的其他DEMO
  • JavaScript 到 Scala.js
    移植指南
  • Scala.js 项目主页
  • Scala API
    参考文书档案
  • Scala.js API
    参考文书档案
  • Scala.js DOM API
    参考文书档案
  • Binding.scala急忙上手指南
  • Binding.scala
    API参考文书档案
  • Binding.scala 的 Gitter
    聊天室

    1 赞 1 收藏 1
    评论

关于小编:ThoughtWorks

威尼斯人线上娱乐 7

ThoughtWorks是一家中外IT咨询公司,追求非凡软件性能,致力于科学和技术驱动商业变革。擅长营造定制化软件出品,补助客户高效将概念转化为价值。同时为客户提供用户体验设计、技术战略咨询、协会转型等咨询服务。

个人主页 ·
笔者的小说 ·
84 ·
  

威尼斯人线上娱乐 8


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图