On JavaScript modular programming_javascript skills

The Importance of JavaScript Modular Programming

The prototype of JavaScript is java, which is also an object-oriented programming language and a weakly typed language, which has greater flexibility. In the past, when writing javascript code, we would directly write .js files one by one, and then use script tags to reference them in the html page. This will cause several problems:

1. There are a large number of global variables
js can define a global variable in every place. Writing that does not comply with the specifications will lead to the appearance of a large number of global variables, and ultimately the program will be difficult to maintain.
2. The js loading order must be in accordance with the dependency order of the code
The simplest one, for example, a.js depends on the b.js file. When introducing a script into html, b.js must be introduced before a.js, otherwise an error will be reported. If a project is divided into dozens of js files, if certain specifications are not followed, a large number of global variables will appear (and there may be duplicates); their dependencies will also be difficult to maintain
3. HTML loads too many js scripts at one time and the page appears suspended
Loading too many js scripts at once during initialization is likely to cause the page to appear suspended
Using RequireJS to implement js modular programming

• The goal of RequireJS is to encourage modularization of code, and it uses a script loading step that is different from traditional script tags. You can use it to speed up and optimize code, but its main purpose is to modularize the code. It is encouraged to use the module ID instead of the URL address when using scripts. ——[RequireJS official website]
  

I don’t want to elaborate too much on the use of RequireJS. For details, please search by yourself or learn on the official website. Here I record some of my experiences using RequireJS modular programming.

The application scenario is that you use a third-party open source library in your project. However, many non-GIS professional IT players may not understand some basic concepts. At this time, you may need to update the third-party library. The upper layer of packaging will make the interface easier to understand, and division of labor and collaboration can also be achieved. Everyone writes code according to the specifications of RequireJS. They only need to write their own modules and reserve good interfaces. The following is a small example of my encapsulation. The encapsulation is not very thorough. Currently, I am only in the stage of learning js modularization. I will write according to this specification no matter how big or small it is. I believe it will benefit a lot.

Here I use leaflet, a lightweight open source map library. The requirement is to write a graphics drawing class to realize the drawing of points, lines, and surfaces. The code is given directly:

define(['leaflet'], function(){
  /**
   * 绘制多段线
   * @param options
   * @returns {*}
   * @private
   */
  var _drawLine = function(latlngs, options){
    return L.polyline(latlngs, options);
  };

  /**
   * 绘制多边形
   * @param options
   * @private
   */
  var _drawPolygon = function(latlngs, options){
    var polygon;
    if(latlngs.length < 3){
      console.log("点数少于3，无法绘制多边形！");
    } else {
      var firstPt = latlngs[0];
      var lastPt = latlngs[latlngs.length - 1];
      if(firstPt.equals(lastPt)){
        latlngs.pop();//移除与起点相同的终点
      }
      polygon = L.polygon(latlngs, options);
      return polygon;
    }
  };
  /**
   * 绘制矩形
   * @param bounds
   * @param options
   * @returns {*}
   * @private
   */
  var _drawRect = function(bounds, options){
    return L.rectangle(bounds, options);
  };
  /**
   * 绘制圆形
   * @param center
   * @param radius
   * @param options
   * @returns {*}
   * @private
   */
  var _drawCircle = function(center, radius, options){
    return L.circle(center, radius);
  };

  /**
   *封装，暴露公共方法
   */
  return {
    drawLine : _drawLine,
    drawPolygon : _drawPolygon,
    drawRect : _drawRect,
    drawCircle : _drawCircle
  }
})

Code when calling:

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 effect is as follows. I haven't encapsulated it completely here, but it is enough. For basic map operations and layer control, you can write a mapcontrol for unified management

The above is a discussion about JavaScript modular programming. I hope it will be helpful to everyone's learning.