模块化及模块化规范

什么是模块化:

将一个项目拆分为若干块,每块之间以一定的形式进行通信,而每块内部的内容都是独立的

前端没有模块化会造成什么问题:
耦合性高,不利于代码维护
污染全局的命名空间,造成代码冲突

模块化的优点:
减少命名冲突
功能独立,可以按需加载
大大提高了代码的可维护性和复用性

模块化规范中常用的两种:

commonJS:

引入方式require
导出方式module.exports

每个模块内部, module变量代表当前模块。这个变量是一个对象,它的 exports 属性(即 module.exports )是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。

模块化例子:

此时通过module.exports暴露了a,b变量及函数test,不在module.exports下的就属于私有的数据,外部无法访问到。

// test/test1.js文件
let a = 1;
let b = 2;
 
let test = () => {
    console.log('test');
}
 
module.exports = {
    a,
    b,
    test
}

 test2文件内导入:

// test2/test2.js
var { a, b,test } = require('./test/test1.js')

ES6:

导入方式:import
导出方式:export
默认导出:export default

//test/test1.js
let a = 1;
let b = 2;
let test=()=>{
    console.log("test")
}
export {
    a,
    b,
    test
}
// test2/test2.js
import { a, b,test } from './test/test1.js'

export default命令:

一个文件内只能使用一次

在import命令接收test1中的数据时,必须使用大括号来接收,而且括号内的数据要和test1中保持一致(a,b,test),需要重新命名时,要是用as关键字,如import{ a as another} from './test/test1.js'

但如果test1文件中使用export default来暴露,则import时可以使用任意名字,也不需要使用大括号来接收

补充:

require和import的区别

commonjs的用法本质上是将要导出的对象赋值给module这个的对象的export属性,在其他文件中通过require这个方法访问该属性

es6中导出的对象必须与模块中的值一一对应,换一种说法就是导出的对象与整个模块进行解构赋值。

模块加载时间:

require:运行时加载  ——  require 是赋值过程,且是运行时才执行

import:编译时加载(效率更高)—— import 是解构过程,且是编译时执行,import 命令会提升到整个模块的头部

对性能的影响:

require:性能相对于import稍低,因为 require 是在运行时才引入模块,并且还赋值给某个变量

import :只需要依据 import 中的接口在编译时引入指定模块,所以性能稍高。

模块本质:

require:模块就是对象,输入时必须查找对象属性

import:模块不是对象,而是通过 export 命令显式指定输出的代码,再通过 import 命令输入

模式:

CommonJs模块默认采用非严格模式

ES6 的模块自动采用严格模式

你可能感兴趣的:(前端面试题,前端)