homer-helper
Version:
A test npm package
235 lines (224 loc) • 10.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Examples for HomerHelper</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./homer-helper.js"></script>
<script>
// --- LogHelper ---
if (!window.LogHelper) {
window.LogHelper = HomerHelper.LogHelper;
LogHelper.setSaveFunc((log) => {
const logOutput = $("#log-output");
logOutput.append(log);
logOutput.scrollTop(logOutput[0].scrollHeight);
});
}
function logTest() {
LogHelper.v("verbose", ".");
LogHelper.d("debug", ".");
LogHelper.i("info", ".");
LogHelper.w("warn", ".");
LogHelper.e("error", ".");
}
function logClear() {
$("#log-output").text("");
}
// --- helpful functions ---
function funcIsPlainEmptyObject() {
const logTag = "funcIsPlainEmptyObject";
LogHelper.d(logTag, "=========================");
const oo = {
aa: "AA",
bb: "BB",
};
const o2 = Object.create(oo);
//
console.log(({}).toString);
console.log(({}).toString());
LogHelper.d(logTag, ({}).toString);
LogHelper.d(logTag, ({}).toString());
LogHelper.d(logTag, oo);
LogHelper.d(logTag, o2);
LogHelper.d(logTag, `${HomerHelper.isPlainObject(oo)}, ${HomerHelper.isEmptyObject(oo)}`);
LogHelper.d(logTag, "=========================");
const to01 = {};
const to02 = Object.create(null);
const to03 = Object.create({});
const to04 = new Object();
const to05 = {
xx: "XX",
yy: "YY",
oo: { haha: "HAHA" },
};
const to06 = Object.create(to05);
const to07 = new Object(to05);
LogHelper.d(logTag, `[to01] ${HomerHelper.isPlainObject(to01)}, ${HomerHelper.isEmptyObject(to01)}`);
LogHelper.d(logTag, `${$.isPlainObject(to01)}, ${$.isEmptyObject(to01)}`);
LogHelper.d(logTag, `${to01}`);
LogHelper.d(logTag, "-----");
LogHelper.d(logTag, `[to02] ${HomerHelper.isPlainObject(to02)}, ${HomerHelper.isEmptyObject(to02)}`);
LogHelper.d(logTag, `${$.isPlainObject(to02)}, ${$.isEmptyObject(to02)}`);
//LogHelper.d(logTag, `${to02}`); // cause TypeError exception
console.log(to02);
LogHelper.d(logTag, "-----");
LogHelper.d(logTag, `[to03] ${HomerHelper.isPlainObject(to03)}, ${HomerHelper.isEmptyObject(to03)}`);
LogHelper.d(logTag, `${$.isPlainObject(to03)}, ${$.isEmptyObject(to03)}`);
LogHelper.d(logTag, to03);
LogHelper.d(logTag, "-----");
LogHelper.d(logTag, `[to04] ${HomerHelper.isPlainObject(to04)}, ${HomerHelper.isEmptyObject(to04)}`);
LogHelper.d(logTag, `${$.isPlainObject(to04)}, ${$.isEmptyObject(to04)}`);
LogHelper.d(logTag, to04);
LogHelper.d(logTag, "-----");
LogHelper.d(logTag, `[to05] ${HomerHelper.isPlainObject(to05)}, ${HomerHelper.isEmptyObject(to05)}`);
LogHelper.d(logTag, `${$.isPlainObject(to05)}, ${$.isEmptyObject(to05)}`);
LogHelper.d(logTag, to05);
LogHelper.d(logTag, "-----");
LogHelper.d(logTag, `[to06] ${HomerHelper.isPlainObject(to06)}, ${HomerHelper.isEmptyObject(to06)}`);
LogHelper.d(logTag, `${$.isPlainObject(to06)}, ${$.isEmptyObject(to06)}`);
LogHelper.d(logTag, to06);
LogHelper.d(logTag, "-----");
LogHelper.d(logTag, `[to07] ${HomerHelper.isPlainObject(to07)}, ${HomerHelper.isEmptyObject(to07)}`);
LogHelper.d(logTag, `${$.isPlainObject(to07)}, ${$.isEmptyObject(to07)}`);
LogHelper.d(logTag, to07);
LogHelper.d(logTag, ` => ${to07.oo === to05.oo}`);
to05.oo = { haha: "WWW" };
LogHelper.d(logTag, `${to05.oo.haha}, ${to07.oo.haha}`);
LogHelper.d(logTag, "=========================");
const qqqq = {
ff: function() {},
};
const qq02 = new Object(123);
const qq03 = new Number(456);
const qq04 = 789;
LogHelper.d(logTag, `${HomerHelper.isPlainObject(qqqq)}, ${HomerHelper.isEmptyObject(qqqq)}.`);
LogHelper.d(logTag, `${HomerHelper.isPlainObject(qq02)}, ${HomerHelper.isEmptyObject(qq02)}.`);
LogHelper.d(logTag, `${HomerHelper.isPlainObject(qq03)}, ${HomerHelper.isEmptyObject(qq03)}.`);
LogHelper.d(logTag, `${HomerHelper.isPlainObject(qq04)}, ${HomerHelper.isEmptyObject(qq04)}.`);
LogHelper.d(logTag, `${qq02 === 123}, ${qq03 === 456}, ${qq02 == 123}, ${qq03 == 456}, ${qq04 === 789}.`);
console.log(qqqq);
console.log(qq02);
console.log(qq03);
console.log(qq04);
LogHelper.d(logTag, "=========================");
}
function funcDeepClone() {
const logTag = "funcDeepClone";
LogHelper.d(logTag, "=========================");
const ss00 = "Test String.";
const ss01 = ss00;
const ss02 = "Test String.";
LogHelper.d(logTag, `${ss00 === ss01}, ${ss00 === ss02}.`);
LogHelper.d(logTag, "=========================");
const cccc = HomerHelper.deepClone();
const cc01 = HomerHelper.deepClone(undefined);
const cc02 = HomerHelper.deepClone(null);
const cc03 = HomerHelper.deepClone({});
LogHelper.d(logTag, `${cccc}, ${cc01}, ${cc02}, ${cc03}.`);
LogHelper.d(logTag, "=========================");
const oooo = {
aa: "AA",
bb: "BB",
cc: [123, "XYZ"],
dd: {
aa: "Sub-AA",
bb: "Sub-BB",
},
};
const oo02 = {
aa: "XX",
bb: "YY",
nn00: 123,
nn01: new Number(123),
ff: function() {},
oo: new Object(123),
};
const oo03 = {
aa: oooo,
bb: oo02,
};
const oo04 = [oooo, oo02];
const rrrr = HomerHelper.deepClone(oooo);
const rr02 = HomerHelper.deepClone(oo02);
const rr03 = HomerHelper.deepClone(oo03);
const rr04 = HomerHelper.deepClone(oo04);
LogHelper.d(logTag, `[rrrr] ${JSON.stringify(rrrr, null, 2)}`);
LogHelper.d(logTag, `${oooo === rrrr}, ${oooo.aa === rrrr.aa}, ${oooo.cc === rrrr.cc}, ${oooo.dd === rrrr.dd}.`);
LogHelper.d(logTag, `[rr02] ${JSON.stringify(rr02, null, 2)}`);
LogHelper.d(logTag, `${oo02.nn00 === rr02.nn00}, ${oo02.nn01 === rr02.nn01}, ${JSON.stringify(rr02.oo, null, 2)}.`);
LogHelper.d(logTag, `[rr03] ${JSON.stringify(rr03, null, 2)}`);
LogHelper.d(logTag, `${oo03.aa === oooo}, ${rr03.aa === oooo}, ${rr03.bb.ff === oo02.ff}, ${rr03.bb.oo === oo02.oo}.`);
LogHelper.d(logTag, `[rr04] ${JSON.stringify(rr04, null, 2)}`);
LogHelper.d(logTag, `${rr04.length}, ${rr04[0] === oooo}, ${oo04[0] === oooo}, ${oo04[1].ff === oo02.ff}, ${oo04[1].oo === oo02.oo}.`);
LogHelper.d(logTag, "=========================");
}
// --- document ready ---
$(document).ready(function() {
if (window.LogHelper) {
$("#log-level-select").change(function() {
const logLevel = $("#log-level-select :selected").val();
LogHelper.setLogLevel(LogHelper.LogLevel[logLevel]);
});
}
/*
// console.log(window.location);
const url = new URL(window.location.href);
if (url.searchParams.has('id')) {
$("#id-input").val(url.searchParams.get('id'));
}
if (url.searchParams.has('data')) {
$("#data-input").val(url.searchParams.get('data'));
}
if (url.searchParams.has('media')) {
$("#media-input").val(url.searchParams.get('media'));
}
*/
if (window.util) {
$("#util-div").html(
"{ <br />"
+ ` browser: ${util.browser}, <br />`
+ " supports: { <br />"
+ ` audioVideo: ${util.supports.audioVideo}, <br />`
+ ` data: ${util.supports.data}, <br />`
+ ` binary: ${util.supports.binary}, <br />`
+ ` reliable: ${util.supports.reliable} <br/ >`
+ " } <br />"
+ "}"
);
}
else {
$("#util-div").text("util is not supported. (Need peer.js)");
}
});
</script>
<div>
<h3>LogHelper</h3>
<select id="log-level-select">
<option value="VERBOSE" selected="true">Verbose</option>
<option value="DEBUG">Debug</option>
<option value="INFO">Info</option>
<option value="WARN">Warn</option>
<option value="ERROR">Error</option>
</select>
<button onclick="logTest()">Test LogHelper</button>
<button onclick="logClear()">Clear</button>
<br />
<textarea id="log-output" style="width:60%; height:120px;" readonly="true"></textarea>
</div>
<div>
<h3>Helpful functions. (reference to jQuery)</h3>
<button onclick="funcIsPlainEmptyObject()">Test isPlainObject()/isEmptyObject()</button>
<button onclick="funcDeepClone()">Test deepClone()</button>
</div>
<div>
<h3>util</h3>
<div id="util-div"></div>
</div>
<h3>=== END === </h3>
</body>
</html>