html 点击查看详情弹框,查看详情弹框，公共组件思路

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

单例模式

试想以下，当我们单击登录按钮的时候，页面会出现一个登录浮窗，而这个浮窗是唯一的，

无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。[1]

进不去地看这里 ↓

Title

open

close

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'

}

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(

{this.props.children}

, //塞进传送门的JSX

this.node //传送门的另一端DOM node

);

}

componentWillUnmount() {

window.document.body.removeChild(this.node);

}

}

Vue

为啥vue被放在最后面，因为我不怎么研究vue?

感觉vue就比较自由，没有那么多的约束，你可以放在body最后面像React那样，

也可以提前写好绝对定位，简单地利用v-if或者v-show控制展示和隐藏

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

参考

[1] JavaScript设计模式与开发实践[M] p.60