常识付费应用 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-b…
提取码: yu27
百度云链接不稳固,随时可能会生效,大家放松保留哈。
如果百度云链接生效了的话,请留言通知我,我看到后会及时更新~
开源地址
码云地址:
http://github.crmeb.net/u/defu
Github 地址:
http://github.crmeb.net/u/defu
开源不易,Star 以表尊重,感兴趣的敌人欢送 Star,提交 PR,一起保护开源我的项目,造福更多人!