Posted 2021-04-08 鍓嶇浣犲埆闂?/a> 馃敶

杩欐鏃堕棿锛岃澶у涔呯瓑浜嗐€傜敱浜庝骇鍝佸埌浜嗗叧閿椂鏈燂紝瀹堕噷涔熸湁浜涗簨 鍗犳嵁浜嗕笉灏戜笟浣欐椂闂达紝鎵€浠ユ渶杩戞病鏈夐绻佸彂鏂囥€?/span>

杩欒涓嶅皯鎴戠殑鑴戞畫绮?韬佸姩涓嶅畨锛屽悗鍙版€绘敹鍒扮暀瑷€鍜屾秷鎭ぇ姒傚氨鏄細

鐪嬩簡澶у杩欎箞鐑儏锛岃繖涔堝喎鐨勫ぉ鎴戞劅瑙夋湁涓€鑲℃殩娴佹祦杩囷紝瑙夊緱灏辨槸鍦ㄥ繖 涔熻鎸ゅ嚭鏉ユ椂闂村拰璁ゅ畾鎴戝竻鐨勪汉浜ゆ祦銆佸垎浜紝甯姪涓€娉㈡槸涓€娉紝杩欐墠鏄垜寰楀垵琛峰晩锛?/span>

鎵€浠ワ紝鎴戞妸鎴戞暣鐞嗘垜棰滃€肩殑鏃堕棿鎷垮嚭鏉ャ€斾负浜嗗竻锛屼笉鎷╂墜娈靛晩銆曪紝缁欏ぇ瀹舵礂娲楄剳锛屽笇鏈涘彲浠ュ府鍔╀笅鏈夊績浜猴紝涔熻阿璋㈠ぇ瀹剁殑鏀寔銆傚搱鍝堝搱鍝堬紝鎴戞缁忚捣鏉?杩炴垜鑷繁閮芥€曪紒锛侊紒

浠婂ぉ鎴戜滑缁х画鍏堝紑鍚?銆斾笉娲楄剳绯诲垪銆曪紝寰堝揩娲楄剳绡?浼氬啀娆″埌鏉ワ紝甯姪澶у瑙ｆ儜鏄皬鍖楀摜鍝?涓€鐩撮兘杩欎箞甯呯殑鏈€澶у師鍥狅紒

璧峰洜

鍏堣璇?骞虫椂web寮€鍙戦亣鍒扮殑涓€浜涘満鏅?鍜?鑻︽伡鏃犲鐨勬儏鍐点€傜浉淇″ぇ瀹朵篃閬囧埌杩囩殑銆?

JavaScript鍜孋SS鐨勭増鏈棶棰?/strong>

鎴戜滑閮界煡閬?javascript鍜孋SS灞炰簬闈欐€佹枃浠讹紝濡傛灉鍦板潃涓嶅彉锛屾祻瑙堝櫒浼氱紦瀛樿繖浜涙枃浠讹紝閭ｅ氨鎰忓懗鐫€褰撴垜浠渶瑕佹敼JavaScript鎴栬€匔SS鏂囦欢鐨勬椂鍊欙紝鍗充娇鎴戜滑鍚庣鏀逛簡锛岄偅涔堝鎴风涔熸槸鐪嬩笉鍒般€?

杩欎釜鍦ㄢ€淛S涓€缁熷ぉ涓嬧€濈殑鏃朵唬鏄笉鍙帴鍙楃殑锛屽洜涓虹幇鍦ㄥ嚑涔庢墍鏈夌殑WEB 绋嬪簭閮戒弗閲嶄緷JavaScript锛岃€屾墍鏈夌殑缃戠珯閮芥槸闇€瑕佷娇鐢–SS鐨勩€?

