.min.js文件介绍及使用示例

何为.min.js、.js文件？.js文件是JavaScript源码文件，.min.js是压缩版的js，并给出使用示例

软件开发技术爱好者

8859人浏览 · 2022-01-08 21:15:35

软件开发技术爱好者 · 2022-01-08 21:15:35 发布

.min.js文件介绍及使用示例

何为.min.js文件？

使用过JavaScript的人都会知道.js文件是JavaScript源码文件。何为.min.js文件？可能知道的人就少些，其实.min.js文件是压缩版的JavaScript文件，二者在功能上完全一致。.js文件比较大，一般用于阅读学习源码或修改源码。.min.js文件经过压缩，相对编译前的js文件体积较小，传输效率快。

【jQuery是免费、开源的一个优秀的Javascript库。它是轻量级的js库。使用过jQuery的人知道，jQuery官网就提供2种jQuery的下载，一种是jquery.js，另一种是jquery.min.js

官网jQuery

jQuery API 中文文档 https://jquery.cuishifeng.cn/】

压缩原理：

压缩：删除 js 代码中所有注释、跳格符号（由键盘上的Tab键产生）、换行符号及无用的空格，从而压缩JS 文件大小。

混淆：经过编码将变量和函数原命名改为毫无意义的命名，删除无用代码，内联函数，等价语句替换等(可以防止他人窥视和窃取源码)

如何将我们自己的.js文件转化为.min.js文件？

线上压缩工具

下面给出一个使用示例

这是一个猜数游戏，运行效果图：

先给出不压缩情况的源码，由一个HTML文件和一个JS文件组成，放在同一文件夹中：

HTML文件的名称为：猜数游戏.html ，源码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
</head>
<body>
    <button type="button" id="reset">重新开始一局游戏</button>
<br>
猜一个 1-100 的数字 <br>
请输入要猜的数字:<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数:<span id="count">0</span>
<br>
结果:<span id="result"></span>
<script src="GuessNumber.js"> 
</script>
</body>
</html>

JS文件的名称为：GuessNumber.js ，源码如下：

//1.获取需要用到的元素
let inputE = document.querySelector("#number");
let countE = document.querySelector("#count");
let resultE = document.querySelector("#result");
let btn = document.querySelector("#button");
let resetBtn = document.querySelector("#reset");

// 2.随机生成一个 1-100 的数字
let guessNumber = Math.floor(Math.random() * 100) + 1

// 3.更新猜的次数
let count = 0;//记录猜的次数

btn.onclick = function() {
     count++;
     countE.innerText = count;
 
     let userGuess = parseInt(inputE.value);//将输入框中的字符串转换成整数
     //4.对比过程
     if (userGuess == guessNumber) {
         resultE.innerText = "猜对了";
         resultE.style = "color: green;";
     } else if (userGuess < guessNumber) {
         resultE.innerText = "猜小了";
         resultE.style = "color: blue;";
     } else {
         resultE.innerText = "猜大了";
         resultE.style = "color: red;";
     }
};

//5.实现重新开始一句游戏
resetBtn.onclick = function() {
     //清空
     location.reload();
}

下面给出压缩情况的源码，由一个HTML文件和一个JS文件组成，放在同一文件夹中：

HTML文件的名称为：猜数游戏B.html ，源码和前面“猜数游戏.html”类似，只是将其中：

改为

使用在线压缩工具javascript-minifier.com

压缩前面GuessNumber.js文件的源码，参见下图：

将压缩后JS文件保存为：GuessNumber.min.js ，源码如下：

let inputE=document.querySelector("#number"),countE=document.querySelector("#count"),resultE=document.querySelector("#result"),btn=document.querySelector("#button"),resetBtn=document.querySelector("#reset"),guessNumber=Math.floor(100*Math.random())+1,count=0;btn.οnclick=function(){count++,countE.innerText=count;let e=parseInt(inputE.value);e==guessNumber?(resultE.innerText="猜对了",resultE.style="color: green;"):e<guessNumber?(resultE.innerText="猜小了",resultE.style="color: blue;"):(resultE.innerText="猜大了",resultE.style="color: red;")},resetBtn.οnclick=function(){location.reload()};