Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you a page pop-up window on how to solve the confusion. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

For some fast iterative products, especially mobile C-end products, it is very common to show users a variety of pop-up windows on the home page of app for the purpose of user operation. at the beginning of the product, it may feel nothing because the iterative version and operation strategy do not change too much, but at the later stage of the product operation, all kinds of operation strategies that can not be played in turn come into play. The style and logic of the pop-up window have changed many times, and the problem arises.

Due to the lack of planning in the early stage, there may be more than a dozen or more pop-up window components on the home page, not only on the home page, but also in these sub-components. Maybe there are sub-components in these sub-components, and the sub-components of the sub-components also have pop-up windows, each pop-up window has a corresponding set of control explicit and implicit logic, scattered in multiple components and multiple methods, but the home page has only one page. You can't let all the pop-up windows that meet the display conditions pop up all at once. Anyway, I've never seen an app that does this, so how to manage these pop-ups becomes a top priority.

And often when you realize this, it's probably when the situation gets out of control. Die.

Scene: a pop-up window and B pop-up window are located in the main assembly, C pop-up window is located in the subcomponent C of the main component, D pop-up window is located in the subcomponent B of the main component, and E pop-up window is located in the subcomponent G of the subcomponent F of the main component.

PM: I hope that when I first enter this page, the D pop-up window will be displayed only when the A pop-up window, B pop-up window and C pop-up window are not displayed. If the D pop-up window is displayed, unless it is shown again after the B pop-up window, the E pop-up window will not be displayed under any circumstances.

FE:???

Think about it for a moment, in fact, this thing is not difficult, just leave it to the back end to control the visibility and concealment of all pop-ups through the interface, mainly the advance planning of the architecture and the low-coupling code logic.

Configuration of pop-up window

First of all, you must know exactly which pop-up components there are on the current page, including the sub-components of the page and the pop-up components within the sub-components of the sub-components. Otherwise, you don't even know how to accurately control the components.

So, as the above sentence, it is very important to plan ahead and take precautions. Otherwise, after dozens of iterations of the page, when the person who wrote the code is gone, you want to count how many pop-up windows there are on the page. That's enough for you to drink a pot.

Then you need to record all these pop-up windows in one place for easy management, so you can get the following data structure:

