大多数现有Web框架都使用模板范例进行标记。您编写的内容大多与HTML类似,但有各种DSL附加组件,例如框架在管理控制流时挂钩的自定义HTML属性,动态内容的占位符语法等等。
以下是常用模板方法的一些示例:
{% 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 %}
<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>
<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的函数。
以下是一些例子:
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')
])
)
}
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。
答案 0 :(得分:0)
这个想法是模板系统越接近结果输出,它就越是“模板”,而不是应用程序。模板由它的定义尽可能地类似于成品。这有助于人们在他们编写的代码与生成的HTML之间建立认知桥梁。
这个差距越大,理解生成的HTML就需要更抽象的认知思维。这对某些人来说可能很容易,对其他人来说可能更难,但它仍然是一种不应该被忽视的认知负担。
我们使用高级语言而不是低级语言的原因相同。它减少了软件开发人员的认知负担,使他们可以专注于实现应用程序的目标。