從外部 javascript 渲染 HTML

Question

我的任務是在客戶的網站上顯示我的產品列表。 我的想法是在客戶的網站中包含我的 JavaScript 文件，這樣調用 function，

    <div id="my-product-list"></div>

    <script src="https://example.com/myscript.js"></script>
        const myproducts = new Products('#my-product-list', 12323);
        myproducts .setup();
    </script>

這是實現這一目標的正確方法嗎？

如果是，我如何為我的元素包含 css 樣式（ media查詢）？

如果不是，最好的方法是什么？

Answer 1

是的。 這當然是實現您所需要的一種方式。

要包含 styles，您只需以與引用腳本相同的方式鏈接到 styles。

客戶網站

<div id="my-product-list"></div>

<script src="https://example.com/myscript.js"></script>
<script>
  initProducts('#my-product-list', '31337')
</script>

<link href="https://example.com/mystyles.css" rel="stylesheet">

myscript.js

function initProducts(selector, clientId) {
  const baseEl = document.querySelector(selector)
  if (baseEl) {
    fetch('http://example.com/products/' + clientId)
      .then(response => response.json())
      .then(data => {
        baseEl.innerHTML = data
      });
  } else {
    console.warn('baseEl not found', selector)
  }
}

mystyles.css

#my-product-list {
  ...
}

#my-product-list div {
  ...
}

@media (min-width: 600px) {
  #my-product-list {
    ...
  }
}

Answer 2

執行您的建議是一個可行的解決方案，但是您擁有它的方式將無法工作，因為您要結束腳本標簽，而不是為您的 function 調用啟動它。

它應該是這樣的：

    <div id="my-product-list"></div>

    <script src="https://example.com/myscript.js"></script>
    <script>
        const myproducts = new Products('#my-product-list', 12323);
        myproducts.setup();
    </script>