/ / modalMap.jsexport default {/ / record the pop-up item index: {modalList: [{name: 'modal_1', level: 10, show: true}, {name:' modal_2', level: 22, show: true}, {name: 'modal_3', level: 70, show: true}] Children: {child1: {modalList: [{name: 'modal_1_1', level: 8, show: true}, {name:' modal_1_2', level: 62, show: true}], children: {child1_1: {modalList: [{name: 'modal_1_1_1', level: 8, show: true} {name: 'modal_1_1_2', level: 60, show: true}]} / /. You can also continue to record the pop-up structure of other pages}

The modalMap.js file records all pop-up items in each page. For example, the pop-up items in the home page index are in the value data structure of the property name index. There are two modal in the main component of the page, index, which can be named modal_1 and modal_2, respectively. If the index is also a subcomponent of the main component of the page, it will continue to be nested. For example, there is also modal in the subcomponent child1 of the main component of index. Then put the child1 in the children of index to continue recording, and so on.

This structure looks clear. The modal in the main component and the sub-components in the main component are very clear and clear at a glance. Of course, you can not use this structure, which is entirely up to you. This is defined here for the time being.

In addition to name, each modal also has level and show properties

Level is used to identify the level of the current modal. Normally, each page can only display one modal at the same time, but if multiple modal meet the conditions for display at the same time, then compare their level values, which is larger, which will be shown first, and the rest will be ignored. Avoid the situation where a page may prompt you to display multiple pop-up windows.

The show attribute determines whether the modal is finally displayed within the modal, so that it can ignore external conditions and easily disable the display of pop-up windows through configuration.

Manage pop-up windows through publish / subscribe mode

The configuration structure of the pop-up window has been determined, and the next step is to manage these configurations.

In general, when multiple pages meet the conditions and need to be displayed at the same time, most of them occur when the page has just entered, and the page sends multiple requests. The return result of these requests controls the display of the corresponding pop-up window.

Because these requests are likely to fall under the jurisdiction of different lines of business or departments and are independent of each other, it is actually a bit difficult to give control of the pop-up window to the back end, coupled with the fact that the request is asynchronous. It is not easy for the front end to use spaghetti code to ensure the mutual exclusion between the pop-up windows, which leads to dozens of pop-up windows iterated on the page. If it is not planned in advance, it is still easy to have the problem of pop-up window displayed at the same time.

For the time being, we will take the situation that we have just entered the page as an example to sort out the logic.

First of all, I need to know which pop-up windows on the page may pop up when entering the page (that is, to control whether a single pop-up window is displayed or not through the interface). Then display the pop-up window only when all the data of the pop-up window has been obtained (that is, the interface related to the pop-up window has already returned data).

In this case, it is more suitable to use the publish / subscriber mode. The data return of a single interface is a subscription. When all the interfaces are subscribed, it will be published, that is, a pop-up display.

/ / modalManage.jsclass ModalManage {constructor (modalList) {this.modalFlatMap = {} this.modalList = modalList} / /...}

Manage pop-up windows through the ModalManage class, which receives a parameter modalList during initialization, which is actually the name collection of all possible pop-up windows (including sub-component pop-ups) on the page when entering the page, that is, it is necessary to know how many pop-up windows may be displayed at the same time on the page. Take the above sample code modalMap.js as an example The modalList value of the index page is ['modal_1',' modal_2', 'modal_3',' modal_1_1', 'modal_1_2',' modal_1_1_1', 'modal_1_1_2']

In fact, the number of pop-up windows can be directly transmitted here. There are 7 pop-up windows in index that may be displayed at the same time, so you can pass 7 directly. The reason why I want to spread the name here is to facilitate debugging. If there is something wrong with the code, for example, there are actually 5 interfaces on the page that can control the display of 5 pop-up windows, but you have only subscribed 4 times. If you only pass numbers. You need to look one by one to see which one has forgotten to subscribe, but if you name it, you can debug it at once, that is, the maintainability of the code will be better.

When the status of any pop-up window on the page (that is, whether the display condition is met) is determined, subscribe:

/ modalManage.jsadd (name, dataInfo) {/ / level, handler if (this.modalList.indexOf (name)! =-1) {if (! this.modalFlatMap [name]) {this.modalFlatMap [name] = dataInfo this.notify ()} else {console.log ('repeat subscription')} else {console.log ('invalid subscription')}

This.modalFlatMap is to record the subscription list. When the length of the subscription list is the same as that of modalList, it means that all pop-up windows are ready and can be displayed according to the priority of these pop-up windows, that is, what the notify method needs to do.

In the notify method, first exclude the pop-up window item whose attribute show is false, and then compare the level of the remaining pop-up windows, showing only the largest pop-up window of level:

/ / modalManage.jsnotify () {if (Object.keys (this.modalFlatMap). Length = this.modalList.length) {const highLevelModal = Object.keys (this.modalFlatMap) .filter (key = > this.modalFlatmap [key] .show) .reduce ((t, c) = > {return this.modalFlatmap [c] .level > t.level? This.modalFlatMap [c]: t / this {level:-1} is just to give the reduce function that the level of the initialValue,modal item should be greater than the initialValue level, that is,-1}, {level:-1}) highLevelModal.handler ()}}

Use singleton mode to manage nested components and pop-up windows for multiple pages

The above ModalManage class is enough to manage pop-up windows, but there is another problem: what if the pop-up windows on a page are scattered among the main components of the page, its sub-components, or even sub-components?

At this time, you need to use a singleton.

/ / Singleton Management const manageTypeMap = {} / / get Singleton function createModalManage (type) {if (! manageTypeMap [type]) {manageTypeMap [type] = new ModalManage (getAllModalList (modalMap [type])} return manageTypeMap [type]}

Create a ModalManage instance through the createModalManage method, and decide whether to create a new instance according to the passed type. If there is no instance of type in the singleton management object manageTypeMap, then new a ModalManage instance, save it in manageTypeMap, and return the new instance, otherwise the instance already created in manageTypeMap will be returned.

In this way, no matter how many components the pop-up window is scattered in, no matter how deeply these components are nested, you can subscribe / publish events smoothly while ensuring low code coupling.

The getAllModalList method here is a tool method that is used to obtain the corresponding pop-up data structure of the page from modalMap:

/ / util.jsconst getAllModalList = modalInfo = > {let currentList = [] if (modalInfo.modalList) {currentList = currentList.concat (modalInfo.modalList.reduce ((t, c) = > t.concat (c.name), [])} if (modalInfo.children) {currentList = currentList.concat (Object.keys (modalInfo.children). Reduce ((t, c) = > {return t.concat (getAllModalList (modalInfo.childrens [c]))}, [])} return currentList}

As for the parameter type of createModalManage, its value can be a string. For example, if you need to manage all the pop-up windows that may be displayed on the home page index at the same time, you can specify the value of type as index. This field is used to obtain the ModalManage singleton object in the main component of index and its sub-components that contain pop-ups:

Const modalManage = createModalManage ('index')

This also solves another problem, that is, the pop-up window management of multiple pages. Index pages create ModalManage singletons through index, and the details page can create ModalManage singletons through detail. The two sides do not interfere with each other.

This paper only analyzes a specific case of pop-up window, which can actually be applied to other scenarios, such as the management of suspended pendants in the same location of the page.

Both pop-up window management and pendant management are data management in mvvm framework. Mainstream front-end frameworks already have corresponding solutions for complex data management, such as vuex and redux. Of course, these solutions can also solve the above problems.

The above is the editor for you to share how to solve the confusion of the page pop-up window, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.