前端-JavaScript简介JavaScript模块化

原创已于 2025-10-01 11:09:48 修改 · 1.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2025-10-01 11:08:07 首次发布

前端专栏收录该内容

28 篇文章

订阅专栏

一、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>