1.01-组件化开发问题

在Vue.js前端组件化思路下,一个朴素的(Vanilla)开发流程如下图所示:

这和传统的网站开发没有太大的差异:我们将编写完的HTML/JS/CSS代码直接推送到服务器, 然后在浏览器中查看效果并进行一些手工测试。唯一的区别在于,在组件化思路下,我们将 编写HTML/JS/CSS的工作,从网页级别分拆到组件级别了。

组件化分拆引发的麻烦

组件化分拆的理念很好,但是写起代码来相当地生硬。例如,为了组织EzApp组件的HTML 模板、CSS样式和JS代码,我们不得不借助于宿主HTML文件:

1.01-组件化开发问题_第2张图片
component-split-vanilla.png

这种代码组织方式存在着一些令人不吐不快的问题:

  • 代码太杂乱:组件的相关代码,散落在各处,看起来不爽,维护起来麻烦
  • 组件不独立:组件存在对宿主HTML文件和样式文件的依赖,不是自包含的
  • 样式未隔离:组件样式是全局有效的,不同组件的样式声明可能冲突

你可能感兴趣的:(1.01-组件化开发问题)