首页 > 其他 > 详细

模块化的使用

时间:2020-09-09 17:26:49      阅读:71      评论:0      收藏:0      [点我收藏+]

第一种:直接使用js实现

  在index1.js中的代码:

var moduleA = (function () {
  // 导出的对象
  var obj = {}

  function sum(num1, num2) {
    return num1 + num2
  }

  var flag = true

  if (flag) {
    console.log(sum(10, 20));
  }


  obj.flag = flag;
  obj.sum = sum;

  return obj
})()

  在index2.js中的代码:

var moduleB = (function () {
  var obj = {}

var flag = false console.log(name); obj.flag = flag return obj })()

  如果你想在index3.js文件中想使用index1.js中的flag变量和sum函数:

(function () {
  // 1.想使用flag
  if (moduleA.flag) {
    console.log(‘小明是天才, 哈哈哈‘);
  }

  // 2.使用sum函数
  console.log(moduleA.sum(40, 50));
})()

  如果你想在index3.js文件中想使用index2.js中的flag变量:

(function () {
  console.log(moduleB.flag);
})()

第二种:使用ES模块化的导入导出

  1、简单的使用

  首先先在index.html中引用的js文件加上:type="module",

<script src="index1.js" type="module"></script>
<script src="index3.js" type="module"></script>

  然后把index1.js中的代码导出:  

   function sum(num1, num2) {
    return num1 + num2
  }

  var flag = true

  if (flag) {
    console.log(sum(10, 20));
  }
export{
  flag,sum      
}

然后在你想在index3.js使用index1.js中的变量或者方法时,则需要把它导入

import {flag, sum} from "./index1.js";

 

模块化的使用

原文:https://www.cnblogs.com/Wangke1997/p/13639705.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!