面试知识点总结 - js 模块化_js模块化面试-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42291794/article/details/108487269

本文主要探讨了JavaScript的模块化实现，包括ES6模块、CommonJS、AMD和IIFE等不同场景下的使用方法，旨在帮助开发者更好地理解和掌握JavaScript的模块化机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Es6

let fn1 = ()=>{
}
export{
    fn1,
    fn2
}
import {fn1,fn2} from './detail.js';

内容是对象,分隔符是逗号
export default{
    name: "我是index.js",
    fn2: ()=>{
    }
}
import index from "./index.js";

2. commonJs(浏览器,服务器)

暴露exports 对象,默认是{}
exports.xxx = value	--------------给exports对象添加属性和方法
Module.exports = value ------------{}
Let module = require(xxx)
第三方模块: xxx为模块的包名(name)
自定义模块:xxx为模块文件路径

3. amd(浏览器端)

module1.js  module2.js
定义没有依赖的模块:
define(function(){
......
    return 模块(将要暴露出的模块)
})
定义有依赖的模块(第一个参数为要依赖的模块的数组,每一项都是字符串)
define([‘module1’,’module2’,’jquery’],function(m1,m2,jquery){
    ....
    return 模块(将要暴露出的模块)
})

app.js
require(['module1','module2'],function(m1,m2){
    m1,m2(使用m1,m2)
})

app.js
requirejs.config({
    baseUrl:'./js/',         相对于根目录
    paths:{
        'module1':'./module/module1',
        'module2':'./module/module2',
‘jquery’:’./libs/jquery.js’
    }
})

html
<script data-main="js/app.js" src="js/libs/require.js"></script>

4. IIFE

(function(win,$){
    let msg = 'hello world';
    function saymsg(){
        console.log(msg)
$('body').css('background','#f00')
    }
    win.module = {
        msg,
        saymsg
    }
})(window,jQuery)