您现在的位置是：首页 >技术杂谈 >工具链和其他-异步模块加载网站首页技术杂谈

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

路人i++ 2023-06-12 00:00:03
简介工具链和其他-异步模块加载

目录

CMD/AMD

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

Common Module Definition

ES6/CommonJS

CommonJS

ES6 Module

加载器示例

总结

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: 书写规范
风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