{"id":42,"date":"2021-05-12T16:42:38","date_gmt":"2021-05-12T08:42:38","guid":{"rendered":"http:\/\/www.12412.cc\/?p=42"},"modified":"2021-05-12T17:10:12","modified_gmt":"2021-05-12T09:10:12","slug":"es6%e4%b9%8bmodule%e8%af%ad%e6%b3%95","status":"publish","type":"post","link":"http:\/\/www.12412.cc\/index.php\/2021\/05\/12\/es6%e4%b9%8bmodule%e8%af%ad%e6%b3%95\/","title":{"rendered":"ES6\u4e4bmodule\u8bed\u6cd5"},"content":{"rendered":"

\u5386\u53f2\u4e0a\uff0cJavaScript\u4e00\u76f4\u6ca1\u6709\u6a21\u5757\uff08module\uff09\u4f53\u7cfb\uff0c\u65e0\u6cd5\u5c06\u4e00\u4e2a\u5927\u7a0b\u5e8f\u62c6\u5206\u6210\u4e92\u76f8\u4f9d\u8d56\u7684\u5c0f\u6587\u4ef6\uff0c\u518d\u7528\u7b80\u5355\u7684\u65b9\u6cd5\u62fc\u88c5\u8d77\u6765\u3002\u5176\u4ed6\u8bed\u8a00\u90fd\u6709\u8fd9\u9879\u529f\u80fd\uff0c\u6bd4\u5982 Ruby\u7684require\u3001Python\u7684import\uff0c\u751a\u81f3\u8fdeCSS\u90fd\u6709@import\uff0c\u4f46\u662fJavaScript\u4efb\u4f55\u8fd9\u65b9\u9762\u7684\u652f\u6301\u90fd\u6ca1\u6709\uff0c\u8fd9\u5bf9\u5f00\u53d1\u5927\u578b\u7684\u3001\u590d\u6742\u7684\u9879\u76ee\u5f62\u6210\u4e86\u5de8\u5927\u7684\u969c\u788d\u3002<\/p>\n

\u5728 ES6 \u4e4b\u524d\uff0c\u793e\u533a\u5236\u5b9a\u4e86\u4e00\u4e9b\u6a21\u5757\u52a0\u8f7d\u65b9\u6848\uff0c\u6700\u4e3b\u8981\u7684\u6709 CommonJS \u548c AMD \u4e24\u79cd\u3002\u524d\u8005\u7528\u4e8e\u670d\u52a1\u5668\uff0c\u540e\u8005\u7528\u4e8e\u6d4f\u89c8\u5668\u3002ES6 \u5728\u8bed\u8a00\u6807\u51c6\u7684\u5c42\u9762\u4e0a\uff0c\u5b9e\u73b0\u4e86\u6a21\u5757\u529f\u80fd\uff0c\u800c\u4e14\u5b9e\u73b0\u5f97\u76f8\u5f53\u7b80\u5355\uff0c\u5b8c\u5168\u53ef\u4ee5\u53d6\u4ee3 CommonJS \u548c AMD \u89c4\u8303\uff0c\u6210\u4e3a\u6d4f\u89c8\u5668\u548c\u670d\u52a1\u5668\u901a\u7528\u7684\u6a21\u5757\u89e3\u51b3\u65b9\u6848\u3002\\r\\n<\/p>\n

\u6a21\u5757\u529f\u80fd\uff08module\uff09\u4e3b\u8981\u75312\u4e2a\u547d\u4ee4\u6784\u6210\uff1aexport\u548cimport\u3002export\u547d\u4ee4\u7528\u4e8e\u89c4\u5b9a\u6a21\u5757\u7684\u5bf9\u5916\u63a5\u53e3\uff0cimport\u547d\u4ee4\u7528\u4e8e\u8f93\u5165\u5176\u4ed6\u6a21\u5757\u63d0\u4f9b\u7684\u529f\u80fd\u3002\\r\\n<\/p>\n

\u4e00\u3001export\u547d\u4ee4<\/p>\n

export var firstName = 'Michael';\nexport var lastName = 'Jackson';\nexport var year = 1958;<\/pre>\n
ES6\u5c06\u5176\u89c6\u4e3a\u4e00\u4e2a\u6a21\u5757\uff0c\u91cc\u9762\u7528export\u547d\u4ee4\u5bf9\u5916\u8f93\u51fa\u4e863\u4e2a\u53d8\u91cf<\/p>\n
var firstName = 'Michael';\nvar lastName = 'Jackson';\nvar year = 1958;\nexport \uff5b firstName\uff0clastName\uff0cyear\uff5d\uff1b<\/pre>\n
\u5728export\u547d\u4ee4\u540e\u9762\uff0c\u4f7f\u7528\u5927\u62ec\u53f7\u6307\u5b9a\u6240\u8981\u8f93\u51fa\u7684\u4e00\u7ec4\u53d8\u91cf.\u4ed6\u4e0e\u524d\u4e00\u79cd\u5199\u6cd5\u662f\u7b49\u4ef7\u7684\uff0c\u4f46\u662f\u5e94\u8be5\u4f18\u5148\u8003\u8651\u4f7f\u7528\u8fd9\u79cd\u5199\u6cd5\u3002\u56e0\u4e3a\u8fd9\u6837\u5c31\u53ef\u4ee5\u5728\u811a\u672c\u5c3e\u90e8\uff0c\u4e00\u773c\u5c31\u770b\u6e05\u695a\u4e86\u8f93\u51fa\u4e86\u90a3\u4e9b\u53d8\u91cf<\/p>\n
export\u00a0\u547d\u4ee4\u9664\u4e86\u8f93\u51fa\u53d8\u91cf\uff0c\u8fd8\u53ef\u4ee5\u8f93\u51fa\u51fd\u6570\u6216\u7c7b\uff08class\uff09<\/p>\n
export function multiply(x, y) {\n\n return x * y;\n\n};<\/pre>\n
\u5bf9\u5916\u8f93\u51fa\u4e00\u4e2a\u51fd\u6570multiply<\/p>\n
\u63d0\u5021\u60c5\u51b5\u4e0b\u00a0export\u8f93\u51fa\u7684\u53d8\u91cf\u5c31\u662f\u672c\u6765\u7684\u540d\u5b57\uff0c\u4f46\u662f\u53ef\u4ee5\u4f7f\u7528as\u5173\u952e\u5b57\u91cd\u547d\u540d\\r\\n<\/p>\n
function v1() { ... }\nfunction v2() { ... }\nexport {v1 as streamV1,v2 as streamV2,v2 as streamLatestVersion};<\/pre>\n
\u4f7f\u7528as\u5173\u952e\u5b57\u91cd\u547d\u540d\u4e86\u51fd\u6570v1\u548cv2\u7684\u5bf9\u5916\u63a5\u53e3\uff0c\u91cd\u547d\u540d\u540ev2\u53ef\u4ee5\u7528\u4e0d\u540c\u7684\u540d\u5b57\u8f93\u51fa\u4e24\u6b21<\/p>\n
\u4e8c\u3001import\u547d\u4ee4<\/p>\n
\u4e49\u4e86\u6a21\u5757\u7684\u5bf9\u5916\u63a5\u53e3\u4ee5\u540e\uff0c\u5176\u4ed6js\u6587\u4ef6\u53ef\u4ee5\u901a\u8fc7import\u547d\u4ee4\u52a0\u8f7d\u8fd9\u4e2a\u6a21\u5757<\/p>\n
main.js\nimport { firstName, lastName, year } from '.\/profile.js';\nfunction setName(element) {\n   element.textContent = firstName + '' + lastName;\n}<\/pre>\n
import\u547d\u4ee4\uff0c\u7528\u4e8e\u52a0\u8f7dprofile.js\u6587\u4ef6\uff0c\u5e76\u4ece\u4e2d\u8f93\u5165\u53d8\u91cf\u3002import\u547d\u4ee4\u63a5\u53d7\u4e00\u5bf9\u5927\u62ec\u53f7\uff0c\u91cc\u9762\u6307\u5b9a\u8981\u4ece\u5176\u4ed6\u6a21\u5757\u5bfc\u5165\u7684\u53d8\u91cf\u540d\u3002\u5927\u62ec\u53f7\u91cc\u9762\u7684\u53d8\u91cf\u540d\uff0c\u5fc5\u987b\u4e0e\u88ab\u5bfc\u5165\u6a21\u5757\uff08profile.js\uff09\u5bf9\u5916\u63a5\u53e3\u7684\u540d\u79f0\u76f8\u540c\u3002<\/p>\n
\u4e09\u3001\u6a21\u5757\u7684\u6574\u4f53\u52a0\u8f7d<\/p>\n
\u9664\u4e86\u6307\u5b9a\u52a0\u8f7d\u67d0\u4e2a\u8f93\u51fa\u503c\uff0c\u8fd8\u53ef\u4ee5\u4f7f\u7528\u6574\u4f53\u52a0\u8f7d\uff0c\u5373\u7528\u661f\u53f7\uff08*\uff09\u6307\u5b9a\u4e00\u4e2a\u5bf9\u8c61\uff0c\u6240\u6709\u8f93\u51fa\u503c\u90fd\u52a0\u8f7d\u5728\u8fd9\u4e2a\u5bf9\u8c61\u4e0a\u9762\u3002
\n\u4e0b\u9762\u662f\u4e00\u4e2acircle.js\u6587\u4ef6\uff0c\u5b83\u8f93\u51fa\u4e24\u4e2a\u65b9\u6cd5area\u548ccircumference\u3002\u5927\u62ec\u53f7\u91cc\u9762\u7684\u53d8\u91cf\u540d\uff0c\u5fc5\u987b\u4e0e\u88ab\u5bfc\u5165\u6a21\u5757\uff08profile.js\uff09\u5bf9\u5916\u63a5\u53e3\u7684\u540d\u79f0\u76f8\u540c\u3002<\/p>\n
circle.js\nexport function area(radius) {\nreturn Math.PI * radius * radius;\n}\nexport function circumference(radius) {\n return 2 * Math.PI * radius;\n}<\/pre>\n
\u73b0\u5728\uff0c\u52a0\u8f7d\u8fd9\u4e2a\u6a21\u5757\u3002<\/p>\n
import * as circle from '.\/circle';\n\nconsole.log('\u5706\u9762\u79ef\uff1a' + circle.area(4));\n\nconsole.log('\u5706\u5468\u957f\uff1a' + circle.circumference(14));<\/pre>\n
\u56db\u3001export default \u547d\u4ee4<\/p>\n
\u4ece\u524d\u9762\u7684\u4f8b\u5b50\u53ef\u4ee5\u770b\u51fa\uff0c\u4f7f\u7528import\u547d\u4ee4\u7684\u65f6\u5019\uff0c\u7528\u6237\u9700\u8981\u77e5\u9053\u6240\u8981\u52a0\u8f7d\u7684\u53d8\u91cf\u540d\u6216\u51fd\u6570\u540d\uff0c\u5426\u5219\u65e0\u6cd5\u52a0\u8f7d\u3002\u4f46\u662f\uff0c\u7528\u6237\u80af\u5b9a\u5e0c\u671b\u5feb\u901f\u4e0a\u624b\uff0c\u672a\u5fc5\u613f\u610f\u9605\u8bfb\u6587\u6863\uff0c\u53bb\u4e86\u89e3\u6a21\u5757\u6709\u54ea\u4e9b\u5c5e\u6027\u548c\u65b9\u6cd5\u3002<\/p>\n
\u4e3a\u4e86\u7ed9\u7528\u6237\u63d0\u4f9b\u65b9\u4fbf\uff0c\u8ba9\u4ed6\u4eec\u4e0d\u7528\u9605\u8bfb\u6587\u6863\u5c31\u80fd\u52a0\u8f7d\u6a21\u5757\uff0c\u5c31\u8981\u7528\u5230export default\u547d\u4ee4\uff0c\u4e3a\u6a21\u5757\u6307\u5b9a\u9ed8\u8ba4\u8f93\u51fa\u3002
\ntext.js<\/p>\n
  export default { \n    you: '\u4f60\u4eca\u5e74\u591a\u5927\u4e86', \n    me : '\u6211\u51fa\u53bb\u73a9\u4e86', \n    he : '\u4ed6\u5728\u4e0a\u73ed',  \n  }<\/pre>\n
\u73b0\u5728\u6211\u4eec\u52a0\u8f7d\u8fd9\u4e2a\u6a21\u5757<\/p>\n
import hex from '.\/model\/text.js'\t\nconsole.log(hex)<\/pre>\n
\u58f0\u660e\uff1a\u6587\u7ae0\u7cfb\u53c2\u8003\u4e0e\u501f\u9274\u4e8e\u962e\u4e00\u5cf0\u8001\u5e08\u7684ES6\u76f8\u5173\u6559\u7a0b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5386\u53f2\u4e0a\uff0cJavaScript\u4e00\u76f4\u6ca1\u6709\u6a21\u5757\uff08module\uff09\u4f53\u7cfb\uff0c\u65e0\u6cd5\u5c06\u4e00\u4e2a\u5927\u7a0b\u5e8f\u62c6\u5206\u6210\u4e92\u76f8\u4f9d\u8d56\u7684\u5c0f\u6587\u4ef6\uff0c\u518d\u7528\u7b80\u5355 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/posts\/42"}],"collection":[{"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":2,"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":54,"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/posts\/42\/revisions\/54"}],"wp:attachment":[{"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.12412.cc\/index.php\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}