Sur les compétences de programmation modulaire JavaScript_javascript

L'importance de la programmation modulaire JavaScript

Le prototype de JavaScript est Java, qui est également un langage de programmation orienté objet et un langage faiblement typé, qui offre une plus grande flexibilité. Dans le passé, lors de l'écriture de code javascript, nous écrivions directement les fichiers .js un par un, puis utilisions des balises de script pour les référencer dans la page html. Cela poserait plusieurs problèmes :

.

1. Il existe un grand nombre de variables globales
js peut définir une variable globale à chaque endroit. Une écriture non conforme aux spécifications entraînera l'apparition d'un grand nombre de variables globales, et finalement le programme sera difficile à maintenir.
2. L'ordre de chargement js doit être conforme à l'ordre des dépendances du code
Le plus simple, par exemple, a.js dépend du fichier b.js Lors de l'introduction d'un script en HTML, b.js doit être introduit avant a.js, sinon une erreur sera signalée. Si un projet est divisé en dizaines de fichiers js, si certaines spécifications ne sont pas respectées, un grand nombre de variables globales apparaîtront (et il pourra y avoir des doublons) et leurs dépendances seront également difficiles à maintenir
; 3. HTML charge trop de scripts js à la fois et la page apparaît suspendue
Le chargement de trop de scripts js à la fois lors de l'initialisation peut entraîner la suspension de la page
Utilisez RequireJS pour implémenter la programmation modulaire js

• L'objectif de RequireJS est d'encourager la modularisation du code et il utilise une étape de chargement de script différente des balises de script traditionnelles. Vous pouvez l'utiliser pour accélérer et optimiser le code, mais son objectif principal est de modulariser le code. Il est encouragé à utiliser l'ID du module au lieu de l'adresse URL lors de l'utilisation de scripts. ——[Site officiel de RequireJS]
  

Je ne veux pas trop m'étendre sur l'utilisation de RequireJS. Pour plus de détails, veuillez effectuer une recherche par vous-même ou vous renseigner sur le site officiel. Ici, j'enregistre certaines de mes expériences en utilisant la programmation modulaire RequireJS.

Le scénario d'application est que vous utilisez une bibliothèque open source tierce dans votre projet. Cependant, de nombreux acteurs informatiques non professionnels du SIG peuvent ne pas comprendre certains concepts de base. Pour le moment, vous devrez peut-être mettre à jour la bibliothèque tierce. bibliothèque.La couche supérieure de l'emballage rendra l'interface plus facile à comprendre, et la division du travail et la collaboration pourront également être réalisées. Tout le monde écrit du code selon les spécifications de RequireJS. Il leur suffit d'écrire leurs propres modules et de réserver de bonnes interfaces. Ce qui suit est un petit exemple de mon encapsulation. L'encapsulation n'est pas très approfondie. Actuellement, je suis seulement au stade de l'apprentissage de la modularisation js, j'écrirai selon cette spécification, quelle que soit sa taille. profitent beaucoup.

Ici, j'utilise leaflet, une bibliothèque de cartes open source légère. L'exigence est d'écrire un cours de dessin graphique pour réaliser le dessin de points, de lignes et de surfaces. Le code est donné directement :

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 lors de l'appel :

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

L'effet est le suivant. Je ne l’ai pas entièrement résumé ici, mais c’est suffisant. Pour les opérations cartographiques de base et le contrôle des couches, vous pouvez écrire un mapcontrol pour une gestion unifiée

Ce qui précède est une discussion sur la programmation modulaire JavaScript. J'espère que cela sera utile à l'apprentissage de chacun.