AMD规范实现类库require.js的简单使用方法

2021-03-01 443 阅读1分钟

第一步：下载require.js

下载地址：github.com/requirejs/r…
找到其中的require.js文件。

第二步：定义HTML的script标签引入require.js和定义入口文件：

<script src="./lib/require.js" data-main="./index.js"></script>

data-main属性的作用是在加载完src的文件后会加载执行该文件

index.js配置方式

(function() {
    require.config({
        baseUrl: '',
        path: {
            foo: './foo',
            bar: './bar',
            bar2: './bar2'
        }
    })
    require(['foo'], function(foo) {})
})()

需要导出的js模块书写示例：

define(function() {
    const name = 'coderWhy';
    const age = 18;
    const sayHi = function() {
        console.log('Hello' + name);
    }

    return {
        name,
        age,
        sayHi
    }
})

导入js模块的代码书写示例

define(['bar2', 'bar'], function(bar2, bar) {
//数组里的bar2以及bar对应所导入的js模块文件名，函数形参对应数组元素
    console.log(bar.name); //coderWhy
    console.log(bar.age); //18
    console.log(bar2.num); //998
})