require.js

Posted 2020-09-03 米娜-火箭

目的：

　　（1）实现js文件的异步加载，避免网页失去响应；

　　（2）管理模块之间的依赖性，便于代码的编写和维护。

//html里：（加载require.js后,先加载main.js，可省略main后的‘.js’）
<script src="js/require.js" data-main="js/main"></script>
//main.js里：（以下均可省略‘.js’）
require.config({//require配置
    baseUrl: "../scripts/libs", //主路径
        //eg.下面jquery的路径为 "../scripts/libs/jquery.min"
    paths: {
        //要加载的js路径
        jquery: "jquery.min",
         ol: "ol-debug",
        initpage: ‘../apps/module/initpage‘,
        editor: ‘../apps/module/map-draw‘,
        layerswitcher: ‘../apps/module/ol3-layerswitcher‘
    },
    shim: {
        //依赖关系：initpage依赖jquery；先加载jquery再加载initpage
        initpage: [‘jquery‘],
        layerswitcher: [‘ol‘],
        editor: [‘jquery‘, ‘ol‘]
    }
});

require(
    [‘jquery‘, ‘ol‘, ‘editor‘, ‘initpage‘, ‘layerswitcher‘],
    function($, ol, Editor) {
         。。。。。。
});     
//require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是[‘jquery‘, ‘ol‘, ‘editor‘, ‘initpage‘, ‘layerswitcher‘]，即主模块main.js依赖这五个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。