{"id":48442197,"url":"https://github.com/funlang/z-data","last_synced_at":"2026-04-06T16:02:57.497Z","repository":{"id":62767060,"uuid":"359084658","full_name":"Funlang/z-data","owner":"Funlang","description":"Z-data is an extremely lightweight zero configuration embedded mini front-end js framework.","archived":false,"fork":false,"pushed_at":"2023-11-17T13:06:51.000Z","size":695,"stargazers_count":19,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2023-11-18T14:33:55.460Z","etag":null,"topics":["embedded","framework","frontend","html","javascript","js","lightweight","minimal","template-engine","zero-configuration","zero-dependency"],"latest_commit_sha":null,"homepage":"https://funlang.org/z-data/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Funlang.png","metadata":{"files":{"readme":"README-cn.md","changelog":"CHANGE.txt","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-04-18T08:18:18.000Z","updated_at":"2023-08-28T04:10:22.000Z","dependencies_parsed_at":"2023-02-19T15:45:39.889Z","dependency_job_id":"cddbf2b6-f4c5-4565-b75c-a8770ed6bb0c","html_url":"https://github.com/Funlang/z-data","commit_stats":null,"previous_names":[],"tags_count":115,"template":null,"template_full_name":null,"purl":"pkg:github/Funlang/z-data","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Funlang%2Fz-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Funlang%2Fz-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Funlang%2Fz-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Funlang%2Fz-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Funlang","download_url":"https://codeload.github.com/Funlang/z-data/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Funlang%2Fz-data/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31479006,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-06T14:34:32.243Z","status":"ssl_error","status_checked_at":"2026-04-06T14:34:31.723Z","response_time":112,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["embedded","framework","frontend","html","javascript","js","lightweight","minimal","template-engine","zero-configuration","zero-dependency"],"created_at":"2026-04-06T16:02:14.038Z","updated_at":"2026-04-06T16:02:57.479Z","avatar_url":"https://github.com/Funlang.png","language":"JavaScript","readme":"# z-data\r\n\r\nZ-data 是一个超轻量级的零配置嵌入式前端框架.\r\n\r\n[[English](./README-en.md)] [[中文](./README-cn.md)]\r\n\r\n# 1. 特性\r\n\r\n- 没有虚拟 DOM\r\n- 零配置零依赖, 无需编译\r\n- 极简, 超轻量级\r\n- H5 模板技术, 支持 for/if/else/use 等\r\n- 模板支持多根\r\n- 支持双向数据绑定和事件 \r\n- 嵌入式, 可以和其他框架无缝嵌入\r\n- 更多语法糖, 特别对 class 和 style 友好\r\n- 鼓励配合 tailwind 以 H5 DOM 为中心\r\n\r\n# 2. 示例\r\n\r\n```html\r\n\u003cdiv z-data=\"{name:'hello-world.html',items:{i:1,j:2,k:3}}\"\r\n     #background=`silver`\r\n\u003e\r\n    \u003ctemplate for='k:v,i in items' key=k\u003e\r\n        \u003ctemplate if=!i\u003e\r\n            \u003cdiv :text=name\r\n                 :style={fontSize:`200%`}\r\n                 #color=`#fa0a`\r\n            \u003e\u003c/div\u003e\r\n            \u003cdiv class=t0\r\n                 :class={t1:true}\r\n                 .t2\r\n                 :k=k\r\n            \u003e[if !i] i=${i}\u003c/div\u003e\r\n        \u003c/template\u003e\r\n        \u003ctemplate else if='k==\"j\"'\u003e\r\n            \u003cdiv :css.font-size=`120%`\u003e[if k==\"j\"] k=${k}\u003c/div\u003e\r\n        \u003c/template\u003e\r\n        \u003ctemplate else\u003e\r\n            \u003cdiv #font-weight=`bold`\u003e[else] k=${k}\u003c/div\u003e\r\n        \u003c/template\u003e\r\n    \u003c/template\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n在线 demo\r\n\r\n* https://codepen.io/funlang/pen/NWdOQye\r\n\r\nTodoMVC:\r\n\r\n* https://codepen.io/funlang/pen/ExZOGJy\r\n\r\n复杂数据绑定\r\n\r\n* https://codepen.io/funlang/pen/OJWrJep\r\n\r\n一个表单示例:\r\n\r\n* https://funlang.org/z-data/?url=./test/z-data-form-demo.html\r\n\r\nz-cloak example:\r\n\r\n```html\r\nz-data\r\n\u003cdiv z-cloak :z-cloak.attr=false\u003ez-cloak example\u003c/div\u003e\r\n\r\n\u003cstyle\u003e\r\n  [z-cloak] {\r\n    display: none;\r\n  }\r\n\u003c/style\u003e\r\n```\r\n\r\n## 2.1. z-data studio\r\n\r\n可以在线创建/调试/预览 z-data 代码\r\n\r\n* https://funlang.org/z-data/\r\n\r\n# 3. 用法\r\n\r\n## 3.1. 安装\r\n\r\n- CDN https://cdn.jsdelivr.net/gh/Funlang/z-data@main/dist/z-data.min.js\r\n\r\n  ```html\r\n  \u003cscript src=//cdn.jsdelivr.net/gh/Funlang/z-data@main/dist/z-data.min.js\u003e\u003c/script\u003e\r\n  ```\r\n\r\n## 3.2. 作用域\r\n\r\n  - z-data 属性创建 ZData 作用域\r\n\r\n    ```html\r\n    \u003ctag z-data=...\u003e\u003c/tag\u003e\r\n    ```\r\n    z-data 支持一个 init 函数, 在组件初始化时执行\r\n\r\n    ```html\r\n    \u003ctag z-data=... init=...\u003e\u003c/tag\u003e\r\n    ```\r\n\r\n    z-data 表达式可以是一个函数表达式, 如:\r\n\r\n    ```html\r\n    \u003ctag z-data=\"(args=\u003e{\r\n        // some codes ...\r\n        return {\r\n          // some props ...\r\n        }\r\n      })()\"\u003e\u003c/tag\u003e\r\n\r\n    \u003ctag z-data=\"args=\u003e{\r\n        // some codes ...\r\n        return {\r\n          // some props ...\r\n        }\r\n      }\"\u003e\u003c/tag\u003e\r\n    ```\r\n\r\n    z-data HTML 模块文件 (文件开头是 z-data)\r\n    \r\n    ```html\r\n    z-data\r\n    \u003ctag init=...\u003e\u003c/tag\u003e\r\n\r\n    \u003cscript\u003e\r\n      // some codes ...\r\n      return {\r\n        // some props ...\r\n      }\r\n    \u003c/script\u003e\r\n    ```\r\n\r\n  - z-none 关闭 ZData 作用域, 其内部节点 ZData 会跳过\r\n\r\n    ```html\r\n    \u003ctag z-none\u003e\r\n      ...\r\n    \u003c/tag\u003e\r\n    ```\r\n\r\n  - 与其他框架共存\r\n\r\n    在 ZData 根节点用类似以下的方式处理 (x-ignore 改为其他框架关闭作用域的属性名)\r\n    ```html\r\n    \u003ctag z-data=... x-ignore\u003e\u003c/tag\u003e\r\n    ```\r\n    在其他框架根节点加 z-none 即可\r\n\r\n## 3.3. 模板\r\n\r\n  - template for\r\n\r\n    ```html\r\n    \u003ctemplate for='k:v,i in ...' key=...\u003e\u003c/template\u003e\r\n    ```\r\n    ZData 依赖 key, 如果没有指定 key, 则优先选用 k 做 key, 否则用 v 做 key 键\r\n    k : v , i 可以部分可选, 如:\r\n\r\n    ```html\r\n    \u003ctemplate for='k:v,i in items'\u003e\u003c/template\u003e\r\n    \u003ctemplate for='  v   in items'\u003e\u003c/template\u003e\r\n    \u003ctemplate for='k:    in items'\u003e\u003c/template\u003e\r\n    \u003ctemplate for='   ,i in items'\u003e\u003c/template\u003e\r\n    \u003ctemplate for='k:v   in items'\u003e\u003c/template\u003e\r\n    \u003ctemplate for='  v,i in items'\u003e\u003c/template\u003e\r\n    \u003ctemplate for=items\u003e\u003c/template\u003e\r\n    ```\r\n\r\n  - template if/else\r\n\r\n    ```html\r\n    \u003ctemplate if=...\u003e\u003c/template\u003e\r\n    \u003ctemplate else if=...\u003e\u003c/template\u003e\r\n    \u003ctemplate else\u003e\u003c/template\u003e\r\n    ```\r\n\r\n  - template use\r\n\r\n    ```html\r\n    \u003cz z-none\u003e\r\n        \u003ctemplate id=t1\u003e\r\n            \u003cdiv\u003etemplate id = t1\u003c/div\u003e\r\n        \u003c/template\u003e\r\n    \u003c/z\u003e\r\n\r\n    \u003ctemplate use=#t1\u003e\u003c/template\u003e\r\n    ```\r\n\r\n## 3.4. 绑定\r\n\r\n  - : 用来做属性绑定, 其中 :: 是双向绑定\r\n\r\n    ```html\r\n    \u003ctag :attr-name1=... ::attr-name2=...\u003e\u003c/tag\u003e\r\n    ```\r\n\r\n### 3.4.1. :text :html\r\n\r\n  :text :html 分别对应 textContent 和 innerHTML\r\n\r\n### 3.4.2. :class\r\n\r\n  :class 支持 [] {} 和 字符串三种, 这些 classname 会按顺序合并处理\r\n\r\n### 3.4.3. :class 简写\r\n\r\n:class 支持 :class.name1.name2=...\r\n  ```\r\n  可以简写为 .name1.name2=...\r\n  如果 classname 后面为 -, 且返回值不是 boolean, 则将其值加入到 classname, 如:\r\n    .p-=1 则 classList 里会增加 p-1\r\n  ```\r\n\r\n### 3.4.4. :style\r\n\r\n:style 支持 :css 别名, 支持 {} 和字符串两种, 字符串会按顺序覆盖\r\n\r\n### 3.4.5. :style 简写\r\n\r\n:style 支持 :style.name.value=...\r\n  ```\r\n  :style.name=value / :css.name=value\r\n  :style.name.value=条件 / :css.name.value=...\r\n  可以简写为 ..name 和 #name, 以及 !name=string-value, 如下:\r\n    ..width=`100px`\r\n    #border-width=`4px`\r\n    !border-width=4px\r\n    #--a-css-var=`'${theCssVarValue}'`\r\n  ```\r\n\r\n#### 3.4.5.1 ZData.ss(s)\r\n\r\n```\r\nZData.ss = (s) =\u003e AShorthandMap[s] || s;\r\n```\r\n\r\n### 3.4.6. !!! 特别注意\r\n\r\n#### 3.4.6.1. : :: @ . .. \\#\r\n\r\n后面的值全部都是 js 表达式, 可以是 js 变量, 或者是字符串, 字符串要用 ' \" ` 套住\r\n\r\n#### 3.4.6.2. ${...}\r\n\r\n非绑定的属性值中含有 \\${...}, 会自动解析成一个字符串, 相当于 \\`...${...}...`\r\n\r\n#### 3.4.6.3. !\r\n\r\n! 与 含有 ${} 的属性值类似, 会自动解析成 :css.style-name=\\`string-value`\r\n\r\n### 3.4.7. attr\r\n\r\n:xxx.attr 表示为可视 attribute 属性, 否则默认为不可见 prop 属性\r\n\r\n:xxx.attr === false 表示为 boolean attribute 属性\r\n\r\n#### 3.4.7.1. attr 简写\r\n```\r\n:!tag-attr  -\u003e :tag-attr.attr\r\n::!tag-attr -\u003e ::tag-attr.attr\r\n```\r\n### 3.4.8. camel\r\n\r\n:xxx.camel 支持驼峰表示法\r\n\r\n::value=propName, ::style.value=propName, ::css.value=propName\r\n  ```\r\n  其中 propName 只支持驼峰表示法, DOM 属性(包括 style)可以增加 .camel 修饰符\r\n  双向绑定默认在 change 中触发回写行为, 只有 input text 同时在 input 中触发回写\r\n  可以增加 .input / .change 强制在 input / change 中回写\r\n  支持 .trim / .number 修饰符\r\n  ```\r\n  ```\r\n  目前有些属性如 style.value 修改, 不会自动触发响应式, 需要在当前执行 el 执行 el.fireChange()\r\n  ```\r\n\r\n### 3.4.9. input type='radio'\r\n```\r\n::checked=opt==this.value\r\n\r\n注: opt 是一个 data 内的属性变量名\r\n```\r\n\r\n## 3.5. 事件\r\n\r\n@ 用来绑定事件, 支持 modifiers\r\n\r\n### 3.5.1. 全局\r\n\r\n```\r\ncamel     事件名驼峰表示法\r\nprevent   preventDefault\r\nstop      stopPropagation\r\ndebounce  debounce mode, follow a time optional, such as\r\n          debounce.750ms, debounce.2s, default 250ms\r\ncapture   capture mode\r\nonce      once mode, run once only\r\npassive   passive mode\r\n```\r\n\r\n### 3.5.2. 范围\r\n\r\n```\r\nself      tag only\r\nout       tag not\r\nwindow\r\ndocument\r\n```\r\n\r\n### 3.5.3. 键鼠\r\n\r\n```\r\nshift\r\nctrl\r\nalt\r\nmeta      or cmd\r\n```\r\n\r\n### 3.5.4. 键盘\r\n```\r\n\u003ckey\u003e     enter, escape, space, f1 etc., details refer to:\r\n          https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values\r\nalias:  space: \" \", slash: /, gt: \u003e, eq: =\r\n```\r\n\r\n### 3.5.5. 鼠标\r\n```\r\n\u003cbutton\u003e  left, mid, right\r\n```\r\n\r\n## 3.6. 动态属性/事件和自定义指令\r\n\r\n### 3.6.1. 动态属性\r\n\r\n    :*={...}\r\n    :*.attr={...}\r\n\r\n  e.g.:\r\n\r\n    :*=\"{\r\n      min: '1',\r\n      max: '100'\r\n    }\"\r\n\r\n### 3.6.2. 动态事件\r\n\r\n    @*={...}\r\n\r\n  e.g.:\r\n\r\n    @*=\"{\r\n      input: 'console.log(event)',\r\n      keydown: 'console.log(event)'\r\n    }\"\r\n\r\n### 3.6.3. 自定义指令\r\n\r\n    z-d-...=...\r\n\r\n  e.g.:\r\n\r\n    z-d-rules-of-validate=\"[\r\n      val =\u003e !!val || 'Name is required!',\r\n      val =\u003e val.length \u003e 5 || 'The field need 5 or more characters',\r\n    ]\"\r\n\r\n  会翻译成调用如下形式的函数\r\n\r\n    rulesOfValidate({\r\n      e: el,\r\n      v: val, // attr value of z-d-rules-of-validate\r\n      m: modifiers\r\n    })\r\n\r\n## 3.7. 变量\r\n\r\n### 3.7.1. $el\r\n\r\n\\$el 组件根节点\r\n\r\n### 3.7.2. \\$el.$data\r\n\r\n\\$el.\\$data 组件的包装 data 对象\r\n\r\n### 3.7.3. ZData.nobserve (default false)\r\n\r\n```\r\nno observe DOM for dynamic creating z-data node\r\n  use ZData.loadHTML(), so observe DOM is not needed.\r\n```\r\n\r\n## 3.8. 函数\r\n\r\n### 3.8.1. ZData.proxy()\r\n\r\n在 z-data 获取 data 数据时, 用 ZData.proxy() 包装返回, 以使数据获得响应式\r\n\r\n### 3.8.2. ZData.loadHTML(html, p, before, args)\r\n\r\n动态加载 html, p - 需要插入的父节点(默认 body), before - 需要插入该子节点之前\r\n\r\n* html 内含有 script 的, 需要用此种方式加载, 否则可以用 :html=... 的方式加载\r\n\r\n### 3.8.3. el.fireChange()\r\n\r\n在 z-data 之外修改节点 style, 如果是双向绑定, 需要调用该节点的 .fireChange()\r\n\r\n### 3.8.4. $emit(el, name, detail)\r\n\r\n向 DOM 节点 el 发出名为 name 的事件, 携带 detail 参数\r\n\r\n### 3.8.5. ZData.deb(fn, ms)\r\n\r\n延迟运行\r\nDebounce\r\n\r\n## 3.9. 组件\r\n\r\n### 3.9.1. z-comp\r\n\r\nz-comp 为 ZData 组件\r\n\r\n```html\r\n\u003ctag z-comp=...\u003e\u003c/tag\u003e\r\n```\r\n\r\n### 3.9.2. 组件地址\r\n\r\nz-comp 可以是一个 ./ 相对路径, 或者是一个 http(s): 的网络路径\r\n\r\n```html\r\n\u003ctag z-comp=./z-comp-2.html\u003e\u003c/tag\u003e\r\n\u003ctag z-comp=https://funlang.org/zdata/test/z-comp-2.html\u003e\u003c/tag\u003e\r\n```\r\nz-comp 还可以是一个 Promise 函数, 用来加载组件代码\r\n\r\n```html\r\n\u003ctag z-comp=\"load_z_comp('z-comp-2')\"\u003e\u003c/tag\u003e\r\n```\r\n\r\n### 3.9.3. 组件加载器\r\n\r\nz-comp 支持 z:// 协议插件, ZData.get 函数存在时, z:// 插件生效\r\n\r\n```\r\n注意: ZData.get 是一个 Promise 函数, 返回类似于 fetch(url).then(res =\u003e res.text()) 之后的部分\r\n```\r\n```\r\n定义并加载插件:\r\ndocument.addEventListener(\"DOMContentLoaded\", () =\u003e setTimeout(() =\u003e ZData.get = ...))\r\n\r\n应用 ZData.get 加载 table-v1.5.2 组件\r\n\u003cz- z-comp=z://table-v1.5.2\u003e\u003c/z-\u003e\r\n```\r\n\r\n### 3.9.4. 组件占位符\r\n\r\nz-comp 可以选择保留 / 删除组件占位符, z-xxx 或者含有 del 属性的, 删除占位符\r\n\r\n```html\r\nremove the placeholder tag:\r\n\u003cz-comp  z-comp=https://funlang.org/zdata/test/z-comp-2.html\u003e\u003c/z-comp\u003e\r\n\u003cdiv del z-comp=https://funlang.org/zdata/test/z-comp-2.html\u003e\u003c/div\u003e\r\n```\r\n```html\r\nkeep the placeholder tag:\r\n\u003cdiv z-comp=https://funlang.org/zdata/test/z-comp-2.html\u003e\u003c/div\u003e\r\n```\r\n\r\n### 3.9.5. 组件参数\r\n\r\n```html\r\n\u003ctag z-comp=... args=...\u003e\u003c/tag\u003e\r\n```\r\n在组件内部, 用 args.xxx 来使用传进来的参数, 形如:\r\n```html\r\n\u003cdiv z-data @mouseover.document=$el.textContent=event.target\u0026\u0026(event.target.title||(event.target.closest('[title]')||{}).title)||''\r\n#color=args.color #background=args.bgcolor !height=100% !padding=8px\r\n\u003e\u003c/div\u003e \r\n```\r\n\r\n### 3.9.6. z-comp demo:\r\n* https://codepen.io/funlang/pen/ExZBPJL\r\n* https://codepen.io/funlang/pen/RwKzaOo\r\n\r\n# 4. 浏览器兼容性\r\n\r\n-  `z-data.js`, `z-data.min.js`\r\n  ```\r\n  2017: Chrome 61, Firefox 55, Opera 48, Safari 11, iOS 11, Android 8\r\n  ```\r\n\r\n-  `z-data.min.es2015.js`, `z-data.min.all.js`\r\n  ```\r\n  2016: Chrome 49, Firefox 44, Opera 36, Safari 10, iOS 10, Android 7\r\n  ```\r\n\r\n# 5. 加入我们\r\n\r\n欢迎加入 z-data 项目, 一起工作, Enjoy!\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunlang%2Fz-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunlang%2Fz-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunlang%2Fz-data/lists"}