首页 > 奇闻 > 正文内容

JS常用公共方法最佳实践:告别重复代码编写

奇闻2025-05-19 13:17:38

涓轰粈涔堜綘鍐欑殑浠g爜鎬绘瘮鍒汉澶氾紵

鏂版墜鏈€瀹规槗韪╃殑鍧戞槸浠€涔堬紵涓嶆槸璇硶閿欒锛岃€屾槸鎶婂悓鏍峰姛鑳界殑浠g爜澶嶅埗绮樿创浜嗗崄鍑犳锛佸氨鍍忔柊鎵嬪鍋氶キ锛屾瘡娆$倰楦¤泲閮借閲嶆柊鐪嬭彍璋扁€斺€斿厔寮燂紝杩欐牱浠€涔堟椂鍊欐墠鑳芥垚涓哄ぇ鍘ㄥ晩锛?/p>


杩欑帺鎰忓埌搴曡兘鐪佸灏戜簨锛?/h3>

鐪嬩釜鐪熷疄妗堜緥锛氭煇鍦ㄧ嚎鏁欒偛骞冲彴鐨勫墠绔紝鎶婅棰戞椂闀胯浆鎹㈠姛鑳藉皝瑁呭悗锛?/p>

  • 鈥?strong>鈥嬩唬鐮侀噺鈥?/strong>鈥嬩粠387琛岀缉鍑忓埌23琛?/li>
  • 鈥?strong>鈥嬬淮鎶ゆ椂闂粹€?/strong>鈥嬩粠姣忓懆2灏忔椂鍙樻垚姣忔湀10鍒嗛挓
  • 鈥?strong>鈥嬫柊鍔熻兘寮€鍙戦€熷害鈥?/strong>鈥嬫彁鍗?0%

灏卞儚绐佺劧鎵惧埌浠g爜澶嶅嵃鏈猴紝鍐嶄篃涓嶇敤鍚摟鍚摟鎵嬪啓閲嶅閫昏緫浜嗭紒


鎬庝箞鍒ゆ柇鍝簺浠g爜璇ユ墦鍖咃紵

鎶撲綇涓変釜鐗瑰緛锛?/p>

  1. 鈥?strong>鈥嬪嚭鐜伴鐜団€?/strong>鈥嬶細鍚屼竴涓姛鑳藉湪涓嶅悓鏂囦欢鍑虹幇3娆′互涓?/li>
  2. 鈥?strong>鈥嬩慨鏀归闄┾€?/strong>鈥嬶細姣斿鏃ユ湡鏍煎紡锛堜骇鍝佺粡鐞嗘渶鐖辨敼杩欎釜锛?/li>
  3. 鈥?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"
 */

琛€娉暀璁細杩欎簺鍧戝崈涓囧埆璺筹紒

  1. 鈥?strong>鈥嬭繃搴﹀皝瑁呪€?/strong>鈥嬶細鎶婂彧鐢ㄤ簡1娆$殑浠g爜涔熷杩涘伐鍏峰簱
  2. 鈥?strong>鈥嬬増鏈贩涔扁€?/strong>鈥嬶細涓嶅悓椤圭洰鐢ㄤ笉鍚岀増鏈殑宸ュ叿鍑芥暟
  3. 鈥?strong>鈥嬫€ц兘榛戞礊鈥?/strong>鈥嬶細鍦ㄥ伐鍏峰嚱鏁伴噷鍋氬ぇ閲忚绠?/li>

鏌愮數鍟嗛」鐩氨鏍借繃璺熷ご锛氬湪鍗冨垎浣嶆牸寮忓寲鍑芥暟閲屽仛姹囩巼杞崲锛屽鑷寸粨绠楅〉鍔犺浇鎱?绉掞紒


宸ュ叿鍑芥暟杩涘寲瀵圭収琛?/h3>
鍦烘櫙鍘熷鏂规灏佽鏂规
鏁版嵁杩囨护姣忎釜缁勪欢鍗曠嫭鍐欒繃婊ら€昏緫璋冪敤dataUtils.filter
鏉冮檺鏍¢獙澶嶅埗绮樿创鏍¢獙浠g爜寮曞叆authUtils.check
寮傚父澶勭悊姣忎釜鎺ュ彛鍗曠嫭try-catch浣跨敤httpWrapper灏佽

涓汉瑙傜偣

鏈€杩戝府鏈嬪弸鐪嬮」鐩紝鍙戠幇涓湁瓒g幇璞★細鈥?strong>鈥嬪皝瑁呭畬鍠勭殑宸ュ叿搴擄紝鑳借鍥㈤槦寮€鍙戞晥鐜囦骇鐢熸柇灞傚紡宸窛鈥?/strong>鈥嬨€傚氨鍍忚禌杞︽敼瑁呪€斺€斿悓鏍风殑鍙告満锛屽紑鏀硅杞﹁兘鐢╁鎵嬩笁鏉¤锛?/p>

涓嬫鍐欎唬鐮佸墠鍏堥棶闂嚜宸憋細杩欎釜鍔熻兘涓変釜鏈堝悗浼氫笉浼氬啀鐢ㄥ埌锛熷鏋滄槸锛岀幇鍦ㄥ氨缁欏畠鎵句釜瀹躲€傚埆璁╅噸澶嶄唬鐮佹垚涓轰綘鍔犵彮鐨勭悊鐢憋紝鍏卞媺锛?/p>

搜索