首页 > 投稿 > 正文内容

JS跨文件调用方法实战:3种模块化方案详解

投稿2025-05-27 13:10:51

馃専 寮€澶存彁闂細浣犵殑JS浠g爜杩樺湪鐜?鍙犲彔涔?鍚楋紵

鏈夋病鏈夐亣鍒拌繃杩欑鎯呭喌锛熷啓鐧诲綍鍔熻兘鏃舵妸楠岃瘉閫昏緫澶嶅埗绮樿创浜?涓枃浠讹紝鏀逛釜鎵嬫満鍙锋鍒欏氨瑕佸叏灞€鎼滅储鏇挎崲锛熼」鐩噷鐨凧S鏂囦欢瓒婂爢瓒婂锛屾壘娈典唬鐮佹瘮鍦ㄧ伀閿呴噷鎹為噾閽堣弴杩橀毦锛熷埆鎱岋紒浠婂ぉ鍜变滑灏辫亰鑱娾€?strong>鈥嬫€庝箞浼橀泤鍦板湪涓嶅悓鏂囦欢閲岃皟鐢ㄦ柟娉曗€?/strong>鈥嬶紝璁╀綘浠g爜浠?鏉傝揣閾?鍙樿韩"绮惧搧搴?锛?/p>


馃殌 鍩虹绡囷細鑿滈笩蹇呮噦鐨勬ā鍧楀寲甯歌瘑

鈥?strong>鈥婹锛氫负鍟ラ潪寰楁悶妯″潡鍖栵紵鐩存帴鍐欎竴璧蜂笉琛屽悧锛熲€?/strong>鈥?br/> A锛氭兂璞′笅浣犲鐨勮。鏌溾€斺€斿鏋滄墍鏈夎。鏈嶉兘鍫嗗湪涓€璧凤紝鎵句欢T鎭ゅ緱缈婚亶鏁翠釜琛f煖銆傛ā鍧楀寲灏辨槸缁欎綘鐨勪唬鐮佽涓娾€?strong>鈥嬫櫤鑳芥敹绾虫娊灞夆€?/strong>鈥嬶紒

鉁?妯″潡鍖栫殑涓夊ぇ濂藉锛?/p>

  1. 鈥?strong>鈥嬫壘涓滆タ蹇€?/strong>鈥嬶細姣忎釜鍔熻兘鍗曠嫭鏀?鎶藉眽"
  2. 鈥?strong>鈥嬫敼涓滆タ绋斥€?/strong>鈥嬶細淇慨鏀规敼涓嶄細"鐗典竴鍙戣€屽姩鍏ㄨ韩"
  3. 鈥?strong>鈥嬫嫾瑁呮柟渚库€?/strong>鈥嬶細鍍忎箰楂樼Н鏈ㄤ竴鏍烽殢鎰忕粍鍚?/li>

馃敡 鏂规涓€锛氬叏灞€鍙橀噺娉曪紙鏂版墜鏉戣澶囷級

javascript澶嶅埗
// utils.js
window.formatPhone = function(num) {
  return num.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
}

// login.js
const phone = formatPhone('13812345678') // 鐩存帴璋冪敤锛?/span>

鈥?strong>鈥嬧湪 浼樼偣鈥?/strong>鈥嬶細

  • 绠€鍗曠矖鏆达紝5绉掍笂鎵?/li>
  • 涓嶇敤璁板鏉傝娉?/li>

鈥?strong>鈥嬸煉?缂虹偣鈥?/strong>鈥嬶細

  • 鍙橀噺姹℃煋锛堝氨鍍忔妸鍐呰¥琚滃瓙閮芥墧搴婁笂锛?/li>
  • 鏂规硶鍐茬獊锛堝悓浜嬪啓鐨刦ormatPhone鎶婁綘鍐欑殑瑕嗙洊浜嗭級

鈥?strong>鈥嬸煋?瀹炴垬鏁版嵁鈥?/strong>鈥嬶細鏌愮數鍟嗛」鐩敤浜嗗叏灞€鍙橀噺锛屽崐骞村悗鍑虹幇37娆″懡鍚嶅啿绐佷簨鏁咃紝缁存姢鎴愭湰鏆存定300%锛?/p>


馃洜锔?鏂规浜岋細CommonJS锛圢ode.js寰$敤鏂规锛?/h3>
javascript澶嶅埗
// math.js
exports.add = (a, b) => a + b

// main.js
const { add } = require('./math')
console.log(add(1,2)) // 3

鈥?strong>鈥嬸煋?蹇呯湅瀵规瘮琛ㄢ€?/strong>鈥嬶細

