利用状态模式处理多个模态弹出层的显示隐藏

使用MVVM架构处理页面的生成与更新的好处是，我们从DOM的桎梏中解放出来，重点转移到数据的处理。数据的组织与维护向来是设计模式的阵地，这让我们亲近设计模式，写出高可维护性的软件。以近日我在公司遇到的弹出层为例吧。

后台管理界面的特点是多表格多弹出层，这样才方便展现更多数据更多功能。我们项目有一个叫云储存的模块，可以看作是115网盘的微缩版。这模块里有许多弹出层，用于处理分区，文件夹，文件的增删改查。为了防止用户在一个操作不结束时干另一个操作引起混乱，都做成模态对话框。换言之，它们都有浅黑色的半透明遮罩层。由于可能一个弹出层外弹出另一个弹出层，比如删除时的确认面板，因此我又不能让所有弹出层共享一个外框，唯一能共享的是遮罩层。

再看我的代码，每个弹出层在VM中对应两个方法与一个属性，那个属性用于负责弹出层的显示与隐藏，其他两个方法用于改变这个属性。这是一种非常经典的做法。但遮罩层怎么办呢？它也应该跟弹出层一同显示隐藏。但如何让多个弹出层一起操作它？这时我使用了一个技巧——使用"短路或"！

<div class="mask" ms-visible="flagCreatePartition || flagNewFolder || flagDeleteFiles || flagUploadFiles">

</div>
<div class="dialog" ms-if="flagCreatePartition" ms-include-src="'modules/apps/storage/createPartitionDialog.html'">

</div>
<div class="dialog" ms-if="flagDeleteFiles" ms-include-src="'modules/apps/storage/deleteFilesDialog.html'">

</div>
<div class="dialog" ms-if="flagNewFolder" ms-include-src="'modules/apps/storage/newFolderDialog.html'">

</div>
<div class="dialog" ms-if="flagUploadFiles" ms-include-src="'modules/apps/storage/uploadFilesDialog.html'">

</div>

  var model =  avalon.define("appstorage", function(vm) {
                        vm.flagCreatePartition = false
                        vm.openCreatePartition = function() {
                            model.flagCreatePartition = true
                        }   
                        vm.closeCreatePartition = function(create) {
                            if (create === true) {
                               //创建新分区
                            }
                            model.flagCreatePartition = false
                        }


                        vm.flagNewFolder = false
                        vm.openNewFolder = function() {
                            model.flagNewFolder = true
                        }
                        vm.closeNewFolder = function(create) {
                            if (create === true) {
                              //创建文件夹
                            }
                            model.flagNewFolder = false
                        }

                        vm.flagDeleteFiles = false
                        vm.openDeleteFiles = function() {
                            vm.flagDeleteFiles = true
                        }
                        vm.closeDeleteFiles = function() {
                            vm.flagDeleteFiles = false
                        }


                        vm.flagUploadFiles = false
                        vm.openUploadFiles = function(create) {
                            if (create === true) {
                              //上传文件
                            }
                            vm.flagUploadFiles = true
                        }
                        vm.closeUploadFiles = function() {
                            vm.flagUploadFiles = false
                        }
                        //略
                    })

这是一个非常工整划一的结构。当我们想打开某人弹出层时，只要在对应的按钮上绑定ms-click="openUploadFiles", 关闭弹出层，我们在弹出层的关闭按钮上绑定ms-click="closeUploadFiles"。弹出层里存在两种按钮，一种是确认，是存在实际操作，一种是取消，单纯的关闭，我们可以通过传参区分它们。下面是某一个弹出层的内容，它是通过ms-include实现动态加载。

<div class='wrapper'>
    <div class='title'>{{i18ndeletefile}}<span class='close' ms-click='closeDeleteFiles'></span></div>
    <p>Are you sure to delete seleted files?</p>
    <span class="button" ms-click="closeDeleteFiles(true)"  >{{i18nok}}</span>
</div>

弹出层出现的入口：

<header>
    <span class="newFolder iconbutton" ms-click="openNewFolder">{{ i18nnewFolder }}</span>   
    <span class="uploadFile iconbutton" ms-click="openUploadFiles">{{ i18nuploadFile }}</span>

    <span class="moveBtn fastener">{{ i18nmove }}</span>

    <span class="removeBtn fastener" ms-click="openDeleteFiles">{{ i18nremove }}</span>

    <span class="renameBtn fastener">{{ i18nrename }}</span>
</header>

一切是乎很完美，但细看，它是违反“开闭原则”，每添加一个新弹出层都要在VM加三个东西，而且视图上也要遮罩层的ms-visible的值进行修改。这时我们就需要查找重复代码了，把变化的东西封装起来。我们发现所有弹出层与遮罩层都是受某些变量而改变（flagXXXX），它们是一个简单的布尔，如果把它们合并起来做成一个变量更好用些。

                vm.flagDialog = ""
                vm.openDialog = function(name) {
                    vm.flagDialog = name
                }
                vm.openDialog = function(command, execute) {
                    if (execute) {
                        vm[command]()
                    }
                    vm.flagDialog = ""
                }
                vm.createPartition = function() {
                }
                vm.newFolder = function() {
                }
                vm.deleteFiles = function() {
                }
                vm.uploadFiles = function() {
                }

在JAVA中，它要求每个类都一个控制状态的内部类。在JS这样动态的语言中，我们可以把这个内部类改成对象，这里更进一步，改成一个字符串。然后我们只要控制这个字符串，就能批量控制N个弹出层了。

打开这些弹出层的HTML代码变成：

<header>
    <span class="newFolder iconbutton" ms-click="openDialog('newFolder')">{{ i18nnewFolder }}</span>   
    <span class="uploadFile iconbutton" ms-click="openDialog('uploadFiles')">{{ i18nuploadFile }}</span>

    <span class="moveBtn fastener">{{ i18nmove }}</span>

    <span class="removeBtn fastener" ms-click="openDialog('deleteFiles')">{{ i18nremove }}</span>

    <span class="renameBtn fastener">{{ i18nrename }}</span>
</header>

而弹出层的代码就变成这样了：

<div class="mask" ms-visible="flagDialog">

</div>
  
<div class="dialog" ms-if="flagDialog === 'createPartition'" 
     ms-include-src="'modules/apps/storage/createPartitionDialog.html'">
</div>
  
<div class="dialog" ms-if="flagDialog === 'deleteFiles' "
     ms-include-src="'modules/apps/storage/deleteFilesDialog.html'">
</div>
  
<div class="dialog" ms-if="flagDialog === 'newFolder'" 
     ms-include-src="'modules/apps/storage/newFolderDialog.html'">
</div>
  
<div class="dialog" ms-if="flagDialog === 'uploadFiles'"
     ms-include-src="'modules/apps/storage/uploadFilesDialog.html'">
</div>

弹出层的内容大概成为这样：

<div class='wrapper'>

    <div class='title'>{{i18nnewFolder}}<span class='close' ms-click='closeDialog'></span></div>

    <input class="partition" ms-duplex="folderName">

    <span class="button partitionbtn" ms-click="closeDialog('newFolder',true)" ms-class-blue="folderName.length" >{{i18nok}}</span>

</div>

我们发现每一个弹出层的外框都很像，因此可以循环生成

<div ms-each-name="dialogNames">
    <div class="dialog" ms-if="flagDialog === name" 
         ms-include-src="'modules/apps/storage/{{name}}Dialog.html'">
    </div>
</div>

VM上添加一个dialogNames的数组，里面包含所有弹出层的名字就行了。这样我的HTML与JS就干净多。

最后附上一张设计模式的图片：