如果我们一直有更好的HTML-in-JS语法会怎么样?

2020-05-11 23:34:18

⇦我有一个理论,认为1995年犯了一个严重的错误--决定不用一种整洁、简洁和声明的方式来表示JavaScript中的HTML元素。

在这篇文章中,我将描述事情的现状,展示几个对javascript语法的非常小的补充,它们可能已经产生了很大的不同,然后再谈一谈它带来的影响。在这篇文章中,我将描述目前的状况,展示几个对javascript语法的非常小的补充,它们可能会带来很大的不同,然后再谈论其影响。

const myLi=Name=>;`<;li>;我的名字是<;em>;${name}<;/em>;<;/li>;`const Myul=Names=>;`<;ul class=";my-ul";>;${names.map(myLi).join(';';)}<;/ul>;`。

这是垃圾,原因很明显--编写字符串很容易出错,没有输入/打印等等。然后我们必须将它们转换为不太优雅的元素:

当然,也有各种各样的库,从字符串模板库(如把手)到可编译的库(如.jsx)。

类型HtmlNode={Tag:String,Attributes:{[Key:String]:String|Function},子项:(HtmlNode|String)[]}。

{Tag:";Button";,Attributes:{";id";:";Baz";,";class";:";Foo bar";,";data";:";1";,";onclick";:F,},Children:[";Hello";,{tag:";em";,属性:{},子项:[";here";],}]}。

HTML(lang=";EN";)head title=pageTitle body h1.一些类Jade-node模板引擎#CONTAIN-如果(YouAreUsingJade)你很棒

这看起来不错,主要问题是我们在编程构造上有点局限,例如,我们如何使<;h1>;在某些条件下隐藏额外的类?Jade通过3种不同的方式指定类来绕过这个问题。与其想出一种特殊的模板语言,不如稍微扩展一下普通的js语法。

好的,让我们来看看上面的例子。我不会过多地强调这一点的正确性,因为我并不是建议我们更改所有代码,而只是更改可能的代码。

因此,下面是允许现有js对象语法以相当简洁的方式表示html节点的事项清单:

除了键:值对之外,对象还允许拖尾值。我想可以用foo.~或一些特殊的构造来访问它们。

它们获得一个可选标签(在本例中为按钮)。如果您做过很多JSON反序列化工作,那么标记似乎是个好主意(它们可以帮助您将数据映射到类型),看看它们在edn-nices中是如何使用的(通过自定义命名空间)。

就是这样。我们的javascript将使用它作为主数据类型(其他所有内容都将保持不变)。也许,我们会开始(重新)编写所有类似XML的html,以便也使用这种语法。

Const Names=[";Barry&34;,";Lynette&34;]Const myLi=name=>;li{';我的名字是';em{name}}const Myul=Names=>;ul{class:[';my-ul';].names.map(MyLi)}app.get(';/';,(req,res)=>;res.。

正文{class:";language-javascript";a{href:";index.html";img{style:";Height:2EM";src:";pic.png";}";⇦";}H1{";如果我们最好使用代码{";html";}";-in-&##。}句法一直?p我有一个理论,1995年犯了一个严重的错误.";}}。

JSON和HTML之间没有区别。(API设计的下游后果会是什么?)。

我们的html只是结构化的数据,这会不断地让我们目不转睛地看着我们。

我们就不会有像淘汰赛(还记得那一次吗?)那样在html中使用奇怪逻辑的年代了。

我们在1996年可能会有类似的反应,而那只会是废话,很明显,我们会像诅咒一样做这件事。(这句话的意思是:“如果是在1996年,我们可能会有类似的反应,而那只会是废话,显然我们会像诅咒一样做这件事)。”

我们本可以拥有一个可组合的库,用于日期选择器、情态函数等,而不必使用这个庞大的库。

没有人会使用handlebar/jinsa/twig string munging库来制作html(至少在节点世界中是这样)。

html<;form>;->;json阻抗不匹配(尝试将嵌套数据描述为表单)现在可能已经正确排序。

本世纪初,每个人的一切都是XML的计划可能会更成功。(这会是件好事吗?)

我认为这是一个足够好的解决方案,但是它与您的标准js对象的语法不同这一事实鼓励人们将VDOM对象视为不是普通数据,但事实并非如此。记谱法本身就是一种思维工具。

我们的另类历史从未发生过,我更喜欢无聊的超级脚本风格,一切都是代码。