這篇文章主要介紹了論JavaScript模塊化編程，感興趣的小伙伴們可以參考一下
JavaScript模塊化編程的重要性
JavaScript的原型是java，它也是一種面向?qū)ο缶幊陶Z(yǔ)言，屬于一種弱類型語(yǔ)言，它具有更大的靈活性。以往在編寫javascript代碼時(shí)，都是直接編寫一個(gè)個(gè).js文件，然后用script標(biāo)簽在html頁(yè)面中引用，這樣就會(huì)帶來(lái)幾方面的問(wèn)題：
1、出現(xiàn)大量的全局變量
js在每個(gè)地方都可以定義一個(gè)全局變量，編寫不符合規(guī)范將導(dǎo)致大量全局變量的出現(xiàn)，最終程序?qū)㈦y以維護(hù)。
2、js加載順序要按照代碼的依賴順序
最簡(jiǎn)單的，例如a.js依賴于b.js文件，那么在html中引入腳本時(shí)，b.js必須要在a.js前面引入，否則將會(huì)報(bào)錯(cuò)。如果一個(gè)項(xiàng)目分工編寫了幾十個(gè)js文件，如果不按照一定的規(guī)范，將會(huì)出現(xiàn)大量的全局變量（也可能有重復(fù)的存在）；其依賴關(guān)系也將難以維護(hù)
3、html一次性加載過(guò)多js腳本頁(yè)面出現(xiàn)假死
初始化時(shí)一次性加載過(guò)多js腳本，很有可能會(huì)導(dǎo)致頁(yè)面出現(xiàn)假死狀態(tài)
使用RequireJS實(shí)現(xiàn)js模塊化編程
RequireJS的目標(biāo)是鼓勵(lì)代碼的模塊化，它使用了不同于傳統(tǒng)script標(biāo)簽的腳本加載步驟。可以用它來(lái)加速、優(yōu)化代碼，但其主要目的還是為了代碼的模塊化。它鼓勵(lì)在使用腳本時(shí)以module ID替代URL地址。 —— [ RequireJS官網(wǎng) ]
關(guān)于RequireJS的使用不過(guò)多闡述，詳細(xì)請(qǐng)自行搜索或者在官網(wǎng)學(xué)習(xí)。這里記錄下自己使用RequireJS模塊化編程的一些心得。
應(yīng)用場(chǎng)景是你的項(xiàng)目中使用了第三方開(kāi)源庫(kù)，但是呢，很多非GIS專業(yè)的IT選手對(duì)一些基本的概念可能會(huì)看不懂，這時(shí)候能可能就需要對(duì)第三方庫(kù)進(jìn)行更上一層的包裝，這樣接口就會(huì)更加容易理解一些，并且也可以做到分工協(xié)作，每個(gè)人都按照RequireJS的規(guī)范編寫代碼，只需要編寫好自己的模塊，預(yù)留好接口就可以了。下面是我封裝的一個(gè)小例子，封裝的還不是很徹底，目前僅處于學(xué)習(xí)js模塊化階段，后面無(wú)論大小都按照這種規(guī)范來(lái)寫，相信一定會(huì)受益匪淺。
這里我采用的leaflet，一個(gè)輕量級(jí)開(kāi)源地圖庫(kù)。需求是編寫一個(gè)繪制圖形類，實(shí)現(xiàn)點(diǎ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("點(diǎn)數(shù)少于3，無(wú)法繪制多邊形！");
} else {
var firstPt = latlngs[0];
var lastPt = latlngs[latlngs.length - 1];
if(firstPt.equals(lastPt)){
latlngs.pop();//移除與起點(diǎn)相同的終點(diǎn)
}
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)用時(shí)代碼：
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();
})
實(shí)現(xiàn)效果如下。這里我封裝的還不徹底，但是已經(jīng)夠用了。像基礎(chǔ)的地圖操作，圖層控制都可以寫一個(gè)mapcontrol進(jìn)行統(tǒng)一的管理
以上就是關(guān)于JavaScript模塊化編程的論述，希望對(duì)大家的學(xué)習(xí)有所幫助。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試