Js application modularization

I recently participated in a GIS project, similar to blackboard system. All functions are presented on GIS, so it is not possible to write all JS references up front and use something like dynamic registration. I just applied the AMD specification of JS once.

The biggest benefit of the AMD specification, I think, is that it solves the JS dependency problem. This JS file depends on the contents of another JS file. If everyone quotes on the same page, that’s fine. But dynamic trade-offs are a different story.

The AMD specification is a good way to solve this problem. All in line with AMD specifications, or registered in the inside, can be easily referenced dynamically. You don’t have to pre-declare it on the page. Detailed steps and precautions are as follows:

1. Register JS files that conform to AMD specifications or can apply AMD specifications

Js /modules.js, all js registration files, to be able to be referenced by others, the first need to register here. The usual name is main.js, but this is not fixed, as in this case, modules.js.

require.config({//require.config is defined in require.js
    baseUrl: "js".// We are going to use these js files, starting from this directory
    shim: {// Non-AMD spec JS files declare that these 3 do not comply with AMD spec. TestObj, CanvasWindy are all function names
        'test': {
            deps: [].exports: 'testObj'/ / the function name
        },
		'gWindy': {deps: [].exports: 'CanvasWindy'/ / the function name
		},
		'gCurrent': {deps: [].exports: 'CanvasWindy'/ / the function name}},paths: {// Assign an ID to each js file. Note that "global/windy/ windy "is the same as "global/windy/ windy
		"gWindy": "global/windy/Windy".// The root directory of these files is /js (corresponding to the above baseUrl: "js").
		"gCurrent": "global/windy/Current"."wind":"global/windy/wind"."current":"global/windy/currentLoader"."test": "testAMD"
});
Copy the code

js/testAMD.js
var testObj = (function(){
	return {
		hi:function(){
			alert("Hello World!");
		}
	};
})();
Copy the code

Require. Js

<script data-main="./js/modules" src="./libs/require.js"></script>
Copy the code

var require = window.top.require;
function wind(){
	require(['wind'].function(windjs){
		windjs.go(containerId,viewer,window,Cesium);
	});
}
Copy the code

Three, reference AMD specification JS

var require = window.top.require;
function wind(){
	require(['wind'].function(windjs){// 'wind' is an ID defined in modules.js, see the example above
		windjs.go(containerId,viewer,window,Cesium);
	});
}
Copy the code

Appendix, a AMD compliant JS

define(['gWindy'].function(CanvasWindy){
	
	function go(containerId,viewer,window,Cesium) {
		var canvasId = "windycanvas";
		var windy = null,windycanvas=null;
		var document = window.document; . }return {
    	go:go
    };
});
Copy the code