亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Express 應用程序中組織客戶端 js?

如何在 Express 應用程序中組織客戶端 js?

慕虎7371278 2023-05-19 17:07:45
在我的應用程序中,我有大約 10 個不同的頁面,其中大部分使用某種 JavaScript。app.js目前,我有一個包含在所有頁面中的客戶端文件。為了弄清楚要在頁面上附加哪些事件偵聽器,我基本上檢查url位置并從那里開始:window.onload = function () {  let urlLocation = window.location.pathname.split('/')[1]  //Global functionality for all pages  UIctrl.toggleActiveNavbar(urlLocation)  //createTopic route  if (urlLocation === 'createTopic' || urlLocation === 'edit') {    UIctrl.createTopicTagsBasedOnCategory()    UIctrl.handleCreateOrEditTopicClick()  }  if (urlLocation === 'editPost' || urlLocation === 'createPost') {    UIctrl.handleCreateOrEditPostClick()  } // .... and so on  }盡管它有效,但我認為這不是一個好方法。如果一個項目變得足夠大,就很難管理它。我無法找到如何正確執行此操作的答案。我的問題是:我應該js為每一頁準備單獨的文件嗎?我的問題是我必須復制所有頁面上使用的通用代碼。您是否在您的 express 應用程序中使用某種捆綁器(webpack/parcel)來解決這個問題?也許你可以指點我一個顯示如何正確設置它的存儲庫。這在現實世界的生產環境中是如何完成的?謝謝。
查看完整描述

1 回答

?
肥皂起泡泡

TA貢獻1829條經驗 獲得超6個贊

您的直覺是比較 URL 來決定要運行的初始化是一種糟糕的編碼方式是正確的。這不是一個好的模式,隨著越來越多的頁面和維護隨著時間的推移會變得非常痛苦,很快就會失去控制。

相反,您可以將公共代碼放在每個頁面都加載的共享 JS 文件中,以便可以根據需要使用這些功能。然后,在每個單獨的頁面內使用內聯<script>標記來執行特定于頁面的初始化,設置特定于該頁面的事件偵聽器并調用共享 JS 文件中的代碼。

如果對于某些頁面,您有很多頁面特定的初始化代碼,您可以只將這些頁面特定的代碼放在頁面特定的 JS 文件中,但通常您不希望每個頁面都有一個外部 JS 文件如果可以避免,請訪問您的頁面。嘗試將大部分代碼放在通用 JS 文件中,然后在每個特定頁面中只使用一小部分內聯代碼來進行正確的初始化。這會將您的大部分代碼放在一個通用的共享 JS 文件中,并在特定頁面中保留特定于頁面的初始化邏輯。

每個頁面都應該有單獨的 js 文件嗎?我的問題是我必須復制所有頁面上使用的通用代碼。

不。您不想在單獨的 JS 文件中復制大量代碼,因為那是維護的噩夢并且會破壞有效的瀏覽緩存。


查看完整回答
反對 回復 2023-05-19
  • 1 回答
  • 0 關注
  • 116 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號