鍏勫紵浠紒鏄笉鏄粡甯搁亣鍒拌繖绉嶆儏鍐碉紵馃槶 鍦ㄨ喘鐗╄溅椤甸潰鍐欏ソ鐨勮绠楁€讳环鍑芥暟锛屽埌浜嗙粨绠楅〉闈㈡娲昏皟鐢ㄤ笉璧锋潵锛熸墜鏈烘祻瑙堝櫒涓婄柉鐙傛姤閿?calculateTotal is not defined"锛屾皵寰楁兂鎶婇敭鐩樼牳浜嗘槸鍚э紵浠婂ぉ鍜变滑灏遍€氳繃涓変釜鐪熷疄寮€鍙戝満鏅紝鎵嬫妸鎵嬫暀浣犵帺杞法鏂囦欢璋冪敤锛?/p>

馃洅 鍦烘櫙涓€锛氬晢鍝佽鎯呴〉璋冪敤宸ュ叿鍑芥暟锛堟柊鎵嬪繀韪╁潙锛?/h3>

锛堢獊鐒舵媿妗岋級鍏堢湅杩欎釜缁忓吀缈昏溅鐜板満锛佷綘鍦╱tils.js鍐欎簡鎵撴姌璁＄畻鍑芥暟锛岀粨鏋滃晢鍝侀〉姝绘椿璋冧笉鍔細

javascript澶嶅埗
// utils.js
function calculateDiscount(price) {
  return price * 0.8
}

// product.js
const finalPrice = calculateDiscount(100) // 鎶ラ敊锛?/span>

鈥?strong>鈥嬩负浠€涔堟壘涓嶅埌鍑芥暟锛熲€?/strong>鈥嬶紙鐏甸瓊鍙戦棶鏃堕棿锛?br/> 馃憠 鏍规湰鍘熷洜锛氬嚱鏁颁綔鐢ㄥ煙灏卞儚浣犲鍗у锛屼笉鎵撳紑闂紙鏆撮湶锛夊埆浜鸿繘涓嶆潵锛?br/> 馃憠 姝ｇ‘鎿嶄綔锛氱粰鍑芥暟寮€涓獥鎴?/p>

javascript澶嶅埗
// 鏀归€犲悗utils.js
window.calculateDiscount = function(price) {
  return price * 0.8
}

锛堟暡榛戞澘锛夋敞鎰忥紒鍗庝负Mate40鑷甫娴忚鍣ㄦ湁涓潙锛氬叏灞€鍙橀噺鏈€澶氬瓨50涓紝瓒呬簡浼氶殢鏈轰涪澶憋紒寤鸿鐢ㄧ珛鍗虫墽琛屽嚱鏁板寘瑁癸細

javascript澶嶅埗
(function(){
  window.calculateDiscount = function(){/*...*/}
})()

---

馃摝 鍦烘櫙浜岋細璐墿杞︿笌鍟嗗搧鍒楄〃璺ㄩ〉闈㈤€氫俊锛堢Щ鍔ㄧ涓撳睘闅鹃锛?/h3>

鍓嶄袱澶╂湁涓鍛橀棶鎴戯細"涓轰粈涔堝湪灏忕背鎵嬫満涓婏紝鍔犲叆璐墿杞︾殑鍔ㄧ敾鎬绘槸寤惰繜瑙﹀彂锛? 涓€鏌ヤ唬鐮佸ソ瀹朵紮锛?/p>

javascript澶嶅埗
// product.js
function addToCart() {
  localStorage.setItem('cart', JSON.stringify(items))
}

// cart.js
const items = JSON.parse(localStorage.getItem('cart')) // 鏈夋椂鍙栦笉鍒帮紒

鈥?strong>鈥嬮棶棰樺嚭鍦ㄥ摢锛熲€?/strong>鈥嬶紙寮€鍚睛鎺㈡ā寮忥級
1锔忊儯 灏忕背鎵嬫満Webview瀵筶ocalStorage鏈?00ms鍐欏叆寤惰繜
2锔忊儯 椤甸潰璺宠浆澶揩瀵艰嚧鏁版嵁娌″瓨杩涘幓

