直截了当的解决方案

以下是将数据直接发送到html（template-part.php）的示例：

<body>
<!-- HTML GOES HERE -->

<script> const someDataJSON = <?= json_encode($someBackEndData); ?></script>
<script src="/path/to/script/that/rely/on/someDataJSONObject.js"></script>
</body>

假设$someBackEndData是一个有效的json-serialization-ready数据数组。我们用模板传递它，所以这里发生的是我们将带有模板的JSON发送到客户端。一旦浏览器呈现模板，someDataJSON就可用于所有脚本 globaly 。

优点/缺点：

+ 将json数据发送到前端的最快方式
+ 无其他请求
+ 在浏览器呈现HTML页面后加载
- 污染全球范围
- 难以维护：可能有很多其他模板部分以及以这种方式设置的多个变量。可能很难跟踪JSON对象的初始化位置

但我们真的需要那个速度吗？

JS框架通常需要时间来加载其核心并编译表达式和模板（AngularJS及其$ compile等）。因此，加载的数据不需要快速，因为前端应用程序仍需要一些时间来启动。在此之前：没有人可以处理我们加载的数据

在应用程序的最开始通过附加请求加载

模板使用example.php：

<!-- template body here -->

<script src="/path/to/webpack/parseljs/rollup/whatever/bundle.js"></script>
</body>

输入换bundler.js：

import angular from 'angular';

// declare variable to hold our data
const JSONdata = [];

// fetch our data
fetch('/path/to/jsondata/')
    .then(data => JSONdata = data.json())

angular.module(/*......... APPLICATION CODE

优点/缺点：

+ 数据在脚本中加载：可以跟踪和管理数据源
- 其他ajax请求
- 污染全球范围

我们可以通过使我们的应用程序延迟加载来摆脱全球范围的污染：

fetch('/path/to/jsondata/')
    .then(data => {
        const JSON = data.json();

        angular.module('ModuleName', [...])
            .constant('jsonData', JSON)
            /* application code */
    });

可能的缺点：

- 提高整个应用的加载速度，因为它只会在then声明中执行
- *如果承诺失败，应用程序将无法加载 **（实际上，可以通过在承诺的.finally()块内启动我们的应用程序来处理它，这只是实现细节）

很高兴听到您的建议以及建设性的批评。

JS - 将数据传递到前端

直截了当的解决方案

但我们真的需要那个速度吗？

在应用程序的最开始通过附加请求加载

0 个答案: