require.js

1.引入require.js

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script data-main="./resources/main.js" src="./resources/require.js"></script>
</body>
</html>

其中data-main属性的作用是，指定网页程序的主模块，在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载
且由于require.js默认的文件后缀名是js，所以可以把main.js简写成main

2.配置模块路径

main.js中可以配置路径：

require.config({
    paths: {
        'jquery':'lib/jquery.min'
    }
})

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="test()">测试</button>
    <script data-main="./resources/main.js" src="./resources/require.js"></script>
    <script>
        function test() {
            require(['jquery'], function ($) {
                $('body').css({'backgroundColor': 'dodgerblue'});
            })
        }
    </script>
</body>
</html>

3.配置公共路径

main.js:

require.config({
    baseUrl: 'resources/lib',
    paths: {
        'jquery': 'jquery.min',
        'angular': 'angular.min'
    }
})

baseUrl为基路径，但是要注意baseUrl要从main.js所在目录开始编写
注意，此时require方法是在test函数中，因此不存在加载先于<script data-main="./resources/main.js" src="./resources/require.js"></script>的问题

4.require立刻执行存在的问题

如果此时的配置是这样的：

    <script data-main="./resources/main.js" src="./resources/require.js"></script>
    <script>
        require(['jquery'], function ($) {
            $('body').css({ 'backgroundColor': 'dodgerblue' });
        })
    </script>

此时require可能相较于main.js中的代码率先执行，发生错误
未解决上述问题，可以将require方法写在main.js内部：

require.config({
    baseUrl: 'resources/lib',
    paths: {
        'jquery': 'jquery.min',
        'angular': 'angular.min'
    }
})
require(['jquery'], function ($) {
    $('body').css({ 'backgroundColor': 'dodgerblue' });
})

或者在index.html中使用下面的方式：

    <script src="./resources/require.js"></script>
    <script src="./resources/main.js"></script>
    <script>
        require(['lib/jquery'], function ($) {
            $('body').css({ 'backgroundColor': 'dodgerblue' });
        })
    </script>

5.使用define定制模块

目录结构如下：

util.js:

define([], function () {
    return {
        show: function () {
            alert('show');
        },
        message: function () {
            alert('message');
        }
    }
})

main.js:

require.config({
    baseUrl: 'resources/lib',
    paths: {
        'jquery': 'jquery.min',
        'angular': 'angular.min',
        'util': '../app/util'
    }
})

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./resources/require.js"></script>
    <script src="./resources/main.js"></script>
    <script>
        require(['util'], function (obj) {
            obj.show();
        })
    </script>
</body>
</html>

其中define第一个参数为依赖数组，如果希望在util.js中使用jquery，可以按照下面的写法：

define(['jquery'], function ($) {
    return {
        show: function () {
            alert('show');
        },
        message: function () {
            alert('message');
        },
        change: function(){
            $('body').css({ 'backgroundColor': 'dodgerblue' });
        }
    }
})

或者采用下面的方式:

define([], function ($) {
    return {
        show: function () {
            alert('show');
        },
        message: function () {
            alert('message');
        },
        change: function () {
            require(['jquery'], function ($) {
                $('body').css({ 'backgroundColor': 'dodgerblue' });
            });
        }
    }
})

6.使用shim设置依赖关系：

如果同时希望引入css依赖，需要下载css.min.js

require.config({
    baseUrl: 'resources/lib',
    paths: {
        'css': 'css.min',
        'jquery': 'jquery.min',
        'angular': 'angular.min',
        'util': '../app/util',
        'bootstrap': 'bootstrap.min'
    },
    shim: {
        "bootstrap": {
            deps: ['jquery','css!../css/bootstrap.min.css']
        }
    }
})

7.对于非标准化的js文件的处理：

如想使用test.js，其文件内容如下:

function testDemo(){
    alert(1);
}

同样可以利用shim解决：
main.js文件内容：

require.config({
    baseUrl: 'resources/lib',
    paths: {
        'css': 'css.min',
        'jquery': 'jquery.min',
        'bootstrap': 'bootstrap.min',
        'angular': 'angular.min',
        'util': '../app/util',
        'test': '../app/test'
    },
    shim: {
        "test": {
            exports: "testDemo"
        },
        "bootstrap": {
            deps: ['jquery','css!../css/bootstrap.min.css']
        }
    }
})
require(['test'], function (fn) {
    fn();
})

如果文件内有多个方法：

function testDemo(){
    alert(1);
}
function success(){
    alert(2);
}

main.js:

require.config({
    baseUrl: 'resources/lib',
    paths: {
        'css': 'css.min',
        'jquery': 'jquery.min',
        'bootstrap': 'bootstrap.min',
        'angular': 'angular.min',
        'util': '../app/util',
        'test': '../app/test'
    },
    shim: {
        "test": {
            init: function () {
                return {
                    testDemo: testDemo,
                    success: success
                }
            }
        },
        "bootstrap": {
            deps: ['jquery', 'css!../css/bootstrap.min.css']
        }
    }
})
require(['test'], function (f) {
    f.success();
})
posted @ 2021-09-23 20:58  kanaliya  阅读(337)  评论(0)    收藏  举报