Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/576https://channel.meo-ai.com/posts/576Wed, 18 Mar 2026 01:43:35 GMT<span class="post-title-source">《原生JSON模块终于成为现实》</span><br /><br />标签：<a href="/search/result?q=%23JavaScript" title="#JavaScript">#JavaScript</a> <a href="/search/result?q=%23ESModules" title="#ESModules">#ESModules</a> <a href="/search/result?q=%23JSON" title="#JSON">#JSON</a> <a href="/search/result?q=%23Web%E6%A0%87%E5%87%86" title="#Web标准">#Web标准</a><br /><br />总结：本文介绍了JavaScript平台原生支持JSON模块导入的新特性。通过使用<code>import attributes</code>语法<code>with { type: "<mark class="highlight">json</mark>" }</code>，开发者现在可以在浏览器、Node.js、Deno和Bun中直接导入JSON文件，无需构建工具转换。这标志着从构建时模拟到运行时原生支持的转变，使模块系统更加显式和可扩展。<br /><br />文章要点：<br />- 使用<code>import config from "./config.<mark class="highlight">json</mark>" with { type: "<mark class="highlight">json</mark>" }</code>语法实现原生JSON导入，替代了以往需要打包工具转换的方式<br />- 动态导入同样支持：<code>await import("./config.<mark class="highlight">json</mark>", { with: { type: "<mark class="highlight">json</mark>" } })</code><br />- 导入的JSON会被解析一次并缓存，多次导入返回同一对象实例（<code>a === b</code>为true）<br />- 浏览器仍需服务器返回<code>Content-Type: application/<mark class="highlight">json</mark></code>，并遵循CORS规则<br />- 与打包工具方案对比：原生方案在运行时获取文件，而打包工具通常在构建时内联JSON<br />- 此特性不仅限于JSON，已扩展支持CSS模块脚本（<code>with { type: "css" }</code>），为未来其他结构化模块类型建立模式<br />- 现代浏览器、Node.js、Deno、Bun均已支持该特性，但打包工具在代码分割、资源哈希等方面仍有价值<br /><br />文章URL：<a href="https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/" target="_blank" rel="noopener" title="https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/">https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/</a><a class="tgme_widget_message_link_preview" href="https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real" target="_blank" rel="noopener" title="JSON imports finally work natively. Learn how import ... with { type: 'json' } changes runtime behavior, caching, and makes bundlers optional."> <i class="link_preview_right_image" style="background-image:url('https://cdn4.telesco.pe/file/WN5gYHdJxxyjhkTgck1yzTf1hu3GVGPgTf7sTJjL1R4FDEQxWgnaKsxJTN74xI6ToumUaGyPU4tKOxWG1OX_cDOzLdEQQLdFuL7_vckUQlocyH7yD1Ajpwy6zfsc_aE4EQGUUsiMxWydbksynuRCtpteUyQZvzDFHKWkFfZ3Vg2EoOLFiUJVyNsOxbU8_DDw-QBlaMPOrByqIZprutZc7ebjn4bjTPi2GlwbbkUPqqozRQPrVoJo6ghcZ_UqyqNNMv_toySloGJNHPpRh2kU7Oe2NJtSXcTb2nbIUgZODpzcbQn1QkEEABEy6rZtZVGie_kvMXZ6JHnrstj4_Xbw2Q.jpg')"></i> <div class="link_preview_site_name accent_color">Allthingssmitty</div> <div class="link_preview_title">Native <mark class="highlight">JSON</mark> modules are finally real - Matt Smith</div> <div class="link_preview_description"><mark class="highlight">JSON</mark> imports finally work natively. Learn how import ... with { type: '<mark class="highlight">json</mark>' } changes runtime behavior, caching, and makes bundlers optional.</div> </a>https://channel.meo-ai.com/posts/568https://channel.meo-ai.com/posts/568Mon, 02 Mar 2026 02:09:26 GMT<span class="post-title-source">《使用 SurveyJS 在 React 中构建动态 </span><mark class="highlight"><span class="post-title-source">JSON</span></mark><span class="post-title-source"> 驱动表单》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23SurveyJS" title="#SurveyJS">#SurveyJS</a> <a href="/search/result?q=%23JSON_Schema" title="#JSON_Schema">#JSON_Schema</a> <a href="/search/result?q=%23Form_Builder" title="#Form_Builder">#Form_Builder</a> <a href="/search/result?q=%23Dynamic_Forms" title="#Dynamic_Forms">#Dynamic_Forms</a> <a href="/search/result?q=%23No_Code" title="#No_Code">#No_Code</a><br /><br />总结<br /><br />本文介绍了 SurveyJS 表单构建器在 React 应用中的集成与使用方法。通过 <mark class="highlight">JSON</mark> Schema 定义表单结构，开发者可实现运行时动态渲染表单，避免硬编码。文章详细讲解了安装配置、组件初始化、主题定制、数据持久化（localStorage/服务端）、图片上传处理、PDF 导出等核心功能，并提供了完整的 Next.js 集成示例代码，帮助开发者快速搭建自托管、数据可控的动态表单解决方案。<br /><br />文章要点：<br /><br />- **<mark class="highlight">JSON</mark> Schema 驱动**：表单结构通过 <mark class="highlight">JSON</mark> 定义，支持运行时动态加载和修改，实现真正的数据驱动表单渲染<br />- **可视化构建器**：Survey Creator 提供拖拽式界面，非技术人员也能设计表单，实时生成对应 <mark class="highlight">JSON</mark> 配置<br />- **React 集成方案**：需安装 <code>survey-creator-react</code> 和 <code>survey-creator-core`，组件不支持 SSR，在 Next.js 中需使用动态导入并设置 `ssr: false</code><br />- **数据持久化**：通过 <code>saveSurveyFunc</code> 回调可将表单配置保存至 localStorage 或后端服务，支持加载已有 <mark class="highlight">JSON</mark> 配置继续编辑<br />- **扩展功能**：支持 Ace 编辑器集成（<mark class="highlight">JSON</mark> 编辑）、图片上传至服务器（非 Base64 存储）、PDF 导出、自定义主题等高级功能<br />- **商业化许可**：Survey Creator 商用需购买许可证，否则界面会显示警告横幅<br /><br />文章URL：<a href="https://surveyjs.hashnode.dev/build-dynamic-json-driven-forms-react" target="_blank" rel="noopener" title="https://surveyjs.hashnode.dev/build-dynamic-json-driven-forms-react">https://surveyjs.hashnode.dev/build-dynamic-json-driven-forms-react</a><a class="tgme_widget_message_link_preview" href="https://surveyjs.hashnode.dev/build-dynamic-json-driven-forms-react" target="_blank" rel="noopener" title="Learn how to define forms as data, manage logic in JSON, and build scalable React forms using SurveyJS."> <div class="link_preview_site_name accent_color">Schema-Driven Forms in React: A Practical Guide to Forms as Data</div> <img class="link_preview_image" alt="Schema-Driven Forms in React: Practical Guide" src="/static/https://cdn4.telesco.pe/file/Jmz9KXq-PvJbPqe5BEntl3GN1apHLi9jmZi8BZCFdDwWxOFImiuJbhvBG40q75rXPH7OPNJIf6SVmXqE3eIl_cjXwTOdVCu5Wjd_q-OnGDsbxVQkqHr3e_njS9Kx5A74HLtpvnHInXGdqwLjdVC4gI_MXOI3a0X6VPDBh5wkQKBCSkWSacCM3cramnknvgY3UjJLuW9-KtYY0P76M1MjNHXgyrGKXUaDCENZwCW18_L3Lw5Ql8nG3ukKW-gBOdC8UdH0JDkUU6cHeqftaCE3JDksPiY_mI5_bXLAIJvmNzhwaqr_96Y1NCGXGdnpurZORVIU__DSa6QOCxhq2UllAA.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Schema-Driven Forms in React: Practical Guide</div> <div class="link_preview_description">Learn how to define forms as data, manage logic in <mark class="highlight">JSON</mark>, and build scalable React forms using SurveyJS.</div> </a>