鍦ㄦ垜缁忓巻杩囩殑椤圭洰鍗充娇鏄緢澶氬勾缁忛獙鐨勭▼搴忓憳閮藉嚭鐜拌繃JavaScript鍜孋SS鏂囦欢鐨勭増鏈棶棰橈紝姣斿瀹㈡埛璁╀慨澶嶄竴涓狟ug锛岃繖涓狟ug鏄疛avaScript寮曡捣鐨勶紝绋嬪簭鍛樹慨澶嶄簡锛屾垨鑰呮槸瀹㈡埛璇存敼涓€涓儗鏅鑹诧紝鍙槸褰撴垜浠粰瀹㈡埛閮ㄧ讲鍚庢垨鑰呬唬鐮佷氦缁欏鎴峰鎴烽儴缃叉椂锛屽鎴疯Bug渚濈劧瀛樺湪銆?

杩欎釜鏃跺€欑▼搴忓憳缁忓父璇寸殑璇濆氨浼氬嚭鐜颁簡 鈥滄垜鏈湴鏄ソ鐨勫憖鈥濓紝鏈€鍚庡啀鎵炬潵鍒汉甯繖鍚庯紝鍙戠幇鍘熸潵鏄病鏈夋竻闄ゆ祻瑙堝櫒鐨勭紦瀛橈紝浜庢槸鏈夌殑绋嬪簭鍛樺氨璧剁揣缁欏鎴疯锛氣€滀綘闇€瑕丆trl+F5 娓呴櫎娴忚鍣ㄧ殑缂撳瓨鈥濄€?

姣忓綋鎴戝惉鍒拌繖鏍风殑璇濇椂灏卞儚鍏充笂鐏暀缁欐垜涓€灞嬪瓙榛戯紝棣栧厛锛屾湁鍑犱釜鏅€氱敤鎴蜂細浣跨敤Ctrl+F5锛?鍏舵锛屾湁鍑犱釜鐢ㄦ埛鎰挎剰鍘籆trl+F5?

閭ｄ箞鎬庝箞鍔烇紵鎴戞兂寰堝绋嬪簭鍛橀兘鐭ラ亾鍔犱竴涓増鏈彿灏卞彲浠ヤ簡锛岃繖鏍锋祻瑙堝櫒灏变細璁や负鏄柊鐨勬枃浠讹紝姣斿鍘熸潵鏄?http://www.a.com/app.js 浣犵幇鍦ㄥ彧闇€瑕佹妸鍦板潃鏀逛负http://www.a.com/app.js?v=1.0 鍗冲彲

浣嗘槸濡傛灉杩欎釜鍔ㄤ綔鏄墜鍔ㄧ殑锛岄偅涔?0娆″熀鏈笂鑷冲皯鏈?娆＄▼搴忓憳浼氬繕鎺夛紝閭ｄ箞杩欏氨鏄负浠€涔堟垜浠渶瑕佸墠绔瀯寤猴紵

JavaScript鍜孋SS鐨勪緷璧栭棶棰?/strong>

鎴戜滑缁忓父鍑虹幇鐨勫彟涓€涓棶棰橈紝灏辨槸JavaScript鍜孋SS鐨勪緷璧栭棶棰橈紝璇寸殑閫氫織鐐瑰氨鏄疛avaScript鍜孋SS鐨勫湪椤甸潰涓殑椤哄簭闂锛?

鎴戜滑缁忓父鍙戠幇CSS娌¤捣浣滅敤锛孞avaScript鐨勬煇涓彉閲忓拰鏂规硶鎵句笉鍒帮紝鏈夊緢澶氭儏鍐甸兘鏄洜涓哄紩鍏avaScript鎴栬€匔SS鐨勯『搴忎笉瀵癸紝铏界劧鎴戜滑鍙互浣跨敤涓€浜汻equireJS涔嬬被鐨勬ā鍧楃鐞嗭紝浣嗘槸渚濈劧鍦ㄥ緢澶氭儏鍐典笅闇€瑕佸紩鍏ヤ笉鍚岀殑鏂囦欢锛屽挨鍏舵槸CSS娌℃湁涓€涓ソ鐨勬ā鍧楀寲绠＄悊鐨勭粍浠躲€?

