本文共 1556 字，大约阅读时间需要 5 分钟。
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特性请参见：
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}
发表评论
最新留言
关于作者
