有没有客观的理由偏好基于模板的范式到基于函数的标记范式?

时间:2017-10-24 16:57:01

标签: javascript html templates architecture frameworks

大多数现有Web框架都使用模板范例进行标记。您编写的内容大多与HTML类似,但有各种DSL附加组件,例如框架在管理控制流时挂钩的自定义HTML属性,动态内容的占位符语法等等。

以下是常用模板方法的一些示例:

Django templates

{% extends "base_generic.html" %}

{% block title %}{{ section.title }}{% endblock %}

{% block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a href="{{ story.get_absolute_url }}">
    {{ story.headline|upper }}
  </a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

Vue templates

<div v-bind:id="dynamicId">
  <!--This markup will be the template of the root instance-->
  <h1 v-if="seen">My Vue.js App</h1>
  <p> {{ message.split('').reverse().join('') }}</p>
  <NonStandardMarkupIsFineHere/>
</div>

Angular templates

<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">
  {{hero.name}}
</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

相比之下,像React,Cycle或Elm架构这样的框架使用基于函数的范例。您可以调用直接更新DOM或中间虚拟DOM的函数。

以下是一些例子:

Cycle.js

  const sinks = {
    DOM: sources.DOM.select('input').events('click')
      .map(ev => ev.target.checked)
      .startWith(false)
      .map(toggled =>
        div([
          input({attrs: {type: 'checkbox'}}), 'Toggle me',
          p(toggled ? 'ON' : 'off')
        ])
      )
  }

React.js:

const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

在框架之间进行选择时,这通常是一个决定因素。

我的问题是:是否有任何客观理由偏好彼此,或者这种差异仅仅是主观偏好?是否有更适合模板语言系统的常见用例,写作或推理比基于功能的系统要难得多吗?

例如,我可以看到被提议的是模板系统“只是HTML”,所以它们更简单,更熟悉。但是,事实并非如此。它们不仅仅是HTML,它们随时都是由DSL概念扩展的。标记充满了逻辑,只有它以字符串和其他非html结构的形式编写。此外,许多基于函数的范例提供了诸如JSX之类的语法糖,其外观与大多数模板语言一样接近html。

1 个答案:

答案 0 :(得分:0)

这个想法是模板系统越接近结果输出,它就越是“模板”,而不是应用程序。模板由它的定义尽可能地类似于成品。这有助于人们在他们编写的代码与生成的HTML之间建立认知桥梁。

这个差距越大,理解生成的HTML就需要更抽象的认知思维。这对某些人来说可能很容易,对其他人来说可能更难,但它仍然是一种不应该被忽视的认知负担。

我们使用高级语言而不是低级语言的原因相同。它减少了软件开发人员的认知负担,使他们可以专注于实现应用程序的目标。