组件化h5活动模板的实现

需求：

　　实现一套灵活的活动组件模板，编辑人员只需要打开后台，拖拽相应组件，填入相应内容，最终就生成一个活动页面。

因为涉及投票，评论，关注等功能（每个功能都当做一个组件），所以一个富文本编辑器是无法实现的。

生成的h5活动页面，还有几种环境：公司APP内，外部浏览器，微信&QQ内置浏览器。

几种状态：登录，未登录，游客状态等（状态具体内容不做解释）。

两个项目支持：

　　那么实现这一套，需要两个项目，一个项目是活动模板编辑器，一个是前端展示h5页面。

活动模板编辑器：

　　活动模板编辑器主要实现3个功能：各个组件，内容容器，生成json。

（1）组件：每个组件对应属性，可以填写相应内容

　　（2）内容容器：一个可视的容器，把上图相应组件拖拽到内容容器中进行排版

　　（3）生成json：生成一个json，供h5获取，根据相应规则展示。下面这个json是当前项目生成的。

这个json还不够完善，给到h5的json需要经过后端处理，比如根据用户的登录状态，会有不同的标示和状态展示

[
    {
        "type": "user",
        "userId": 37907899,
        "avatar": "/male.png",
        "author": "蒲xx",
    },
    {
        "type": "title",
        "title": "这是一个有所有组件的测试活动"
    },
    {
        "type": "tag",
        "items": [
            {
                "id": 0,
                "name": "标签"
            }
        ]
    },
    {
        "type": "title",
        "text": "测个试",
        "id": 1467788578568
    },
    {
        "type": "content",
        "text": "那么我们就来做个测试，你喜欢哪个？",
        "id": 1467788579375
    },
    {
        "type": "user",
        "userId": "10001280",
        "id": 1467788578375,
        "avatar": "/avatar/141153987724884.jpg",
        "author": "张师",
        "isFollow": false
    },
    {
        "type": "vote",
        "title": "你喜欢吃什么程序员",
        "voteId": 1,
        "items": [
            {
                "itemId": 1,
                "name": "大卫"
            },
            {
                "itemId": 2,
                "name": "飞狐"
            },
            {
                "itemId": 3,
                "name": "菜锅"
            },
            {
                "itemId": 4,
                "name": "狼笛生"
            },
            {
                "itemId": 5,
                "name": "子慕"
            }
        ],
        "id": 1467788580095
    },
    {
        "type": "image",
        "name": "默认图片",
        "src": "/FvZvDcUNHGUxZoC5hKuHBdJstWyD",
        "id": 1467788581943
    }
       
]

　　好，这个项目说完了，反正不是我做的。哈哈。

前端h5展示实现：

　　该我出场了，目前我们知道，我们获取的大致数据格式了。但是这些我都先不管。

　　我需要实现这个项目的流程如下：

　　　　1. 新建项目，划分好功能和项目结构

　　　　2. 实现各个组件的展示和交互

　　　　3. 打开一个入口文件，引入所有组件。

　　　　4. 入口文件中获取json，根据type的内容找到相应组件，载入页面，渲染。

　　（1）新建项目，划分好功能和项目结构：

　　　　这里主要是写好一个入口文件，新建一个组件文件夹里面写所有组件，最终通过requirejs在入口文件把所有组件引用进来。

　　　　组件结构如下:

　　（2）具体组件实现跳过不说

　　（3）当组件写好，在入口index中引入，大致如下：

define([

    //content
    'CommonPath/content/en.content',
    'CommonPath/content/mod.content',

    //title
    'CommonPath/title/en.title',
    'CommonPath/title/mod.title',

    //user
    'CommonPath/user/en.user',
    'CommonPath/user/mod.user',

], function (

    //Content
    ContentEntity,
    ContentMod,

    //title
    TitleEntity,
    TitleMod,

    //user
    UserEntity,
    UserMod
  
) {
    //index code...

})

　　（4）通过接口，我们获取到json，对json进行处理。

　　　　　大致处理代码如下：

var map = {
    title: [TitleMod, TitleEntity],
    user: [UserMod, UserEntity],
    content: [ContentMod, ContentEntity]
 };

 for(var i = 0, len = this.data.content.length; i < len; i++) {
    item = this.data.content[i];
    if(map[item.type]) {
        var entity = new map[item.type][1]({
                               data: this.data.content[i]
                           })
        var mod = new map[item.type][0]({
              view: this,
              entity: entity
        });
        mod.render();
    }
}