框架核心和模块简析

框架核心

该框架使用vuevue-router作为基础框架,以常用 web app 的典型三段式布局为标准,构建了基础的框架结构。通过vue对页面进行事件注册和数据绑定等操作,构建基础业务页面;通过vue-router实现页面之间的切换和跳转,很好地实现多页面的管理。

框架结构

框架主要分为头部底部主体三部分。其中头部和底部为固定模板,框架定义了一套全局控制的方法用来控制头部底部的显示状态和内容,并提供了接口可自定义模板和绑定事件。底部为基础导航功能,负责主要入口页面跳转。主体部分负责业务内容的显示和渲染。

基础模块

框架内定义了包括但不仅限于toast提示框alert弹出框等待层加载进度等公用控制方法,可全局自由调用或清除。此外提供了一套utils工具组件、filter过滤组件、storage存储组件作为常用基础组件。其中utils组件和filter组件为可自定义组件,可根据项目实际需求酌情添加和扩展。

类库集成

框架集成了zepto作为基础依赖库,为开发提供了基础的操作方法。在有必要的时候,通过类库工具进行DOM操作。笔者建议尽量减少DOM操作,尽可能通过数据绑定、过滤、以及指令来完成日常页面开发工作,原则上不反对类库的使用。

整合插件

框架整合了以下组件:

  1. eCharts百度统计图插件

  2. scroller滑动选择组件

  3. poppicker滑动级联选择弹框

  4. datetimepicker日期时间选择插件

  5. swiper滑动轮播图组件

  6. nprogress加载进度组件

  7. scrollLoad滚动加载组件

除去eCharts及nprogress组件外,其他组件为笔者为框架深度定制的一套插件,可能会有许多不足和疏漏,如若发现任何问题,可及时向笔者反馈,在此表示感谢。