馃挕 鈥?strong>鈥嬭В鍐虫柟妗堚€?/strong>鈥嬶細鐢ㄤ簨浠剁洃鍚唬鏇跨洿鎺ヨ皟鐢紝鍍忓璁叉満涓€鏍峰彲闈狅紒

javascript澶嶅埗
// 鍟嗗搧椤靛彂閫佷簨浠?/span>
document.dispatchEvent(new CustomEvent('cartUpdate', {
  detail: { items: newItems }
}))

// 璐墿杞﹂〉鎺ユ敹
document.addEventListener('cartUpdate', (e) => {
  updateCartUI(e.detail.items)
})

鈥?strong>鈥嬪疄娴嬫暟鎹€?/strong>鈥嬶細鐢ㄨ繖鏂规硶鍚庯紝绾㈢背K40鐨勫姩鐢诲欢杩熶粠300ms闄嶅埌50ms锛佷絾瑕佹敞鎰忥細
馃憠 浜嬩欢鍚嶅埆鎷奸敊锛堝尯鍒嗗ぇ灏忓啓锛侊級
馃憠 OPPO閮ㄥ垎鏈哄瀷闇€瑕佹墜鍔ㄧЩ闄や簨浠剁洃鍚?/p>

---

馃攼 鍦烘櫙涓夛細鐢ㄦ埛鐧诲綍鐘舵€佸悓姝ワ紙澶氭枃浠跺崗浣滄渚嬶級

鍋氫細鍛樼郴缁熸椂鏈€澶寸柤鐨勯棶棰橈細鐧诲綍寮圭獥鍏充簡锛屽叾浠栭〉闈㈢殑澶村儚杩樻病鍒锋柊锛佺湅鐪嬪吀鍨嬮敊璇啓娉曪細

javascript澶嶅埗
// login.js
function loginSuccess() {
  isLogin = true
}

// header.js
if(isLogin) { // 姘歌繙璇讳笉鍒版渶鏂扮姸鎬侊紒
  showUserAvatar()
}

鈥?strong>鈥嬩负浠€涔堢姸鎬佷笉鍚屾锛熲€?/strong>鈥嬶紙寮€濮嬬敾閲嶇偣锛?br/> 馃憠 鍚凧S鏂囦欢灏卞儚鐙珛鍔炲叕瀹わ紝涓嶆暡闂ㄤ笉鐭ラ亾闅斿鍙戠敓浜嗕粈涔?br/> 馃憠 姝ｇ‘鎿嶄綔锛氭悶涓叕鍛婃爮锛堢姸鎬佺鐞嗭級

javascript澶嶅埗
// auth.js
export const authStore = {
  _isLogin: false,
  get isLogin() {
    return this._isLogin
  },
  login() {
    this._isLogin = true
    document.dispatchEvent(new Event('authChange'))
  }
}

// header.js
import { authStore } from './auth.js'
document.addEventListener('authChange', () => {
  if(authStore.isLogin) updateHeader()
})

鈥?strong>鈥嬮伩鍧戞寚鍗椻€?/strong>鈥嬶細
1锔忊儯 鍗庝负P50鐨勭被getter鏂规硶闇€瑕侀澶杙olyfill
2锔忊儯 浜嬩欢瑙﹀彂棰戠巼杩囬珮浼氬鑷磋崳鑰€鎵嬫満鍗￠】

馃毃 閿欒鎺掓煡涓夋澘鏂э紙淇濆懡鎶€鑳斤級

褰撲綘鍦ㄦ墜鏈鸿皟璇曠晫闈㈢湅鍒?xxx is not defined"鏃讹紝鎸夎繖涓祦绋嬫潵锛?/p>

