javascript中的模块调用_js module的调用方式-优快云博客

1、简介

一直迷惑了好久import、export和require的使用。import和export是js原生的用来导入导出js模块的命令；require
是node.js下的用来导入模块命令，没有node.js环境将不能使用。这些命令可以使模块化的代码更方便管理，避免了
变量的污染。
使用import和export导入导出模块需要注意：
（1）在引入含有模块的js文件时，需要将type="text/javascript"修改为type="module"
<script type="module" src="js/model_test.js" ></script>，type="module"是ES6新特性，因此有部分浏览还不支持，例如IE、360浏览器，支持的浏览器有Safari 10.1、Chrome 61、Firefox 60、Edge 16;
（2）使用import命令时，最好是在文件的开始
（3）使用export命令时，最好是在文件的结束，并最好加上"default"。
如果，不注意会提示语法错误。

module特性请参见：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

2、代码

2.1 html代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <script type="module" src="js/model_test.js" ></script>
   </head>
   <body>
       <div style="width: 100%;height: 100%; text-align: center; size: 100px;">
           js中import和export模块方法调用
       </div>
   </body>
</html>

2.2 js测试代码（model_test.js）

import model from '../js/model.js';

// 执行主函数
main()

function main(){
   // 获得属性中的值
   var content = model.content;
   alert("属性："+content);

   // 获得名字
   var name = model.getName();
   alert("函数："+name);

   // 重置名字
   model.setName("软件学院");
   name = model.getName();
   alert("函数："+name);

   var school = model.school;
   alert("对象："+school.getName());
}

2.3 js模块（model.js）

/**
* js模块文件
*/
var content = "河南大学是百年老校！";

var name="河南大学";
// 设置name
function setName(newName){
name = newName;
}

// 获得name
function getName(){
return name;
}

// 定义类，注意ECMAScript6中开始支持类（class关键字），但是仅有部分高版本的浏览器兼容
// 因此，建议在js中使用原生的建立对象的方法。
var school = {
   name:"河南大学",
   setName: function(newName){
       this.name = newName;
   },
   getName: function(){
       return this.name;
   }
}

// 导出方法和属性，必须放在最后，如果放在头部属性（content）将会显示未定义
export default {content, setName, getName, school}