为什么需要模块化 JavaScript原始功能
在网页开发的早期,js 制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码很少,直接将代码写在
<script>
document.getElementById('button').onclick = function(){
console.log('按钮发生了点击');
}
</script>
随着 ajax 异步请求的出现,慢慢形成了前后端的分离,客户端需要完成的事情越来越多,代码量也是与日俱增,为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护,但是这种维护方式,依然不能避免一些灾难性的问题。
比如全局变量同名问题:
// a.js文件中,小明定义了一个变量flag,值为true
flag = true
// b.js文件中,小红也定义了一个变量flag,值为false
flag = false
// main.js文件中,小明想通过flag进行一些判断,完成后续的事情
if (flag) {
console.log('111'); // 结果可能会因为flag同名的问题,而出现逻辑错误
}
另外,这种代码的编写方式对 js 文件的依赖顺序几乎是强制性的,当 js 文件过多,比如有几十个的时候,弄清楚它们的顺序是一件比较麻烦的事情,而且即使你弄清楚顺序了,也不能避免上面出现的这种尴尬问题的发生。
这时,我们可以使用匿名函数来解决方面的重名问题。
匿名函数的解决方案
我们可以在a.js文件中使用匿名函数:
(function(){
flag = true
})()
因为函数有自己的作用域,使用匿名函数虽然解决了重名问题,但是如果我们希望在 main.js 文件中用到 flag,应该如何处理呢?显然,另外一个文件中不方便使用,因为 flag 是一个局部变量。
这时,我们可以将需要暴露到外面的变量,使用一个模块作为出口。
使用模块作为出口
在匿名函数内部定义一个对象,给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可),最后将这个对象返回,并且在外面使用了一个 MoudleA 接收。
// a.js或b.js中
// 使用模块作为出口
var ModuleA = (function(){
// 1. 定义一个对象
var obj = {}
// 2. 在对象内部添加变量和方法
obj.flag = true
obj.myFunc = function(info){
console.log(info);
}
// 3. 将对象返回
return obj
})()
接下来,在 main.js 中使用只需要使用属于自己模块的属性和方法即可:
// 使用模块
if(ModuleA.flag){
console.log('111');
}
ModuleA.myFunc('222')
console.log(ModuleA);
这就是模块最基础的封装,事实上模块的封装还有很多高级的话题,幸运的是,前端模块化开发已经有了很多既有的规范,以及对应的实现方案。
常见的模块化规范:
CommonJS(了解)
模块化有两个核心,导出和导入
CommonJS的导出:
// 在a.js中:
module.exports = {
flag: true,
sum(a, b) {
return a + b
}
}
CommonJS的导入:
// 在main.js中
let {flag, sum} = require('a.js')
// 等同于
let _mA = require('a.js')
let flag = _mA.flag
let sum = _mA.sum
ES6 的 export 和 import
ES6新增了模块的概念,一个js文件就是一个模块。在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。在一个模块中可能需要引入其他模块, 也可能需要输出模块, 这时就需要使用export和import关键字了。
export基本使用
export用于导出, 可以导出一个变量,也可以导出一个函数或者类,有下面三种基本使用方式:
导出变量
// a.js
export let name = 'nnn'
export let age = '22'
export let height = '1.75'
另一种写法:
// a.js
let name = 'lyy'
let age = '18'
let height = '1.75'
export {name, age, height}
导出函数或类
// a.js
// 导出函数
export function test (content) {
console.log(content)
}
// 导出类
export class Person {
constructor(name,age) {
this.name = name
this.age = age
}
say() {
console.log('hello' + this.name)
}
}
另一种写法:
// a.js
// 导出函数
function test (content) {
console.log(content)
}
// 导出类
class Person {
constructor(name,age) {
this.name = name
this.age = age
}
say() {
console.log('hello' + this.name)
}
}
export {test, Person}
export default
某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而希望让导入者可以自己来命名,这个时候就可以使用 export default。
需要注意的是,当使用export default时, 表示默认输出。 一个模块只能有一个默认输出,有多个default时只会取最后一个
// a.js
export default function(){
conse.log('111')
}
来到 main.js 中,这样使用就可以了:
import myFunc from './a.js'
myFunc()
这里的myFunc可以根据自己的需要命名。
import使用
我们使用 export 指令导出了模块对外提供的接口,就可以通过 import 命令来加载对应的这个模块了。
首先,需要在index.html中引入两个 js 文件,并且类型需要设置为 type="module":
<script src="a.js" type="module"></script>
<script src="main.js" type="module"></script>
在a.js中导出:
// a.js
let name = 'lyy'
let age = '18'
export {name, aget}
在main.js中导入:
// main.js
import {name,age} from "./a.js"
如果我们希望某个模块中所有的信息都导入,一个个导入显然有些麻烦,这时候就可以导入模块中所有的export变量,但是通常情况下我们需要起一个别名,方便后续使用。
// main.js中
import * as info from "./a.js"
console.log(info.name,info.age)
暂无评论内容