knowledgepaid使用script标签引入Vue。在项目中也可以使用组件来完成一些公共服务。以H5登录弹窗为例,说明组件在知识付费中的使用。登录弹窗会在多个业务场景中使用。如果每个业务场景都重复一套登录弹窗,代码就会冗余,后期维护也会比较繁琐。至此,我们就可以将登录业务的代码剥离出来,引入到需要使用的地方。这样不仅简化了代码,也方便了后期的维护,不用为了新的功能需求在多个地方做代码改动。在当前项目下,有两种剥离方法。一种方式是将登录业务代码写在一个独立的JavaScript文件中,其中的DOM片段需要拼接起来;另一种方式是使用插件将HTML文件、JavaScript文件和CSS文件与DOM片段结合起来。字符串拼接法:在早期的项目中,都是使用这种方法。如上图所示,图中的模板内容是使用字符串拼接而成的。一旦这样拼接的字符串过多,代码就会显得凌乱且容易出错。组合方式:项目使用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/defuGithub地址:http://github.crmeb。net/u/defu开源不易,Star表示敬意,有兴趣的朋友欢迎Star,提交PR,共同维护开源项目,造福更多人!
