标签中即可<script>
document.getelementById('button'). onc1ick=function(){
console.1og('按钮发生了点击');
}
</script>
// mmmm.js文件中,小明定义了一个变量,名称是flag,井且为true
flag =true
// hhhh. js文件中,小红也喜欢用flag这个变量名称,只是为false
flag= false
//mmm2.js文件中,小明想通过flag进行-些判断。完成后续的事情
if (flag)
console. log('小明是个天才'):
)
但是在以上情况小明就是无法运行自己代码“小明是个天才”就是不显示,因为与小红的flag设置发生了冲突
■我们可以使用匿名函数来解决方面的重名问题
在mmmm.js文件中,我们使用匿名函数
(function() {
var flag = true
})()
■但是如果我们希望在mmm2.js文件中,用到flag ,应该如何处理呢?
显然,另外-一个文件中不容易使用,因为flag是一个局部变量。
■模块化有两个核心:导出和导入
■CommonJS的导出:
module.exports = {
flag: true,
test(a, b) {
return a + b
},
demo(a, b) {
return a*b
}
}
■CommonJS的导入
// CommonJS模块
let { test, demo, flag } = require('moduleA');
//等同于
let _mA = require('moduleA');
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;
■export指令用于导出变量,比如下面的代码:
export let name = 'why'
export let age = 18
export let height = 1.88
■. 上面的代码还有另外-种写法:
let name = 'why'
let age = 18
let height = 1.88
export {name, age, height}
■.上面我们主要是输出变量,也可以输出函数或者输出类
上面的代码也可以写成这种形式:
export function test(content) {
console. log(content);
}
export class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
run() {
console. log(this.name + '在奔跑');
}
}
function test(content) {
console.log(content);
}
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
run() {
console. log(this.name + '在奔跑'):
}
}
export (test,Person)
■某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名
这个时候就可以使用export default
export default function () {
console.log(' default function');
}
■我们这样使用就可以了
口这里的myFunc是我自己命名的,你可以根据需要命名它对应的名字
import myFunC from './info.js '
myFunc()
■另外, 需要注意:
export default在同一个模块中,不允许同时存在多个。
M;
我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了
<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>
import {name, age, height} from "./info.js"
console. log(name, age, height);
如果我们希望某个模块中所有的信息都导入,一个个导入显然有些麻烦:
*
可以导入模块中所有的export变量import * as info from ' ./info.js'
console. log(info.name, info.age, info.height, info. friends) ;
import {flag,sum} from "./mmmm";
不对
改成import {flag,sum} from "./mmmm.js";
导入导出方式一:
导入导出方式二:
导入导出方式三:
导入导出方式四:
导入导出方式五:
或者
导入导出方式六:
导出七:
(以上内容根据微博“coderwhy”的vue视频课程整理)