閭ｄ箞鎴戜滑灏遍渶瑕佹湁涓€涓粺涓€鐨勫湴鏂规潵绠＄悊JavaScript鍜孋SS鐨勯『搴忛棶棰橈紝鑰屾瀯寤哄伐鍏峰彲浠ュぇ澶у噺灏戞绫婚棶棰樸€?

鎬ц兘浼樺寲

鎴戜滑閮界煡閬撴祻瑙堝櫒璇锋眰鐨勬枃浠惰秺澶氳秺鑰楁椂锛岃姹傜殑鏂囦欢瓒婂ぇ瓒婅€楁椂锛屽挨鍏舵槸鍦ㄦ垜浠幇鍦ㄥ緢澶氫娇鐢ㄥ墠绔疢VC, MVVM妗嗘灦鐨勬椂鍊欙紝鎴戜滑涓轰簡鍓嶇浠ｇ爜鏇存竻鏅帮紝缁撴瀯鏇村悎鐞嗭紝鎴戜滑灏辩敱寰堝JS鏂囦欢锛屾棤鐤戝張鎷栨參浜嗙綉椤电殑閫熷害銆?

涓轰簡瑙ｅ喅杩欎釜闂锛屽洜姝ゆ垜浠渶瑕佸仛涓や欢浜嬶細

1. 鏂囦欢鍚堝苟
   
2. 鏂囦欢鍘嬬缉
   
   

鏂囦欢鍚堝苟

娴忚鍣ㄩ渶瑕佷笅杞藉涓狫S鏂囦欢锛屼絾娴忚鍣ㄦ槸鏈夊苟鍙戦檺鍒讹紝涔熷氨鏄鍚屾椂骞跺彂鍙兘涓嬭浇鍑犱釜鏂囦欢銆?

鍋囧娴忚鍣ㄥ苟鍙戞暟鏄?锛屼綘鏈?0涓狫S鏂囦欢锛岃€屾瘡5涓渶瑕?S, 閭ｄ箞浣犲厜涓嬭浇JS鏂囦欢閮介渶瑕?S锛岄偅涔堢綉椤电殑鎬ц兘鍙兂鑰岀煡锛屾墍浠ユ垜浠渶瑕佸悎骞跺涓枃浠朵互鍑忓皯鏂囦欢鐨勬暟閲忋€?

鏂囦欢鍘嬬缉

鎴戜滑鐭ラ亾鏂囦欢瓒婂ぇ锛屼笅杞借秺鎱€?

鑰岄拡JavaScript鍜孋SS, 閲岄潰鐨勭┖鏍硷紝鎹㈣杩欎簺閮芥槸涓轰簡璁╂垜浠浠ｇ爜鏃舵洿瀹规槗闃呰锛屼絾鏄鏈哄櫒鏉ヨ锛岃繖浜涘瀹冩病鏈夊奖鍝嶏紝鎵€浠ヤ负浜嗗噺灏戞枃浠跺ぇ灏忥紝涓€鑸殑鎯呭喌鎴戜滑閮戒細鐢ㄥ伐鍏峰幓鎺夌┖鏍煎拰鎹㈣锛屾湁鏃跺€欐垜浠繕浼氱敤姣旇緝鐭殑鍙橀噺鍚?璁颁綇杩欎釜瑕佽宸ュ叿鏈€鍚庡帇缂╂椂鍋氾紝鑰屾簮浠ｇ爜涓€瀹氳淇濊瘉鍛藉悕鍙鎬? 鏉ュ噺灏戞枃浠跺ぇ灏忋€?

鑰屾墍鏈夌殑鍓嶇鏋勫缓宸ュ叿閮藉叿鏈夋枃浠跺悎骞跺拰鍘嬬缉鐨勫姛鑳姐€?

鏁堢巼鎻愬崌

鎻愬崌鏁堢巼鐨勬柟寮忥紝鏈変笁绉嶏細

1. Vendor鍓嶇紑
2. 鍗曞厓娴嬭瘯
3. 浠ｇ爜鍒嗘瀽
   
   

Vendor鍓嶇紑

