浅谈跨域以WebService对跨域的支持

2015/04/03 · HTML5,
JavaScript ·
WebService,
跨域

原文出处:
寒江独钓   

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号
(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。

在以前,前端和后端混杂在一起,
比如JavaScript直接调用同系统里面的一个Httphandler,就不存在跨域的问题,但是随着现代的这种多种客户端的流行,比如一个应用通常会有Web端,App端,以及WebApp端,各种客户端通常会使用同一套的后台处理逻辑,即API,
前后端分离的开发策略流行起来,前端只关注展现,通常使用JavaScript,后端处理逻辑和数据通常使用WebService来提供json数据。一般的前端页面和后端的WebService
API通常部署在不同的服务器或者域名上。这样,通过ajax请求WebService的时候,就会出现同源策略的问题。

需要说明的是,同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是说,如果开发Native应用,是不存在这个问题的,但是如果开发Web或者Html5如WebApp,通常使用JavaScript
ajax对WebService发起请求然后解析返回的值,这样就可能存在跨域的问题。

一般的,很容易想到,将外部的资源搬到同一个域上就能解决同源策略的限制的。即在Web网站上同时开发一个Http服务端页面,所有JavaScript的请求都发到这个页面上来,这个页面在内部使用其他语言去调用外部的WebService。即添加一个代理层。这种方式可以解决问题,但是不够直接和高效。

目前,比较常见的跨域解决方案包括JSONP (JSON with
padding)和CORS (Cross-origin
resource sharing
)。一些解决方案需要客户端和服务端配合如JSOP,一些则只需要服务端配合处理比如CORS。下面分别介绍这两种跨域方案,以及服务端WebService如何支持这两种跨域方案。

利用分层优化 HTML5 画布渲染

2015/02/02 · HTML5 ·
HTML5

原文出处: IBM
developerworks   

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语法。

JSONP以及WebService的支持

同源策略下,某个服务器是无法获取到服务器以外的数据,但是html里面的img,iframe和script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。而JSONP就是通过script节点src调用跨域的请求。

当我们向服务器提交一个JSONP的请求时,我们给服务传了一个特殊的参数,告诉服务端要对结果特殊处理一下。这样服务端返回的数据就会进行一点包装,客户端就可以处理。

举个例子,服务端和客户端约定要传一个名为callback的参数来使用JSONP功能。比如请求的参数如下:

JavaScript

1
http://www.example.net/sample.aspx?callback=mycallback

如果没有后面的callback参数,即不使用JSONP的模式,该服务的返回结果可能是一个单纯的json字符串,比如:

JavaScript

{ foo : 'bar' }

1
{ foo : 'bar' }

如果和服务端约定jsonp格式,那么服务端就会处理callback的参数,将返回结果进行一下处理,比如处理成:

JavaScript

mycallback({ foo : 'bar' })

1
mycallback({ foo : 'bar' })

可以看到,这其实是一个函数调用,比如可以实现在页面定义一个名为mycallback的回调函数:

JavaScript

mycallback = function(data) { alert(data.foo); };

1
2
3
4
mycallback = function(data)
         {
            alert(data.foo);
         };

现在,请求的返回值回去触发回调函数,这样就完了了跨域请求。

如果使用ServiceStack创建WebService的话,支持Jsonp方式的调用很简单,只需要在AppHost的Configure函数里面注册一下对响应结果进行过滤处理即可。

JavaScript

/// <summary> /// Application specific configuration /// This
method should initialize any IoC resources utilized by your web service
classes. /// </summary> /// <param
name="container"></param> public override void
Configure(Container container) { ResponseFilters.Add((req, res, dto)
=> { var func = req.QueryString.Get("callback"); if
(!func.isNullOrEmpty()) { res.AddHeader("Content-Type",
ContentType.Html); res.Write("<script
type='text/javascript'>{0}({1});</script>"
.FormatWith(func, dto.ToJson())); res.Close(); } }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/// &lt;summary&gt;
        /// Application specific configuration
        /// This method should initialize any IoC resources utilized by your web service classes.
        /// &lt;/summary&gt;
        /// &lt;param name=&quot;container&quot;&gt;&lt;/param&gt;
        public override void Configure(Container container)
        {
            ResponseFilters.Add((req, res, dto) =&gt;
            {
                var func = req.QueryString.Get(&quot;callback&quot;);
                if (!func.isNullOrEmpty())
                {
                    res.AddHeader(&quot;Content-Type&quot;, ContentType.Html);
                    res.Write(&quot;&lt;script type=&#039;text/javascript&#039;&gt;{0}({1});&lt;/script&gt;&quot;
                        .FormatWith(func, dto.ToJson()));
                    res.Close();
                }
            });
        }

JSONP跨域方式比较方便,也支持各种较老的浏览器,但是缺点很明显,他只支持GET的方式提交,不支持其他Post的提交,Get方式对请求的参数长度有限制,在有些情况下可能不满足要求。所以下面就介绍一下CORS的跨域解决方案。

简介

通常情况下,在玩 2D 游戏或渲染 HTML5
画布时,需要执行优化,以便使用多个层来构建一个合成的场景。在 OpenGL 或
WebGL
等低级别渲染中,通过逐帧地清理和绘制场景来执行渲染。实现渲染之后,需要优化游戏,以减少渲染的量,所需成本因情况而异。因为画布是一个
DOM 元素,它使您能够对多个画布进行分层,以此作为一种优化方法。

其他前端框架的问题

CORS跨域及WebService的支持

先来看一个例子,我们新建一个基本的html页面,在里面编写一个简单的是否支持跨域的小脚本,如下:

XHTML

<html xmlns=”; <head>
<title>AJAX跨域请求测试</title> </head> <body>
<input type=’button’ value=’开始测试’ onclick=’crossDomainRequest()’
/> <div id=”content”></div> <script
type=”text/javascript”> //<![CDATA[ var xhr = new
XMLHttpRequest(); var url = ”;
function crossDomainRequest() {
document.getElementById(“content”).innerHTML = “开始……”; if (xhr) {
xhr.open(‘POST’, url, true); xhr.onreadystatechange = handler;
xhr.send(); } else { document.getElementById(“content”).innerHTML =
“不能创建 XMLHttpRequest”; } } function handler(evtXHR) { if
(xhr.readyState == 4) { if (xhr.status == 200) { var response =
xhr.responseText; document.getElementById(“content”).innerHTML =
“结果:” + response; } else {
document.getElementById(“content”).innerHTML = “不允许跨域请求。”; } }
else { document.getElementById(“content”).innerHTML +=
“<br/>执行状态 readyState:” + xhr.readyState; } } //]]>
</script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>AJAX跨域请求测试</title>
</head>
<body>
  <input type=’button’ value=’开始测试’ onclick=’crossDomainRequest()’ />
  <div id="content"></div>
 
  <script type="text/javascript">
    //<![CDATA[
    var xhr = new XMLHttpRequest();
    var url = ‘http://localhost:8078/json/ShopUserLogin’;
    function crossDomainRequest() {
      document.getElementById("content").innerHTML = "开始……";
      if (xhr) {
        xhr.open(‘POST’, url, true);
        xhr.onreadystatechange = handler;
        xhr.send();
      } else {
        document.getElementById("content").innerHTML = "不能创建 XMLHttpRequest";
      }
    }
 
    function handler(evtXHR) {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          var response = xhr.responseText;
          document.getElementById("content").innerHTML = "结果:" + response;
        } else {
          document.getElementById("content").innerHTML = "不允许跨域请求。";
        }
      }
      else {
        document.getElementById("content").innerHTML += "<br/>执行状态 readyState:" + xhr.readyState;
      }
    }
    //]]>
  </script>
 
</body>
</html>

然后保存为本地html文件,可以看到,这个脚本中,对本地的服务 发起了一个请求,
如果使用chrome 直接打开,会看到输出的结果,不允许跨域请求。
在javascript控制台程序中同样可以看到错误提示:

澳门微尼斯人手机版 1

那么如果在返回响应头header中注入Access-Control-Allow-Origin,这样浏览器检测到header中的Access-Control-Allow-Origin,则就可以跨域操作了。

澳门微尼斯人手机版,同样,如果使用ServcieStack,在很多地方可以支持CORS的跨域方式。最简单的还是在AppHost的Configure函数里面直接写入:

JavaScript

/// <summary> /// Application specific configuration /// This
method should initialize any IoC resources utilized by your web service
classes. /// </summary> /// <param
name="container"></param> public override void
Configure(Container container) { this.AddPlugin(new CorsFeature()); }

1
2
3
4
5
6
7
8
9
/// &lt;summary&gt;
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// &lt;/summary&gt;
/// &lt;param name=&quot;container&quot;&gt;&lt;/param&gt;
public override void Configure(Container container)
{
    this.AddPlugin(new CorsFeature());
}

这样就可以了,相当于使用默认的CORS配置:

JavaScript

CorsFeature(allowedOrigins:"*", allowedMethods:"GET,
POST, PUT, DELETE, OPTIONS",
allowedHeaders:"Content-Type", allowCredentials:false);

1
2
3
4
CorsFeature(allowedOrigins:&quot;*&quot;,
allowedMethods:&quot;GET, POST, PUT, DELETE, OPTIONS&quot;,
allowedHeaders:&quot;Content-Type&quot;,
allowCredentials:false);

如果仅仅允许GET和POST的请求支持CORS,则只需要改为:

JavaScript

Plugins.Add(new CorsFeature(allowedMethods: "GET, POST"));

1
Plugins.Add(new CorsFeature(allowedMethods: &quot;GET, POST&quot;));

当然也可以在AppHost的Config里面设置全局的CORS,如下:

JavaScript

/// <summary> /// Application specific configuration /// This
method should initialize any IoC resources utilized by your web service
classes. /// </summary> /// <param
name="container"></param> public override void
Configure(Container container) { base.SetConfig(new EndpointHostConfig {
GlobalResponseHeaders = { { "Access-Control-Allow-Origin",
"*" }, { "Access-Control-Allow-Methods", "GET,
POST, PUT, DELETE, OPTIONS" }, {
"Access-Control-Allow-Headers", "Content-Type" }, },
}); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/// &lt;summary&gt;
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// &lt;/summary&gt;
/// &lt;param name=&quot;container&quot;&gt;&lt;/param&gt;
public override void Configure(Container container)
{
 
    base.SetConfig(new EndpointHostConfig
    {
        GlobalResponseHeaders = {
            { &quot;Access-Control-Allow-Origin&quot;, &quot;*&quot; },
            { &quot;Access-Control-Allow-Methods&quot;, &quot;GET, POST, PUT, DELETE, OPTIONS&quot; },
            { &quot;Access-Control-Allow-Headers&quot;, &quot;Content-Type&quot; },
                },
    });
}

现在运行WebService,使用postman或者Chrome调用这个请求,可以看到返回的值头文件中,已经加上了响应头,并且可以正常显示返回结果了:

澳门微尼斯人手机版 2

CORS使用起来简单,不需要客户端的额外处理,而且支持Post的方式提交请求,但是CORS的唯一一个缺点是对客户端的浏览器版本有要求,支持CORS的浏览器机器版本如下:

澳门微尼斯人手机版 3

 

常用的缩写

  • CSS: Cascading Style Sheets(级联样式表)
  • DOM: Document Object Model(文档对象模型)
  • HTML: HyperText Markup Language(超文本标记语言)

本文将探讨对画布进行分层的合理性。了解 DOM
设置,从而实现分层的画布。使用分层进行优化需要各种实践。本文还将探讨一些优化策略的概念和技术,它们扩展了分层方法。

您可以下载在本文中使用的示例的源代码。

对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省不了太多事。

总结

本文介绍了JavaScript中的跨域基本概念和产生的原因,以及如何解决跨域的两种方法,一种是JSONP
一种是
CORS,在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持。JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多的浏览器,
缺点是仅支持Get的方式对服务端请求。另一种主流的跨域方案是CORS,他仅需要服务端在返回数据的时候在相应头中加入标识信息。这种方式非常简便。唯一的缺点是需要浏览器的支持,一些较老的浏览器可能不支持CORS特性。

跨域支持是创建WebService时应该考虑的一个功能点,希望本文对您在这边面有所帮助,文中是使用ServiceStack来演示跨域支持的,如果您用的WCF的话,知道跨域原理的前提下,实现跨域应该不难。

 

选择优化策略

选择最佳优化策略可能很难。在选择分层的场景时,需要考虑场景是如何组成的。大屏幕上固定物的渲染经常需要重用若干个组件,它们是进行研究的极佳候选人。视差或动画实体等效果往往需要大量的变化的屏幕空间。在探索您的最佳优化策略时,最好注意这些情况。虽然画布的分层优化需要采用几种不同的技术,但在正确应用这些技术后,往往会大幅提升性能。

不兼容原生DOM操作

此外,ReactJS等一些前端框架,会生成虚拟DOM。虚拟DOM无法兼容浏览器原生的DOM
API
,导致和jQuery、D3等其他库协作时困难重重。比如ReactJS更新DOM对象时常常会破坏掉jQuery控件。

Reddit很多人讨论了这个问题。他们没有办法,只能弃用jQuery。我司的某客户在用了ReactJS后也被迫用ReactJS重写了大量jQeury控件。

参考资料:

赞 收藏
评论

澳门微尼斯人手机版 4

设置层

在使用分层的方法时,第一步是在 DOM
上设置画布。通常情况下,这很简单,只需定义画布元素,将其放入 DOM
中即可,但画布层可能需要一些额外的样式。在使用 CSS
时,成功地实现画布分层有两个要求:

  • 各画布元素必须共存于视区 (viewport) 的同一位置上。
  • 每个画布在另一个画布下面必须是可见的。

图 1显示了层设置背后的通用重叠概念。

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,与 D3、jQuery等其他库交互也完全没有问题。

ReactJS对XHTML语法的残缺不全。相比之下,Binding.scala支持完整的XHTML语法,前端工程师可以直接把设计好的HTML原型复制粘贴到代码中,整个网站就可以运行了。

图 1. 层示例

澳门微尼斯人手机版 5

设置层的步骤如下:

  1. 将画布元素添加到 DOM。
  2. 添加画布元素定位样式,以便支持分层。
  3. 样式化画布元素,以便生成一个透明的背景。

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中的代码就会执行一次。

设置画布重叠堆栈

在 CSS 中创建一个重叠堆栈 (overlay stack) 可能需要少量的样式。使用 HTML
和 CSS
有许多方法进行重叠。本文中的示例使用一个<div>标签来包含画布。<div>标签指定了一个惟一 ID,它将样式应用于其子 HTML5 画布元素,如清单 1所示。

其他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>
}
清单 1. 画布定位样式

CSS

#viewport { /** * Position relative so that canvas elements *
inside of it will be relative to the parent */ position: relative; }
#viewport canvas { /** * Position absolute provides canvases to be
able * to be layered on top of each other * Be sure to remember a
z-index! */ position: absolute; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#viewport {
    /**
     * Position relative so that canvas elements
     * inside of it will be relative to the parent
     */
    position: relative;
}
 
