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 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 } })
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(); })
Das Obige ist eine Diskussion über die modulare JavaScript-Programmierung. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.