查看详情弹框，公共组件思路

问题描述

最近做的后台管理系统，查看详情弹框用的页面比较多，想抽出来封装成公共组件。但是思路不是很明确,同学们给个思路，最好有代码看下，谢谢！
图片描述

阅读 3k

介于题主的目前水平，这里主要介绍基础原理以及热门开发库是怎么设计的

单例模式

试想以下，当我们单击登录按钮的时候，页面会出现一个登录浮窗，而这个浮窗是唯一的，
无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。[1]

具体实现: 传送门-gist.github

进不去地看这里 ↓

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="hello"></div>
<button onclick="open1()">open</button>
<button onclick="close1()">close</button>
<script>
    var getSingle = function(fn){
        var result
        return function(){
            return result || ( result = fn.apply(this, arguments) )
        }
    }
    var createLoginLayer = function(){
        var div = document.createElement( 'div' )
        div.innerHTML = '我是登录浮窗'
        div.style.display = ' none '
        hello.appendChild( div )
        return div
    }
    //预渲染浮窗
    var LoginLayer = getSingle( createLoginLayer )
    //打开浮窗
    function open1(){
        LoginLayer().style.display = 'block'
    }
    //关闭浮窗
    function close1(){
        LoginLayer().style.display = 'none'
    }
</script>
</body>
</html>

React

React渲染原理基于虚拟DOM树，为避免污染树结构，而Modal又是典型的脱离树之外的DOM，
所以React提供了一个API叫Portals
Portals提供了一种将子项呈现为存在于父组件的DOM层次结构之外的DOM节点的第一类方法。[2]
简而言之，一般基于React开发都会使用这个API来创建Modal组件

详解文章：传送门-知乎专栏

ReactDOM.createPortal(child, container)

class Dialog extends React.Component {
    constructor() {
        super(...arguments);

        const doc = window.document;
        this.node = doc.createElement('div');
        doc.body.appendChild(this.node);
    }

    render() {
        return createPortal(
            <Fragment>
                {this.props.children}
            </Fragment>, //塞进传送门的JSX
            this.node //传送门的另一端DOM node
        );
    }

    componentWillUnmount() {
        window.document.body.removeChild(this.node);
    }
}

图片描述

Vue

为啥vue被放在最后面，因为我不怎么研究vue?
感觉vue就比较自由，没有那么多的约束，你可以放在body最后面像React那样，
也可以提前写好绝对定位，简单地利用v-if或者v-show控制展示和隐藏

这有个非常简单地Modal组件源码解析:传送门

以及我写地性能优化文章JavaScript惰性单例与vue性能优化应用

参考

[1] JavaScript设计模式与开发实践[M] p.60
[2] https://reactjs.org/docs/port...

查看详情弹框，公共组件思路

问题描述

单例模式

React

Vue

参考

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？