Open func-star opened 6 years ago
在电商大环境里，活动页面的需求在前端领域是源源不断的，特别是在大促期间，就格外的多。 面对这些枯燥乏味且又长的差不多的活动页面，前端🐶们往往是非常厌恶的。 作为一个有梦想的前端🐶，我们当然是想办法解放我们的劳动力啦！
在回答这个问题之前，我们先来分析一下活动页面有哪些特征。
逼逼了一大堆活动页面的特征，前端🐶心里想，这些简单的页面还让我来开发，简直就是浪费人才，要是运营自己能组装模块搭建页面就好了。 说了那么久终于进入正题了，对的！没错！我们就是要设计一个系统让运营来搭建活动页面，开发只需要负责开发功能模块。
接下来，我们需要给我们将要设计开发的系统起一个响亮的名字，因为需要符合程序员气质，那就取名叫「摩羯」(capricorn)吧！
页面由一个页面模板和多个功能模块组成，运营同学首先需要挑选一个页面的基础模板类型，然后再根据活动页面的功能组成，挑选功能模块来搭建页面。
举个例子：现在我们需要在微信容器内实现一个活动页面，这个页面涉及轮播图、页面导航和商品图墙三个功能，并且需要支持微信的一些功能。 这个场景下我们就需要一个微信基础页面模板，这个模板里面需要引入微信的一些sdk来支持微信独有的功能。并且我们需要实现三个功能模块，分别是轮播图模块、页面导航模块和商品图墙模块。
sdk
一个页面由多个功能模块组成，而模块之间必然会存在公用的模块，比如react、react-dom等等。 那么如果每一个模块打包的时候都打把公用的三方包打进去，那么最后组装出来的页面就会包含很多重复的依赖包，体积过大就会影响页面性能。
react
react-dom
我们将页面拆分为多个模块之后，模块之间就是相互独立的了。我们需要通过另一种手段来实现模块之间的交互以及数据的通信。
上面在分析特征的时候讲到模块重用的概率会很高，多个活动页面中可能存在同一个功能模块，只是数据会有些出入。 那么我们在实现公用功能模块的时候就需要考虑到如何通过配置信息生成一个模块？模块的配置信息存储在哪里？模块的后端数据请求怎么获取？
解决完上述问题之后，我们就万事具备了哈，那么我们怎么将这些抽象的模块组装成一个可用的页面呢？
分析完背景和问题点之后，我们可以一步步来实现我们的「摩羯」系统了哈～
前言
在电商大环境里，活动页面的需求在前端领域是源源不断的，特别是在大促期间，就格外的多。 面对这些枯燥乏味且又长的差不多的活动页面，前端🐶们往往是非常厌恶的。 作为一个有梦想的前端🐶，我们当然是想办法解放我们的劳动力啦！
我们想要实现的究竟是个什么样的系统呢？
在回答这个问题之前，我们先来分析一下活动页面有哪些特征。
逼逼了一大堆活动页面的特征，前端🐶心里想，这些简单的页面还让我来开发，简直就是浪费人才，要是运营自己能组装模块搭建页面就好了。 说了那么久终于进入正题了，对的！没错！我们就是要设计一个系统让运营来搭建活动页面，开发只需要负责开发功能模块。
接下来，我们需要给我们将要设计开发的系统起一个响亮的名字，因为需要符合程序员气质，那就取名叫「摩羯」(capricorn)吧！
开发过程中可能会遇到哪些问题
1.需要将页面拆分为页面模板和功能模块
页面由一个页面模板和多个功能模块组成，运营同学首先需要挑选一个页面的基础模板类型，然后再根据活动页面的功能组成，挑选功能模块来搭建页面。
举个例子：现在我们需要在微信容器内实现一个活动页面，这个页面涉及轮播图、页面导航和商品图墙三个功能，并且需要支持微信的一些功能。 这个场景下我们就需要一个微信基础页面模板，这个模板里面需要引入微信的一些
sdk来支持微信独有的功能。并且我们需要实现三个功能模块，分别是轮播图模块、页面导航模块和商品图墙模块。2.公共依赖抽离
一个页面由多个功能模块组成，而模块之间必然会存在公用的模块，比如
react、react-dom等等。 那么如果每一个模块打包的时候都打把公用的三方包打进去，那么最后组装出来的页面就会包含很多重复的依赖包，体积过大就会影响页面性能。3.模块通信
我们将页面拆分为多个模块之后，模块之间就是相互独立的了。我们需要通过另一种手段来实现模块之间的交互以及数据的通信。
4.模块信息配置
上面在分析特征的时候讲到模块重用的概率会很高，多个活动页面中可能存在同一个功能模块，只是数据会有些出入。 那么我们在实现公用功能模块的时候就需要考虑到如何通过配置信息生成一个模块？模块的配置信息存储在哪里？模块的后端数据请求怎么获取？
5.最终页面的拼装
解决完上述问题之后，我们就万事具备了哈，那么我们怎么将这些抽象的模块组装成一个可用的页面呢？
分析完背景和问题点之后，我们可以一步步来实现我们的「摩羯」系统了哈～