{"id":1059,"date":"2025-04-11T16:42:08","date_gmt":"2025-04-11T08:42:08","guid":{"rendered":"https:\/\/womeifei.cn\/?p=1059"},"modified":"2025-04-11T16:42:08","modified_gmt":"2025-04-11T08:42:08","slug":"2024web%e7%bb%8407-%e7%ae%80%e6%98%93jsx%e8%a7%a3%e6%9e%90%e5%99%a8","status":"publish","type":"post","link":"https:\/\/womeifei.cn\/index.php\/2025\/04\/11\/2024web%e7%bb%8407-%e7%ae%80%e6%98%93jsx%e8%a7%a3%e6%9e%90%e5%99%a8\/","title":{"rendered":"2024Web\u7ec407—\u7b80\u6613JSX\u89e3\u6790\u5668"},"content":{"rendered":"\n

\u89e3\u9898\u76ee\u6807<\/strong> \u5b8c\u5584JSX\u51fd\u6570 \u5b9e\u73b0\u4e0b\u5217\u76ee\u6807<\/p>\n\n\n\n

\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n

JSX<\/code>\u00a0\u51fd\u6570\u9700\u5b9e\u73b0\u4ee5\u4e0b\u76ee\u6807\uff1a<\/strong><\/p>\n\n\n\n

    \n
  1. \u5b8c\u6210\u5143\u7d20\u7684 DOM \u8282\u70b9\u8f6c\u6362\uff0c\u5373\u53ea\u8f6c\u6362\u00a0config<\/code>\u00a0\u4e2d\u7684\u00a0children<\/code>\u3002<\/li>\n\n\n\n
  2. \u5b8c\u6210\u5143\u7d20\u7684\u5c5e\u6027\u8f6c\u6362\uff0c\u5176\u4e2d\u5143\u7d20\u6837\u5f0f\u5982\u679c\u662f\u5c0f\u9a7c\u5cf0\u5199\u6cd5\u9700\u8981\u8f6c\u6362\u6210\u00a0-<\/code>\u00a0\u8fde\u63a5\uff0c\u5982\u00a0fontSize<\/code>\u00a0\u9700\u8f6c\u6362\u6210\u00a0font-size<\/code>\u3002js\/index.js<\/code>\u00a0\u6587\u4ef6\u4e2d\u7684\u00a0isUpperCase<\/code>\u00a0\u51fd\u6570\u529f\u80fd\u4e3a\u5224\u65ad\u5b57\u7b26\u662f\u5426\u4e3a\u5927\u5199\u3002\u6ce8\u610f\uff1a\u6837\u5f0f\u5fc5\u987b\u8f6c\u6362\u4e3a\u884c\u5185\u6837\u5f0f<\/strong><\/li>\n\n\n\n
  3. \u5b8c\u6210\u5143\u7d20\u4e8b\u4ef6\u6b63\u786e\u7ed1\u5b9a\u4e0e\u89e6\u53d1<\/li>\n<\/ol>\n\n\n\n

    \u4e3b\u8981\u8fd8\u662f\u8003\u5bdf\u5bf9\u8c61\u548c\u6570\u7ec4\u7684\u64cd\u4f5c \u4ee5\u53ca \u5bf9\u4e8eDom\u5143\u7d20\u7684\u64cd\u4f5c\u95ee\u9898<\/p>\n\n\n\n

    \u76f4\u63a5\u7c98\u8d34\u6e90\u4ee3\u7801<\/p>\n\n\n\n

    const jsx = (type, config) => {\n  \/* TODO: \u5f85\u8865\u5145\u4ee3\u7801 *\/\n  \/\/\u8981\u6c42\u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u8282\u70b9 \u800c\u4e0d\u662f\u5b57\u7b26\u4e32!!! \n  \/\/\u6240\u4ee5\u8981\u7528JS\u521b\u5efa\u4e00\u4e2a\u65b0\u7684Dom\u5143\u7d20\n  const node = document.createElement(type)\n\n  \/\/1\n  \/\/\u53ea\u6709\u4e00\u4e2a\u5b57\u7b26\u4e32\u65f6\n  if(typeof config.children == 'string'){\n    node.innerHTML = config.children\n  }\n  else {\n    config.children.forEach(ele => {\n      if(typeof ele =='string'){\n        node.innerHTML+= ele\n      }\n      else {\n        \/\/\u6dfb\u52a0\u5b50\u8282\u70b9\u5373\u53ef\n        node.appendChild(ele)\n      }\n    })\n  }\n  \/\/2\n  if(config.style){\n    let style=''\n    \/\/\u83b7\u5f97style\u5bf9\u8c61\u7684\u952e\u503c\n    for(let key of Object.keys(config.style)){\n      let keys = key.split('')\n      \/\/'f' 'o' 'n' 't' 'S' 'i' 'z' 'e'\n      \/\/\u7528map\u5904\u7406\u6570\u7ec4 \u9700\u8981\u7ed9\u4e00\u4e2a\u65b0\u7684\u5730\u5740\n      let newKeys=keys.map(c=>{\n        if(isUpperCase(c)){\n          c='-'+ c.toLowerCase()\n          return c\n        }\n        else {\n          return c\n        }\n      }).join('')\n        style +=`${newKeys}:${config.style[key]};`\n    }\n    \/\/setAttribute\u8bbe\u7f6e\u5c5e\u6027\n    node.setAttribute('style',style)\n  }\n  if(config.id){\n    node.setAttribute('id',config.id)\n  }\n  \/\/3\n  if(config.onclick){\n    node.addEventListener('click',config.onclick)\n  }\n  return node\n};<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    \u89e3\u9898\u76ee\u6807 \u5b8c\u5584JSX\u51fd\u6570 \u5b9e\u73b0\u4e0b\u5217\u76ee\u6807 JSX\u00a0\u51fd\u6570\u9700\u5b9e\u73b0\u4ee5\u4e0b\u76ee\u6807\uff1a \u4e3b\u8981\u8fd8\u662f\u8003\u5bdf\u5bf9\u8c61\u548c\u6570\u7ec4\u7684\u64cd\u4f5c \u4ee5\u53ca \u5bf9\u4e8e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,1],"tags":[],"class_list":["post-1059","post","type-post","status-publish","format-standard","hentry","category-javascript","category-1"],"_links":{"self":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1059"}],"version-history":[{"count":1,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1059\/revisions"}],"predecessor-version":[{"id":1064,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1059\/revisions\/1064"}],"wp:attachment":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}