思考
把一个web页面看成一张白纸,首先在上面画出主轮廓。例如下图我把它画出3x3的九宫格:

然后呢,在每个格子中填充组件,这样页面就轻松完成啦。我们使用圆圈来代表组件,如下图:

假设图中的A,B,C组件是页面公共组件(每个页面几乎会使用到的),我们是不是可以不用为每个页面去写或者引用呢?只关系制作当前页面个性化的组件就可以了呢?
假设D,H组件已经无法满足业务要求,是不是可以轻松的换成D1,H1,而不牵扯到其他组件呢?
G,I,F组件或许还可以被重用到其他页面中呢?
page929从这里开始出发啦,已经完成第二版咯。
page929的基本架构
架构图在下面哦:

page929包含两部分;
一部分是预定义公共组件库,其中定义几乎每个页面都会使用到的组件,会被组件引擎自动加载到页面;
另一部分是组件引擎,它会把外部传进来的个性化组件和公共组件解析成最终页面输出;
组件如何去创建
这个架构目前在webpack的基础上构建;
组件的创建可参看我之前一篇简书:前端页面对象化
公共组件库
目前应当前项目要求,在其中构建了几个公共组件如下:
(1)登陆弹窗login组件
(2)页面头head组件
(3)页面尾tail组件
(4)提示框prompt组件
(5)确认框affirm组件
网友评论