3f:null 40:["$","title",null,{"children":"example | zq | Observable"}] 46:T792, class Page { constructor(){ this.init(); } init(){ this.isRendered = false; this.isDestroy = false; this.data = { list:["333"] }; this.btnAdd = document.createElement("button"); this.btnAdd.innerHTML = "add" this.txtInput = document.createElement("input"); this.txtInput.value = "" this.ulList = document.createElement("div"); this.ulList.innerHTML = "" this.btnAdd.addEventListener("click",()=>{ this.add(this.txtInput.value); }) return this; } render(){ this.container.innerHTML = ""; this.container.append(this.txtInput); this.container.append(this.btnAdd); this.container.append(this.ulList); return this; } updateState(){ this.ulList.innerHTML = ""; console.log(this.data); this.data.list.forEach(item=>this.add(item)); return this; } add(txt){ let index = this.data.list; this.data.list.push(txt); if(!this.isRendered) return this; let li = document.createElement("li"); li.innerHTML = txt; let close = document.createElement("span"); close.innerHTML = "x"; close.style="margin-left:10px;color:red;cursor: pointer;" close.addEventListener("click",e=>{ li.remove(); delete this.data.list[index]; }) li.append(close); this.ulList.append(li); return this; } mount(selector){ if(this.isRendered){throw "不要重复调用 mount"} this.isRendered = true; let container = selector; if(typeof selector == "string"){ container = document.querySelector() } if(!container instanceof HTMLElement){ throw "参数有误" } this.container = container; this.render(); this.updateState(); return this; } destroy(){ this.container.innerHTML = ""; this.isRendered = false; this.isDestroy = true; } getContainer(){ return this.container; } }47:Te72,function jsonPath(obj, expr, arg) { var P = { resultType: arg && arg.resultType || 'VALUE', result: [], normalize: function (expr) { var subX = []; return expr .replace(/[\['](\??$.*?$)[\]']/g, function ($0, $1) { return '[#' + (subX.push($1) - 1) + ']'; }) .replace(/'?\.'?|\['?/g, ';') .replace(/;;;|;;/g, ';..;') .replace(/;$|'?]|'$/g, '') .replace(/#([0-9]+)/g,function ($0, $1) { return subX[$1]; }); }, asPath: function (path) { var x = path.split(';'), p = '$'; for (var i = 1, n = x.length; i < n; i++) p += /^[0-9*]+$/.test(x[i]) ? '[' + x[i] + ']' : '[\'' + x[i] + '\']'; return p; }, store: function (p, v) { if (p) P.result[P.result.length] = P.resultType == 'PATH' ? P.asPath(p) : v; return !!p; }, trace: function (expr, val, path) { if (expr) { var x = expr.split(';'), loc = x.shift(); x = x.join(';'); if (val && val.hasOwnProperty(loc)) P.trace(x, val[loc], path + ';' + loc); else if (loc === '*') P.walk(loc, x, val, path, function (m, l, x, v, p) { P.trace(m + ';' + x, v, p); }); else if (loc === '..') { P.trace(x, val, path); P.walk(loc, x, val, path, function (m, l, x, v, p) { typeof v[m] === 'object' && P.trace('..;' + x, v[m], p + ';' + m); }); } else if (/,/.test(loc)) { // [name1,name2,...] for (var s = loc.split(/'?,'?/), i = 0, n = s.length; i < n; i++) P.trace(s[i] + ';' + x, val, path); } else if (/^$.*?$$/.test(loc)) // [(expr)] P.trace(P.eval(loc, val, path.substr(path.lastIndexOf(';') + 1)) + ';' + x, val, path); else if (/^\?$.*?$$/.test(loc)) // [?(expr)] P.walk(loc, x, val, path, function (m, l, x, v, p) { if (P.eval(l.replace(/^\?$(.*?)$$/, '$1'), v[m], m)) P.trace(m + ';' + x, v, p); }); else if (/^(-?[0-9]*):(-?[0-9]*):?([0-9]*)$/.test(loc)) // [start:end:step] phyton slice syntax P.slice(loc, x, val, path); } else P.store(path, val); }, walk: function (loc, expr, val, path, f) { if (val instanceof Array) { for (var i = 0, n = val.length; i < n; i++) if (i in val) f(i, loc, expr, val, path); } else if (typeof val === 'object') { for (var m in val) if (val.hasOwnProperty(m)) f(m, loc, expr, val, path); } }, slice: function (loc, expr, val, path) { if (val instanceof Array) { var len = val.length, start = 0, end = len, step = 1; loc.replace(/^(-?[0-9]*):(-?[0-9]*):?(-?[0-9]*)$/g, function ($0, $1, $2, $3) { start = parseInt($1 || start); end = parseInt($2 || end); step = parseInt($3 || step); }); start = start < 0 ? Math.max(0, start + len) : Math.min(len, start); end = end < 0 ? Math.max(0, end + len) : Math.min(len, end); for (var i = start; i < end; i += step) P.trace(i + ';' + expr, val, path); } }, eval: function (x, _v) { try { return $ && _v && eval(x.replace(/@/g, '_v')); } catch (e) { throw new SyntaxError('jsonPath: ' + e.message + ': ' + x.replace(/@/g, '_v').replace(/\^/g, '_a')); } } }; var $ = obj; if (expr && obj && (P.resultType == 'VALUE' || P.resultType == 'PATH')) { P.trace(P.normalize(expr).replace(/^\$;/, ''), obj, '$'); return P.result.length ? P.result : false; } }48:[] 44:{"id":"ccbba27a64c2e128","slug":"example","title":"example","thumbnail":"f97e9ee45c466bcde0df2eded81eec0ec877a97f833a916d2f74aa80ebc132e3","access_level":"public","create_time":"$D2020-12-11T01:00:06.470Z","update_time":"$D2022-04-26T07:50:52.117Z","view_time":null,"first_public_time":"$D2020-12-11T01:05:49.450Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"84303fb81ad17f31","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":"starter_2024","bio":"","following":false},"version":432,"publish_version":432,"role":null,"authored":false,"authors":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"role":"editor"}],"comments":[{"id":"bdfda60d09903e80","reply_to_id":null,"content":"test","create_time":"$D2020-12-11T02:33:44.114Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"example","cells":[{"id":0,"value":"md`# example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"html`输出HTML：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"md`### 输出 markdown`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"console.log(\"执行js\"),\" js 调用 console.log\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"md`## 简单例子`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"{\n let container = html`

`;\n let test = document.createElement(\"input\");\n let button = document.createElement(\"button\");\n let log = document.createElement(\"div\");\n let log_label = document.createElement(\"label\");\n let log_content = document.createElement(\"div\");\n test.value = \"test\";\n log_label.innerHTML = \"输入：\";\n log_content.style.display=\"inline-block\";\n log_content.innerHTML=\"空\"\n log.append(log_label);\n log.append(log_content);\n button.addEventListener(\"click\",e=>log_content.innerHTML=test.value);\n button.innerHTML=\"button\"\n container.append(test)\n container.append(button)\n container.append(log)\n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md`## 自定义指令`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"function temp(code){\n return html``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"temp`33`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"md`## ToDo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"\n(new Page())\n .add(\"33333333333\")\n .add(\"test222\")\n .mount(html`

`)\n .getContainer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`## 示例 Page`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"class DateModel{\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"class App{\n constructor(){\n this.DM = new DateModel();\n this.UIM = {};\n this.render();\n }\n mount(){\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`\n## jsonPath\n\\`\\`\\`js\njsonPath()\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"demodata =function(){ return {\n \"store\": {\n \"book\": [ \n {\n \"category\": \"reference\",\n \"author\": \"Nigel Rees\",\n \"title\": \"Sayings of the Century\",\n \"price\": 8.95\n }, {\n \"category\": \"fiction\",\n \"author\": \"Evelyn Waugh\",\n \"title\": \"Sword of Honour\",\n \"price\": 12.99\n }, {\n \"category\": \"fiction\",\n \"author\": \"Herman Melville\",\n \"title\": \"Moby Dick\",\n \"isbn\": \"0-553-21311-3\",\n \"price\": 8.99\n }, {\n \"category\": \"fiction\",\n \"author\": \"J. R. R. Tolkien\",\n \"title\": \"The Lord of the Rings\",\n \"isbn\": \"0-395-19395-8\",\n \"price\": 22.99\n }\n ],\n \"bicycle\": {\n \"color\": \"red\",\n \"price\": 19.95\n }\n }\n}}()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"{\n let container = html`

`\n let xpath = document.createElement(\"input\");\n xpath.value=\"$.store.book\"\n let showbox = document.createElement(\"textarea\");\n showbox.value=\"\"\n showbox.style=\"width:80%;height:200px;\";\n let button = document.createElement(\"button\");\n button.innerHTML=\"search\"\n button.addEventListener(\"click\",e=>{\n showbox.value=JSON.stringify(jsonPath(demodata,xpath.value),null,2)\n })\n button.click();\n container.append(xpath);\n container.append(button);\n container.append(document.createElement(\"br\"));\n container.append(showbox);\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"(new Vue({\n el:html`

Vue 示例

\n {{message}}:{{count}}\n \n

`,\n data(){\n return { \n count:1,\n message:\"示例消息\" \n }\n }\n})).$el","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`## 依赖`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"md `## 引用`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"CodeMirror = require(\"codemirror\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"Vue = require(\"vue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"