要引入外部js文件，需使用
引入外部JS文件，简单来说，就是用标签的src属性指向你的JS文件。这就像给你的HTML页面搭桥，让它可以调用外部写好的JavaScript代码。
解决方案
要在HTML中引入外部JS文件，你需要使用标签，并设置其src属性。标签通常放在的末尾，或者标签内。放在末尾的好处是，可以确保HTML内容加载完毕后再执行JS代码，避免因JS代码尝试操作尚未加载的DOM元素而引发错误。
立即学习“前端免费学习笔记（深入）”；
具体步骤如下：
创建JS文件： 首先，你需要有一个包含JavaScript代码的
.js文件。例如，myScript.js。编写HTML文件： 在你的HTML文件中，找到你想引入JS代码的位置。
使用
标签： 使用标签，并设置src属性指向你的JS文件。
引入外部JS文件 这是一个标题
这是一个段落。
src属性：src属性的值是JS文件的路径。可以是相对路径（相对于HTML文件）或绝对路径（完整的URL）。执行顺序： 浏览器会按照
标签在HTML中出现的顺序执行JS代码。async和defer属性：标签还有async和defer属性，可以控制JS文件的加载和执行方式。async表示异步加载，加载完成后立即执行，可能会打乱执行顺序。defer表示延迟加载，在HTML解析完成后，按照标签的顺序执行。
async适合于不依赖于其他脚本的独立脚本，defer适合于需要按照顺序执行的脚本。如果你的脚本依赖于DOM元素或者其他脚本，defer通常是更好的选择。
外部JS文件引入后，HTML页面就可以使用JS文件中定义的函数、变量和对象了。这是一种非常常用的代码组织方式，可以提高代码的可维护性和重用性。
为什么我的JS文件引入了，但是没有生效？
JS文件引入后没有生效，可能的原因有很多，最常见的包括：
路径错误：
src属性指定的路径不正确，导致浏览器无法找到JS文件。检查路径是否正确，包括文件名、目录结构等。可以使用浏览器的开发者工具（F12）查看Network选项卡，确认JS文件是否成功加载。如果显示404错误，说明路径有问题。JS代码错误： JS代码本身存在语法错误，导致浏览器无法解析和执行。打开浏览器的开发者工具（Console选项卡），查看是否有错误信息。常见的错误包括：拼写错误、缺少分号、括号不匹配等。
加载顺序问题： JS代码在HTML元素加载之前执行，导致JS代码无法操作DOM元素。将
标签放在的末尾，或者使用defer属性，可以解决这个问题。缓存问题： 浏览器缓存了旧版本的JS文件，导致新的JS代码没有生效。清除浏览器缓存，或者在JS文件的URL后面添加一个随机数，强制浏览器重新加载JS文件。例如：
文件编码问题： JS文件的编码格式不正确，导致浏览器无法正确解析。确保JS文件使用UTF-8编码。
跨域问题： 如果JS文件位于不同的域名下，可能会出现跨域问题。需要配置服务器允许跨域访问，或者使用JSONP等技术。
其他原因： 还有一些其他可能的原因，例如：JS文件被防火墙拦截、JS文件被其他JS代码覆盖等。
如何使用console.log调试JS代码？
console.log是JavaScript中最常用的调试工具之一。它可以在浏览器的控制台（Console）中输出信息，帮助开发者了解代码的执行过程和变量的值。
使用方法非常简单：
console.log("Hello, world!"); // 输出字符串
let x = 10;
console.log(x); // 输出变量的值
let obj = {name: "John", age: 30};
console.log(obj); // 输出对象
console.log("变量x的值是：", x, "对象obj是：", obj); // 输出多个值console.log可以输出各种类型的数据，包括字符串、数字、布尔值、对象、数组等。它还可以输出多个值，用逗号分隔。
除了console.log之外，还有一些其他的console方法，可以用于不同目的的调试：
-
console.info()：输出信息，与console.log类似。 -
console.warn()：输出警告信息，通常用于提示潜在的问题。 -
console.error()：输出错误信息，通常用于指示代码中的错误。 -
console.debug()：输出调试信息，通常用于更详细的调试。 -
console.table()：以表格的形式输出数据，适用于输出数组或对象。 -
console.time()和console.timeEnd()：用于测量代码的执行时间。
console.time("myFunction");
// 执行一些代码
for (let i = 0; i < 1000000; i++) {
// do something
}
console.timeEnd("myFunction"); // 输出代码执行的时间console方法是调试JavaScript代码的强大工具，可以帮助开发者快速定位和解决问题。在开发过程中，应该养成经常使用console方法的习惯。
标签应该放在里还是里？有什么区别？
标签的位置会影响页面的加载和渲染。通常有两种选择：放在标签内，或者放在标签的末尾。
-
放在
标签内：- 优点： 可以尽早加载JS代码，确保JS代码在页面加载之前就准备好。
- 缺点： 可能会阻塞页面的渲染，导致页面加载速度变慢。如果JS代码尝试操作尚未加载的DOM元素，可能会引发错误。
-
放在
标签的末尾：- 优点： 不会阻塞页面的渲染，可以提高页面加载速度。可以确保HTML内容加载完毕后再执行JS代码，避免因JS代码尝试操作尚未加载的DOM元素而引发错误。
- 缺点： 可能会延迟JS代码的执行，导致页面交互延迟。
选择哪个位置取决于具体情况：
- 如果JS代码不依赖于DOM元素，或者使用了
defer或async属性，可以放在标签内。 - 如果JS代码依赖于DOM元素，并且希望提高页面加载速度，应该放在
标签的末尾。
总结：
通常情况下，推荐将标签放在标签的末尾，以提高页面加载速度。如果需要尽早加载JS代码，可以使用defer或async属性。
如何处理多个JS文件的依赖关系？
当项目变得复杂时，往往需要引入多个JS文件，这些文件之间可能存在依赖关系。例如，fileA.js可能依赖于fileB.js中定义的函数或变量。处理这些依赖关系非常重要，否则可能会导致代码执行错误。
常见的处理方式包括：
-
按照依赖顺序引入： 确保依赖的JS文件在被依赖的JS文件之前引入。例如，如果
fileA.js依赖于fileB.js，应该先引入fileB.js，再引入fileA.js。
-
使用模块化： 使用模块化技术（例如：CommonJS、AMD、ES Modules）可以将JS代码分割成独立的模块，并明确声明模块之间的依赖关系。模块化可以提高代码的可维护性和可重用性，并简化依赖管理。
-
CommonJS： Node.js使用的模块化规范。使用
require()引入模块，使用module.exports导出模块。 -
AMD： RequireJS使用的模块化规范。使用
define()定义模块，使用require()引入模块。 -
ES Modules： ECMAScript标准定义的模块化规范。使用
import引入模块，使用export导出模块。
-
CommonJS： Node.js使用的模块化规范。使用
使用构建工具： 使用构建工具（例如：Webpack、Parcel、Rollup）可以将多个JS文件打包成一个或多个bundle文件，并自动处理依赖关系。构建工具还可以进行代码压缩、优化等操作，提高页面性能。
使用IIFE（立即执行函数）： 可以使用IIFE将每个JS文件包裹在一个独立的函数作用域中，避免变量冲突。
(function() {
// JS代码
})();- 使用全局变量： 可以将一些常用的函数或变量定义为全局变量，供其他JS文件使用。但是，过度使用全局变量可能会导致命名冲突和代码污染，应该谨慎使用。
选择哪种方式取决于项目的规模和复杂度：
- 对于小型项目，按照依赖顺序引入可能就足够了。
- 对于中型项目，可以使用模块化技术。
- 对于大型项目，可以使用构建工具。
如何异步加载JS文件？
异步加载JS文件可以提高页面的加载速度，避免阻塞页面的渲染。有两种常用的异步加载方式：async属性和defer属性。
-
async属性：-
async属性告诉浏览器，JS文件可以异步加载。浏览器会并行下载JS文件，下载完成后立即执行。 -
async属性不保证JS文件的执行顺序。如果多个JS文件都使用了async属性，它们的执行顺序可能会被打乱。 -
async属性适用于不依赖于其他脚本的独立脚本。
-
-
defer属性：-
defer属性告诉浏览器，JS文件可以延迟加载。浏览器会并行下载JS文件，但在HTML解析完成后，按照标签的顺序执行JS代码。 -
defer属性保证JS文件的执行顺序。 -
defer属性适用于需要按照顺序执行的脚本，或者依赖于DOM元素的脚本。
-
选择哪个属性取决于具体情况：
- 如果JS代码不依赖于其他脚本，可以使用
async属性。 - 如果JS代码需要按照顺序执行，或者依赖于DOM元素，应该使用
defer属性。
动态创建标签：
还可以使用JavaScript动态创建标签，并将其添加到HTML中，实现异步加载。
function loadScript(url, callback) {
let script = document.createElement("script");
script.src = url;
script.async = true; // 或者 script.defer = true;
script.onload = function() {
callback();
};
document.head.appendChild(script);
}
loadScript("myScript.js", function() {
// JS文件加载完成后执行的代码
console.log("myScript.js loaded");
});这种方式可以更灵活地控制JS文件的加载和执行。
