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

这是一个新兴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>

—-

希望这能让它清楚。

点击一个链接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