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