从本篇文章开始,架构师课程就进入了第二阶段,脚手架暂时先告一段落。第二阶段的内容就是 B
端开发了,继续学习如何从零架构一个网站。
git flow
流程,commit
信息PR review
lint
工具,代码规范CI/CD
👉👉 需求文档
👉👉 项目在线体验
需求分析流程图
把组件单独抽成独立的代码库,降低和任何项目的耦合性,单独的代码库让业务组件有独立的标准开发流程。
JS
模块NPM
CI/CD
自动发布业务组件库大多数都是展示型组件,其实就是把对应的 template
加上属性展示出来,大部分都是 css
属性,会有少量行为,比如点击跳转,这些组件会在多个不同的端进行展示,所以组件库要遵循从简的原则,避免和编辑器编辑流程的耦合。
为了降低学习的心智负担,我这里也采用字母 L
加上组件名称的方式,比如 l-text
或者 LText
gif
)通用属性
尺寸:
边框:
阴影与透明度
100 - 0
倒排位置
X
坐标 - 输入数字Y
坐标 - 输入数字事件功能
URL
下拉菜单url
地址 - 输入框特有属性
文本
checkbox
slider
radio
group
图片
形状
日期显示特有属性
属性设计的伪代码大致如下:
编辑器页面主要有三个部分,为左中右结构,左侧为组件模版库,中间为画布.右侧是设置面板。
整个编辑器使用一个 EditorStore
来实现具体功能
根据上述的数据结构,可以很容易的联想到只需要遍历 components
这个数组进行组件渲染即可。
组件的添加和删除也是对应的操作 components
这个数组即可。
左侧模板列表的数据结构和中间的组件是一样的,可以提前预设写在本地或者存在数据库,只需要在外层添加一个 warpper
,绑定点击事件向中间的操作区域进行添加组件,这样就可以和组件进行隔离,互不影响。
最后遍历 textComponentProps
生成组件即可。这样设计的好处是可扩展,可替换。比如当我们的 color
属性不想使用颜色选择器,而是让用户自己输入时,只需要把 color
属性对应的 component
的值改为 input
即可。
当编辑区域或者操作鱼趣的行为完成时,发射一个事件,修改 EditorStore
中的数据,包含哪个组件的哪个属性发生了修改。
ts + vue3
imooc-cli
jest + vue-test-utils
webpack + rollup
travis
ant-design-vue
vue-router + vuex