
嘻道奇闻
- 文章199742
- 阅读14625734
JS常用公共方法最佳实践:告别重复代码编写
涓轰粈涔堜綘鍐欑殑浠g爜鎬绘瘮鍒汉澶氾紵
鏂版墜鏈€瀹规槗韪╃殑鍧戞槸浠€涔堬紵涓嶆槸璇硶閿欒锛岃€屾槸鎶婂悓鏍峰姛鑳界殑浠g爜澶嶅埗绮樿创浜嗗崄鍑犳锛佸氨鍍忔柊鎵嬪鍋氶キ锛屾瘡娆$倰楦¤泲閮借閲嶆柊鐪嬭彍璋扁€斺€斿厔寮燂紝杩欐牱浠€涔堟椂鍊欐墠鑳芥垚涓哄ぇ鍘ㄥ晩锛?/p>
杩欑帺鎰忓埌搴曡兘鐪佸灏戜簨锛?/h3>
鐪嬩釜鐪熷疄妗堜緥锛氭煇鍦ㄧ嚎鏁欒偛骞冲彴鐨勫墠绔紝鎶婅棰戞椂闀胯浆鎹㈠姛鑳藉皝瑁呭悗锛?/p>
- 鈥?strong>鈥嬩唬鐮侀噺鈥?/strong>鈥嬩粠387琛岀缉鍑忓埌23琛?/li>
- 鈥?strong>鈥嬬淮鎶ゆ椂闂粹€?/strong>鈥嬩粠姣忓懆2灏忔椂鍙樻垚姣忔湀10鍒嗛挓
- 鈥?strong>鈥嬫柊鍔熻兘寮€鍙戦€熷害鈥?/strong>鈥嬫彁鍗?0%
灏卞儚绐佺劧鎵惧埌浠g爜澶嶅嵃鏈猴紝鍐嶄篃涓嶇敤鍚摟鍚摟鎵嬪啓閲嶅閫昏緫浜嗭紒
鎬庝箞鍒ゆ柇鍝簺浠g爜璇ユ墦鍖咃紵
鎶撲綇涓変釜鐗瑰緛锛?/p>
- 鈥?strong>鈥嬪嚭鐜伴鐜団€?/strong>鈥嬶細鍚屼竴涓姛鑳藉湪涓嶅悓鏂囦欢鍑虹幇3娆′互涓?/li>
- 鈥?strong>鈥嬩慨鏀归闄┾€?/strong>鈥嬶細姣斿鏃ユ湡鏍煎紡锛堜骇鍝佺粡鐞嗘渶鐖辨敼杩欎釜锛?/li>
- 鈥?strong>鈥嬪鏉傚害鈥?/strong>鈥嬶細闇€瑕?琛屼互涓婁唬鐮佹墠鑳藉疄鐜扮殑閫昏緫
涓句釜鏍楀瓙馃尠锛?/p>
javascript澶嶅埗// 灏佽鍓嶏紙姣忎釜椤甸潰閮借鍐欙級 function showTime1(timestamp) { const date = new Date(timestamp) return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}` } // 灏佽鍚庯紙鍏ㄩ」鐩€氱敤锛?/span> const timeUtils = { format: (timestamp, separator = '-') => { const d = new Date(timestamp) return [d.getFullYear(), d.getMonth()+1, d.getDate()].join(separator) } }
鏈€浣冲疄璺靛洓閮ㄦ洸
鈥?strong>鈥嬬涓€姝ワ細寤虹珛宸ュ叿绠辨枃浠跺す鈥?/strong>鈥?/p>
/src
/utils
dataUtils.js # 鏁版嵁澶勭悊
domUtils.js # DOM鎿嶄綔
validate.js # 楠岃瘉閫昏緫
鈥?strong>鈥嬬浜屾锛氬弬鏁拌璁¤鐏垫椿鈥?/strong>鈥?br/> 鍒鏌愪簺鏁欑▼鎼炰竴鍫嗗繀濉弬鏁帮紒璁颁綇锛?/p>
- 鍩虹鍔熻兘鐢ㄩ粯璁ゅ弬鏁?/li>
- 澶嶆潅闇€姹備紶閰嶇疆瀵硅薄
鈥?strong>鈥嬬涓夋锛氶敊璇鐞嗕笉鑳藉繕鈥?/strong>鈥?/p>
javascript澶嶅埗function safeParseJSON(str) { try { return JSON.parse(str) } catch (e) { console.error('杩橨SON鏈夋瘨鍚э紒', str) return null } }
鈥?strong>鈥嬬鍥涙锛氬啓濂借鏄庝功鈥?/strong>鈥?br/> 鐢↗SDoc鍐欐敞閲婏紝涓変釜鏈堝悗杩樿兘鐪嬫噦锛?/p>
javascript澶嶅埗/** * 鎵嬫満鍙疯劚鏁忓鐞? * @param {string} phone - 鍘熷鍙风爜 * @returns {string} 濡?138****8888" */
琛€娉暀璁細杩欎簺鍧戝崈涓囧埆璺筹紒
- 鈥?strong>鈥嬭繃搴﹀皝瑁呪€?/strong>鈥嬶細鎶婂彧鐢ㄤ簡1娆$殑浠g爜涔熷杩涘伐鍏峰簱
- 鈥?strong>鈥嬬増鏈贩涔扁€?/strong>鈥嬶細涓嶅悓椤圭洰鐢ㄤ笉鍚岀増鏈殑宸ュ叿鍑芥暟
- 鈥?strong>鈥嬫€ц兘榛戞礊鈥?/strong>鈥嬶細鍦ㄥ伐鍏峰嚱鏁伴噷鍋氬ぇ閲忚绠?/li>
鏌愮數鍟嗛」鐩氨鏍借繃璺熷ご锛氬湪鍗冨垎浣嶆牸寮忓寲鍑芥暟閲屽仛姹囩巼杞崲锛屽鑷寸粨绠楅〉鍔犺浇鎱?绉掞紒
宸ュ叿鍑芥暟杩涘寲瀵圭収琛?/h3>
鍦烘櫙 | 鍘熷鏂规 | 灏佽鏂规 |
---|---|---|
鏁版嵁杩囨护 | 姣忎釜缁勪欢鍗曠嫭鍐欒繃婊ら€昏緫 | 璋冪敤dataUtils.filter |
鏉冮檺鏍¢獙 | 澶嶅埗绮樿创鏍¢獙浠g爜 | 寮曞叆authUtils.check |
寮傚父澶勭悊 | 姣忎釜鎺ュ彛鍗曠嫭try-catch | 浣跨敤httpWrapper灏佽 |
涓汉瑙傜偣
鏈€杩戝府鏈嬪弸鐪嬮」鐩紝鍙戠幇涓湁瓒g幇璞★細鈥?strong>鈥嬪皝瑁呭畬鍠勭殑宸ュ叿搴擄紝鑳借鍥㈤槦寮€鍙戞晥鐜囦骇鐢熸柇灞傚紡宸窛鈥?/strong>鈥嬨€傚氨鍍忚禌杞︽敼瑁呪€斺€斿悓鏍风殑鍙告満锛屽紑鏀硅杞﹁兘鐢╁鎵嬩笁鏉¤锛?/p>
涓嬫鍐欎唬鐮佸墠鍏堥棶闂嚜宸憋細杩欎釜鍔熻兘涓変釜鏈堝悗浼氫笉浼氬啀鐢ㄥ埌锛熷鏋滄槸锛岀幇鍦ㄥ氨缁欏畠鎵句釜瀹躲€傚埆璁╅噸澶嶄唬鐮佹垚涓轰綘鍔犵彮鐨勭悊鐢憋紝鍏卞媺锛?/p>