es5支持 const吗 es5 module

转载

mob64ca1412b28c 2024-07-01 00:03:36

文章标签 es5支持 const吗 javascript 前端 vue.js 模块化 文章分类 架构后端开发

模块化

ES5的模块化

ES5的模块画很简单就是：立即执行函数+闭包

let obj = (function(){
    //......模块内部代码
    return {
        导出内容
    }
})();

也就是将一个对象return 然后就可以访问模块内部的局部变量

ES6的模块化

在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。

export import用法

在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。先来看个例子，来对一个变量进行模块化。我们先来创建一个test.js文件，来对这一个变量进行输出：

export let myName="laowang";

然后可以创建一个index.js文件，以import的形式将这个变量进行引入:

import {myName} from "./test.js";
console.log(myName);  //laowang

如果要输出多个变量可以将这些变量包装成对象进行模块化输出：

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName,
    myAge,
    myfn
}
/******************************接收的代码调整为**********************/
import {myfn,myAge,myName} from "./test.js";
console.log(myfn());//我是laowang！今年90岁了
console.log(myAge);//90
console.log(myName);//laowang

如果你不想暴露模块当中的变量名字，可以通过as来进行操作:

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}
/******************************接收的代码调整为**********************/
import {fn,age,name} from "./test.js";
console.log(fn());//我是laowang！今年90岁了
console.log(age);//90
console.log(name);//laowang

也可以直接导入整个模块，将上面的接收代码修改为：

import * as info from "./test.js";//通过*来批量接收，as 来指定接收的名字
console.log(info.fn());//我是laowang！今年90岁了
console.log(info.age);//90
console.log(info.name);//laowang

默认导出（export default）

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

/******************************导出**********************/
export default function(){
    return "默认导出一个方法"
}
/******************************引入**********************/
import myFn from "./test.js";//注意这里默认导出不需要用{}。
console.log(myFn());//默认导出一个方法

可以将所有需要导出的变量放入一个对象中，然后通过 export default 进行导出

/******************************导出**********************/
export default {
    myFn(){
        return "默认导出一个方法"
    },
    myName:"laowang"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//默认导出一个方法 laowang

同样也支持混合导出

/******************************导出**********************/
export default function(){
    return "默认导出一个方法"
}
export var myName="laowang";
/******************************引入**********************/
import myFn,{myName} from "./test.js";
console.log(myFn(),myName);//默认导出一个方法 laowang

重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

/******************************test1.js**********************/
export let myName="我来自test1.js";
/******************************test2.js**********************/
export let myName="我来自test2.js";
/******************************index.js**********************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1);//我来自test1.js
console.log(name2);//我来自test1.js

[ 总结 ]

• 1、模块化 type = module
• 2、导入导出的时候均可重命名：as可以进行重命名
• 3、默认导出只能有一个，对于默认导出只能用用一个对象名进行导入
• 4、通过export方式导出，在导入时要加{ }，export default则不需要

Node模块化

模块的分类

内置模块（核心模块）由node官方提供。常见的有：fs，path，http等
自定义模块用户创建的每一个js文件都是一个自定义模块。
第三方模块由第三方开发，使用之前需要下载安装。

模块作用域

和函数作用域类似，在自定义模块中的变量，函数等成员，只能在当前模块中使用，这种模块级别的访问限制，就叫做模块作用域。

好处：防止全局变量污染。

模块的导入和导出

导出 module.exports exports

新建一个a.js文件，里面的代码如下：

//导出一个对象，对象中的值就被暴露出去了。
module.exports = {
    name:"刘德华",
    act(){
        console.log("之前我没得选，现在我想做一个好人")
    },
    age:35
}

导入 require

新建一个b.js文件，里面的代码如下：

const ldh = require("./a.js")
console.log(ldh.age)
console.log(ldh.name)
ldh.act();

//或者使用解构赋值
const {name} = require("./a.js") //只接受name的值
console.log(name)

【注意】 【module.exports = { name：‘刘德华’}】和【module.exports.name = ‘刘德华’】的区别

前者是创建的新的对象，将原对象覆盖。后者是在原对象上添加一个新的属性。

[ 总结 ]

1、module.exports 是一个空对象，再导出的时候有两种方式：①、通过赋值的方法导出 module.exports = 一个对象；②、通过添加属性的方式导出 module.exports . 属性；前者相当于将原来的地址覆盖掉，后者是给原来的空对象添加属性方法
2、module.exports 与exports 都可以用来导出：两者保存的引用地址是一样的，指向同一个对象；在导出的时候如果两者指向相同，则都会导出；如果指向不相同，以module.exports为标准
3、导出的时候要注意导出顺序（思考一下先导出后定义或者赋值会发生什么）
3、require ( “文件路径”) 导入的时候用的是对象的解构赋值
4、文件在导入A的时候会先将导入的文件A 执行一边，然后再进行导入

es5支持 const吗 es5 module_模块化