#viewport canvas {
    /**
     * Position absolute provides canvases to be able
     * to be layered on top of each other
     * Be sure to remember a z-index!
     */
    position: absolute;
}

容器<div>通过将所有子画布元素样式化为使用绝对定位来完成重叠要求。通过选择让#viewport使用相对定位,您可以适应未来的发展,因此,应用于子样式的绝对布局样式将会是相对于#viewport容器的样式。

这些 HTML5 画布元素的顺序也很重要。可以按元素出现在 DOM
上的顺序进行顺序管理,也可以按照画布应该显示的顺序来样式化 z-index
样式,从而管理顺序。虽然并非总是如此,但其他样式可能也会影响渲染;在引入额外的样式(比如任何一种
CSS 转换)时要小心。

内嵌Scala代码

除了可以把XHTML内嵌在Scala代码中的 @dom 方法中,Binding.scala 还支持用
{ ... } 语法把 Scala 代码内嵌到XHTML中。比如:

JavaScript

@dom def randomParagraph = { <p>生成一个随机数: {
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(1000) { 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>
}

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

透明的背景

通过使用重叠可见性来实现层技术的第二个样式要求。该示例使用这个选项来设置
DOM 元素背景颜色,如清单
2所示。

强类型的 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()
              ^
清单 2. 设置透明背景的样式表规则

JavaScript

canvas { /** * Set transparent to let any other canvases render
through */ background-color: transparent; }

1
2
3
4
5
6
canvas {
    /**
     * Set transparent to let any other canvases render through
     */
    background-color: transparent;
}

将画布样式化为拥有一个透明背景,这可以实现第二个要求,即拥有可见的重叠画布。现在,您已经构造了标记和样式来满足分层的需要,所以您可以设置一个分层的场景。

内联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也查不出来。

分层方面的考虑因素

在选择优化策略时,应该注意使用该策略时的所有权衡。对 HTML5
画布场景进行分层是一个侧重于运行时内存的策略,用于获得运行时速度方面的优势。您可以在页面的浏览器中增加更多的权重,以获得更快的帧速率。一般来说,画布被视为是浏览器上的一个图形平面,其中包括一个图形
API。

通过在 Google Chrome 19
进行测试,并记录浏览器的选项卡内存使用情况,您可以看到内存使用的明显趋势。该测试使用了已经样式化的<div>(正如上一节中讨论的那样),并生成了放置在<div>上的用单一颜色填充的画布元素。画布的大小被设定为
1600 x 900 像素,并从 Chrome1 的任务管理器实用程序收集数据。表
1显示了一个示例。

在 Google Chrome 的 Task Manager
中,您可以看到某个页面所使用的内存量(也称为 RAM)。Chrome 也提供 GPU
内存,或者是 GPU
正在使用的内存。这是常见信息,如几何形状、纹理或计算机将您的画布数据推送到屏幕可能需要的任何形式的缓存数据。内存越低,放在计算机上的权重就会越少。虽然目前还没有任何确切的数字作为依据,但应始终对此进行测试,确保您的程序不会超出极限,并使用了过多的内存。如果使用了过多的内存,浏览器或页面就会因为缺乏内存资源而崩溃。GPU
处理是一个远大的编程追求,已超出本文的讨论范围。您可以从学习 OpenGL
或查阅 Chrome
的文档(请参阅参考资料)开始。

自定义属性

如果你需要绕开对属性的类型检查,以便为HTML元素添加定制数据,你可以属性加上
data: 前缀,比如:

JavaScript

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

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

这样一来Scala编译器就不会报错了。

表 1. 画布层的内存开销
层数 内存 GPU 内存
0 30.0 11.9
1 37.6 28.9
1 37.6 28.9
2 49.0 46.6
3 52.2 59.6
8 58.4 98.0
16 65.0 130
32 107 187

在表 1中,随着在页面上引入和使用了更多的 HTML5
画布元素,使用的内存也越多。一般的内存也存在线性相关,但每增加一层,内存的增长就会明显减少。虽然这个测试并没有详细说明这些层对性能带来的影响,但它确实表明,画布会严重影响
GPU
内存。一定要记得在您的目标平台上执行压力测试,以确保平台的限制不会导致您的应用程序无法执行。

当选择更改某个分层解决方案的单一画布渲染周期时,需考虑有关内存开销的性能增益。尽管存在内存成本,但这项技术可以通过减小每一帧上修改的像素数量来完成其工作。

下一节将说明如何使用分层来组织一个场景。

结论

本文的完整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
如何实现服务器发送请求并在页面显示结果的流程。

对场景进行分层:游戏

在本节中,我们将通过重构一个滚动平台跑步风格的游戏上的视差效果的单画布实现,了解一个多层解决方案。图
2显示了游戏视图的组成,其中包括云、小山、地面、背景和一些交互实体。

相关链接

  • 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
    评论

发表评论

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