Mengenai kemahiran programming_javascript modular JavaScript

Kepentingan Pengaturcaraan Modular JavaScript

Prototaip JavaScript ialah java, yang juga merupakan bahasa pengaturcaraan berorientasikan objek dan bahasa yang ditaip lemah, yang mempunyai fleksibiliti yang lebih besar. Pada masa lalu, apabila menulis kod javascript, kami akan terus menulis fail .js satu demi satu, dan kemudian menggunakan teg skrip untuk merujuknya dalam halaman html Ini akan menyebabkan beberapa masalah:

1. Terdapat sejumlah besar pembolehubah global
js boleh mentakrifkan pembolehubah global di setiap tempat Penulisan yang tidak mematuhi spesifikasi akan membawa kepada kemunculan sejumlah besar pembolehubah global, dan akhirnya program akan sukar untuk dikekalkan.
2. Urutan pemuatan js mestilah mengikut susunan kebergantungan kod
Yang paling mudah, contohnya, a.js bergantung pada fail b.js Apabila memperkenalkan skrip ke dalam html, b.js mesti diperkenalkan sebelum a.js, jika tidak, ralat akan dilaporkan. Jika projek dibahagikan kepada berpuluh-puluh fail js, jika spesifikasi tertentu tidak diikuti, sejumlah besar pembolehubah global akan muncul (dan mungkin terdapat pendua kebergantungan mereka juga akan sukar untuk dikekalkan
). 3. HTML memuatkan terlalu banyak skrip js pada satu masa dan halaman kelihatan digantung
Memuatkan terlalu banyak skrip js serentak semasa pemula boleh menyebabkan halaman kelihatan digantung
Gunakan RequireJS untuk melaksanakan pengaturcaraan modular js

• Matlamat RequireJS adalah untuk menggalakkan pemodulatan kod, dan ia menggunakan langkah pemuatan skrip yang berbeza daripada teg skrip tradisional. Anda boleh menggunakannya untuk mempercepat dan mengoptimumkan kod, tetapi tujuan utamanya adalah untuk memodulasi kod. Adalah digalakkan untuk menggunakan ID modul dan bukannya alamat URL apabila menggunakan skrip. ——[Tapak web rasmi RequireJS]
  

Saya tidak mahu menghuraikan terlalu banyak tentang penggunaan RequireJS Untuk butiran, sila cari sendiri atau pelajari di laman web rasmi. Di sini saya merekodkan beberapa pengalaman saya menggunakan pengaturcaraan modular RequireJS.

Senario aplikasi ialah anda menggunakan pustaka sumber terbuka pihak ketiga dalam projek anda Walau bagaimanapun, ramai pemain IT profesional bukan GIS mungkin tidak memahami beberapa konsep asas pada masa ini, anda mungkin perlu mengemas kini pihak ketiga perpustakaan. Lapisan atas pembungkusan akan menjadikan antara muka lebih mudah difahami, dan pembahagian kerja dan kerjasama juga boleh dicapai. Semua orang menulis kod mengikut spesifikasi RequireJS. Berikut adalah contoh kecil enkapsulasi saya. Pada masa ini, saya hanya dalam peringkat pembelajaran modularisasi ini tidak kira betapa besar atau kecilnya banyak manfaat.

Di sini saya menggunakan risalah, perpustakaan peta sumber terbuka yang ringan. Keperluan adalah untuk menulis kelas lukisan grafik untuk merealisasikan lukisan titik, garisan dan permukaan. Kod diberikan terus:

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

Kod semasa membuat panggilan:

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

Kesannya adalah seperti berikut. Saya belum merangkumnya sepenuhnya di sini, tetapi sudah memadai. Untuk operasi peta asas dan kawalan lapisan, anda boleh menulis kawalan peta untuk pengurusan bersatu

Di atas ialah perbincangan tentang pengaturcaraan modular JavaScript Saya harap ia akan membantu pembelajaran semua orang.