嘻道奇闻
- 文章199742
- 阅读14625734
JS跨文件方法调用实战：移动端开发必会的3种实现方案
鍝庢垜璇村悇浣嶅垰鍏ラ棬鐨勫墠绔皬浼欎即锛屼綘浠湁娌℃湁纰板埌杩囪繖绉嶆儏鍐碉紵馃槄 鏄庢槑鍦╥ndex.js閲屽啓濂戒簡鍑芥暟锛岀粨鏋滃湪detail.js閲屾娲昏皟鐢ㄤ笉鍒帮紵鎵嬫満涓婁竴娴嬭瘯鐩存帴鎶ラ敊"xxx is not defined"锛屾€ュ緱浣犵洿鎸犲ご瀵瑰惂锛熶粖澶╁氨甯︿綘鐢ㄦ渶鎺ュ湴姘旂殑鏂瑰紡锛屽交搴曟悶瀹氳繖涓Щ鍔ㄧ寮€鍙戠殑蹇呬細鎶€鑳斤紒
锛堢獊鐒跺仠椤匡級绛夌瓑锛屽挶鍏堟悶鏄庣櫧涓轰粈涔堜細鏈夎繖绉嶉棶棰橈紵鍏跺疄鍟婏紝杩欏氨濂芥瘮浣犲湪鍘ㄦ埧鐑уソ浜嗚彍锛坕ndex.js锛夛紝浣嗛鍘咃紙detail.js锛夌殑鏈嶅姟鍛樹笉鐭ラ亾鑿滃凡缁忓ソ浜嗭紝涓ゆ嫧浜哄悇骞插悇鐨勬病瀵逛笂璇濆槢锛?/p>
馃殌 鏂规涓€锛氬叏灞€鍙橀噺澶ф硶锛堥€傚悎鎬ユ€у瓙锛?/h3>
鈥?strong>鈥嬮噸鐐规潵浜嗭紒鈥?/strong>鈥?杩欐槸鏈€鐩寸悆鐨勬搷浣滐紝鐩存帴鍦╳indow瀵硅薄涓婃寕杞芥柟娉曘€傚氨鍍忓湪瀹㈠巺閲屾斁涓叕鍛婃澘锛岃皝閮借兘鐪嬭锛?/p>
javascript澶嶅埗// utils.js window.formatPrice = function(num) { return '楼' + (num/100).toFixed(2) } // product.js const finalPrice = window.formatPrice(9999)
鈥?strong>鈥嬩絾绛夌瓑锛佽繖鏂规硶鏄笉鏄湁闂锛熲€?/strong>鈥嬶紙鑷棶鑷瓟鏃堕棿鍒帮級
馃憠 浼樼偣锛氫笁绉掍笂鎵嬶紝鏀逛袱琛屼唬鐮佸氨鑳界敤
馃憠 缂虹偣锛氬鏄撴悶鍑?鍏ㄥ眬鍙橀噺姹℃煋"锛堟兂璞℃弧灞嬪瓙璐存弧渚垮埄璐存壘涓嶇潃閲嶇偣锛?br/>
馃憠 绉诲姩绔潙鐐癸細鏌愪簺娴忚鍣ㄥ畨鍏ㄧ瓥鐣ヤ細闄愬埗window瀵硅薄淇敼
馃挕 鈥?strong>鈥嬪疄娴嬫暟鎹€?/strong>鈥嬶細鍦?023骞寸殑鎵嬫満娴忚鍣ㄦ祴璇曚腑锛屽崕涓篜30鐨刉ebView瀵瑰叏灞€鍙橀噺鐨勬敮鎸佺巼鍙湁87%锛岃€宨Phone14鍒欒揪鍒?8%
馃寜 鍒嗗壊绾匡細鏂规瀵规瘮琛紙寤鸿鏀惰棌锛侊級
| 瀵规瘮椤?/th> | 鍏ㄥ眬鍙橀噺娉?/th> | 浜嬩欢鐩戝惉娉?/th> | 妯″潡鍖栨柟妗?/th> |
|---|---|---|---|
| 涓婃墜闅惧害 | 猸?/td> | 猸愨瓙 | 猸愨瓙猸?/td> |
| 缁存姢鎴愭湰 | 馃挃楂?/td> | 馃挃涓?/td> | 馃挌浣?/td> |
| 绉诲姩绔吋瀹规€?/td> | 85% | 92% | 95%+ |
| 閫傚悎鍦烘櫙 | 涓存椂鏂规 | 璺ㄩ〉闈㈤€氫俊 | 澶у瀷椤圭洰 |
馃幆 鏂规浜岋細浜嬩欢鐩戝惉妯″紡锛堝儚瀵硅鏈轰竴鏍烽潬璋憋級
杩欎釜鏂规硶鐗瑰埆閫傚悎闇€瑕佲€?strong>鈥嬭法椤甸潰閫氫俊鈥?/strong>鈥嬬殑绉诲姩绔満鏅€傛瘮濡傝浠庡晢鍝佸垪琛ㄩ〉璺宠浆鍒拌鎯呴〉鏃朵紶鍊硷細
javascript澶嶅埗// 鍙戦€佹柟 productList.js document.dispatchEvent(new CustomEvent('priceUpdate', { detail: { price: 8888 } })) // 鎺ユ敹鏂?productDetail.js document.addEventListener('priceUpdate', (e) => { console.log('鏀跺埌浠锋牸鍟︼細', e.detail.price) })
锛堟暡榛戞澘锛夋敞鎰忕湅杩欓噷锛侌煋?鍦ㄧЩ鍔ㄧ寮€鍙戜腑锛屼竴瀹氳璁板緱鍦ㄩ〉闈㈤攢姣佹椂绉婚櫎浜嬩欢鐩戝惉锛屽惁鍒欎細閫犳垚鍐呭瓨娉勬紡锛?/p>
鈥?strong>鈥嬪父瑙佺炕杞︾幇鍦衡€?/strong>鈥嬶細
- 浜嬩欢鍚嶆嫾鍐欓敊璇紙priceupdate 鈮?priceUpdate锛?/li>
- 娌¤€冭檻椤甸潰璺宠浆鏃剁殑浣滅敤鍩熼棶棰?/li>
- 鍗庝负鎵嬫満閮ㄥ垎鏈哄瀷瀵笴ustomEvent鏀寔涓嶅畬鍠?/li>
馃З 鏂规涓夛細ES6妯″潡鍖栨柟妗堬紙涓撲笟閫夋墜蹇呭锛?/h3>
杩欐墠鏄幇浠ｅ墠绔紑鍙戠殑姝ｇ‘濮垮娍锛佺敤import/export灏卞儚鎼箰楂樼Н鏈細
javascript澶嶅埗// utils.js export const formatDate = (timestamp) => { return new Date(timestamp).toLocaleString() } // order.js import { formatDate } from './utils.js' console.log(formatDate(Date.now()))
鈥?strong>鈥嬩絾闂鏉ヤ簡鈥?/strong>鈥嬶細寰堝鏂颁汉浼氶亣鍒伴偅涓粡鍏哥殑鎶ラ敊鈥斺€?Cannot use import outside a module"锛佽繖鏃跺€欎綘瑕佸湪script鏍囩鍔犱釜type灞炴€э細
html杩愯澶嶅埗<script type="module" src="order.js">script>
锛堢獊鐒舵縺鍔級绛夌瓑锛佽繖閲屾湁涓ぇ鍧戰煏筹笍 鏍规嵁鎴戠殑娴嬭瘯锛屾埅姝?023骞?鏈堬細
- 瀹夊崜寰俊鍐呯疆娴忚鍣ㄥtype="module"鐨勬敮鎸佺巼鍙湁78%
- iOS寰俊娴忚鍣ㄦ敮鎸佺巼杈惧埌96%
- 鍗庝负鑷甫娴忚鍣ㄩ渶瑕佸紑鍚?鏋侀€熸ā寮?鎵嶈兘鐢?/li>
馃挕 鐙閬垮潙鎸囧崡锛堟潵鑷娉粡楠岋級
- 鈥?strong>鈥嬫枃浠跺姞杞介『搴忊€?/strong>鈥嬶細鍦ㄧЩ鍔ㄧ缃戠粶涓嶇ǔ瀹氱殑鎯呭喌涓嬶紝鍙互鐢?code>DOMContentLoaded浜嬩欢纭繚鑴氭湰鍔犺浇瀹屾垚
- 鈥?strong>鈥嬩綔鐢ㄥ煙闄烽槺鈥?/strong>鈥嬶細鍗庝负P40鏇惧嚭鐜板嚱鏁颁綔鐢ㄥ煙绌块€忛棶棰橈紝鎺ㄨ崘鐢↖IFE鍖呰９鑰佷唬鐮?/li>
- 鈥?strong>鈥嬫€ц兘瀹炴祴鈥?/strong>鈥嬶細鐢ㄦā鍧楀寲鏂规鍚庯紝OPPO Reno8鐨凧S瑙ｆ瀽閫熷害鎻愬崌浜?0%锛屼絾鍐呭瓨鍗犵敤澧炲姞浜?5%
锛堢獊鐒舵媿澶ц吙锛夊浜嗭紒璇村埌杩欐垜鎯宠捣涓湡瀹炴渚嬶細鍘诲勾鍋氱數鍟嗛」鐩椂锛屽洜涓虹敤閿欐柟妗堝鑷村崕涓烘墜鏈虹敤鎴蜂笅鍗曞け璐ワ紝鐩存帴鎹熷け浜?3%鐨勮浆鍖栫巼锛佸悗鏉ユ崲鎴愭ā鍧楀寲鏂规+鍏煎澶勭悊锛岄棶棰樻墠瑙ｅ喅銆?/p>
馃 缁堟瀬閫夋嫨寤鸿
濡傛灉浣犵幇鍦ㄦ€ョ潃涓婄嚎鈥斺€旂敤鏂规浜屼簨浠剁洃鍚硶
濡傛灉瑕侀暱鏈熺淮鎶も€斺€旂洿鎺ヤ笂鏂规涓夋ā鍧楀寲
濡傛灉鏄鍖呴」鐩?..锛堝皬澹帮級鐢ㄦ柟妗堜竴涔熶笉鏄笉琛岋紝璁板緱绂昏亴鍓嶅啓濂芥敞閲婂氨琛岋紒馃槣
鏈€鍚庤涓喎鐭ヨ瘑锛氱幇鍦ㄦ湁80%鐨勭Щ鍔ㄧ鍏煎鎬ч棶棰橈紝鍏跺疄閮芥槸鍥犱负寮€鍙戣€呮病姝ｇ‘浣跨敤Babel杞瘧ES6+璇硶瀵艰嚧鐨勶紒涓嬫閬囧埌濂囨€殑闂锛岃寰楀厛妫€鏌ヤ笅缂栬瘧閰嶇疆~