Maintainable JavaScript-Chapter 六 Note
Maintainable JavaScript-Chapter 6 Note
Avoid Globals
JS鎵ц鐜妭鏈夊緢澶氱嫭鐗逛箣澶勭浉瀵逛簬鍏朵粬璇█鏉ヨ锛屽鍏ㄥ眬鍙橀噺鍜屽嚱鏁扮殑浣跨敤銆?
JS鏈韩鐨勫垵濮嬫墽琛岀幆澧冨氨鏄湁澶氱澶氭牱鐨勫叏灞€鍙橀噺鎵€瀹氫箟鐨勶紝杩欎簺鍏ㄥ眬鍙橀噺鍦ㄧ幆澧冨垱濮嬩箣鍒濆氨瀛樺湪浜嗐€?
鍏ㄥ眬瀵硅薄鏄竴涓绉樼殑瀵硅薄锛岃〃绀鸿剼鏈殑鏈€澶栧眰涓婁笅鏂囥€?
娴忚鍣ㄤ腑 window瀵硅薄寰€寰€閲嶈浇骞剁瓑浜庡叏灞€瀵硅薄锛屽洜姝や换浣曞湪鍏ㄥ眬瀵硅薄涓０鏄庣殑鍙橀噺鎴栬€呭嚱鏁伴兘涓簑indow瀵硅薄鐨勫睘鎬с€?
鑰屼笉闇€瑕佹樉寮忕殑灏嗚繖浜涙寕鍦ㄥ埌 window 瀵硅薄涓娿€?
var color = "red";
function getColor(){
alert(color);
}
color === window.color;
getColor === window.getColor;
6.1 鍏ㄥ眬鍙橀噺甯︽潵鐨勯棶棰?
闅忕潃浠ｇ爜鐨勫闀匡紝鍏ㄥ眬鍙橀噺姣棤鐤戦棶鐨勪細瀵艰嚧涓€浜涢潪甯搁噸瑕佺殑鍙淮鎶ゆ€ч棶棰樸€?
6.1.1 鍛藉悕鍐茬獊
褰撳叏灞€鍙橀噺鍜屽叏灞€鍑芥暟瓒婃潵瓒婂鐨勬椂鍊欙紝鍙戠敓鍛藉悕鍐茬獊姒傜巼灏变細瓒婃潵瓒婂ぇ銆傚悇绉嶅彉閲忥紝鍑芥暟灏嗕細琚噸缃紝閭ｄ箞寰堝鍚勭鍚勬牱鐨凚UG灏变細闅忎箣鑰屾潵銆?
姣斿锛?
function getColor(){
alert(color);
}
涓殑 color 鐢变簬渚濊禆涓庡叏灞€鐨勫彉閲忥紝閭ｄ箞杩欑渚濊禆鍏崇郴灏嗗緢闅捐杩借釜鍒帮紝鎴戝湪涓嶅皬蹇冮噸缃簡 color 鍚庝笉鐭ラ亾鏈夊灏戝儚璇ュ嚱鏁颁竴鏍风殑鍑芥暟杩涜浜嗗叏灞€渚濊禆鐨勮涓恒€?
鎺ヤ笅鏉ワ紝鍏ㄥ眬鍙橀噺涓庝竴浜涙祻瑙堝櫒鍐呯疆API鍐茬獊鐨勯闄┿€?
6.1.2 浠ｇ爜鐨勮剢寮辨€?
涓€涓緷璧栦簬鍏ㄥ眬鍙橀噺鐨勫嚱鏁板嵆鏄繁鑰﹀悎浜庝笂涓嬫枃鐜涔嬩腑銆傜幆澧冪殑鍙樺寲灏卞彲鑳戒細瀵艰嚧鍑芥暟鐨勫け鏁堛€?
浣嗘槸褰?color 琚綔涓哄弬鏁颁紶閫掕繘鍑芥暟鐨勮瘽锛岄偅涔堟儏鍐靛氨澶уぇ涓嶄竴鏍蜂簡銆?
function getColor( color ){
alert(color);
}
涓嶅湪渚濊禆鍏ㄥ眬鍙橀噺锛屽苟涓斾粠涓庝笂涓嬫枃鐨勬繁鑰﹀悎涔嬩腑鑴辩鍑烘潵銆傛墍浠ュ綋瀹氫箟鍑芥暟灏藉彲鑳界殑灏嗘暟鎹疆浜庡眬閮ㄥ彉閲忎箣涓紝浠讳綍澶栭儴鏁版嵁閮藉簲褰撲互鍙傛暟鐨勫舰寮忎紶閫掕繘鍏ュ嚱鏁帮紝淇濊瘉鍑芥暟涓庡叾澶栭儴鐜闅旂寮€锛屼笉鑷充簬褰㈡垚娣卞害鑰﹀悎鐨勫叧绯汇€?
6.1.3 闅句互娴嬭瘯
浠讳綍渚濊禆浜庡叏灞€鍙橀噺鎵嶈兘姝ｅ父宸ヤ綔鐨勫嚱鏁帮紝鍙湁涓哄叾閲嶆柊鍒涘缓瀹屾暣鐨勫叏灞€鍙橀噺鎵嶈兘姝ｇ‘鐨勬祴璇曪紝鐒跺悗锛屽氨鏈ㄦ湁鐒跺悗浜嗐€?
淇濊瘉鍑芥暟涓嶅鍏ㄥ眬鍙橀噺鏈変緷璧栵紝灏嗗ぇ澶у寮轰唬鐮佺殑鍙祴璇曟€э紝褰撶劧涓嶅寘鎷琂S涓師鐢熺殑瀵硅薄锛屽Date锛孉rray绛夈€?
6.2 鎰忓鐨勫叏灞€鍙橀噺
JS 涓湁寰堝闄烽槺浼氫娇鎴戜滑涓€涓嶅皬蹇冨氨鍒涘缓浜嗗叏灞€鍙橀噺锛屽锛?
function doSomething(){
var count = 10;
title = "abcdefg";
var a = b = 0;
}
瀵逛簬鎰忓鐨勫叏灞€鍙橀噺涓€浜涘伐鍏凤紝姣斿JSLint鍜孞SHint灏卞彲浠ヨ捣鍒颁綔鐢ㄤ簡锛屽洜涓烘剰澶栧垱寤哄叏灞€鍙橀噺骞朵笉浼氬紩璧稪S寮曟搸鐨勬姤閿欙紝鏈夋椂鍊欏緢闅惧療瑙夊埌锛岃€岃繖浜涘伐鍏峰氨鏄垜浠緢濂界殑棰勯槻锛屾秷闄や竴浜涙剰澶栧垱寤虹殑鎯呭喌銆傝繕鏈変弗鏍兼ā寮忎笅涔熶細鎶ラ敊鏉ユ彁閱掔▼搴忕尶銆?
6.3 鍗曞叏灞€鍙橀噺鏂瑰紡
YUI 寮曞叆 鍞竴 YUI鍏ㄥ眬鍙橀噺銆?
jQuery 寮曞叆 $ 鍜?jQuery 鍏ㄥ眬鍙橀噺銆?
Dojo 寮曞叆 dojo 鍏ㄥ眬鍙橀噺銆?
Closure 寮曞叆 goog 鍏ㄥ眬鍙橀噺銆?
鍗曞叏灞€鍙橀噺鎰忓懗鐫€鍒涘缓涓€涓敮涓€鐨勫叏灞€瀵硅薄鍚嶏紝灏嗘墍鏈変綘鐨勫姛鑳戒唬鐮佹寕鍦ㄥ埌璇ュ璞′笂锛岄兘鎴愪负璇ュ璞＄殑灞炴€э紝浠庤€屼笉鍒涘缓鍏朵粬鐨勫叏灞€鍙橀噺銆?
function Book( title ){
this.title = title;
this.page = 1;
}
Book.prototype.turnPage = function( desc_num ){
this.page += desc_num;
}
var chapter1 = new Book("one");
var chapter2 = new Book("two");
var chapter3 = new Book("three");
浼氭湁濂藉鍏ㄥ眬鍙橀噺锛岄偅涔堬細
var MainJS = {};
MainJS.Book = function( title ){
this.title = title;
this.page = 1;
}
MainJS.Book.prototype.turnPage = function( desc_num ){
this.page += desc_num;
}
MainJS. chapter1 = new MainJS.Book("one");
MainJS. chapter2 = new MainJS.Book("two");
MainJS. chapter3 = new MainJS.Book("three");
鍏跺疄锛屽緢绠€鍗曪紝浣嗘槸甯︽潵鐨勬晥鏋滅‘鏄潪甯镐笉閿欑殑銆?
6.3.1 鍛藉悕绌洪棿
JS涓殑鍛藉悕绌洪棿锛屽叾瀹炶川灏辨槸涓嶆柇鐨勫線涓€涓畾涔夌殑鍏ㄥ眬瀵硅薄涓紝鍚堢悊鏈夎鍒欑殑濉炰笢瑗裤€?
var MyGlobal = {
namespace : function( ns ){
var parts = ns.split("."),
object = this,
i, len;
if( parts[0] === "MyGlobal" ){
parts = parts.slice(1);
}
for( i = 0,len = parts.length; i<len; i++ ){
if( !object[parts[i]] ){
object[parts[i]] = {};
}
object = object[parts[i]];
}
return object;
}
}
鐒跺悗鍙互鑷敱鐨勫垱寤哄懡鍚嶇┖闂翠簡锛?
MyGlobal.namespace("aa.bb.cc.dd");
MyGlobal.namespace("MyGlobal.aa.bb.cc.dd");
6.3.2 妯″潡
鍙﹀涓€绉嶅熀浜庡崟鍏ㄥ眬鍙橀噺鐨勬墿鍏呮柟娉曟槸浣跨敤妯″潡銆?
妯″潡鏄竴绉嶉€氱敤鐨勫姛鑳界墖娈碉紝骞朵笉鍒涘缓鍏ㄥ眬鍙橀噺鍜屽懡鍚嶇┖闂达紝鑰屾槸灏嗚繖浜涗唬鐮佸瓨鏀惧湪涓€涓〃绀烘墽琛屼竴涓换鍔℃垨鑰呭彂甯冧竴涓€熷彛鐨勫崟鍑芥暟涓€備袱绉嶆祦琛岀殑妯″潡鏄?YUI妯″潡 鍜?寮傛妯″潡瀹氫箟锛圓MD锛夈€?
YUI妯″潡
鏄娇鐢╕UI JS绫诲簱鍒涘缓鏂版ā鍧楃殑涓€绉嶆ā寮忥紝鍐欐硶锛?
YUI.add("module-name", function(Y){
// 妯″潡姝ｆ枃
}, "version", { requires: ["depend1", "depend2"] });
寮傛妯″潡瀹氫箟 AMD
define( "module-name", ["depend1", "depend2"] , function(d1, d2){
// 妯″潡姝ｆ枃
});
6.4 闆跺叏灞€鍙橀噺
JS浠ｇ爜娉ㄥ叆鍒伴〉闈㈢殑鏃跺€欏彲浠ュ疄鐜颁笉鍒涘缓鍏ㄥ眬鍙橀噺銆傚綋鐒朵娇鐢ㄧ殑鍦烘櫙涓嶄細闈炲父澶氥€傚湪涓€娈靛畬鍏ㄧ嫭绔嬬殑浠ｇ爜锛屾垨鑰呬唬鐮侀潪甯稿皬涓斾笉鎻愪緵浠讳綍鎺ュ彛鐨勬椂鍊欍€?
(function(win){
// 浠ｇ爜 涓嶆毚闇蹭换浣曟帴鍙?
}( window ));
鍙浠ｇ爜闇€瑕佽鍏朵粬鐨勪唬鐮佹墍渚濊禆鐨勬椂鍊欙紝灏变笉鍙互浣跨敤闆跺叏灞€鍙橀噺鏂瑰紡銆傚湪瀵逛簬浠ｇ爜鍧楃殑浠ｇ爜鍚堝苟鏃跺€欐湁鎸哄ぇ浣滅敤銆?
Avoid Globals
JS鎵ц鐜妭鏈夊緢澶氱嫭鐗逛箣澶勭浉瀵逛簬鍏朵粬璇█鏉ヨ锛屽鍏ㄥ眬鍙橀噺鍜屽嚱鏁扮殑浣跨敤銆?
JS鏈韩鐨勫垵濮嬫墽琛岀幆澧冨氨鏄湁澶氱澶氭牱鐨勫叏灞€鍙橀噺鎵€瀹氫箟鐨勶紝杩欎簺鍏ㄥ眬鍙橀噺鍦ㄧ幆澧冨垱濮嬩箣鍒濆氨瀛樺湪浜嗐€?
鍏ㄥ眬瀵硅薄鏄竴涓绉樼殑瀵硅薄锛岃〃绀鸿剼鏈殑鏈€澶栧眰涓婁笅鏂囥€?
娴忚鍣ㄤ腑 window瀵硅薄寰€寰€閲嶈浇骞剁瓑浜庡叏灞€瀵硅薄锛屽洜姝や换浣曞湪鍏ㄥ眬瀵硅薄涓０鏄庣殑鍙橀噺鎴栬€呭嚱鏁伴兘涓簑indow瀵硅薄鐨勫睘鎬с€?
鑰屼笉闇€瑕佹樉寮忕殑灏嗚繖浜涙寕鍦ㄥ埌 window 瀵硅薄涓娿€?
var color = "red";
function getColor(){
alert(color);
}
color === window.color;
getColor === window.getColor;
6.1 鍏ㄥ眬鍙橀噺甯︽潵鐨勯棶棰?
闅忕潃浠ｇ爜鐨勫闀匡紝鍏ㄥ眬鍙橀噺姣棤鐤戦棶鐨勪細瀵艰嚧涓€浜涢潪甯搁噸瑕佺殑鍙淮鎶ゆ€ч棶棰樸€?
6.1.1 鍛藉悕鍐茬獊
褰撳叏灞€鍙橀噺鍜屽叏灞€鍑芥暟瓒婃潵瓒婂鐨勬椂鍊欙紝鍙戠敓鍛藉悕鍐茬獊姒傜巼灏变細瓒婃潵瓒婂ぇ銆傚悇绉嶅彉閲忥紝鍑芥暟灏嗕細琚噸缃紝閭ｄ箞寰堝鍚勭鍚勬牱鐨凚UG灏变細闅忎箣鑰屾潵銆?
姣斿锛?
function getColor(){
alert(color);
}
涓殑 color 鐢变簬渚濊禆涓庡叏灞€鐨勫彉閲忥紝閭ｄ箞杩欑渚濊禆鍏崇郴灏嗗緢闅捐杩借釜鍒帮紝鎴戝湪涓嶅皬蹇冮噸缃簡 color 鍚庝笉鐭ラ亾鏈夊灏戝儚璇ュ嚱鏁颁竴鏍风殑鍑芥暟杩涜浜嗗叏灞€渚濊禆鐨勮涓恒€?
鎺ヤ笅鏉ワ紝鍏ㄥ眬鍙橀噺涓庝竴浜涙祻瑙堝櫒鍐呯疆API鍐茬獊鐨勯闄┿€?
6.1.2 浠ｇ爜鐨勮剢寮辨€?
涓€涓緷璧栦簬鍏ㄥ眬鍙橀噺鐨勫嚱鏁板嵆鏄繁鑰﹀悎浜庝笂涓嬫枃鐜涔嬩腑銆傜幆澧冪殑鍙樺寲灏卞彲鑳戒細瀵艰嚧鍑芥暟鐨勫け鏁堛€?
浣嗘槸褰?color 琚綔涓哄弬鏁颁紶閫掕繘鍑芥暟鐨勮瘽锛岄偅涔堟儏鍐靛氨澶уぇ涓嶄竴鏍蜂簡銆?
function getColor( color ){
alert(color);
}
涓嶅湪渚濊禆鍏ㄥ眬鍙橀噺锛屽苟涓斾粠涓庝笂涓嬫枃鐨勬繁鑰﹀悎涔嬩腑鑴辩鍑烘潵銆傛墍浠ュ綋瀹氫箟鍑芥暟灏藉彲鑳界殑灏嗘暟鎹疆浜庡眬閮ㄥ彉閲忎箣涓紝浠讳綍澶栭儴鏁版嵁閮藉簲褰撲互鍙傛暟鐨勫舰寮忎紶閫掕繘鍏ュ嚱鏁帮紝淇濊瘉鍑芥暟涓庡叾澶栭儴鐜闅旂寮€锛屼笉鑷充簬褰㈡垚娣卞害鑰﹀悎鐨勫叧绯汇€?
6.1.3 闅句互娴嬭瘯
浠讳綍渚濊禆浜庡叏灞€鍙橀噺鎵嶈兘姝ｅ父宸ヤ綔鐨勫嚱鏁帮紝鍙湁涓哄叾閲嶆柊鍒涘缓瀹屾暣鐨勫叏灞€鍙橀噺鎵嶈兘姝ｇ‘鐨勬祴璇曪紝鐒跺悗锛屽氨鏈ㄦ湁鐒跺悗浜嗐€?
淇濊瘉鍑芥暟涓嶅鍏ㄥ眬鍙橀噺鏈変緷璧栵紝灏嗗ぇ澶у寮轰唬鐮佺殑鍙祴璇曟€э紝褰撶劧涓嶅寘鎷琂S涓師鐢熺殑瀵硅薄锛屽Date锛孉rray绛夈€?
6.2 鎰忓鐨勫叏灞€鍙橀噺
JS 涓湁寰堝闄烽槺浼氫娇鎴戜滑涓€涓嶅皬蹇冨氨鍒涘缓浜嗗叏灞€鍙橀噺锛屽锛?
function doSomething(){
var count = 10;
title = "abcdefg";
var a = b = 0;
}
瀵逛簬鎰忓鐨勫叏灞€鍙橀噺涓€浜涘伐鍏凤紝姣斿JSLint鍜孞SHint灏卞彲浠ヨ捣鍒颁綔鐢ㄤ簡锛屽洜涓烘剰澶栧垱寤哄叏灞€鍙橀噺骞朵笉浼氬紩璧稪S寮曟搸鐨勬姤閿欙紝鏈夋椂鍊欏緢闅惧療瑙夊埌锛岃€岃繖浜涘伐鍏峰氨鏄垜浠緢濂界殑棰勯槻锛屾秷闄や竴浜涙剰澶栧垱寤虹殑鎯呭喌銆傝繕鏈変弗鏍兼ā寮忎笅涔熶細鎶ラ敊鏉ユ彁閱掔▼搴忕尶銆?
6.3 鍗曞叏灞€鍙橀噺鏂瑰紡
YUI 寮曞叆 鍞竴 YUI鍏ㄥ眬鍙橀噺銆?
jQuery 寮曞叆 $ 鍜?jQuery 鍏ㄥ眬鍙橀噺銆?
Dojo 寮曞叆 dojo 鍏ㄥ眬鍙橀噺銆?
Closure 寮曞叆 goog 鍏ㄥ眬鍙橀噺銆?
鍗曞叏灞€鍙橀噺鎰忓懗鐫€鍒涘缓涓€涓敮涓€鐨勫叏灞€瀵硅薄鍚嶏紝灏嗘墍鏈変綘鐨勫姛鑳戒唬鐮佹寕鍦ㄥ埌璇ュ璞′笂锛岄兘鎴愪负璇ュ璞＄殑灞炴€э紝浠庤€屼笉鍒涘缓鍏朵粬鐨勫叏灞€鍙橀噺銆?
function Book( title ){
this.title = title;
this.page = 1;
}
Book.prototype.turnPage = function( desc_num ){
this.page += desc_num;
}
var chapter1 = new Book("one");
var chapter2 = new Book("two");
var chapter3 = new Book("three");
浼氭湁濂藉鍏ㄥ眬鍙橀噺锛岄偅涔堬細
var MainJS = {};
MainJS.Book = function( title ){
this.title = title;
this.page = 1;
}
MainJS.Book.prototype.turnPage = function( desc_num ){
this.page += desc_num;
}
MainJS. chapter1 = new MainJS.Book("one");
MainJS. chapter2 = new MainJS.Book("two");
MainJS. chapter3 = new MainJS.Book("three");
鍏跺疄锛屽緢绠€鍗曪紝浣嗘槸甯︽潵鐨勬晥鏋滅‘鏄潪甯镐笉閿欑殑銆?
6.3.1 鍛藉悕绌洪棿
JS涓殑鍛藉悕绌洪棿锛屽叾瀹炶川灏辨槸涓嶆柇鐨勫線涓€涓畾涔夌殑鍏ㄥ眬瀵硅薄涓紝鍚堢悊鏈夎鍒欑殑濉炰笢瑗裤€?
var MyGlobal = {
namespace : function( ns ){
var parts = ns.split("."),
object = this,
i, len;
if( parts[0] === "MyGlobal" ){
parts = parts.slice(1);
}
for( i = 0,len = parts.length; i<len; i++ ){
if( !object[parts[i]] ){
object[parts[i]] = {};
}
object = object[parts[i]];
}
return object;
}
}
鐒跺悗鍙互鑷敱鐨勫垱寤哄懡鍚嶇┖闂翠簡锛?
MyGlobal.namespace("aa.bb.cc.dd");
MyGlobal.namespace("MyGlobal.aa.bb.cc.dd");
6.3.2 妯″潡
鍙﹀涓€绉嶅熀浜庡崟鍏ㄥ眬鍙橀噺鐨勬墿鍏呮柟娉曟槸浣跨敤妯″潡銆?
妯″潡鏄竴绉嶉€氱敤鐨勫姛鑳界墖娈碉紝骞朵笉鍒涘缓鍏ㄥ眬鍙橀噺鍜屽懡鍚嶇┖闂达紝鑰屾槸灏嗚繖浜涗唬鐮佸瓨鏀惧湪涓€涓〃绀烘墽琛屼竴涓换鍔℃垨鑰呭彂甯冧竴涓€熷彛鐨勫崟鍑芥暟涓€備袱绉嶆祦琛岀殑妯″潡鏄?YUI妯″潡 鍜?寮傛妯″潡瀹氫箟锛圓MD锛夈€?
YUI妯″潡
鏄娇鐢╕UI JS绫诲簱鍒涘缓鏂版ā鍧楃殑涓€绉嶆ā寮忥紝鍐欐硶锛?
YUI.add("module-name", function(Y){
// 妯″潡姝ｆ枃
}, "version", { requires: ["depend1", "depend2"] });
寮傛妯″潡瀹氫箟 AMD
define( "module-name", ["depend1", "depend2"] , function(d1, d2){
// 妯″潡姝ｆ枃
});
6.4 闆跺叏灞€鍙橀噺
JS浠ｇ爜娉ㄥ叆鍒伴〉闈㈢殑鏃跺€欏彲浠ュ疄鐜颁笉鍒涘缓鍏ㄥ眬鍙橀噺銆傚綋鐒朵娇鐢ㄧ殑鍦烘櫙涓嶄細闈炲父澶氥€傚湪涓€娈靛畬鍏ㄧ嫭绔嬬殑浠ｇ爜锛屾垨鑰呬唬鐮侀潪甯稿皬涓斾笉鎻愪緵浠讳綍鎺ュ彛鐨勬椂鍊欍€?
(function(win){
// 浠ｇ爜 涓嶆毚闇蹭换浣曟帴鍙?
}( window ));
鍙浠ｇ爜闇€瑕佽鍏朵粬鐨勪唬鐮佹墍渚濊禆鐨勬椂鍊欙紝灏变笉鍙互浣跨敤闆跺叏灞€鍙橀噺鏂瑰紡銆傚湪瀵逛簬浠ｇ爜鍧楃殑浠ｇ爜鍚堝苟鏃跺€欐湁鎸哄ぇ浣滅敤銆?