美文网首页vue-3.x
1.01-组件化开发问题

1.01-组件化开发问题

作者: Jimmy_L_Wang | 来源:发表于2018-09-28 09:55 被阅读14次

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

WX20180919-142041@2x.png

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

组件化分拆引发的麻烦

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

component-split-vanilla.png

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

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

相关文章

  • 1.01-组件化开发问题

    在Vue.js前端组件化思路下,一个朴素的(Vanilla)开发流程如下图所示: 这和传统的网站开发没有太大的差异...

  • 组件化开发

    不怕跌倒,所以飞翔 组件化开发 参考资源 Android组件化方案 为什么要组件化开发 解决问题 实际业务变化非常...

  • iOS 的组件化开发

    iOS 的组件化开发 iOS 的组件化开发

  • iOS组件化开发实践

    iOS组件化开发实践 iOS组件化开发实践

  • Android 组件化开发实践

    Android组件化开发实践(一):为什么要进行组件化开发?Android组件化开发实践(二):组件化架构设计An...

  • 组件化开发

    组件化开发,并不是小程序独有,只要有UI层面的展示,都可以使用组件化开发。那么什么组件化开发呢? 组件:在用户界面...

  • 戏说移动江湖开发历程

    大主线 细说移动开发历程 大技术 组件化开发 组件路由 组件配置动态加载 组件骨架架构插件化开发...

  • iOS组件化开发架构设计思考(初版)

    组件化开发系列:(一)iOS组件化开发架构设计思考(二)iOS组件化开发实施一期文档 一. 项目现状    当前i...

  • iOS组件化开发实施一期文档

    组件化开发系列:(一)iOS组件化开发架构设计思考(二)iOS组件化开发实施一期文档 一、目标 梳理项目工程结构,...

  • 组件化开发遇到的问题

    组件化开发遇到的问题 1、Suggestion: add 'tools:replace="android:name...

网友评论

    本文标题:1.01-组件化开发问题

    本文链接:https://www.haomeiwen.com/subject/ieuuoftx.html