HTML6 無(wú) JavaScript 的單頁(yè)應(yīng)用引起一片嘩然
W3.org 分享了一個(gè) casual proposal for HTML6 ,這引起了前端社區(qū)的激烈爭(zhēng)論。來(lái)自前 NSA 雇員和創(chuàng)業(yè)企業(yè)級(jí) Bobby Mozumder 提交了這份建議,聲稱一個(gè)高性能的響應(yīng)式 Web 體驗(yàn)無(wú)需 JavaScript 支持。
Mozumder 寫(xiě)道:新興的 Web 應(yīng)用通過(guò) JSON API 加載動(dòng)態(tài)內(nèi)容,這是單頁(yè)應(yīng)用的一個(gè)標(biāo)準(zhǔn)設(shè)計(jì)模式。大多數(shù)人采用這種方法是因?yàn)樗燃虞d一個(gè)完整 HTML 頁(yè)面要節(jié)省很多時(shí)間。
這種模式使用那么的廣泛,因此 Mozumder 的建議是未來(lái)瀏覽器應(yīng)該直接提供動(dòng)態(tài)加載內(nèi)容的功能,而不需要開(kāi)發(fā)者編寫(xiě)任何 JavaScript 代碼。
下面是 Mozumder 建議的 HTML 代碼:
- <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>
你覺(jué)得這個(gè)建議靠譜嗎?