require.js

目的:

  (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依赖这五个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。                           

 

posted @ 2017-03-08 10:30  米娜-火箭  阅读(140)  评论(0编辑  收藏  举报