On _javascript techniques of JavaScript modular programming

The importance of JavaScript modular programming

JavaScript is the prototype of Java, it is also an object-oriented programming language, belonging to a weak type language, it has greater flexibility. In the past, when writing JavaScript code, are directly written a. js file, and then use the script tag in the HTML page reference, which will bring several aspects of the problem:

1, the emergence of a large number of global variables
JS in each place can define a global variable, the writing does not conform to the specification will lead to a large number of global variables appear, the final program will be difficult to maintain.
2, JS load sequence to follow the code depends on the order
The simplest, for example, A.js relies on b.js files, so when you introduce scripts in HTML, b.js must be introduced in front of a.js, or it will be an error. If a project division of Labor has written dozens of JS files, if not according to a certain specification, there will be a large number of global variables (may also have duplicate existence); its dependencies will be difficult to maintain
3, HTML one-time load too many JS script page appears suspended animation
Initialization of a one-time load of too many JS script, it is likely to cause the page to appear suspended animation state
using Requirejs to implement JS modular programming

• The goal of Requirejs is to encourage the modularity of the code, which uses a script-loading step that differs from traditional script tags. It can be used to speed up and optimize the code, but its main purpose is to modularize the code. It encourages replacing the URL address with a module ID when using script. --[Requirejs official Website]
  

About the use of requirejs but more elaborate, please search for their own or in the official website to learn. Here is a record of your own use of REQUIREJS modular programming experience.

The application scenario is that your project uses a third party open Source Library, however, many non-GIS professional IT players may not understand some of the basic concepts, it may be necessary to the third party library to a more layer of packaging, so that the interface will be easier to understand some, and can also do the division of cooperation, Everyone in accordance with the specifications of Requirejs code, only need to write their own modules, set aside good interface on it. The following is a small example of my encapsulation, the package is not very thorough, at present only in the Learning JS Modular stage, the back regardless of size are in accordance with this specification to write, I believe that will benefit greatly.

Here I use the leaflet, a lightweight open source map library. The requirement is to write a drawing graph class to realize the drawing of dots, lines and faces. Give the code directly:

define ([' leaflet '], function () {/** * Draw multiple segment lines * @param options * @returns {*} * @private * * var _drawlin
  E = function (latlngs, options) {return L.polyline (latlngs, Options);

  };
    /** * Draw Polygon * @param options * @private * * var _drawpolygon = function (latlngs, options) {var polygon; if (Latlngs.length < 3) {Console.log ("points less than 3, the polygon cannot be drawn!")
    ");
      else {var firstpt = latlngs[0];
      var lastpt = latlngs[latlngs.length-1];
      if (Firstpt.equals (LASTPT)) {Latlngs.pop ()//Remove the same endpoint as the starting point} polygon = L.polygon (latlngs, Options);
    return polygon;
  }
  }; /** * Draw Rectangle * @param bounds * @param options * @returns {*} * @private/var _drawrect = function (Boun
  DS, Options) {return L.rectangle (bounds, options);
  }; /** * Draw Round * @param center * @param RADIUS * @param options * @returns {*} * @private/var _DRAWC ircle = function (center, RADIUS, options) {returN L.circle (center, RADIUS);

  };
    /** * encapsulation, exposing public method * * DrawLine: _drawline, DrawPolygon: _drawpolygon, DrawRect: _drawrect,
 Drawcircle: _drawcircle}})

Call-time code:

Require ([' drawhelper '], function (drawhelper) {function drawLine () {var latlngs = new Array ();
   for (var i = m < i++) {for (var j = N. J < A; 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), L.LATLNG (32, 109), L.LATLNG (+), L.LATLNG (+,), L.LATLNG);
   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 effect is as follows. I'm not a complete package here, but it's enough. Like the basic map operation, layer control can write a Mapcontrol for unified management

The above is about JavaScript modular programming of the discussion, I hope to help you learn.