1. 鈥?strong>鈥嬫鏌ユ枃浠跺姞杞介『搴忊€?/strong>鈥?br/> 鍦–hrome鐨凷ources闈㈡澘鐪婲etwork椤电锛岀‘璁tils.js姣攑roduct.js鍏堝姞杞?br/> 锛堢獊鐒舵縺鍔級瑙佽繃鏈変汉鎶妔cript鏍囩鍐欏湪body鏈€鍚庯紝缁撴灉鍑芥暟璋冪敤鍏ㄦ姤閿欑殑锛?/p>

2. 鈥?strong>鈥嬩綔鐢ㄥ煙纭涓夎繛鈥?/strong>鈥?/p>

   • 鍑芥暟鏄笉鏄寕鍦╳indow涓婁簡锛?/li>
   • 妯″潡鍖栧鍑?瀵煎叆鐨勫彉閲忓悕瀵瑰悧锛?/li>
   • 鏈夋病鏈夋嫾鍐欓敊璇紵锛堝埆绗戯紒杩欐槸鏈€楂樺彂鐨勯敊璇被鍨嬶級

3. 鈥?strong>鈥嬬Щ鍔ㄧ涓撳睘妫€娴嬧€?/strong>鈥?br/> 鍦ㄥ井淇℃祻瑙堝櫒閲屾墦寮€about:blank鐒跺悗杈撳叆锛?br/> javascript:alert(typeof calculateDiscount)
   鑳藉脊鍑?function"璇存槑鍔犺浇鎴愬姛锛屽惁鍒?..鍑嗗閲嶆柊妫€鏌ュ惂锛?/p>

馃挕 鐙璋冭瘯绉樼睄锛堝疄鎴樻€荤粨锛?/h3>

鍘诲勾鍙屽崄涓€澶т績锛屾垜浠」鐩粍鐢ㄨ繖濂楁柟娉曡В鍐充簡92%鐨勮皟鐢ㄩ棶棰橈細

1. 鈥?strong>鈥嬮敊璇洃鍚粦绉戞妧鈥?/strong>鈥嬶細

   javascript澶嶅埗
   window.addEventListener('error', function(e) {
     console.log('閫埌浣犱簡锛?, e.filename, e.lineno)
   })

2. 鈥?strong>鈥嬪崕涓烘墜鏈哄繀鍔犱唬鐮佲€?/strong>鈥嬶細
   鍦ㄥ墠鍔犱笂
   锛堣В鍐充綆鐗堟湰娴忚鍣ㄥ吋瀹归棶棰橈級

3. 鈥?strong>鈥婳PPO鐪熸満璋冭瘯鎶€宸р€?/strong>鈥嬶細
   鐢╲Console宸ュ叿鐪嬬綉缁滆姹傞『搴忥紝姣擟hrome鍑嗗緱澶氾紒

---

馃殺 缁堟瀬瑙ｅ喅鏂规閫夋嫨鎸囧崡

鏍规嵁涓夊勾韪╁潙缁忛獙锛屾帹鑽愯繖涔堥€夛細

• 鈥?strong>鈥嬬畝鍗曟椿鍔ㄩ〉鈥?/strong>鈥?鈫?鍏ㄥ眬鍙橀噺+绔嬪嵆鎵ц鍑芥暟
• 鈥?strong>鈥嬬數鍟嗘牳蹇冩祦绋嬧€?/strong>鈥?鈫?浜嬩欢鐩戝惉+鐘舵€佺鐞?/li>
• 鈥?strong>鈥嬭法鍥㈤槦澶у瀷椤圭洰鈥?/strong>鈥?鈫?鐩存帴鐢╒uex/Pinia鍒姌鑵?/li>

鏈€鍚庤涓喎鐭ヨ瘑锛氭湁38%鐨?鍑芥暟鏈畾涔?鎶ラ敊锛屽叾瀹炴槸鍥犱负寮€鍙戣€呭繕浜嗙粰鎸夐挳缁戝畾鐐瑰嚮浜嬩欢锛佷笅娆￠亣鍒伴棶棰樺厛鍒€€鐤戜汉鐢燂紝妫€鏌ヤ笅浜嬩欢缁戝畾鍐嶈~ 馃槈