JavaScript Modular programming _ javascript skills

This article mainly introduces JavaScript Modular programming. If you are interested, you can refer to it. The importance of JavaScript Modular programming

The prototype of JavaScript is java, which is also an object-oriented programming language and belongs to a weak type language. It has more flexibility. In the past, when writing javascript code, I directly wrote one. js file, and then referenced it on the html page using the script tag. This will bring about several problems:

1. A large number of global variables appear
Js can define a global variable in every place. Writing non-compliant variables will lead to the emergence of a large number of global variables, and the program will be difficult to maintain.
2. js loading should follow the code dependency order
For example, if a. js depends on the B. js file, B. js must be introduced before a. js when a script is introduced in html. Otherwise, an error is reported. If a project is divided into dozens of js files, a large number of global variables (or repeated) may occur if they are not in accordance with certain standards ); the dependency will be difficult to maintain.
3. When html loads too many js script pages at a time, the page is suspended.
Too many js scripts are loaded at one time during initialization, which may cause the page to be suspended.
Implement js Modular programming using RequireJS

• The goal of RequireJS is to encourage code modularization, which uses a script loading step different from the traditional script tag. It can be used to accelerate and optimize code, but its main purpose is to modularize the code. It encourages replacement of the URL address with the module ID when using the script. -- [RequireJS official website]
  

The use of RequireJS is not described much. Please search for details or study on the official website. Here we will record some of my experiences with Modular programming using RequireJS.

The application scenario is that your project uses third-party open source libraries. However, many non-GIS professional IT players may not understand some basic concepts, at this time, third-party libraries may need to be further packaged, so that the interface will be easier to understand, and division of labor and collaboration can be achieved. Everyone writes code according to RequireJS specifications, you only need to write your own modules and reserve the interfaces. The following is a small example of my encapsulation. The encapsulation is not very thorough. At present, it is only in the process of learning js modularization. I believe it will benefit a lot from the subsequent compilation regardless of the size.

Here I use leaflet, a lightweight open source library. The requirement is to write a graphic class to draw points, lines, and surfaces. The code is provided directly:

Define (['leaflet'], function () {/*** draw multiline * @ param options * @ returns {*} * @ private */var _ drawLine = function (latlngs, options) {return L. polyline (latlngs, options) ;};/*** draw a polygon * @ param options * @ private */var _ drawPolygon = function (latlngs, options) {var polygon; if (latlngs. length <3) {console. log ("the number of points is less than 3, and the polygon cannot be drawn! ");} Else {var firstPt = latlngs [0]; var lastPt = latlngs [latlngs. length-1]; if (firstPt. equals (lastPt) {latlngs. pop (); // remove the end point that is the same as the start point} polygon = L. polygon (latlngs, options); return polygon ;}}; /*** draw a rectangle * @ param bounds * @ param options * @ returns {*} * @ private */var _ drawRect = function (bounds, options) {return L. rectangle (bounds, options );}; /*** draw a circle * @ param center * @ param radius * @ param options * @ returns {*} * @ private */var _ drawCircle = function (center, radius, options) {return L. circle (center, radius) ;};/*** encapsulation, exposed public Method */return {drawLine: _ drawLine, drawPolygon: _ drawPolygon, drawRect: _ drawRect, drawCircle: _ drawCircle }})

Call time code:

require(['drawHelper'], function(drawHelper){ function drawLine(){  var latlngs = new Array();  for(var i = 20; i < 30; i++){   for(var j = 100; j < 110; j++){    latlngs.push(new L.latLng(i, j));   }  }  var polylineOpt = {   color : 'blue',   weight : '2',   opacity : 0.8,   smoothFactor : 2.0  };  var polyline = drawHelper.drawLine(latlngs, polylineOpt);  polyline.addTo(mainmap); }; function drawPolygon(){  var latlngs = new Array();  latlngs.push(L.latLng(31, 110), L.latLng(31, 111), L.latLng(32, 111), L.latLng(32, 110), L.latLng(32, 109));  var Opt = {   stroke : true,   color : 'blue',   weight : '2',   opacity : 0.8,   fill : true,   fillColor : 'red',   fillOpacity : 0.6  };  var polygon = drawHelper.drawPolygon(latlngs, Opt);  polygon.addTo(mainmap); } function drawRect(){  var bounds = [[33, 110], [36, 113]];  var Opt = {   stroke : true,   color : 'blue',   weight : '2',   opacity : 0.8,   fill : true,   fillColor : 'yellow',   fillOpacity : 0.6  };  drawHelper.drawRect(bounds, Opt).addTo(mainmap); } function drawCircle(){  var center = L.latLng(32, 116);  var Opt = {   stroke : true,   color : 'red',   weight : '2',   opacity : 0.8,   fill : true,   fillColor : 'green',   fillOpacity : 0.6  };  drawHelper.drawCircle(center, 200000, Opt).addTo(mainmap); } drawLine(); drawPolygon(); drawRect(); drawCircle();})

The implementation result is as follows. Here I have not encapsulated it completely, but it is enough. For basic map operations and layer control, you can write a mapcontrol for unified management.

The above is the discussion about JavaScript Modular programming, hoping to help you learn.