介于题主的目前水平,这里主要介绍基础原理以及热门开发库是怎么设计的
单例模式
试想以下,当我们单击登录按钮的时候,页面会出现一个登录浮窗,而这个浮窗是唯一的,
无论单击多少次登录按钮,这个浮窗都只会被创建一次,那么这个登录浮窗就适合用单例模式来创建。[1]
进不去地看这里 ↓
Titleopen
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