SeaJS 按需加载js模块

原创

徐同保的博客 2022-07-01 07:04:59 博主文章分类：web前端 ©著作权

文章标签 javascript seajs html jquery css 文章分类 OpenStack 云计算

©著作权归作者所有：来自51CTO博客作者徐同保的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.目录结构

SeaJS 按需加载js模块_html

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>seajs</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<input type="button" id="button1" value="Click">
<input type="button" id="button2" value="Click">
<script src="https://cdn.bootcss.com/seajs/3.0.2/runtime-debug.js"></script></body>
<script>
    seajs.use('./js/index.js');
</script>
</html>

3.index.js

define(function(require, exports, module) {
    $('#button1').click(function () {
        alert('button1');
    });

    require.async('./myModule', function(myModule) {
        myModule.myFun();
    });
});

4.myModule.js

define(function(require, exports) {
    var myModule = {
        myFun: function () {
            $('#button2').click(function () {
                alert('button2');
            });
        }
    };

    return myModule;
});