åºç¡
æ们é¦å
ç®åå°æ¦è¿°ä¸ä¸ï¼èªä»ä¸å¹´åEric Miragliaï¼YUIçå¼åè
ï¼ç¬¬ä¸æ¬¡å表å客æ述模åå模å¼ä»¥æ¥çä¸äºæ¨¡åå模å¼ãå¦æä½ å·²ç»å¯¹äºè¿äºæ¨¡åå模å¼é常çæäºï¼å¤§å¯ä»¥ç´æ¥è·³è¿æ¬èï¼ä»âè¿é¶æ¨¡å¼âå¼å§é
读ã
å¿åéå
è¿æ¯ä¸ç§è®©ä¸åå为å¯è½çåºæ¬ç»æï¼åæ¶å®ä¹æ¯Javascriptææ£çç¹æ§ãæ们å°ç®åå°å建ä¸ä¸ªå¿åå½æ°å¹¶ç«å³æ§è¡å®ãææç代ç å°è·å¨è¿ä¸ªå½æ°å
ï¼çåå¨ä¸ä¸ªæä¾ç§æåçéå
ä¸ï¼å®è¶³ä»¥ä½¿å¾è¿äºéå
ä¸çåéè½å¤è´¯ç©¿æ们çåºç¨çæ´ä¸ªçå½å¨æã
å¤å¶ä»£ç 代ç å¦ä¸:
(function () {
// ... all vars and functions are in this scope only
// still maintains access to all globals
}());
注æè¿å¯¹å
裹å¿åå½æ°çæå¤å±æ¬å·ãå 为Javascriptçè¯è¨ç¹æ§ï¼è¿å¯¹æ¬å·æ¯å¿
é¡»çãå¨jsä¸ç±å
³é®è¯functionå¼å¤´çè¯å¥æ»æ¯ä¼è¢«è®¤ä¸ºæ¯å½æ°å£°æå¼ãæè¿æ®µä»£ç å
裹å¨æ¬å·ä¸å°±å¯ä»¥è®©è§£éå¨ç¥éè¿æ¯ä¸ªå½æ°è¡¨è¾¾å¼ã
å
¨å±åé导å
¥
Javascriptæä¸ä¸ªç¹æ§å«åéå¼å
¨å±åéãæ 论ä¸ä¸ªåéåå¨åªå¿è¢«ç¨å°äºï¼è§£éå¨ä¼æ ¹æ®ä½ç¨åé¾æ¥ååæ¾å°è¿ä¸ªåéçvar声æè¯å¥ãå¦æ没ææ¾å°var声æè¯å¥ï¼é£ä¹è¿ä¸ªåéå°±ä¼è¢«è§ä¸ºå
¨å±åéãå¦æè¿ä¸ªåéç¨å¨ä¸å¥èµå¼è¯å¥ä¸ï¼åæ¶è¿ä¸ªåéåä¸åå¨æ¶ï¼å°±ä¼å建åºä¸ä¸ªå
¨å±åéãè¿æå³çå¨å¿åéå
ä¸ä½¿ç¨æå建å
¨å±åéæ¯å¾å®¹æçãä¸å¹¸çæ¯ï¼è¿ä¼å¯¼è´ååºç代ç æé¾ç»´æ¤ï¼å 为对äºäººçç´è§æåæ¥è¯´ï¼ä¸ç¼æ ¹æ¬åä¸æ¸
é£äºæ¯å
¨å±çåéã
幸è¿çæ¯ï¼æ们çå¿åå½æ°æä¾äºç®åçåéæ¹æ³ãåªè¦å°å
¨å±åéä½ä¸ºåæ°ä¼ éå°æ们çå¿åå½æ°ä¸ï¼å°±å¯ä»¥å¾å°æ¯éå¼å
¨å±åéæ´æ¸
æ°åå¿«éç代ç äºãä¸é¢æ¯ç¤ºä¾ï¼
å¤å¶ä»£ç 代ç å¦ä¸:
(function ($, YAHOO) {
// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));
模å导åº
ææ¶ä½ ä¸ä»
æ³è¦ä½¿ç¨å
¨å±åéï¼ä½ è¿æ³è¦å£°æå®ä»¬ï¼ä»¥ä¾åå¤ä½¿ç¨ãæ们å¯ä»¥å¾å®¹æå°éè¿å¯¼åºå®ä»¬æ¥åå°è¿ä¸ç¹ââéè¿å¿åå½æ°çè¿åå¼ãè¿æ ·åå°ä¼å®æä¸ä¸ªåºæ¬ç模åå模å¼éå½¢ï¼æ¥ä¸æ¥ä¼æ¯ä¸ä¸ªå®æ´çä¾åï¼
å¤å¶ä»£ç 代ç å¦ä¸:
var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// ...
};
return my;
}());
注ææ们已ç»å£°æäºä¸ä¸ªå«åMODULEçå
¨å±æ¨¡åï¼å®æ¥æ2个å
¬æçå±æ§ï¼ä¸ä¸ªå«åMODULE.moduleMethodçæ¹æ³åä¸ä¸ªå«åMODULE.modulePropertyçåéãå¦å¤ï¼å®è¿ç»´æ¤äºä¸ä¸ªå©ç¨å¿åå½æ°éå
çãç§æçå
ç½®ç¶æãåæ¶ï¼æ们å¯ä»¥å¾å®¹æå°å¯¼å
¥éè¦çå
¨å±åéï¼å¹¶åä¹åæ们æå¦å°çé£æ ·æ¥ä½¿ç¨è¿ä¸ªæ¨¡åå模å¼ã
è¿é¶æ¨¡å¼
ä¸é¢ä¸èææè¿°çåºç¡å·²ç»è¶³ä»¥åºå¯¹è®¸å¤æ
åµï¼ç°å¨æ们å¯ä»¥å°è¿ä¸ªæ¨¡åå模å¼è¿ä¸æ¥çåå±ï¼å建æ´å¤å¼ºå¤§çãå¯æ©å±çç»æã让æ们ä»MODULE模åå¼å§ï¼ä¸ä¸ä»ç»è¿äºè¿é¶æ¨¡å¼ã
æ¾å¤§æ¨¡å¼
æ´ä¸ªæ¨¡åå¿
é¡»å¨ä¸ä¸ªæ件ä¸æ¯æ¨¡åå模å¼çä¸ä¸ªéå¶ãä»»ä½ä¸ä¸ªåä¸å¤§å项ç®ç人é½ä¼æç½å°jsæåå¤ä¸ªæ件çä»·å¼ã幸è¿çæ¯ï¼æ们æ¥æä¸ä¸ªå¾æ£çå®ç°æ¥æ¾å¤§æ¨¡åãé¦å
ï¼æ们导å
¥ä¸ä¸ªæ¨¡åï¼å¹¶ä¸ºå®æ·»å å±æ§ï¼æåå导åºå®ãä¸é¢æ¯ä¸ä¸ªä¾åââä»åæ¬çMODULEä¸æ¾å¤§å®ï¼
å¤å¶ä»£ç 代ç å¦ä¸:
var MODULE = (function (my) {
my.anotherMethod = function () {
// added method...
};
return my;
}(MODULE));
æ们ç¨varå
³é®è¯æ¥ä¿è¯ä¸è´æ§ï¼è½ç¶å®å¨æ¤å¤ä¸æ¯å¿
é¡»çãå¨è¿æ®µä»£ç æ§è¡å®ä¹åï¼æ们ç模å就已ç»æ¥æäºä¸ä¸ªæ°çãå«åMODULE.anotherMethodçå
¬ææ¹æ³ãè¿ä¸ªæ¾å¤§æ件ä¹ä¼ç»´æ¤å®èªå·±çç§æå
ç½®ç¶æå导å
¥ç对象ã
宽æ¾å¤§æ¨¡å¼
æ们çä¸é¢ä¾åéè¦æ们çåå§å模åæå
被æ§è¡ï¼ç¶åæ¾å¤§æ¨¡åæè½æ§è¡ï¼å½ç¶ææ¶è¿å¯è½ä¹ä¸ä¸å®æ¯å¿
éçãJavascriptåºç¨å¯ä»¥åå°çãç¨æ¥æåæ§è½çãææ£çäºä¹ä¸å°±æ¯å¼æ¥æ§è¡èæ¬ãæ们å¯ä»¥å建çµæ´»çå¤é¨å模å并éè¿å®½æ¾å¤§æ¨¡å¼ä½¿å®ä»¬å¯ä»¥ä»¥ä»»æ顺åºå è½½ãæ¯ä¸ä¸ªæ件é½éè¦æä¸é¢çç»æç»ç»ï¼
å¤å¶ä»£ç 代ç å¦ä¸:
var MODULE = (function (my) {
// add capabilities...
return my;
}(MODULE || {}));
å¨è¿ä¸ªæ¨¡å¼ä¸ï¼var表达å¼ä½¿å¿
éçã注æå¦æMODULEè¿æªåå§åè¿ï¼è¿å¥å¯¼å
¥è¯å¥ä¼å建MODULEãè¿æå³çä½ å¯ä»¥ç¨ä¸ä¸ªåLABjsçå·¥å
·æ¥å¹¶è¡å è½½ä½ ææç模åæ件ï¼èä¸ä¼è¢«é»å¡ã
ç´§æ¾å¤§æ¨¡å¼
宽æ¾å¤§æ¨¡å¼é常ä¸éï¼ä½å®ä¹ä¼ç»ä½ ç模å带æ¥ä¸äºéå¶ãæéè¦çæ¯ï¼ä½ ä¸è½å®å
¨å°è¦ç模åçå±æ§ãä½ ä¹æ æ³å¨åå§åçæ¶åï¼ä½¿ç¨å
¶ä»æ件ä¸çå±æ§ï¼ä½ä½ å¯ä»¥å¨è¿è¡çæ¶åç¨ï¼ãç´§æ¾å¤§æ¨¡å¼å
å«äºä¸ä¸ªå è½½ç顺åºåºåï¼å¹¶ä¸å
许è¦çå±æ§ãè¿å¿æ¯ä¸ä¸ªç®åçä¾åï¼æ¾å¤§æ们çåå§MODULEï¼ï¼
å¤å¶ä»£ç 代ç å¦ä¸:
var MODULE = (function (my) {
var old_moduleMethod = my.moduleMethod;
my.moduleMethod = function () {
// method override, has access to old through old_moduleMethod...
};
return my;
}(MODULE));
æ们å¨ä¸é¢çä¾åä¸è¦çäºMODULE.moduleMethodçå®ç°ï¼ä½å¨éè¦çæ¶åï¼å¯ä»¥ç»´æ¤ä¸ä¸ªå¯¹åæ¥æ¹æ³çå¼ç¨ã
å
éä¸ç»§æ¿
å¤å¶ä»£ç 代ç å¦ä¸:
var MODULE_TWO = (function (old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
var super_moduleMethod = old.moduleMethod;
my.moduleMethod = function () {
// override method on the clone, access to super through super_moduleMethod
};
return my;
}(MODULE));
è¿ä¸ªæ¨¡å¼å¯è½æ¯æ缺ä¹çµæ´»æ§çä¸ç§éæ©äºãå®ç¡®å®ä½¿å¾ä»£ç æ¾å¾å¾æ´æ´ï¼ä½é£æ¯ç¨çµæ´»æ§ç代价æ¢æ¥çãæ£å¦æä¸é¢åçè¿æ®µä»£ç ï¼å¦ææ个å±æ§æ¯å¯¹è±¡æè
å½æ°ï¼å®å°ä¸ä¼è¢«å¤å¶ï¼èæ¯ä¼æ为è¿ä¸ªå¯¹è±¡æå½æ°ç第äºä¸ªå¼ç¨ãä¿®æ¹äºå
¶ä¸çæä¸ä¸ªå°±ä¼åæ¶ä¿®æ¹å¦ä¸ä¸ªï¼è¯è
注ï¼å 为å®ä»¬æ ¹æ¬å°±æ¯ä¸ä¸ªåï¼ï¼ãè¿å¯ä»¥éè¿éå½å
éè¿ç¨æ¥è§£å³è¿ä¸ªå¯¹è±¡å
éé®é¢ï¼ä½å½æ°å
éå¯è½æ æ³è§£å³ï¼ä¹è®¸ç¨evalå¯ä»¥è§£å³å§ãå æ¤ï¼æå¨è¿ç¯æç« ä¸è®²è¿°è¿ä¸ªæ¹æ³ä»
ä»
æ¯èèå°æç« çå®æ´æ§ã
è·¨æ件ç§æåé
æä¸ä¸ªæ¨¡ååå°å¤ä¸ªæ件ä¸æä¸ä¸ªé大çéå¶ï¼æ¯ä¸ä¸ªæ件é½ç»´æ¤äºåèªçç§æåéï¼å¹¶ä¸æ æ³è®¿é®å°å
¶ä»æ件çç§æåéãä½è¿ä¸ªé®é¢æ¯å¯ä»¥è§£å³çãè¿éæä¸ä¸ªç»´æ¤è·¨æ件ç§æåéçã宽æ¾å¤§æ¨¡åçä¾åï¼
å¤å¶ä»£ç 代ç å¦ä¸:
var MODULE = (function (my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || function () {
my._private = _private;
my._seal = _seal;
my._unseal = _unseal;
};
// permanent access to _private, _seal, and _unseal
return my;
}(MODULE || {}));
æææ件å¯ä»¥å¨å®ä»¬åèªç_privateåéä¸è®¾ç½®å±æ§ï¼å¹¶ä¸å®ç解å¯ä»¥è¢«å
¶ä»æ件访é®ãä¸æ¦è¿ä¸ªæ¨¡åå è½½å®æï¼åºç¨ç¨åºå¯ä»¥è°ç¨MODULE._seal()æ¥é²æ¢å¤é¨å¯¹å
é¨_privateçè°ç¨ãå¦æè¿ä¸ªæ¨¡åéè¦è¢«éæ°æ¾å¤§ï¼å¨ä»»ä½ä¸ä¸ªæ件ä¸çå
é¨æ¹æ³å¯ä»¥å¨å è½½æ°çæ件åè°ç¨_unseal()ï¼å¹¶å¨æ°æ件æ§è¡å¥½ä»¥åå次è°ç¨_seal()ãæå¦ä»å¨å·¥ä½ä¸ä½¿ç¨è¿ç§æ¨¡å¼ï¼èä¸æå¨å
¶ä»å°æ¹è¿æ²¡æè§è¿è¿ç§æ¹æ³ãæè§å¾è¿æ¯ä¸ç§é常æç¨ç模å¼ï¼å¾å¼å¾å°±è¿ä¸ªæ¨¡å¼æ¬èº«åä¸ç¯æç« ã
å模å
æ们çæåä¸ç§è¿é¶æ¨¡å¼æ¯æ¾èæè§æç®åçãå建å模åæ许å¤ä¼ç§çå®ä¾ãè¿å°±åæ¯å建ä¸è¬ç模åä¸æ ·ï¼
å¤å¶ä»£ç 代ç å¦ä¸:
MODULE.sub = (function () {
var my = {};
// ...
return my;
}());
è½ç¶è¿çä¸å»å¾ç®åï¼ä½æè§å¾è¿æ¯å¼å¾å¨è¿éæä¸æãå模åæ¥æä¸åä¸è¬æ¨¡åçè¿é¶ä¼å¿ï¼å
æ¬äºæ¾å¤§æ¨¡å¼åç§æåç¶æã
温馨提示:答案为网友推荐,仅供参考