鍦–SS3浣跨敤瓒婃潵瓒婂鐨勬椂鍊欙紝鎴戜滑閮界煡閬撲竴浜汣SS鐨勭壒鎬э紝涓嶅悓鐨勬祻瑙堝櫒CSS鏈変笉鍚岀殑鍓嶇紑锛屽鏋滄垜浠墜宸ユ坊鍔犲皢浼氬緢绻佺悙锛岃€屽鏋滀娇鐢ㄦ瀯寤哄伐鍏凤紝寰堝鏋勫缓宸ュ叿鍙互鑷姩缁欐垜娣诲姞CSS鐨刅endor鍓嶇紑銆?

鍗曞厓娴嬭瘯

JavaScript鐨勫崟鍏冩祴璇曞湪浣跨敤MVC鎴栬€匨VVM鐨勬鏋跺悗锛屽彉寰楄秺鏉ヨ秺瀹规槗锛岃€屽崟鍏冩祴璇曟槸璐ㄩ噺淇濊瘉鐨勪竴涓緢閲嶈鐨勬墜娈碉紝鎵€浠ュ湪鎻愪氦涔嬪墠锛屼娇鐢ㄦ瀯寤哄伐鍏疯嚜鍔ㄨ窇涓€閬嶆垜浠殑鍗曞厓娴嬭瘯鏄潪甯搁噸瑕佺殑銆?

浠ｇ爜鍒嗘瀽

鎴戜滑鍐欑殑JavaScript寰堝鏃跺€欎細鏈変竴浜涙綔鍦ㄧ殑bug, 姣斿蹇樹簡娣诲姞鍒嗗彿锛屾煇涓彉閲忔病鏈夌瓑绛夛紝浣跨敤涓€浜汮avaScript鐨勪唬鐮佸垎鏋愬伐鍏凤紝鍙互寰堝ソ鐨勫府鎴戜滑妫€鏌ヤ竴浜涘父瑙佺殑闂銆?

HTML寮曠敤JavaScript鎴栬€匔SS鏂囦欢

姣斿鎴戜滑闇€瑕佷娇鐢˙ower涔嬬被鏉ュ紩鐢ㄥ墠绔疛avaScript鍜孋SS鐨勭涓夋柟搴撱€?

濡傛灉鐗堟湰鍗囩骇锛屾坊鍔犵Щ闄ょ瓑閮界敤鎵嬪伐鏉ヤ慨鏀笻TML鐨勮瘽锛岀涓€姣旇緝鑰楁椂锛岀浜屾瘮杈冨鏄撶枏婕忥紝灏ゅ叾鏄湪鎴戜滑闇€瑕佸垏鎹ebug鍜宲roduction鐗堟湰鏃跺皢浼氭湁寰堝棰濆鐨勫伐浣滐紝杩欐椂鍊欎娇鐢ㄥ墠绔瀯寤哄伐鍏峰彲浠ュ緢濂界殑瑙ｅ喅杩欎簺闂銆?

鏈€鍚?锛屽鎴戣涓€浠朵簨锛氱粡杩囦笉鎳堝姫鍔涳紝寰俊缁堜簬閭€璇锋垜寮€閫氫簡  鏂囩珷銆愯禐璧忋€?鍔熻兘銆?/strong>

鎵€浠ュ師鍒涘緢涓嶆槗锛屾瘡娆″啓瀹屾枃绔狅紝绱緱鍗婃锛屾墍浠ュぇ瀹舵湁閽辩殑鍑轰釜鍠濇按閽憋紝娌￠挶鐨勮禐涓?杞釜鍙?鏀寔涓嬮兘鍙互鐨勶紝杩欐牱鎴戞洿鏈夊姩鍔?鏉ュ拰澶у涓€璧峰垎浜€?/strong>

鍦ㄦ渶鍚庯紝鐗瑰埆鎰熻阿锛岃春璐哄瀛愶紝甯繖鎺掔増閰嶅浘锛岃鎴戠殑鏂囩珷鏇村姞鐢熷姩鍜屾湁瓒?

涓嬮潰鐩存帴 鎵爜闀挎寜鍏虫敞