Auf JavaScript modulare Programmierung_Javascript-Kenntnisse

Die Bedeutung der modularen JavaScript-Programmierung

Der Prototyp von JavaScript ist Java, eine objektorientierte Programmiersprache und eine schwach typisierte Sprache mit größerer Flexibilität. In der Vergangenheit haben wir beim Schreiben von Javascript-Code direkt eine nach der anderen .js-Dateien geschrieben und sie dann mithilfe von Skript-Tags auf der HTML-Seite referenziert. Dies führt zu mehreren Problemen:

1. Es gibt eine große Anzahl globaler Variablen
js kann an jeder Stelle eine globale Variable definieren. Das Schreiben, das nicht den Spezifikationen entspricht, führt dazu, dass eine große Anzahl globaler Variablen auftritt und das Programm letztendlich schwer zu warten ist.
2. Die js-Ladereihenfolge muss mit der Abhängigkeitsreihenfolge des Codes übereinstimmen
Die einfachste Variante, zum Beispiel a.js, hängt von der b.js-Datei ab. Wenn Sie ein Skript in HTML einführen, muss b.js vor a.js eingeführt werden, andernfalls wird ein Fehler gemeldet. Wenn ein Projekt in Dutzende von JS-Dateien unterteilt ist und bestimmte Spezifikationen nicht befolgt werden, wird eine große Anzahl globaler Variablen angezeigt (und es kann auch zu Duplikaten kommen).
3. HTML lädt zu viele JS-Skripte gleichzeitig und die Seite erscheint angehalten Das gleichzeitige Laden zu vieler JS-Skripte während der Initialisierung führt wahrscheinlich dazu, dass die Seite angehalten erscheint

Verwendung von RequireJS zur Implementierung der modularen js-Programmierung

• Das Ziel von RequireJS besteht darin, die Modularisierung von Code zu fördern, und es verwendet einen Skriptladeschritt, der sich von herkömmlichen Skript-Tags unterscheidet. Sie können es verwenden, um Code zu beschleunigen und zu optimieren, aber sein Hauptzweck besteht darin, den Code zu modularisieren. Es wird empfohlen, bei der Verwendung von Skripten die Modul-ID anstelle der URL-Adresse zu verwenden. ——[Offizielle Website von RequireJS]
  

Ich möchte nicht zu sehr auf die Verwendung von RequireJS eingehen. Für Einzelheiten suchen Sie bitte selbst oder informieren Sie sich auf der offiziellen Website. Hier schreibe ich einige meiner Erfahrungen mit der modularen Programmierung von RequireJS auf.

Das Anwendungsszenario besteht darin, dass Sie in Ihrem Projekt eine Open-Source-Bibliothek eines Drittanbieters verwenden. Allerdings verstehen viele nicht-GIS-professionelle IT-Spieler möglicherweise einige grundlegende Konzepte. Zu diesem Zeitpunkt müssen Sie möglicherweise die Drittanbieter-Bibliothek aktualisieren Die obere Verpackungsschicht erleichtert das Verständnis der Schnittstelle, und jeder schreibt Code gemäß den Spezifikationen von RequireJS. Sie müssen nur ihre eigenen Module schreiben und gute Schnittstellen reservieren. Das Folgende ist ein kleines Beispiel meiner Kapselung. Derzeit bin ich nur in der Phase des Erlernens der JS-Modularisierung, egal wie groß oder klein sie ist profitieren sehr.

Hier verwende ich leaflet, eine leichte Open-Source-Kartenbibliothek. Die Anforderung besteht darin, einen Grafikzeichenkurs zu schreiben, um das Zeichnen von Punkten, Linien und Flächen zu realisieren. Der Code wird direkt angegeben:

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 beim Anruf:

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();
})

Der Effekt ist wie folgt. Ich habe es hier nicht vollständig zusammengefasst, aber es reicht. Für grundlegende Kartenoperationen und Ebenensteuerung können Sie eine Kartensteuerung für eine einheitliche Verwaltung schreiben

Das Obige ist eine Diskussion über die modulare JavaScript-Programmierung. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.