js代码不显示在页面中怎么做

JS代码不显示在页面中的几种方法包括：使用外部文件、内联脚本、设置display属性、使用模板引擎。 其中，使用外部文件是最常见且有效的方法。外部文件将JavaScript代码与HTML结构分离，使代码更易于管理和维护。

一、使用外部文件

通过将JavaScript代码放在一个独立的文件中，并在HTML文件中通过<script>标签进行引用，可以有效避免代码直接显示在页面中。这种方法不仅能提高代码的可维护性，还能提升页面加载速度，因为浏览器可以缓存外部的JavaScript文件。

使用外部文件的步骤：

创建外部JavaScript文件：将JavaScript代码写入一个.js文件中。例如，创建一个名为script.js的文件。

// script.js
console.log("This is an external JavaScript file.");

引用外部JavaScript文件：在HTML文件的<head>或<body>标签中使用<script>标签引入外部的JavaScript文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

二、内联脚本

在一些特殊情况下，你可能需要在HTML文件中嵌入少量的JavaScript代码。这时可以使用内联脚本，但要注意尽量减少内联脚本的使用，以保持代码的清洁和可维护性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Script Example</title>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        console.log("This is an inline script.");
    </script>
</body>
</html>

三、设置display属性

有时需要在页面中隐藏某些元素，可以通过CSS的display属性来实现。这种方法并不能隐藏JavaScript代码本身，但可以通过隐藏元素来间接达到不显示某些内容的效果。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hide Element Example</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1 class="hidden">This text is hidden</h1>
    <script>
        console.log("This text is hidden");
    </script>
</body>
</html>

四、使用模板引擎

模板引擎可以帮助将HTML结构与JavaScript代码分离，生成动态的HTML页面，并避免直接在页面中显示JavaScript代码。常用的模板引擎有EJS、Handlebars等。

示例：

假设使用Node.js和EJS模板引擎：

安装EJS：

npm install ejs

创建EJS模板：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Example</title>
</head>
<body>
    <h1><%= title %></h1>
    <script src="/path/to/script.js"></script>
</body>
</html>

渲染EJS模板：

// server.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
    res.render('index', { title: 'Hello World' });
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

五、使用JavaScript框架或库

许多现代JavaScript框架和库（如React、Vue.js、Angular等）提供了更好的方法来管理和隐藏JavaScript代码。这些框架将JavaScript代码与HTML结构进行更好的分离，使代码更具模块化和可维护性。

示例：

使用React：

安装React：

npx create-react-app my-app cd my-app npm start

创建React组件：

// src/App.js
import React from 'react';
function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}
export default App;

运行React应用：

npm start

通过使用上述方法，你可以有效地避免JavaScript代码直接显示在页面中，从而提高页面的整洁性和代码的可维护性。