vue 自從使用了元件,工作量減去了一半

語言: CN / TW / HK

知識付費使用 script 標籤引入 Vue.js。在專案中也可以使用元件,完成一些公共業務。以 H5 登入彈窗為例,對在知識付費中使用元件進行說明。

登入彈窗會在多個業務場景下使用,如果在每個業務場景下重複一套登入彈窗,會使得程式碼冗餘,且後期維護較為繁瑣。此時,我們可以將登陸業務的程式碼剝離出來,在需要對其使用的地方進行引入即可。這樣做不僅精簡程式碼,而且在後期維護時也更加容易,不必再為新的功能需求,在多處進行程式碼改動。

在當前專案下,有兩種剝離方式。一種方式是將登入業務程式碼寫在獨立的 JavaScript 檔案中,其中的 DOM 片段需要進行字串拼接;另一種方式是使用外掛,將寫有 DOM 片段的 HTML 檔案、JavaScript 檔案、CSS 檔案進行組合。

  • 拼接字串方式:

在早期專案中,使用的就是這種方式。

如上圖所示,圖中的模板內容使用字串拼接而成。這種方式拼接字串一旦超多,會顯得程式碼很亂,且易出錯。

  • 組合方式:

專案使用 RequireJS 進行模組化開發,所以我們可以使用 text.js 和 css.js 外掛,引入 HTML 和 CSS。

如上圖所示,我們將登入元件的 HTML、CSS 和 JavaScript 檔案放在 base_login 資料夾下。

如上圖所示,base_login 資料夾下的檔案。

如上圖所示,這是 index.html 中的內容。

如上圖所示,這是 index.css 中的內容。

如上圖所示,這是 index.js 中的內容,其中引入 index.html 和 index.css 檔案。

如上圖所示,在頁面中使用登入元件,先引入,再使用。

如上圖所示,這是元件的使用。

原始碼附件已經打包好上傳到百度雲了,大家自行下載即可~

連結: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27 提取碼: yu27

百度雲連結不穩定,隨時可能會失效,大家抓緊儲存哈。

如果百度雲連結失效了的話,請留言告訴我,我看到後會及時更新~

開源地址

碼雲地址:\ http://github.crmeb.net/u/defu

Github 地址:\ http://github.crmeb.net/u/defu

開源不易,Star 以表尊重,感興趣的朋友歡迎 Star,提交 PR,一起維護開源專案,造福更多人!