当前位置：首页 > news >正文

前端-JavaScript简介JavaScript模块化

news 2025/10/2 7:03:53

一、JavaScript介绍

我们已经学习了HTML、CSS的基础内容，我们知道HTML负责网页的结构，而CSS负责的是网页的表现。而要想让网页具备一定的交互效果，具有一定的动作行为，还得通过JavaScript来实现。那今天,我们就来学习JavaScript，这门语言会让我们的页面能够和用户进行交互。

那什么是JavaScript呢 ?

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
组成：
- ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
- DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

备注：ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。

二、开发工具

我们需要学习一款前端专业的开发工具VS Code。

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。

官网： https://code.visualstudio.com

三、引入方式

同样，js代码也是书写在html中的，那么html中如何引入js代码呢？主要通过下面的2种引入方式：

第一种方式：内部脚本，将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

<body><!-- 页面内容 --><script>alert("Hello World");</script>
</body>

第二种方式：外部脚本，将JS代码定义在外部 JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签
引入外部js的<script>标签，必须是双标签

例子：

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

四、JS模块化

所谓JS模块化，指的是JS提供的一种，将JavaScript程序拆分位若干个可按需导入的单独模块的机制。

比如，我们前面实现的表单校验的案例，我们是可以把JS代码单独的抽取到一个js文件中，然后在html中引入对应的js文件即可，这样做，便于管理、提升代码的复用性。具体操作如下：

4.1 在html中，引入JS文件

在html中，引入JS文件，可以直接使用 <script src=".."></script> 来引入。
step1. 定义一个js文件，命名位 check.js

//在鼠标离开焦点时, 校验输入框内容的长度 .
//校验用户名
function checkUsername(){ //true, 合法; false, 不合法;let flag = true;let usernameValue = document.querySelector('#username').value;let errMsg = "";if(!/^\w{4,16}$/.test(usernameValue)){errMsg = "用户名不合法";flag = false;}document.querySelector('#name_msg').innerHTML = errMsg;return flag;
}
document.querySelector('#username').addEventListener('blur', checkUsername)//校验密码
function checkPhone(){ //true, 合法; false, 不合法;let flag = true;let phoneValue = document.querySelector('#phone').value;let errMsg = "";if(!/^1[3-9]\d{9}$/.test(phoneValue)){errMsg = "手机号不合法";flag = false;}document.querySelector('#phone_msg').innerHTML = errMsg;return flag;
}
document.querySelector('#phone').addEventListener('blur', checkPhone)//在表单提交时, 判断是否所有的输入框输入的值合法 .
document.querySelector('form').addEventListener('submit', (e)=> {if(!checkUsername() || !checkPhone()){alert('表单校验失败, 不能提交表单')e.preventDefault();}
})

step2. 在html文件中，如果需要用到上述的JS代码，直接在 script 标签中引入该js即可。

<!DOCTYPE html>
<html><head><title>表单</title><style>label {display: inline-block;width: 80px;text-align: right;margin-right: 10px;}input {width: 250px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;margin-bottom: 10px;}.btn {width: 150px;}.tip {color: #ff0000;font-size: 12px;}</style>
</head><body><div><h1>用户注册</h1><form><label for="username">用户名：</label><input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符"><span class="tip" id="name_msg"></span> <br><label for="phone">手机号：</label><input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位"><span class="tip" id="phone_msg"></span><br><input type="submit" value="提交" class="btn"><input type="reset" value="重置" class="btn"></form></div><script src="./js/check.js"></script>
</body></html>

OK，那这是在html中，引入JS文件，可以直接使用 <script src=".."></script> 来引入。那如果是在一个js文件中，我需要用到另外一个js文件中的方法呢。那此时该如何实现呢？

4.2 在一个js文件中使用另外一个js文件中的方法

那在JS中，就给我们提供了模块化导入、导出的操作，我们可以通过 export 关键字，来导出模块。然后在别的需要用到的地方，通过 import 关键字导入模块。

如下所示：

step1. checkFn.js 中定义是校验方法

在变量前面加上 export 代表，我们要将该变量、函数、对象导出为一个模块。别的js中要想使用，就可以 import 导入了。

export function checkUsername(){ //true, 合法; false, 不合法;let flag = true;let usernameValue = document.querySelector('#username').value;let errMsg = "";if(!/^\w{4,16}$/.test(usernameValue)){errMsg = "用户名不合法";flag = false;}document.querySelector('#name_msg').innerHTML = errMsg;return flag;
}export function checkPhone(){ //true, 合法; false, 不合法;let flag = true;let phoneValue = document.querySelector('#phone').value;let errMsg = "";if(!/^1[3-9]\d{9}$/.test(phoneValue)){errMsg = "手机号不合法";flag = false;}document.querySelector('#phone_msg').innerHTML = errMsg;return flag;
}

step2. check.js 中定义的是校验的事件监听

那在check.js中需要用到 checkUsername、checkPhone函数，就可以通过 import 关键字将其导入进来。

import {checkUsername, checkPhone} from './checkFn.js'//1. 校验用户名 - 失去焦点时校验 - blur
document.querySelector('#username').addEventListener('blur', checkUsername)//2. 校验手机号
document.querySelector('#phone').addEventListener('blur', checkPhone)//3. 表单提交的时候 - 校验整个表单 - submit
document.querySelector('form').addEventListener('submit', function(event){//判断用户名及手机号是否合法, 如果不合法, 提示错误信息;if(!checkUsername() || !checkPhone()){alert('表单数据不合法');//组织表单默认的提交事件event.preventDefault();//组织事件的默认行为}
})

step3. xxx.html 中就是html的基础代码样式

注意：如果我们使用到了 export, import 这种模块化的js，那在通过 <script src="..."></script> 在引入JS文件时，必须指定 type="module" 属性，表名我们使用的是模块化的JS。如下所示：

<!DOCTYPE html>
<html><head><title>表单</title><style>label {display: inline-block;width: 80px;text-align: right;margin-right: 10px;}input {width: 250px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;margin-bottom: 10px;}.btn {width: 150px;}.tip {color: #ff0000;font-size: 12px;}</style>
</head><body><div><h1>用户注册</h1><form><label for="username">用户名：</label><input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符"><span class="tip" id="name_msg"></span> <br><label for="phone">手机号：</label><input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位"><span class="tip" id="phone_msg"></span><br><input type="submit" value="提交" class="btn"><input type="reset" value="重置" class="btn"></form></div><!-- 模块化JS引入方式，需要指定type="module" --><script type="module" src="./js/check.js"></script>
</body></html>