JavaScript代码怎样引入到HTML中？

avaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
1.内部方式
内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中，示例代码如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨，欢迎来传智播学习前端技术！')
   </script>
 </body>
 </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script>标签的 <src>属性引入，示例代码如下：

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

网页中编写JavaScript代码时，需要先引入JavaScript代码。JavaScript代码有3种引入方式，分别是行内式、嵌入式和外链式，下面分别进行讲解。

1.行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，示例代码如下：

<a href="javascript：alert('Hello');">test</a>

需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。

(1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。

(2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。

2.嵌入式

嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型，HTML.5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下：

<script>
    JavaScript代码
</script>

3.外链式

外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件，示例代码如下：

<script src="test.js"></script>

上述代码表示引入当前目录下的tesL.js文件。需要注意的是，外链式的标签内不可以编写JavaScript 代码。

为了帮助初学者更好地理解外链式，下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件，引入Example02.js文件，具体代码如例1-2所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="Example02.js"></script>
</body>
</html>

标签的src属性设置了要引入的文件为Example02.js。

创建Example02.js文件，在该文件中编写如下代码：

alert ('Hello JavaScript');

保存代码，在浏览器中访问Example02.html文件，页面效果与例1-1相同。

以上讲解了JavaScript的3种引入方式。现代网页开发中提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScrixt这3部分代码，这样更有利于文件的维护。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScrigt代码时，推荐使用外链式。外链式相比嵌入式，具有以下3点优势：

(1)外链式存在于独立文件中，有利于修改和维护，而嵌人式会导致HTML代码与JavaScript代码混合在一起。

(2)外链式可以利用浏览器缓存提高速度。例如，在多个页面中引入相同的JavaScript文件时，打开第1个页面后，浏览器将JavaScript文件缓存下来，下次打开其他页面时就不用重新下载该文件了。

(3)外链式有利于HTML页h代码结构化，把大段的JavaScript代码分离到HTML页面之外，既美观，也方便文件级别的代码复用。

着现代 Web 开发，我们要么使用 require 要么使用 import 引用 JavaScript 依赖项。有时，我们将两者结合使用。

但是，你知道为什么这两者都存在吗？使用一种或另一种时的最佳实践是什么？

在本文中，我将讨论使用 require 和 import 并回答其中一些常见问题。

背景——JavaScript 模块类型

在讨论 require 和 import 之前，有必要对 JavaScript 模块有一定的了解。那么，让我们看看有哪些不同类型的 JavaScript 模块可用。

1. AMD——异步模块定义

引入了 AMD 模块以使模块更加前端友好。它们不需要任何打包器，并且所有依赖项都是动态解析的。

AMD使用 require 函数用于加载外部模块，并且能够充当 CommonJS 模块的包装器。

define("exampleModule", [], () => {
   return {
     print: () => console.log("Hello World!");
   }
}
define("main", ["require", "exampleModule"], (require) => {
  const exampleModule= require("exampleModule");
  exampleModule.print(); 
});

但是，随着 ES 模块的引入，AMD 的使用量急剧减少。

2. CommonJS 模块

CommonJS 是 NodeJS 用来在模块中封装 JavaScript 的标准。 module.exports用于导出 CommonJS 模块，以及 import 函数用于将模块包含到单独的文件中。

尽管 CommonJS 模块在 NodeJS 中被广泛使用，但在前端开发中并没有使用它们。这背后的主要原因是require函数的同步行为。

但是，NodeJS 从 v13 开始才开始支持 ES 模块。在那之前，大多数 NodeJS 模块，包括 NPM 库，都是使用 CommonJS 模块开发的。

因此，CommonJS 模块仍然在开发人员中广泛使用。

而且，CommonJS 模块与 ES 模块同样重要，我将在本文接下来的部分中讨论更多。

3.UMD——通用模块定义

UMD 是 AMD 和 CommonJS 的组合。它使用了 AMD 的 CommonJS 语法和异步加载技术，使其适用于服务器端和客户端。

UMD 在 Webpack 等打包器中用作回退模块，下面显示了一个简单的 UMD 模块示例：

(function (root, factory) {
        if (typeof define === "function" && define.amd) {
            define(["jquery"], factory); // AMD } else if (typeof exports === "object" ) { module.exports = factory(require("jquery")); //CommonJS } else { root.returnExports = factory(root.jQuery); } 
        })(this, function ($) {
        function exampleFunction() {}
        return exampleFunction;
    });

4. ESM — ES 模块

ES Modules (ECMAScript Modules) 是 JavaScript 中使用的官方标准。 ES 模块使用 import和 export 处理模块的语句。它解决了 CommonJS 的最大限制之一，即同步加载。

在引入 ES Modules 之后，开发者之间有很多争论，考虑到与 CommonJS 的兼容性。但是，开发人员已经适应使用这两种方法，我们将在接下来的部分中讨论更多详细信息。

已经了解了 JavaScript 模块的背景，那么让我们继续讨论 require 和 import.

“Require” 是 NodeJS 内置的

require通常与 NodeJS 一起使用来读取和执行 CommonJS 模块。

这些模块可以是内置模块，如 http或自定义编写的模块。使用 require，可以将它们包含在 JavaScript 文件中并使用它们的函数和变量。

// 内置模块 
const http= require('http'); 
// 本地模块 
const getBlogName = require('./blogDetails.js')

但是，如果要使用 require 要获取本地模块，首先需要使用 module.exports 导出它们.

例如，假设您有一个名为 blogDetails.js，并且您需要使用该文件中的函数 index.js文件。

// blogDetails.js
const getBlogTitle = (name, author) => {
    return name + " by " + author;
 }
 modules.export = getBlogTitle;

// index.js
const getBlogTitle = require('./blogDetails.js');

var title = getBlogTitle ('Require vs Import in JavaScript', 'Chameera Dulanga');

还可以使用一次导出多个模块 modules.export 如下：

const getBlogTitle = (name, author) => { 
   return name + " by " + author;
}
const getBlogContent = () => { 
   return content
}
modules.export = {
  getBlogTitle,
  getBlogContent,
};

注意：如果最后不是使用 modules.export，可以附加 exports 。例如： exports.getBlogContent = () => {};

我想现在你明白什么时候应该使用 require以及它是如何工作的。接下来让我们看看如何 import 。然后我们将能够以更深层次的理解来比较和对比它们。

“import”是在 ES6 模块中引入的

import 是一个 ES 模块，并带有 export，它们被称为 ES6 import 和 export.

我们不能用 import 或导出到 ES 模块之外。

试图 import ES 模块之外是一个常见的开发人员错误。

如果我举同样的例子，我需要做的唯一改变就是修改 modules.export到 export default.

const getBlogTitle = (name, author) => { 
   return name + " by " + author;
}

export default getBlogTitle;

然后我们可以使用 import 将此文件包含在我们的 index.js文件。

import getBlogTitle from "./blogDetails.js";

var title = getBlogTitle ('Require vs Import in JavaScript', 'Chameera Dulanga');

注意：类似于 require，还可以通过将导出附加到每个函数定义来单独导出每个函数。
例如： export const = getBlogContent = () => {};

所以，我想你现在明白应该如何以及何时使用 require和 import。但是，这还不是全部；它们的功能和用法存在一些显着差异。是时候进行比较了。

require Vs import

require 和 import 都用于包含模块。但是它们有几个应该注意的重要功能。

1. require 语句可以在代码的任何地方调用

import 语句只能在文件的开头定义。定义一个 import 其他地方的语句会给你一个错误或自动转移到文件的开头。

2. require 可以有条件地调用

声明 require 时，当加载的模块名称未预定义时，允许有条件地或动态地加载模块。

例如，你可以调用 require 在函数或 if 条件中，如下所示：

if(articleCount>0){
   const getBlogTitle = require(‘./blogDetails.js’);
}

require语句具有这种灵活性，因为它们被视为函数。它们在运行时被调用，在此之前没有办法知道任何事情。但， import 语句是静态的，我们不能有条件地或动态地使用它们。

注意：由于 import 语句是静态的，所以可以在运行应用程序之前检测到任何错误

3. import 语句是异步的

在小型应用程序中，同步或异步可能不会发挥主要作用。但是，如果我们考虑大型应用程序，则会使用数百个模块。所以，如果你使用 require, 模块将被一一加载和处理。

而 import 语句通过异步工作解决了这个问题，这比 require 在大规模应用中更能发挥作用。

4. ES 模块是未来

正如我们所讨论的，ES 模块系统是作为维护客户端 JavaScript 模块的标准引入的。 TypeScript 也采用了它，并添加了用于定义 Type 的内容。因此，我不认为 require可以再次取代 ES，因为它已成为开发人员中广泛使用的标准。

但是由于有大量的 NodeJS 模块和库是用 CommonJS 编写的，我们不能保留 require完全放在一边。所以我们必须相应地使用它们。

如果你使用的是 TypeScript，则可以通过配置 tsconfig.json文件。例如，假设我们需要输出一个使用 CommonJS 的代码版本。

需要做的就是创建一个新的 tsconfig 通过扩展原始文件用于 CommonJS 输出 tsconfig文件并修改 module下参数 CompilerOptions.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./lib/cjs"
  },
}

注意：还可以使用 Webpack 等构建工具将 ES 模块转换为 CommonJS 模块。

以下表格为比较两者

特征	require	import
语法	const x=require()	import x from './'
模块	CommonJS	ES
异步	不支持	支持

在线咨询

上一篇：网站内部网页怎样优化排名？
下一篇：java将html转为pdf

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商