這篇文章主要介紹了論JavaScript模塊化編程，感興趣的小伙伴們可以參考一下

JavaScript模塊化編程的重要性

JavaScript的原型是java，它也是一種面向?qū)ο缶幊陶Z言，屬于一種弱類型語言，它具有更大的靈活性。以往在編寫javascript代碼時，都是直接編寫一個個.js文件，然后用script標(biāo)簽在html頁面中引用，這樣就會帶來幾方面的問題：

1、出現(xiàn)大量的全局變量 

js在每個地方都可以定義一個全局變量，編寫不符合規(guī)范將導(dǎo)致大量全局變量的出現(xiàn)，最終程序?qū)㈦y以維護。

2、js加載順序要按照代碼的依賴順序 

最簡單的，例如a.js依賴于b.js文件，那么在html中引入腳本時，b.js必須要在a.js前面引入，否則將會報錯。如果一個項目分工編寫了幾十個js文件，如果不按照一定的規(guī)范，將會出現(xiàn)大量的全局變量（也可能有重復(fù)的存在）；其依賴關(guān)系也將難以維護

3、html一次性加載過多js腳本頁面出現(xiàn)假死 

初始化時一次性加載過多js腳本，很有可能會導(dǎo)致頁面出現(xiàn)假死狀態(tài)

使用RequireJS實現(xiàn)js模塊化編程

RequireJS的目標(biāo)是鼓勵代碼的模塊化，它使用了不同于傳統(tǒng)script標(biāo)簽的腳本加載步驟?？梢杂盟鼇砑铀?、優(yōu)化代碼，但其主要目的還是為了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址。 —— [ RequireJS官網(wǎng) ]

關(guān)于RequireJS的使用不過多闡述，詳細請自行搜索或者在官網(wǎng)學(xué)習(xí)。這里記錄下自己使用RequireJS模塊化編程的一些心得。

應(yīng)用場景是你的項目中使用了第三方開源庫，但是呢，很多非GIS專業(yè)的IT選手對一些基本的概念可能會看不懂，這時候能可能就需要對第三方庫進行更上一層的包裝，這樣接口就會更加容易理解一些，并且也可以做到分工協(xié)作，每個人都按照RequireJS的規(guī)范編寫代碼，只需要編寫好自己的模塊，預(yù)留好接口就可以了。下面是我封裝的一個小例子，封裝的還不是很徹底，目前僅處于學(xué)習(xí)js模塊化階段，后面無論大小都按照這種規(guī)范來寫，相信一定會受益匪淺。

這里我采用的leaflet，一個輕量級開源地圖庫。需求是編寫一個繪制圖形類，實現(xiàn)點、線、面的繪制。直接給出代碼了：

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("點數(shù)少于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

  }

})

調(diào)用時代碼：

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

})

實現(xiàn)效果如下。這里我封裝的還不徹底，但是已經(jīng)夠用了。像基礎(chǔ)的地圖操作，圖層控制都可以寫一個mapcontrol進行統(tǒng)一的管理

以上就是關(guān)于JavaScript模塊化編程的論述，希望對大家的學(xué)習(xí)有所幫助。