site-新增弹窗容器 需求开发方案文档

1 引言

    补充弹窗这种表现形式，弹窗就像一个自由容器，里面可以放入任意模块，通过统一链接控件进行连接，统一链接控件未来是一个很重要的连接器。

    覆盖网站类型：http://www.moguzx.com/content/#thirdPage

    用户场景：

    B用户网站提示信息、操作确认；网站展示信息（富文本）、表单报名、填写信息、运营活动；登录注册、投票客服等。

    （以上都是摘抄任务描述， 取消AB测）

产品经理：吴晓钦

设计：张如娜

测试：张策

2 总体概述

用户可以在site链接弹窗中新加弹窗容器模块，从而将链接绑定到该弹窗。从而在点击链接时弹出一个弹窗容器。

弹窗在管理态具有两种状态：预览态、编辑态

预览态的弹窗和site访客态的弹窗基本无异，只用于展示已经设置好的弹窗。不具备有编辑、修改功能。预览态可以通过点击编辑按钮进入管理态，也可以通过点击切换弹窗按钮进行预览其他按钮，但会先销毁当前弹窗。

管理态的弹窗相对复杂，会生成模块操作面板和保存取消按钮，其具有一下功能：

弹窗自身大小的resize

修改弹窗名称

添加内部模块（暂支持：文本、图片、按钮、在线表单、留言提交、在线投票模块）

修改内部模块名称，控制模块显示、隐藏、删除等

        内部模块resize，拖拽等

此外，保存按钮可以保存以上所有设置，取消按钮则还原以上所有设置（通过销毁当前弹窗，重新ajax获取弹窗）

3 代码风格

使用popupZone对象来实例化一个弹窗，而大多方法都绑定到原型上。

访客态：

    管理态（部分）：

4 具体设计和代码实现

     一个弹窗就是一个popupZone实例，而且不可以同时存在两个及两个以上的弹窗。所以生成一个弹窗前需要检查是否已有弹窗。若有，则先销毁，再生成。

具体设计

新建弹窗的时候会调用 添加模块 的逻辑，从而生成一个新弹窗容器模块，模块名称也由 当前弹窗个数+1 来初始化。

    新建的弹窗其实有两个过程 

1，生成新弹窗， 进入预览态。

2，由预览态进入编辑态。

第一步代码代码如下：

而弹窗模块放置的地方其实是新开了一个版式（其实不太准确），其结构如下：

注：#popupLevel的父元素就是顶层body了

所以添加逻辑在Site.addNewModule中是有个分支的。

拿到了弹窗的Dom，之后的逻辑和点击链接展示弹窗的逻辑是基本一致的了（不同的就是编辑态的取消按钮逻辑）

要生成一个弹窗，先要实例化PopupZone对象。

然后调用PopupZone.show（）方法。让弹窗展示出来，即进入预览态。管理态需要生成两个操作按钮：编辑，切换弹窗（that.creatHoverTab()）。

点击 切换按钮 会销毁当前弹窗（ .destroy（）），之后才会打开新的弹窗。

点击 编辑按钮 会销毁以上两个按钮（ .destroyHoverTab（）），然后依次绑定弹窗自身resize（.resize（）），内部模块的管理态功能（自由块的功能 .inModuleEdit（））, 生成内部模块操作面板（.creatFunPanel（）），还有保存和取消按钮（.creatEditOperateBtn（））；

以上就是一个弹窗的生成编辑功能。

而销毁过程相对简单，以上的生成方法都有对应的destroy方法，因此，退出编辑态的时候只需要调用这些destroy方法即可，退出弹窗就只需要调用弹窗的destroy就可以了。

弹窗的状态可以通过 .editing区别。

 代码实现

    根据弹窗功能尽量具体细分为最简单的方法，然后用根据功能去调用这些最简单的细胞，从而到达降低代码复杂度。

代码实现如下：

实现过程中遇见的坑逼事情：

    1，浏览器渲染和js执行先后问题

首先，这bug是本地不存在的。

        上到svr2后，瓶子发现从链接弹窗直接编辑弹窗时，弹窗内部的图片会消失。经过排查后发现，在模块的Dom们append进页面后，模块的样式才会调用Site.addModuleStyle插入到#moduleStyle这个样式标签内，接着立即执行模块的Script。

而执行Script时新插入样式并没有起效，导致图片模块的width和height都被置为0，从而图片模块消失了。

解决方案：将模块样式先插入到页面中，之后才插入Dom和Script。

    2、层级问题

        弹窗模块的时候必然是最顶层的，但是在编辑态的时候，依然可以弹出其他弹窗，比如弹窗内的设置链接弹窗。我们的popupWindow的弹窗一般层级是9032，如果将弹窗模块的层级设置为9033的话，那么弹窗模块的内生成的弹窗就不可能高于弹窗模块。

        解决方案：#popupLevel的层级也设置为9032，每次生成弹窗容器的时候，都将#popupLevel插入到顶层body的最后面，这样利用生成顺序来处理层级关系。（这一点在以后的开发中要加多注意）

5 运行环境

        浏览器，site（访客态、管理态）