模块

作者: zjh111 | 来源:发表于2018-04-03 20:14 被阅读0次

在ES5中其实是没有模块的,只能通过各种方法来实现模块。

<script src="./js1.js"></script>
<script src="./js2.js"></script>
<script src="./main.js"></script>

//js1
window.module1 = function(){
  alert(1)
}
//js2
window.module2 = function(){
  alert(2)
}
//main
setTimeout(() => {
    window.module1()
}, 5000);

setTimeout(() => {
    window.module1()
}, 2000);

但是如果有js文件里有全局变量

//js1
var a=1
window.module1 = function(){
  alert(a)
}
//js2
var a=2
window.module2 = function(){
  alert(a)
}
//main
setTimeout(() => {
    window.module1()
}, 5000);

setTimeout(() => {
    window.module2()
}, 2000);

后加载的会覆盖先加载的
需要使用一个立即执行函数

!function(){
  var a=1
window.module1 = function(){
  alert(a)
  }
}

es6中使用花括号和let形成局部变量

{
  let a=1
window.module1 = function(){
  alert(a)
}
}

使用es6语法制作模块

//html
<script type = "module" src="./main.js"></script>

//xxx.js
let xxx = [1,2,3]
export default module

//js1.js
import xxx from './xxx.js'

let module1 = function(){
  alert(xxx)
}
export default module1

//js2.js
import xxx from './xxx.js'

let module2 = function(){
  alert(xxx)
}
export default module2

//main.js
import module1 from './js1.js'
import module2 from './js2.js'

setTimeout(() => {
    window.module1()
}, 5000);

setTimeout(() => {
    window.module2()
}, 2000);

html里引入使用了模块的文件要加上type="module",
js1,js2里使用‘export default module1’ 来导出
main里使用‘import module1 from './js1.js'’来导入
import 是 default时变量可以随意起。

也可以自定义导出

//导出模块
export {name,age,xxx}
export default module1

//导入模块
import {name,age,xxx} from '导出模块
import module from '导出模块'

自定义导出的时候名字必须相同。
但是导入多个模块时候,变量名有可能会重合。

//导出模块1
export {name,age,xxx}
export default module1

//导出模块2
export {name,age,xxx}
export default module2

//导入模块
import {name,age,xxx} from '导出模块1'
import module1 from '导出模块1'
import {name,age,xxx} from '导出模块2'
import module2 from '导出模块2'

此时会报错。
如果想同时引入不同模块,变量名相同时,使用as重命名变量。

import {name as name1} from '导出模块1'
import {name as name2} from '导出模块2'

也可以使用‘*’将要导出内容一次性导出。

import * as xxx from '导出模块'
//将要导出内容导入对象xxx里。

浏览器可能不支持import和export
这时可以使用babel webpack来解决。

前端模块化的意义

  1. 提高开发效率,有利于多人协同开发
  2. 解决文件依赖问题,无需考虑引用包顺序
  3. 避免全局变量污染
  4. 方便代码的复用和后期的维护

总结就是js填坑史。

相关文章

  • python常用模块!!

    os模块: stat模块: sys模块: hashlib,md5模块: random模块: types模块: at...

  • 2018-08-19

    Angular 2 技能图谱 模块 自定义模块 根模块 特性模块 共享模块 核心模块 内置模块 Applicati...

  • 【时间管理100讲】精髓全在这里啦

    理论模块 精力管理。 行动管理。 学习模块。 高空模块。 反思模块。 运动模块。 阅读模块。 旅行模块。 人际关系...

  • python基础学习(三)

    常用模块 String模块 数学模块 随机模块 OS模块 os.path模块 re模块 常用函数及操作 列表操作 ...

  • day10-异常处理和pygame显示

    一、异常处理 1.模块 导入模块(自定义模块,第三方模块)import 模块 ---->模块.内容from 模块 ...

  • 重点知识复习(异常处理)

    1.模块 导入模块(自定义模块,第三方模块,系统其他模块)import 模块 ----> 模块.内容from 模...

  • Python常用模块

    Python常用模块之time模块 Python常用模块之os模块 Python常用模块之sys模块 Python...

  • nodejs-模块

    nodejs模块 一、nodejs模块分类 1.核心模块 Core Module、内置模块、原生模块 fs模块 p...

  • Python不同网络模块网页源代码的获取

    requests模块 或者使用 selenium模块 BeautifulSoup模块 urllib模块

  • day10 pygame

    一、异常处理1.模块导入模块(自定义模块,第三方模块)import 模块 ---->模块.内容from 模块 im...

网友评论

      本文标题:模块

      本文链接:https://www.haomeiwen.com/subject/yrlchftx.html