我如何优化这个 javascript 代码（电子表格 getelementid）

Question

我一直在使用js代码来访问Google 电子表格 API ，我可以在其中更改任何单元格，刷新后值会发生变化。

该网站是使用Elementor构建的，我想做的是在整个页面中使用一个单一的源链接<script src="spreadsheetlink"> ，而不是在每个元素中都使用它。

现在，设置如下：

这段代码在页脚中的片段

<script>
var onDataLoaded = (data) => {
  const b1Content = data.feed.entry.find((entry) => entry.title.$t == 'B1').content.$t
  document.getElementById('menulh').innerHTML = b1Content
}
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1BJejAeuUJPK76M4cEcqZvOqWiuvO4zQMusWBCMacgCI/1/public/basic?alt=json-in-script&callback=onDataLoaded"></script>

我添加到Elementor的每个 html 元素都是这样的

<p style="display:inline-block;font-weight:600">
  <a style="color:black" id="zpp"></a>
</p>
<script>
  var onDataLoaded = (data) => {
    const a4content = data.feed.entry.find((entry) => entry.title.$t == 'A4').content.$t
    document.getElementById('zpp').innerHTML = a4content
  }
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1BJejAeuUJPK76M4cEcqZvOqWiuvO4zQMusWBCMacgCI/1/public/basic?alt=json-in-script&callback=onDataLoaded"></script>

如果我想复制页面，我将不得不更改每个元素中的每个电子表格链接，我想要的是页面中只有一个源，并且元素从那里获取它。

这是我要访问的网站： tomasperren.com.ar/prueba

Answer 1

不知道elementor是什么，也不知道如何将脚本添加到页面。 您甚至可以为页面上的每个项目手动操作。 没有看到你的代码就无法帮助你。

而且我不确定您要准确优化什么：

你的速度
代码速度
代码大小
等等等等？

但有一件事是肯定的：而不是

<script>
 var onDataLoaded = (data) => {
   const a4content = data.feed.entry.find((entry) => entry.title.$t == 'A4').content.$t
    document.getElementById('zpp').innerHTML = a4content
 }
</script>
...
<script>
 var onDataLoaded = (data) => {
   const a4content = data.feed.entry.find((entry) => entry.title.$t == 'C4').content.$t
    document.getElementById('zxpp').innerHTML = a4content
 }
</script>
...

你可以写

<script>
 var makeFuncOnDataLoaded = (id, cell) => (data) => {
   const a4content = data.feed.entry.find((entry) => entry.title.$t == cell).content.$t
    document.getElementById(id).innerHTML = a4content
 }
</script>
...
<script>
 var onDataLoaded = makeFuncOnDataLoaded('zpp', 'A4')
</script>
...
<script>
 var onDataLoaded = makeFuncOnDataLoaded('zxpp', 'C4')
</script>
...

更新

经过一番思考，我可以猜测（但这只是猜测）您需要用以下内容替换所有脚本：

<script>
  var onDataLoaded = (data) => {
    const id_to_cells_mapping = [
      [ 'menulh': 'B1' ],
      [ 'zpp', 'A4' ],
      [ 'zxpp', 'C4' ],
      ...
    ]
    id_to_cells_mapping.forEach(([id, cell]) => {
      const a4content = data.feed.entry.find((entry) => entry.title.$t === cell).content.$t
      document.getElementById(id).innerHTML = a4content
    })
  }
</script>
<script src="https://spreadsheets.google.com/feeds/cells/1BJejAeuUJPK76M4cEcqZvOqWiuvO4zQMusWBCMacgCI/1/public/basic?alt=json-in-script&callback=onDataLoaded"></script>

并把它放在<head>

我如何优化这个 javascript 代码（电子表格 getelementid）

问题描述

1 个解决方案

解决方案1
0 2021-02-28 09:40:08

更新

我如何优化这个 javascript 代码（电子表格 getelementid）

问题描述

1 个解决方案

解决方案1 0 2021-02-28 09:40:08

更新

解决方案1
0 2021-02-28 09:40:08