同一个js怎么

同一个JS如何在多个页面使用？ 使用外部JavaScript文件、模块化编程、CDN托管

在现代网页开发中，使用外部JavaScript文件是最常见的方式来确保同一个JS在多个页面中使用。通过将JavaScript代码抽离成一个独立的文件，并在需要的页面中引入这个文件，可以极大地提高代码的复用性和维护性。比如，将JavaScript代码保存为 script.js 文件，然后在每个 HTML 页面中通过 <script src="script.js"></script> 标签引入。以下详细介绍如何使用外部JavaScript文件实现代码复用。

一、外部JavaScript文件

外部JavaScript文件是将JavaScript代码从HTML文件中抽离出来，保存为独立的文件，这样可以在多个HTML页面中引用它，从而实现代码复用。

1.1 创建外部JavaScript文件

首先，需要将JavaScript代码保存到一个独立的文件中，比如命名为 script.js。例如，假设我们有以下JavaScript代码：

function greet() {
    alert("Hello, World!");
}

将上述代码保存到 script.js 文件中。

1.2 在HTML页面中引入外部文件

在每个需要使用该JavaScript代码的HTML页面中，通过 <script> 标签引入 script.js 文件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
</head>
<body>
    <button onclick="greet()">Click Me</button>
    <script src="script.js"></script>
</body>
</html>

通过这种方式，可以在多个页面中使用 script.js 中的代码，而且只需要维护一个JavaScript文件。

二、模块化编程

模块化编程是一种将代码分割成独立模块的编程范式，每个模块负责单一功能或特定的功能集合。这有助于提高代码的可维护性和可复用性。

2.1 ES6 Modules

现代JavaScript（ES6）引入了模块化编程的概念，使得我们可以更方便地在多个页面或项目中复用代码。

假设我们有一个 math.js 文件，其中包含一些数学函数：

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

在需要使用这些函数的文件中，可以通过 import 语句引入这些函数：

// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

在HTML文件中引入 main.js 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Example</title>
</head>
<body>
    <script type="module" src="main.js"></script>
</body>
</html>

2.2 CommonJS Modules

在Node.js环境中，常用的模块系统是CommonJS。下面是一个使用CommonJS模块系统的例子：

// math.js
exports.add = function(a, b) {
    return a + b;
};
exports.subtract = function(a, b) {
    return a - b;
};

在另一个文件中使用这些函数：

// main.js
const math = require('./math.js');
console.log(math.add(5, 3)); // 8
console.log(math.subtract(5, 3)); // 2

三、CDN托管

CDN托管是一种将JavaScript文件托管在内容分发网络（CDN）上的方式，从而提高文件的加载速度和可用性。这对于常用的库和框架尤为适用。

3.1 使用CDN托管的库

许多流行的JavaScript库和框架都可以通过CDN引入。例如，要在多个页面中使用jQuery，可以在每个HTML文件中通过CDN链接引入它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CDN Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            $("body").append("<p>Hello, jQuery!</p>");
        });
    </script>
</body>
</html>

3.2 自定义脚本的CDN托管

如果你有自定义的JavaScript文件，希望通过CDN在多个页面中使用，可以将文件上传到一个CDN服务（如Cloudflare、AWS S3等），然后在需要的页面中引入该文件。例如，假设你的自定义脚本 custom.js 已上传到CDN：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom CDN Example</title>
    <script src="https://your-cdn-url.com/custom.js"></script>
</head>
<body>
    <script>
        customFunction(); // 调用custom.js中的函数
    </script>
</body>
</html>

四、使用包管理工具

包管理工具如npm和yarn，可以帮助开发者管理和复用JavaScript代码库，从而实现代码在多个项目中的共享。

4.1 npm

npm是Node.js的包管理工具，可以用于安装和管理JavaScript库和依赖。假设我们有一个自定义的JavaScript库 my-library，可以通过npm进行管理。

首先，在项目中初始化npm：

npm init -y

然后，将 my-library 发布到npm：

npm publish

在需要使用 my-library 的项目中，可以通过以下命令安装它：

npm install my-library

在项目中引入并使用 my-library：

const myLibrary = require('my-library');
myLibrary.someFunction();

4.2 yarn

yarn是另一种流行的包管理工具，提供类似于npm的功能。以下是使用yarn管理JavaScript库的示例：

首先，在项目中初始化yarn：

yarn init -y

将 my-library 发布到yarn：

yarn publish