前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6基础语法之模块化

ES6基础语法之模块化

作者头像
十月梦想
发布2018-10-09 14:57:35
8610
发布2018-10-09 14:57:35
举报
文章被收录于专栏:十月梦想

模块化,每个js文件就是一个独立的模块,需要再别的文件引用就需要模块的导入与导出

比如我希望在a.js中使用b.js的变量或者函数,那么ES6就中模块化就帮到咱们啦!

模块导出

b.js

代码语言:javascript
复制
var name="十月梦想";
var age=18
var sex="男"

function add(x,y){
	return x+y
}
export {name,age,sex,add}

exports {name1,name2,....namen}

模块导入

可以把文件中的变量导出,然后提供其他文件使用

需要引用上述的变量在a.js要先进行导入

a.js

代码语言:javascript
复制
import {name,sex,age,add} from "./b.js"
console.log(name,age,sex,add(5,8))

模块使用

这样就可以使用b.js的文件!在需要引用的地方使用script引用记得js的type类型为"module",

代码语言:javascript
复制
		<script src="./a.js" type="module"></script>

实际开发过程中总是出现各种问题,比如模块中的变量名已经被使用了该怎么处理,怎么修改模块中变量的名字呢,

可以使用 {原来模块变量名字 as 新名字} 这样方式!

实例代码

代码语言:javascript
复制
import {name,sex,age,add as js} from "./b.js"
console.log(name,age,sex,js(5,8))

这样在模块文件中的add变量被成功修改为js了,再次调用这个add则提示名字修改报错,只能使用以及修改完成的js这个新名字!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-9-4,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 模块导出
  • 模块导入
    • 模块使用
      • 实例代码
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档