jquery项目 html使用export import方式调用模块

news2024/10/6 18:34:42

jquery的老项目，引入vue3, 需要方便使用export, import方式引用一些常用的方法与常量

导出模块 export

js/numberUtil.js

/**
 * @Description:
 * @Author Lani
 * @date 2024/1/10
 */

/*
* 【金额】    保留2位小数，不四舍五入
* 5.992550 =>5.99 , 2 => 2.00
* 67.49 乘以100之后：6748.9999
*
* */
export function toFixed2Decimal(value) {
  return (parseFloat(value * 100) / 100).toFixed(2)
}

其他js调用

还用import

js/orderUtil.js

/**
 * @Description:
 * @Author Lani
 * @date 2024/5/6
 */

import {toFixed2Decimal} from "./numberUtil.js";

export const getOrderAmount = (value = 1.698) => {
  let temp = toFixed2Decimal(value)
  console.log('|--最终结果：temp=', temp)
  return temp
}

html网页调用

重点在script这个标签的配置

使用type="module", 在script内部再使用import

.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.9.1.js"></script>
</head>
<body>
<ul id="ul001">
  <li>TEST 01</li>
</ul>
<script type="module">

  import {getOrderAmount} from "./js/orderUtil.js";

  $(function () {
    getOrderAmount()
  })
</script>
</body>
</html>