组件化&模块化管理

项目中通常都是按基础层,业务层来划分项目结构; 基础层(通常是公共特性抽离出来的, 或者基础工具服务)用来服务于业务层; 业务层可以理解为需要实现的业务逻辑, 简而言之, 对于前端来说就是页面切图:),实现交互

组件

组件: 对于组件的认识我们通常默认为 UI组件, 以vue来说, 一个组件就是 vue的实例对象, 我们编写组件本质上就是对一个对象(属性和方法)进行读写操作.

组件是搭建目标页面的基础单元, 如何去划分组件的粒度就成了一门学问. 按项目结构来划分的话可以分为基础组件和业务组件

如何定义基础组件?这个问题很不统一... 有些会按项目中单一UI结构模型出现的频次来算, 超过多少次直接抽离出来当作基础组件, 传入配置项达到定制化效果; 有些会把常用功能结构维护成一个组件库(如element-ui), 使用时传入配置项以实现自己想要的效果, 只能说各有利弊吧

根本目标都是为了实现逻辑代码复用, don't repeat yourself, 缩减项目周期

业务组件可以理解为一个组件容器, 通过组合上述基础组件与业务功能单元结构呈现在我们视觉之中; 通常业务组件都是以产品原型模块为基础来进行拆分的... 以一个社区管理平台为例,通常会包含:

内容
用户
广告
推送
审核
权限
等等...

以社区网站为例: 业务组件间存在一定的层级关系

首页内容
内容项分类
分类项列表
列表项详情
emm...还有那啥?
一些辅助功能模块

一般情况下我们都是通过 业务组件来划分项目结构中视图文件目录的结构以及前端路由的结构...

如何理解模块, 按定义来说模块是一些特定功能的集合体, 在代码的世界里, 一个文件它就是一个模块; 我们把某个功能的实现逻辑全写在一个文件下便是实现了一个模块...当然在书写模块文件时我们需要遵守模块化规范, 详情参见我之前的文章模块化规范

为了更好地管理模块文件, 我们往往会把有共性的模块文件放到一个文件夹目录下, 这些各类模块集合的文件夹组织成一个完整的项目... 到此为止, 一个完整的前端项目结构就由组件和模块两大块内容组建起来了. 然后经过 webpack 这类工具打包构建成一个可以基于web运行的项目.