Hướng dẫn how to render html file in javascript - làm thế nào để hiển thị tệp html trong javascript

Là một nhóm các nhà phát triển WordPress, chúng tôi thường vấp phải một nhiệm vụ mà chúng tôi cần yêu cầu một bộ dữ liệu bằng AJAX và kết xuất nó cho trình duyệt.

Hầu hết thời gian chúng tôi làm như thế này:

Nó hoạt động. Tuy nhiên, rất khó để duy trì mã này và hầu hết thời gian, đánh dấu HTML mà chúng ta cần sử dụng phức tạp hơn nhiều so với ví dụ trên. Khi nhiều cập nhật và thay đổi xảy ra trong đánh dấu, chúng tôi thấy ngày càng khó làm việc với mã này.

Nhập WP.Template

Nếu bạn đã quen thuộc với UnderCore.js hoặc {{Mustache}},

$ npm -v
7.6.3 ## installed npm version

Vì vậy, làm thế nào để chúng ta sử dụng nó?

Tạo và hiển thị mẫu đánh dấu HTML của bạn

Chỉ cần với điều này, chúng ta có thể ngay lập tức thấy việc duy trì đánh dấu HTML của chúng ta dễ dàng như thế nào.

Ghi chú

1. Điều quan trọng là mẫu đánh dấu HTML được bọc với

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

$ npm -v
7.6.3 ## installed npm version

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Tải WP-Util

Mã cho

$ npm -v
7.6.3 ## installed npm version

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

Bạn có thể làm điều này bằng cách thêm

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send("Hello world!");
});

JavaScript

Một vài ghi chú nữa…

1. Chúng tôi bỏ qua

$ npm -v
7.6.3 ## installed npm version

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send(" server Response
 This page was render direcly from the server 
Hello there welcome to my website
");
});

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send(" server Response
 This page was render direcly from the server 
Hello there welcome to my website
");
});

$ npm -v
7.6.3 ## installed npm version

const express = require("express");
const app = express();

app.listen(3000, () => {
  console.log("Application started and Listening on port 3000");
});

app.get("/", (req, res) => {
  res.send(" server Response
 This page was render direcly from the server 
Hello there welcome to my website
");
});

$ npm -v
7.6.3 ## installed npm version

Sự kết luận

Mặc dù chúng tôi đã sử dụng

$ npm -v
7.6.3 ## installed npm version

Ví dụ: bạn có thể tiếp cận ví dụ của chúng tôi như thế này:

JavaScript

Mẫu

$ npm -v
7.6.3 ## installed npm version

Bạn nghĩ sao? Những lời khuyên này sẽ giúp bạn một cách tốt hơn, sạch hơn để hiển thị HTML với JavaScript? Để lại cho chúng tôi một bình luận dưới đây. Cần một nhóm để cung cấp các giải pháp như thế này cho dự án trang web của bạn? Liên hệ với chúng tôi hôm nay.