工具链和其他-异步模块加载

最新推荐文章于 2024-09-12 11:40:49 发布

路人i++

最新推荐文章于 2024-09-12 11:40:49 发布

阅读量518

点赞数 1

分类专栏：计算机网络相关 # 工具链和其他文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_35729091/article/details/130333433

版权

计算机网络相关同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

工具链和其他

5 篇文章 0 订阅

订阅专栏

CMD/AMD

Asynchronous Module Definition(AMD异步模块定义，语法风格)

Common Module Definition

cmd和amd的区别

现在有哪些异步加载方式

整体结构

编程：commonjs es6 module (有可能解析不了，需要传输层)

传输：cmd/amd（早期是异步加载模块用的，不是一个中间层；现在是一个加载模块，不把程序写在里面）

执行：require.js webpack模块加载器......（异步加载器）

CMD/AMD

Asynchronous Module Definition(AMD异步模块定义，语法风格)

amd不是一个很好的设计

// 模块创建
// a.js
define(['functions/foo'], (foo) => { // 数组：依赖foo——文件在functions/foo
    console.log(foo())
})

// 模块使用
// a.js
//         数组代表所有依赖                函数接收所有依赖
require(['jquery', 'a.js'], ($, printFoo) => {
    $("#foo").click(()=> {
        printFoo()    
    })
})

Common Module Definition

// 模块使用
// a.js
define((require, exports) => {
    function printFoo() {
        const foo = require('./foo') // 声明后置
        console.log(foo())    
    }
    exports = printFoo // 声明后置 用到在声明
})

// 模块使用
// a.js
use((require) => {
    const $ = require('jquery') // 同步模型，异步的话可以用asyns await，promise
    const printFoo = require('./a.js')
    $("#foo").click(() => {
        printFoo()    
    })
})

ES6/CommonJS

CommonJS

node支持

浏览器访问转义为浏览器可解读的cmd

// 模块使用
// a.js
function A(){...}
module.exports = A

// 模块引用
const A = require("./a.js")
A()

ES6 Module

// 模块使用
// a.js
function A(){...}
export default A

// 模块引用
import A from './a.js'
A()

加载器示例

const express = require('express')
const app = express() 
const path = require('path')
app.use(express.static(path.resolve(__dirname, 'lib')))
app.get('/', (req, res) => {
  res.send(`
  <html>
    <body>
    <script src='/require.js' ></script>
    <script>
      require.path = '/'
      require(['add', 'mult'], (add, mult) => {
        console.log(add(3, 5))
        console.log(mult(3, 5))
      })
    </script>
    </body>
  </html>
  `)
})
app.listen(3000)

// add.js
define('add', (a, b) => {
  return a + b
})
// mult.js
define('mult', (a, b) => {
  return a * b
})

总结

CMD/AMD:底层建设（浏览器用的）
CommonJS/ES6 Module: 书写规范

路人i++

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
工具链和其他-异步模块加载

amd不是一个很好的设计// 模块创建// a.jsdefine(['functions/foo'], (foo) => { // 数组：依赖foo——文件在functions/foo})// 模块使用// a.js// 数组代表所有依赖函数接收所有依赖printFoo()})})CMD/AMD:底层建设（浏览器用的）CommonJS/ES6 Module: 书写规范。
复制链接

扫一扫

专栏目录