参照は、DML(新しいjQuery(少なくとも私のために))のファーストクラス市民です
14981 ワード
機能はJavaScriptの最初のクラスの市民です.同様に、参照はDMLの第1のクラス市民でありえます.
次のコードを再生します.
例えば、' topbar 'や' menu 'のような異なるコンポーネントを操作する方法を主な関数で見てください.
また、' ul '要素が単純なリストのような' add 'メソッドを提供する方法でコードを見ることができます.
<html lang="de">
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
</head>
<body>
<script>
const styles = {...}
/***************** utilities *********************/
function toggleStyle(elt, prop, state1, state2) {
if (elt.style[prop] == state1) {
elt.style[prop] = state2;
}
else {
elt.style[prop] = state1;
}
}
function hide(elt) {
elt.style.display = "none";
}
/**************** components *********************/
function Menu () {
let menuItems = ["Option 1", "Option 2"];
let menu = ul();
let li = (content, props) => make("li", props, content);
menuItems.map((item,index) => {
let liitem = li(item, styles.cssLi);
liitem.onclick = () => alert(liitem.innerText);
menu.add([liitem])
})
menu.style = styles.cssMenu;
let childsmenu = Array.from(menu.childNodes);
for (let item of childsmenu) {
item.onmouseover = () => item.style = styles.cssMenuOver;
item.onmouseout = () => item.style = styles.cssMenuOut;
}
return menu;
}
function TopBar() {
let topbar = div("", styles.cssTopbar);
let input = (props) => make("input", props);
selectBase(topbar);
let home = div("Home", styles.cssHome);
let searchBox = input({placeholder:"search...", style:styles.cssSearchBox})
let help = div("help");
unselectBase();
let menu = Menu();
return {topbar, home, menu, searchBox} ;
}
/**************** main app *************************/
function handleAppEvents ({topbar}) {
topbar.home.onclick = () =>
toggleStyle(topbar.menu, "display", "block", "none");
topbar.searchBox.onkeypress =
(e) => {(e.which) == 13 && searchTerm(topbar.searchBox.value)}
document.onclick = (e) => {
if (e.target != topbar.home) {
hide(topbar.menu);
}
}
}
async function request (term) {
let response = await `Found : ${term}`
return response;
}
async function searchTerm (term) {
let response = await request(term);
console.log(response);
}
function createApp () {
let topbar = TopBar();
div("Nothing for now....")
let app = {topbar};
return app;
}
function startEventLoop () {
handleAppEvents(createApp());
}
startEventLoop();
</script>
</body>
</html>
Reference
この問題について(参照は、DML(新しいjQuery(少なくとも私のために))のファーストクラス市民です), 我々は、より多くの情報をここで見つけました https://dev.to/artydev/references-are-first-class-citizens-in-dml-the-new-jquery-at-least-for-me-18cテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol