{"id":1587,"date":"2022-07-16T01:38:31","date_gmt":"2022-07-15T17:38:31","guid":{"rendered":"https:\/\/fromideatocreation.com\/?p=1255"},"modified":"2023-07-02T16:20:18","modified_gmt":"2023-07-02T08:20:18","slug":"mdn-%e7%9a%84%e4%ba%ba%e5%80%91%e6%ad%a3%e5%9c%a8%e8%a8%8e%e8%ab%96%e5%b0%87%e4%bb%96%e5%80%91%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc%e7%af%84%e4%be%8b%e7%8f%be%e4%bb%a3%e5%8c%96%e5%88%b0%e7%8f%be","status":"publish","type":"post","link":"https:\/\/fromideatocreation.com\/?p=1587","title":{"rendered":"MDN \u7684\u4eba\u5011\u6b63\u5728\u8a0e\u8ad6\u5c07\u4ed6\u5011\u7684\u7a0b\u5f0f\u78bc\u7bc4\u4f8b\u73fe\u4ee3\u5316\u5230\u73fe\u4ee3 JavaScript \u6a19\u6e96\u3002"},"content":{"rendered":"\n

MDN Web Docs \u662f\u4e00\u500b\u958b\u6e90\u7684\u5354\u4f5c\u5c08\u6848\uff0c\u5b83\u8a18\u9304\u4e86 Web \u5e73\u53f0\u6280\u8853\uff0c\u5305\u62ec CSS\u3001HTML\u3001JavaScript \u548c Web API\uff0c\u9084\u70ba\u521d\u7d1a\u958b\u767c\u4eba\u54e1\u548c\u5b78\u751f\u63d0\u4f9b\u5ee3\u6cdb\u7684 \ud83e\uddd1\u200d\ud83c\udf93 \u5b78\u7fd2\u8cc7\u6e90\u3002<\/p>\n\n\n\n

\ud83d\ude4c MDN \u7684\u4f7f\u547d
MDN \u7684\u4f7f\u547d\u662f\u70ba\u66f4\u597d\u7684\u7db2\u969b\u7db2\u8def\u63d0\u4f9b\u85cd\u5716\uff0c\u4e26\u6388\u6b0a\u65b0\u4e00\u4ee3\u958b\u767c\u4eba\u54e1\u548c\u5167\u5bb9\u5275\u9020\u8005\u4f86\u5efa\u69cb\u5b83\u3002<\/p>\n\n\n\n

MDN Web Docs \u7684\u5f37\u5927\u4e4b\u8655\u5728\u65bc\u5176\u9f90\u5927\u7684\u6d3b\u8e8d\u8b80\u8005\u548c\u8ca2\u737b\u8005\u793e\u5340\u3002 \u81ea 2005 \u5e74\u4ee5\u4f86\uff0c\u5927\u7d04\u6709 45,000 \u540d\u8ca2\u737b\u8005\u5275\u5efa\u4e86\u6211\u5011\u719f\u6089\u548c\u559c\u611b\u7684\u6587\u4ef6\u3002 \u8ca2\u737b\u8005\u5171\u540c\u5275\u5efa\u4e86\u8d85\u904e 45,000 \u500b\u6587\u4ef6\uff0c\u9019\u4e9b\u6587\u4ef6\u69cb\u6210\u4e86\u4f9b\u5168\u7403 Web \u958b\u767c\u4eba\u54e1\u4f7f\u7528\u7684\u6700\u65b0\u3001\u5168\u9762\u4e14\u514d\u8cbb\u7684\u8cc7\u6e90\u3002 \u9664\u4e86\u82f1\u6587\u6587\u7ae0\uff0c\u8d85\u904e 35 \u540d\u5fd7\u9858\u8005\u8ca0\u8cac\u4e2d\u6587\u3001\u6cd5\u6587\u3001\u65e5\u6587\u3001\u97d3\u6587\u3001\u8461\u8404\u7259\u6587\u3001\u4fc4\u6587\u548c\u897f\u73ed\u7259\u6587\u7684\u7ffb\u8b6f\u548c\u672c\u5730\u5316\u5de5\u4f5c\u3002<\/p>\n\n\n\n

<\/div>\n\n\n\n

\u5728\u4ed6\u5011\u7684\u7de8\u865f\u7b2c 143 “Modernization of (static) code examples” \u7684\u8a0e\u8ad6<\/a>\u4e2d\uff0c\u63d0\u53ca\u5230\uff1a<\/p>\n\n\n\n

    \n
  1. \u4f7f\u7528 const<\/code> \u8207 let<\/code> \u800c\u975e var<\/code> [ES6\/2015]
    \u9032\u5c55\u4e2d:     No more vars in JavaScript docs content#16614<\/a> and No more vars in Web\/API content#16662<\/a> thanks to @wbamberg<\/a> and numerous contributors (\ud83d\udc4f )<\/li>\n\n\n\n
  2. \u7576\u5229\u7528\u985e\u4f3c\u9663\u5217\u7684\u7d50\u69cb\u6642\uff0c\u4f7f\u7528 for...of<\/code><\/a> \u800c\u975e\u50b3\u7d71\u7684 for(;;)<\/code> 
    \u9032\u5c55\u4e2d:     Modernize JS in Web\/API: Use for…of when possible content#18103<\/a> (Help welcome! \ud83e\uddd1\u200d\ud83e\udd1d\u200d\ud83e\uddd1 )<\/li>\n\n\n\n
  3. \u76e1\u91cf\u4f7f\u7528 arrow functions<\/em><\/a> [ES6\/2015]
    We could look at the function<\/code> keyword in samples, and check.<
    Note that we want to keep the parentheses around the parameters, even when there is only one.<\/li>\n\n\n\n
  4. \u76e1\u91cf\u4f7f\u7528 implicit return<\/em><\/a> (a.k.a. concise body<\/em>) \u96a8\u8457 arrow functions<\/em> [ES6\/2015]
    (e) => { return e.id }<\/code> \u53ef\u4ee5\u5beb\u6210 (e) => e.id<\/code>. (    blog<\/a>)<\/li>\n\n\n\n
  5. \u76e1\u91cf\u4f7f\u7528 template literals<\/em><\/a>  [ES6\/2015]
    \u6211\u5011\u53ef\u4ee5\u5728\u7bc4\u4f8b\u4e2d\u627e\u51fa\u7d55\u5927\u591a\u6578\u7684 'text' + ... + 'text'<\/code>\u3002<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    \u984d\u5916\u7684\u8a0e\u8ad6\u5305\u62ec\uff1a<\/p>\n\n\n\n

    Additions from the discussion here:<\/p>\n\n\n\n

      \n
    1. \u4f7f\u7528 Object.hasOwn()<\/code> \u800c\u975e Object.hasOwnProperties()<\/code> [ES2022]<\/li>\n\n\n\n
    2. ==<\/code> -> ===<\/code> [pre-ES6]
      \u9019\u662f\u76ee\u524d\u7684\u6a19\u6e96\u3002<\/li>\n\n\n\n
    3. \u5c07 forEach<\/code> \u66ff\u63db\u70ba for...of<\/code> [ES6\/2015]
      \u76e1\u91cf\u4f7f\u7528 for...of<\/code> \uff0c\u63a5\u8457\u662f forEach()<\/code>\uff0c\u6700\u5f8c\u5982\u771f\u9700\u8981\u624d\u662f for(;;)<\/code> \u3002<\/li>\n\n\n\n
    4. \u4fee\u5fa9\u90a3\u4e9b\u53ef\u4ee5\u4f7f\u7528 method definition<\/em><\/a> \u8a9e\u6cd5\u7684\u51fd\u5f0f\u5b9a\u7fa9 [ES6\/2015]
      Example<\/a> of such change.
      \u9032\u5c55\u4e2d:       Added shorter method definitions in objects for code examples content#18370<\/a><\/li>\n\n\n\n
    5. Replace a || b<\/code> and a ? a : b<\/code> by the nullish coalescing operator<\/em><\/a> (??<\/code>), and the optional chaining operator<\/em><\/a> (.?<\/code>) when pertinent. link to a concrete example<\/a> [both ES2020]<\/li>\n\n\n\n
    6. Promise.finally()<\/code> [ES2018]<\/li>\n\n\n\n
    7. Use async functions<\/em> (await<\/code>) (they already are ubiquitous on MDN for good reasons\u2026) [ES2017]<\/li>\n\n\n\n
    8. Boolean \u6e2c\u8a66\u6642\u4f7f\u7528\u6377\u5f91 \u2014 \u4f7f\u7528 x<\/code> \u548c !x<\/code>\uff0c\u800c\u975e x === true<\/code> \u3001 x === false<\/code><\/li>\n\n\n\n
    9. \u7981\u6b62\u8b8a\u6578\u540d\u7a31\u4f7f\u7528 Hungarian notation<\/a><\/li>\n\n\n\n
    10. \u7576\u5efa\u7acb\u9663\u5217\u6642\uff0c\u4f7f\u7528 literals \uff0c\u800c\u975e constructors \u2014 (const x = ['bli', 'bla', 'blo']<\/code> \uff0c\u800c\u975e const x = new Array('bli', 'bla', 'blo')<\/code>)<\/li>\n\n\n\n
    11. \u5c0d\u65bc\u5143\u4ef6\u7684\u6210\u54e1\uff0c\u76e1\u91cf\u4f7f\u7528 dot notation (objName.objMember<\/code>) \u800c\u975e bracket notation (objName['objMember']<\/code>)<\/li>\n\n\n\n
    12. ESLint rule<\/a> to avoid it.<\/li>\n<\/ol>\n\n\n\n

      <\/p>\n\n\n\n

      \u8a0e\u8ad6\u6301\u7e8c\u9032\u884c\u4e2d\uff0c\u6709\u8208\u8da3\u7684\u4eba\u4e5f\u53ef\u4ee5\u524d\u5f80\u52a0\u5165\u54e6<\/p>\n","protected":false},"excerpt":{"rendered":"

      MDN Web Docs \u662f\u4e00\u500b\u958b\u6e90\u7684\u5354\u4f5c\u5c08\u6848\uff0c\u5b83\u8a18\u9304\u4e86 Web \u5e73\u53f0\u6280\u8853\uff0c\u5305\u62ec CSS\u3001HTML\u3001JavaScript \u548c Web API\uff0c\u9084\u70ba\u521d\u7d1a\u958b\u767c\u4eba\u54e1\u548c\u5b78\u751f\u63d0\u4f9b\u5ee3\u6cdb\u7684 \ud83e\uddd1\u200d\ud83c\udf93 \u5b78\u7fd2\u8cc7\u6e90\u3002<\/p>\n","protected":false},"author":1,"featured_media":721,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"qubely_global_settings":"","qubely_interactions":"","inline_featured_image":false,"_ti_tpc_template_sync":false,"_ti_tpc_template_id":"","footnotes":""},"categories":[236],"tags":[162],"class_list":["post-1587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript"],"acf":[],"aioseo_notices":[],"qubely_featured_image_url":{"full":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"landscape":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"portraits":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",411,320,false],"thumbnail":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",150,117,false],"medium":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",300,234,false],"medium_large":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"large":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"1536x1536":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"2048x2048":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"qubely_landscape":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"qubely_portrait":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",411,320,false],"qubely_thumbnail":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",128,100,false],"nazare_single_thumb":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"nazare_post_card_thumb":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",480,374,false],"nazare_widget_thumb":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",100,78,false],"nazare_widget_first_thumb":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",265,206,false],"nazare_el_banner_left":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"nazare_el_banner_right":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",560,436,false],"nazare_el_post_400x376":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",400,312,false],"nazare_el_post_520x460":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",520,405,false],"nazare_el_post_500x335":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",430,335,false],"nazare_el_post_500x300":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",385,300,false],"nazare_el_post_655x640":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"nazare_el_post_500x290":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",372,290,false],"nazare_el_post_416x278":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",357,278,false],"nazare_el_post_480x425":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",480,374,false],"nazare_el_post_635x640":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"nazare_el_post_305x177":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",227,177,false],"nazare_el_post_400x400":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",400,312,false],"nazare_el_post_400x360":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",400,312,false],"nazare_el_post_416x416":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",416,324,false],"nazare_el_post_485x430":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",485,378,false],"nazare_el_post_700x467":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"nazare_el_post_1000x581":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"nazare_post_1320x605":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"nazare_post_705x565":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"nazare_post_400x265":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",340,265,false],"nazare_el_post_1248x630":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"woocommerce_thumbnail":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",300,234,false],"woocommerce_single":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"woocommerce_gallery_thumbnail":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",100,78,false],"shop_catalog":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",300,234,false],"shop_single":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",565,440,false],"shop_thumbnail":["https:\/\/fromideatocreation.com\/wp-content\/uploads\/2023\/04\/about9.webp",100,78,false]},"qubely_author":{"display_name":"Wen","author_link":"https:\/\/fromideatocreation.com\/?author=1"},"qubely_comment":0,"qubely_category":"Javascript<\/a>","qubely_excerpt":"MDN Web Docs \u662f\u4e00\u500b\u958b\u6e90\u7684\u5354\u4f5c\u5c08\u6848\uff0c\u5b83\u8a18\u9304\u4e86 Web \u5e73\u53f0\u6280\u8853\uff0c\u5305\u62ec CSS\u3001HTML\u3001JavaS...","_links":{"self":[{"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=\/wp\/v2\/posts\/1587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1587"}],"version-history":[{"count":1,"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=\/wp\/v2\/posts\/1587\/revisions"}],"predecessor-version":[{"id":1612,"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=\/wp\/v2\/posts\/1587\/revisions\/1612"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=\/wp\/v2\/media\/721"}],"wp:attachment":[{"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fromideatocreation.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}