iT邦幫忙

0

請問要怎樣分拆 vue.js的function做不同的檔案?

各位好, 我目前用vue.js在做專案(不是用vue cli那種), 但很多function都寫在同一個js檔中導致程式碼很多, 所以想把這些function按照類型去分拆成幾個js檔再匯入到vue.js中, 請問有方法可以做到嗎? 如果做不到我可以怎樣去改而令到這個檔案往後容易一點維護?

2 個回答

0
清心明月
iT邦新手 3 級 ‧ 2021-01-25 00:28:50
最佳解答

您的問題應該屬於程式架構如何規劃的問題。

這是普遍程序員經歷過的問題(包括我自己)。

是時候了解一下「物件導向程式設計(英語:Object-oriented programming,縮寫:OOP)」來應付您的問題。

  1. OOP 是一種編寫程式心法。 不可能短期內解決您的問題。
  2. 但這種心法,的確可以達到您的目標。
  3. OOP 是一種編寫程式技巧,所以,不管在任何一種電腦語言上,方法都是大同小異。

若想快速了解什麼是OOP,和對您有沒有幫助,建議您看看以下連結,希望對您有幫助:
https://ithelp.ithome.com.tw/questions/10194200

ps1. 重點您需要了解 javascript OOP 的編寫規格及結構。
ps2. 把原有的javascript 改成OOP架構,不容易。從新寫,從新學,比較快。
ps3. Vue.js 本來都是 OOP架構,您的情況怎會發生?
ps4.
想把這些function按照類型去分拆成幾個js檔再匯入到vue.js中, 請問有方法可以做到嗎?
我是這個方法,但用按照類型的想法,還是OOP比較好

<script type="text/javascript" src="/js/script1.js"></script>
<script type="text/javascript" src="/js/script2.js"></script>
<script type="text/javascript" src="/js/script3.js"></script>
看更多先前的回應...收起先前的回應...
shukyi65 iT邦新手 5 級 ‧ 2021-01-25 14:13:31 檢舉

謝謝大大的用心回答, 我會研究OOP的了/images/emoticon/emoticon41.gif

加油!想分享一個小故事!我和我的同事,面對著和您差不多的問題,但我們同時面對著大量的Bug。花了一年多的時間,最終用OOP從寫整個系統,才能解決我們的問題。而結論是,我個人覺得自己浪費了30多年時間學習編程!為什麼在30多年後才懂什麼是OOP。真的,我沒跨大。

shukyi65 iT邦新手 5 級 ‧ 2021-01-26 21:21:28 檢舉

好的~/images/emoticon/emoticon41.gif

froce iT邦大師 1 級 ‧ 2021-01-27 09:27:15 檢舉

不過其實 VUE.js 不是很需要OOP的寫法...
一般來說

  1. 共用的function會丟在其他資料夾,利用import來引用。
  2. 相同的呈現可以利用組件來做,利用傳參(props)來處理。
  3. 共用的變數可以存在vue本身,或是乾脆用vuex來處理。

froce 請教一下!import 好像只能在 vue cli 裡用,對吧?能在 vue 中用 import嗎?

清心明月
請以瀏覽器支援度做為主要考量! import 在 Vue-cli 中能夠使用是因為 Vue-cli 提拱的 webpack 模板中有 babel 幫我們處理語法轉譯的問題。

0
Dennis Zheng
iT邦新手 5 級 ‧ 2021-01-26 10:08:49

假設你有一個Navbar 左邊有ogo 右邊裡面有5個Icon 每個Icon 只是顏色不一樣 標題不一樣

你就試著去拆分,把Navbar當成一個網頁的一個組件。
Navbar再細分,左跟右,右邊再細分,這個時候右邊的Icon,
你可以 用Function去創一個雛形 然後透過Props傳你的標題跟顏色 。
這樣你的Icon不用寫五次
Framework的重點在於Reusable

光我這樣講妳的架構就會
App.js - Navbar - IconFn
- Body
- Footer

跑版了 App 的children 有Navbar Body Footer

跑版了 App 的children 有Navbar Body Footer

shukyi65 iT邦新手 5 級 ‧ 2021-01-26 21:20:53 檢舉

好的, 謝謝你的建議/images/emoticon/emoticon41.gif

我要發表回答

立即登入回答