[whatwg]html6无JavaScript单页应用程序

2015年3月23日

这是一个新兴Web应用设计，通过JSON API动态加载前端JavaScript框架里的内容。这是单页应用程序的Web设计模式。大多数人都采用这种方式，因为加载一个API的负载时间（10-50ms）比加载全HTML页面（300-1500ms）要快很多。

这是最常见的，我们可以实现直接通过HTML的浏览器，让用户可以动态运行无JavaScript的单页应用程序？

我的目标将是一个高速响应的Web体验无需加载JavaScript。

这可以通过链接锚元素JSON / XML做（或定义一个新的API端点），在浏览器内部加载数据到一个新的数据结构，以及浏览器替换任何数据，在需要时加载DOM元素。初始数据（以及标准误差响应）可以在顶部请求，也可以为后来的需要替代。

HTML正成为一个足够吸引人的语言，所有的内容，可以动态加载而不需要JavaScript。

示例网页：
—-

<DOCTYPE html>
<HTML LANG=“en”>
<HEAD>
<FIXTURES lang=“xml”>
	<model class=“MyArticleData”>
		<rsp stat=“ok">
			<article label=“one” id=“1">
				<headline>"Big News!”</headline>
				<body>"<p>This is the first article intro.</p><p>This is the second paragraph.</p>"</body>
			</article>
			<article label=“two” id=“2">
				<headline>"Not so big news"</headline>
				<body>"<p>This is the <em>second</em> article.</p>"</body>
			</article>
		</rsp>
	</model>
	<model class=“MyImageData”>
		<rsp stat=“ok">
			<image label="Square" width="75" height="75" source="https://mycontentserver.com/image_s.jpg" id=“3"/>
			<image label=“Tall" width=“300" height=“200" source="https://mycontentserver.com/image_l.jpg" id=“4"/>
		</rsp>
		<rsp stat=“loading">
			<image label="Square" width="75" height="75" source="https://mycontentserver.com/loading_image_s.jpg" id=“1"/>
		</rsp>
		<rsp stat=“some_error">
			<image label="Square" width="75" height="75" source="https://mycontentserver.com/error_image_s.jpg" id=“2"/>
			<message
		</rsp>
	</model>
</FIXTURES>
</HEAD>
<BODY>
	<MENU class=“controller”>
		<A href=“http://api.mywebsite.com/api/load-new-article” model=“MyArticleData">Click here to replace the articles with different articles.</A>
		<A href=“http://api.mywebsite.com/api/load-new-image” model=“MyImageData">Click here to replace the picture with a different picture.</A>
	</MENU>
	<MAIN class=“viewer”>
		<ARTICLE class=“center">
			<H1 model=“MyArticleData.rsp.article(label=‘one’).headline” />
			<SPAN model="MyArticleData.rsp.article(label=’one’).body” />
		</ARTICLE>
		<ARTICLE class=“sidebar">
			<H1 model=“MyArticleData.rsp.article(label=’two’).headline” />
			<SPAN model=“MyArticleData.rsp.article(label=’two’).body” />
		</ARTICLE>
		<IMG src=“model:MyImageData.rsp.image(label=‘Square’)#source” width=“model:MyImageData.rsp.image(label=‘Square’)#width” height=“model:MyImageData.rsp.image(label=’Square’)#height”>
	</MAIN>
</BODY>
</HTML>

<HEAD>

<body>"<p>This is the first article intro.</p><p>This is the second paragraph.</p>"</body>

</article>

<body>"<p>This is the <em>second</em> article.</p>"</body>

</article>

</rsp>

</model>

</rsp>

</rsp>

<message

</rsp>

</model>

</FIXTURES>

</HEAD>

<BODY>

<A href=“http://api.mywebsite.com/api/load-new-article” model=“MyArticleData">Click here to replace the articles with different articles.</A>

<A href=“http://api.mywebsite.com/api/load-new-image” model=“MyImageData">Click here to replace the picture with a different picture.</A>

</MENU>

</ARTICLE>

</ARTICLE>

</MAIN>

</BODY>

</HTML>

—-

希望这能让它清楚。

点击一个链接JSON / XML数据加载到一个新的内部数据结构。这是从DOM分离。我最初的XML固定在头部，但这些装置可以是一个外部链接，隐式定义默认情况下包含参考模型本体元素。数据结构可以隐式定义，就像通过XML / JSON的设备，或者通过SQL语句。

正文部分有H1和span标签，一个新模型的属性，在它基础上加载的数据定义的内容。这种格式是声明性的，但可以接近SQL语句的复杂性。你不需要定义控制器/视图结构，但我确实在这个例子使用了。

还有一个“模型”的URI，旧的属性和页面其他部分可以使用引用加载的数据。DOM中的内容应该更换，包括地址栏和样式表。这个内部数据可以进行修改，如果需要可以通过JavaScript，修改DOM并分离出这一数据处理。这个内部数据也可以推送到一个服务器或直接连接到本地缓存，或持久性浏览和管理本地数据库的更新，而不是Web开发者/ JavaScript。

模型参考的定义，它可以调用任何对象，以定义条件来访问对象的能力，也许遍历列表的对象通过SQL SELECT语句，使用模板标签来创建新的DOM对象。应该有标准公约常见错误控制。更先进的链接的URL可以包含SQL语句”- “<A href=“http://…“>” 变成了 “<A href=”sql:select from *”>”。公约将被定义为认证。控制器自身“链接”的链接也可以改变。一个链接可以更新多模型结构。

不管怎样，你怎么看这个问题？我认为像这样的一些技术可以消除很多JavaScript。那些JavaScript框架都想这样做，但没有人觉得这样容易，他们总是被重新设计。应该做些什么去规范它在一个较高的水平。有一个巨大的速度优势，我们不应该为这样一种常见设计模式的JavaScript程序。网页的加载速度应在60fps，就像本地应用一样快速响应。

原文：https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Mar/0071.html