JavaScript モジュラープログラミング_JavaScript スキルについて-jsチュートリアル-php.cn

JavaScript モジュラープログラミング_JavaScript スキルについて

WBOY

リリース： 2016-05-16 15:11:52

オリジナル

1359 人が閲覧しました

JavaScript モジュール型プログラミングの重要性

JavaScript のプロトタイプは Java です。これもオブジェクト指向プログラミング言語であり、柔軟性に優れた弱い型付け言語です。以前は、JavaScript コードを記述する場合、.js ファイルを 1 つずつ直接記述し、スクリプトタグを使用して HTML ページ内でそれらのファイルを参照していました。これにより、次のようないくつかの問題が発生しました。

1. 多数のグローバル変数があります js ではあらゆる場所にグローバル変数を定義できますが、仕様に従わない記述をすると大量のグローバル変数が出現し、最終的にはプログラムの保守が困難になります。

2. js の読み込み順序は、コードの依存関係の順序に従っている必要があります
最も単純な例としては、a.js は b.js ファイルに依存します。スクリプトを HTML に導入する場合は、a.js より前に b.js を導入する必要があります。そうしないと、エラーが報告されます。プロジェクトが数十の js ファイルに分割されている場合、特定の仕様に従わないと、多数のグローバル変数が表示されます (重複が存在する可能性があります)。
3. HTML が一度にロードする JS スクリプトが多すぎるため、ページが一時停止したように見えます初期化中に一度に多くの js スクリプトを読み込むと、ページが一時停止したように見える可能性があります

RequireJS を使用して js モジュラープログラミングを実装する

RequireJS の目標はコードのモジュール化を促進することであり、従来のスクリプトタグとは異なるスクリプト読み込みステップを使用します。これを使用してコードを高速化し、最適化できますが、主な目的はコードをモジュール化することです。スクリプトを使用するときは、URL アドレスの代わりにモジュール ID を使用することをお勧めします。 ——[RequireJS公式サイト]

RequireJS の使い方についてはあまり詳しく説明しませんので、詳しくは自分で検索するか、公式 Web サイトで学習してください。ここでは、RequireJS モジュラープログラミングを使用した私の経験の一部を記録します。

このアプリケーションシナリオでは、プロジェクトでサードパーティのオープンソースライブラリを使用しますが、GIS の専門家以外の多くの IT 担当者は、現時点ではいくつかの基本概念を理解していない可能性があります。上位層のパッケージ化によりインターフェースが理解しやすくなり、全員がRequireJSの仕様に従ってコードを記述し、適切なインターフェースを確保するだけで済みます。以下は私のカプセル化の小さな例です。現時点では、JS のモジュール化を学習している段階です。大小に関係なく、この仕様に従って書くつもりです。多くの恩恵を受けます。

ここでは、軽量のオープンソース地図ライブラリであるリーフレットを使用します。要件は、点、線、および面の描画を実現するグラフィック描画クラスを作成することです。コードは直接与えられます:

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

ログイン後にコピー

効果は以下の通りです。ここでは完全にカプセル化していませんが、これで十分です。基本的なマップ操作とレイヤー制御については、統合管理用のマップコントロールを作成できます