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