这是一个新兴Web应用设计，通过JSON API动态加载前端JavaScript框架里的内容。这是单页应用程序的Web设计模式。大多数人都采用这种方式，因为加载一个API的负载时间（10-50ms）比加载全HTML页面（300-1500ms）要快很多。
这是最常见的，我们可以实现直接通过HTML的浏览器，让用户可以动态运行无JavaScript的单页应用程序？
我的目标将是一个高速响应的Web体验无需加载JavaScript。
这可以通过链接锚元素JSON / XML做（或定义一个新的API端点），在浏览器内部加载数据到一个新的数据结构，以及浏览器替换任何数据，在需要时加载DOM元素。初始数据（以及标准误差响应）可以在顶部请求，也可以为后来的需要替代。
HTML正成为一个足够吸引人的语言，所有的内容，可以动态加载而不需要JavaScript。
示例网页：
—-
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 42 43 44 45 46 47 48 49 | <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
