原生js实现模块化及复用

最新推荐文章于 2024-07-17 08:51:23 发布

每一天，每一步

最新推荐文章于 2024-07-17 08:51:23 发布

阅读量971

点赞数 1

分类专栏： javaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/u010234868/article/details/121381692

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

a.js：

;
var moduleA = (function () {
  var obj = {};
  var name = '小明';
  var age = 18;
  var flag = true;
  if (flag) {
    console.log(sum(1, 2));
  }
  function sum(num1, num2) {
    return num1 + num2;
  }
  obj.name = name;
  obj.age = age;
  obj.flag = flag;
  obj.sum = sum;
  return obj;
})()

b.js：

;
var moduleB = (function () {
  var obj = {};
  var name = '小红';
  var sex = '女';
  var flag = false;
  obj.name = name;
  return obj;
})()

index.html中调用moduleA、moduleB：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="a.js"></script>
  <script src="b.js"></script>
  <script src="c.js"></script>
  <script>
    console.log(moduleA);
    console.log(moduleB);
    console.log(moduleA.flag);
    console.log(moduleA.sum(1, 100));
  </script>
</body>
</html>

输出：