单例模式是什么
一个类,只允许,有一个实例,并且能通过全局变量访问到
sdk 初始化运用
其实思路和缓存一致,只要当前全局变量有对象,那就直接返回,不重复初始化
具体SDK
代码
初始化-异常隔离，单例确认
import { isBrowserEnv } from '@wind/wind-monitor-base-client/src/utils';
import { BrowserOptionsType, initBrowserClient, wdid } from '@wind/wind-monitor-browser-client';
import { CircleMark } from '@wind/wind-monitor-userConsider-circleMark';
// var config = require('../../../package.json');
Object.defineProperty(window, '__WIND_MONITOR_VERSION__', {
value: '222',
writable: false
});
/**
* 初始化前端监控SDK
*
* @param {string} appName 上报应用名称(可选)
* @param {boolean} disable 设为true以禁用前端监控(可选)
*/
export const init = (function () {
let circleMark = null;
try {
return function init(options) {
if (options?.disable) {
return null;
}
if (window['__WIND_MONITOR__']) {
return window['__WIND_MONITOR__'];
}
if (options?.circleMark) {
circleMark = new CircleMark({ postMsgOpts: [{ targetWindow: window.parent, targetOrigin: '*' }], appName: options?.appName });
}
if (isBrowserEnv) {
// 设置全局采集控制变量
window["__UC_BEHAVIOR__"] = options.monitorBehavior;
let initBrowserClientValue = initBrowserClient(options as BrowserOptionsType);
Object.defineProperty(window, '__WIND_MONITOR__', {
value: initBrowserClientValue,
writable: false
});
return initBrowserClientValue
};
}
}
catch (err) {
console.error(`初始化SDK失败,`, err);
}
})()
export const terminalId = wdid;
案例
// 实现Storage，使得该对象为单例，基于 localStorage 进行封装。实现方法 setItem(key,value) 和 getItem(key)。
class Storage {
static getInstance() {
if (!Storage.instance) {
Storage.instance = new Storage();
}
return Storage.instance;
}
getItem(key, value) {
return window.localStorage.getItem(key);
}
setItem(key, value) {
return window.localStorage.setItem(key, value);
}
}
let storage1 = Storage.getInstance();
let storage2 = Storage.getInstance();
storage1 === storage2 //true
如果还要求写一个全局唯一弹出窗呢
- 在父盒子中上下左右居中
- 宽高不固定，由内容撑开
- 外层有灰色蒙版，透明度为 0.5
关键点
- 借助flex 居中
- 内容如何自适应撑开
- 蒙层注意层级设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 1. 在父盒子中上下左右居中
2. 宽高不固定，由内容撑开
3. 外层有灰色蒙版，透明度为 0.5
4. 自下向上弹出(可选) -->
<!-- 弹出窗组件是要求手动创建的,不是预先写死一些dom结构,在组件内 -->
<!-- <div class="modal"></div> -->
<!-- 原生开发都忘记了函数必须加上括号了 -->
<div onclick="modalOpen()">打开</div>
<div onclick="modalClose()">关闭</div>
<!-- 所谓的蒙层就是遮罩层 z-index: 999; 忘记了-->
<style>
#modalWrapper {
background-color: gray;
opacity: 0.5;
width: 100%;
height: 100%;
z-index: 999;
position: fixed;
left: 0;
top: 0;
display: none;
justify-content: center;
align-items: center;
}
#modal {
width: fit-content;
height: fit-content;
background-color: aqua;
}
</style>
<script>
// 创建弹窗容器
const getModal = (() => {
let modalInstance = null;
return () => {
if (modalInstance) return modalInstance;
const modal = document.createElement("div");
const modalWrapper = document.createElement("div");
modalWrapper.appendChild(modal);
modalWrapper.id = "modalWrapper";
modal.id = "modal";
modal.innerHTML = "我是弹出创";
modalInstance = modalWrapper;
// 弹出创组件,为何执着于,一定要跟在body内
document.body.appendChild(modalWrapper);
return modalInstance;
};
})();
const modalOpen = () => {
let modal = getModal();
modal.style.display = "flex";
};
const modalClose = () => {
let modal = getModal();
modal.style.display = "none";
};
</script>
</body>
</html>
