如何使用 React/Angular/Vue 使 </div> 更接近它的 <div>？

Question

序幕

经验丰富的 C（比如说）开发人员会在看到 200 行函数时感到不安。他们将努力将其划分为（比如）十个功能，每个功能 20 行。粗略地说，目标是让函数永远不会跨过一个屏幕。

上下文（更新）

如果桌面（例如 C）应用程序是模块化编写的，则可以轻松定位错误。查看由 调用的所有函数main。查明罪魁祸首；看看里面; 递归。相比之下，HTML 开发是一场噩梦。当发现缺陷或需要改进时，很难缩小应该修改的范围。是否有比服务器端模板或客户端库更好的模块化工具？React/Angular/Vue 适合这份工作吗？如何？

动机

Web 开发人员面临同样的问题。开场<div>与其对应的关门之间的连线</div>永远不要穿过一个屏幕是可取的。如果不能在一个屏幕上同时看到两者，则很难对代码保持良好的心理形象。

模板引擎，比如Jinja，可用于拆分 HTML 文件。

例如，对于一个文件

<div class="main">
    <div class="left">
        <!-- many lines -->
    </div>
    <div class="right">
        <!-- many lines -->
    </div>
</div>

Jinja 的派生可用于将 HTML 文件拆分为父文件和子文件。

<div class="main">
    {% block left %}
    {% endblock %}
    {% block right %}
    {% endblock %}
</div>

{% extends "main.html" %}
{% block left %}
    <!-- many lines -->
{% endblock %}
{% block right %}
    <!-- many lines -->
{% endblock %}

这在某种程度上让人想起在 C 语言中拆分函数，这是令人满意的。长函数中丑陋的标志是缩进也变得过多，然后也很难准确地看到循环的开始和结束位置。

该D3.js同样可以使用。上面的 HTML 文件变成了一对 HTML 和 JS 文件。

<div class="main">
</div>

let main = d3.select("main")
let left = main.append("div")
               .attr("class", "left");
let right = main.append("div")
                .attr("class", "right");

（或者，对于 D3 用于此目标的工业强度用途，请参见此处。）

题

这些解决方案都感觉不对。他们感觉就像使用强大的工具来做一些非常简单的事情，而代码的新手（或缺席后的自己）不会清楚地看到否则几乎是微不足道的事情。

如何分割上面的第一个 HTML 文件，React/Angular/Vue以确保无论有多少代码进入左右 DIV <div class="main">，它的关闭</div>都只相隔几行？

Answer 1

你问了一个非常深思熟虑的问题。我觉得我的回答有点简单，所以也许我误解了你问题的目的。

React 和 Vue 利用组件来组织模板并抽象出 DOM 的复杂性。您可以在这些组件中封装任意多的行为。

从 Vue POV 来看（尽管 React 有类似的工具来实现相同的目标）...如果您想要更少的代码行，您可以封装整个“左”和“右”（它们的行为、样式、和模板）作为组件*。如果两个组件不共享任何状态或数据，这将变得非常简单明了，因为您不需要传递任何道具。

代码示例（在 Vue 中）

这是一个过于简单的示例，通常MyPage.vue会有额外的行为，例如加载、动画或设置初始应用程序的数据。

// MyPage.vue
<template>
    <div>
         <v-left/>
         <v-right/>
    </div>
</template>

<script>
import VRight from '@/components/right.vue';
import VLeft from '@/components/left.vue';

export default {
    components: {
        VRight,
        VLeft
    }
}
</script>

最后，Vue 术语中的内容可能有点过多，但本文档中提供了代码组织（适用于任何语言或框架）的一些精彩说明。

代码复杂性的衡量标准不仅在于给定函数中的代码行数，还在于实现某些功能时需要接触的地方的数量或破坏代码其他区域的风险。

前端代码最脆弱的领域之一是 CSS，这就是为什么将 CSS 与组件打包（使用 CSS-in-JS 方法或使用 Vue 的作用域样式）可以极大地提高所编写代码的稳定性和可重用性。

我希望这可以帮到你！！

*（在很多情况下这样做并不是最佳选择是有原因的）