JavaScript模組化程式設計的重要性
JavaScript的原型是java，它也是一種物件導向程式語言，屬於一種弱型別語言，它具有更大的彈性。以往在寫javascript程式碼時，都是直接寫一個個.js文件，然後用script標籤在html頁面中引用，這樣就會帶來幾方面的問題：
1、出現大量的全域變數
js在每個地方都可以定義一個全域變量，編寫不符合規範將導致大量全域變數的出現，最終程式將難以維護。
2、js載入順序要依照程式碼的依賴順序
最簡單的，例如a.js依賴b.js文件，那麼在html中引入腳本時，b.js必須要在a.js前面引入，否則將會報錯。如果專案分工編寫了幾十個js文件，如果不依照一定的規範，將會出現大量的全域變數（也可能有重複的存在）；其依賴關係也將難以維護
3、html一次載入過多js腳本頁面出現假死
初始化時一次載入過多js腳本，很有可能會導致頁面出現假死狀態
使用RequireJS實作js模組化程式設計
- RequireJS的目標是鼓勵程式碼的模組化，它使用了不同於傳統script標籤的腳本載入步驟。可以用它來加速、優化程式碼，但其主要目的還是為了程式碼的模組化。它鼓勵在使用腳本時以module ID取代URL位址。 —— [ RequireJS官網 ]
關於RequireJS的使用不過多闡述，詳細請自行搜尋或在官網學習。這裡記錄下自己使用RequireJS模組化程式設計的一些心得。
應用程式場景是你的專案中使用了第三方開源函式庫，但是呢，很多非GIS專業的IT選手對一些基本的概念可能會看不懂，這時候能可能就需要對第三方函式庫進行更上一層的包裝，這樣介面就會更容易理解一些，也可以做到分工協作，每個人都按照RequireJS的規範編寫程式碼，只需要編寫好自己的模組，預留好介面就可以了。以下是我封裝的一個小例子，封裝的還不是很徹底，目前僅處於學習js模組化階段，後面無論大小都按照這種規範來寫，相信一定會受益匪淺。
這裡我採用的leaflet，一個輕量級開源地圖庫。需求是寫一個繪製圖形類，實現點、線、面的繪製。直接給了程式碼：
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();
})
登入後複製
實現效果如下。這裡我封裝的還不徹底，但已經夠用了。像是基礎的地圖操作，圖層控制都可以寫一個mapcontrol進行統一的管理
以上就是關於JavaScript模組化程式設計的論述，希望對大家的學習有所幫助。