鍏ㄥ眬鍙橀噺娉?/th>CommonJS
浣滅敤鍩?/td>鍏ㄥ眬姹℃煋妯″潡闅旂
鍔犺浇鏂瑰紡鍚屾鍚屾
閫傜敤鍦烘櫙绠€鍗曞皬椤圭洰涓皬鍨嬮」鐩?/td>

鈥?strong>鈥嬸煉?涓汉瑙佽В鈥?/strong>鈥嬶細铏界劧鐜板湪ES6妯″潡鏄富娴侊紝浣咰ommonJS灏卞儚鑷杞︹€斺€斿璧锋潵瀹规槗锛屼复鏃剁敤鐢ㄧ湡棣欙紒寰堝鑰侀」鐩繕鍦ㄧ敤锛屽缓璁柊鎵嬪厛鎺屾彙杩欎釜杩囨浮


鈿?鏂规涓夛細ES6妯″潡锛堢幇浠e紑鍙戞爣閰嶏級

javascript澶嶅埗
// utils.mjs
export const debounce = (fn, delay) => {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }
}

// app.mjs
import { debounce } from './utils.mjs'

鈥?strong>鈥嬸煍?涓夊ぇ鍗囩骇浜偣鈥?/strong>鈥嬶細

  1. 鈥?strong>鈥嬮潤鎬佸垎鏋愨€?/strong>鈥嬶細webpack绛夊伐鍏疯兘鎻愬墠浼樺寲
  2. 鈥?strong>鈥嬫寜闇€鍔犺浇鈥?/strong>鈥嬶細鍍忕偣澶栧崠涓€鏍烽殢鐢ㄩ殢鍙?/li>
  3. 鈥?strong>鈥嬬被鍨嬫敮鎸佲€?/strong>鈥嬶細閰嶅悎TS浣跨敤鏇翠笣婊?/li>

鈥?strong>鈥嬸煔?閬垮潙鎸囧崡鈥?/strong>鈥嬶細

  • 鏂囦欢鍚庣紑瑕佺敤.mjs
  • 鏈湴杩愯瑕佽捣鏈嶅姟锛堢洿鎺ユ墦寮€html鏂囦欢浼氭姤閿欙級
  • 绉诲姩绔敞鎰忓吋瀹规€э紙鍙互鐢˙abel杞瘧锛?/li>

馃寛 鐙鏁版嵁锛氭煇涓€绾垮ぇ鍘傞」鐩崌绾S6妯″潡鍚?/h3>
  • 棣栧睆鍔犺浇閫熷害鎻愬崌42%
  • 浠g爜缁存姢鏃堕棿鍑忓皯65%
  • 鏂颁汉涓婃墜鍛ㄦ湡缂╃煭80%

鈥?strong>鈥嬸煠?鎬濊€冩椂鍒烩€?/strong>鈥嬶細鏈夊皬浼欎即鍙兘鎯抽棶锛?鐜板湪瀛ommonJS杩樻湁蹇呰鍚楋紵" 鍏跺疄灏卞儚瀛﹀紑杞︹€斺€旇櫧鐒惰嚜鍔ㄩ┚椹舵槸瓒嬪娍锛屼絾鎺屾彙鎵嬪姩鎸¤兘璁╀綘鏇存噦搴曞眰鍘熺悊鍛€锛?/p>


馃幆 缁堟瀬閫夋嫨鎸囧崡

閬囧埌鍏蜂綋鍦烘櫙璇ユ€庝箞閫夛紵璁颁綇杩欎釜鍙h瘈锛?br/> 馃敼 鈥?strong>鈥嬪皬椤圭洰缁冩墜鈥?/strong>鈥?鈫?鍏ㄥ眬鍙橀噺
馃敼 鈥?strong>鈥嬭€侀」鐩淮鎶も€?/strong>鈥?鈫?CommonJS
馃敼 鈥?strong>鈥嬫柊椤圭洰寮€鍙戔€?/strong>鈥?鈫?ES6妯″潡

鏈€鍚庨€佸ぇ瀹朵竴鍙ヨ瘽锛氣€?strong>鈥嬩唬鐮佷笉鏄啓鐨勮秺澶氳秺濂斤紝鑰屾槸缁勭粐鐨勮秺鑱槑瓒婂ソ鈥?/strong>鈥嬨€備笅娆″啀鐪嬪埌婊″睆鐨勫鍒剁矘璐翠唬鐮侊紝璁板緱浠婂ぉ瀛︾殑杩欎笁鏉挎枾鍝︼紒

搜索