{"id":1934,"date":"2023-03-25T14:26:38","date_gmt":"2023-03-25T06:26:38","guid":{"rendered":""},"modified":"2023-03-25T14:26:38","modified_gmt":"2023-03-25T06:26:38","slug":"ES6 \u6a21\u5757","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/1934.html","title":{"rendered":"ES6 \u6a21\u5757"},"content":{"rendered":"


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

\n

ES6 \u6a21\u5757<\/h1>\n<\/p><\/div>\n

ES6 \u6a21\u5757<\/h2>\n
\n \u6a21\u5757\u662f JavaScript \u7684\u4e00\u90e8\u5206\u6216\u5927\u5757\u5199\u5728\u6587\u4ef6\u4e2d\u7684\u4ee3\u7801\u3002 JavaScript \u6a21\u5757\u901a\u8fc7\u5c06\u6574\u4e2a\u4ee3\u7801\u5212\u5206\u4e3a\u53ef\u4ee5\u4ece\u4efb\u4f55\u5730\u65b9\u5bfc\u5165\u7684\u6a21\u5757\u6765\u5e2e\u52a9\u6211\u4eec\u6a21\u5757\u5316\u4ee3\u7801\u3002\u6a21\u5757\u4f7f\u7ef4\u62a4\u4ee3\u7801\u3001\u8c03\u8bd5\u4ee3\u7801\u548c\u91cd\u7528\u4ee3\u7801\u6bb5\u53d8\u5f97\u5bb9\u6613\u3002\u6bcf\u4e2a\u6a21\u5757\u90fd\u662f\u4e00\u6bb5\u4ee3\u7801\uff0c\u4e00\u65e6\u52a0\u8f7d\u5c31\u4f1a\u6267\u884c\u3002\n <\/div>\n
\n ES6 \u4e2d\u7684\u6a21\u5757\u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u6982\u5ff5\u3002\u867d\u7136\u4e0d\u662f\u5904\u5904\u53ef\u7528\uff0c\u4f46\u4eca\u5929\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5b83\u5e76\u4e14\u53ef\u4ee5\u8f6c\u8bd1\u6210 ES5 \u4ee3\u7801\u3002\u8f6c\u8bd1\u662f\u5c06\u4ee3\u7801\u4ece\u4e00\u79cd\u8bed\u8a00\u8f6c\u6362\u4e3a\u5176\u7b49\u6548\u8bed\u8a00\u7684\u8fc7\u7a0b\u3002 ES6 \u6a21\u5757\u8f6c\u8bd1\u5de5\u5177\u8d1f\u8d23\u5c06 ES6 \u6a21\u5757\u8f6c\u6362\u4e3a AMD \u4e2d\u517c\u5bb9 ES5 \u7684\u4ee3\u7801(\u5f02\u6b65\u6a21\u5757\u5b9a\u4e49\u662f JavaScript \u7f16\u7a0b\u8bed\u8a00\u7684\u89c4\u8303) \u6216 CommonJS \u98ce\u683c\u3002\n <\/div>\n
\n \u5728\u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528Gulp\u3001Babel\u3001Grunt\u6216\u5176\u4ed6\u8f6c\u8bd1\u5668\u6765\u7f16\u8bd1\u6a21\u5757\u3002\u6a21\u5757\u4e2d\u7684\u53d8\u91cf\u548c\u51fd\u6570\u4e0d\u53ef\u7528\uff0c\u9664\u975e\u6587\u4ef6\u5bfc\u51fa\u5b83\u4eec\u3002\n <\/div>\n

\u5bfc\u51fa\u548c\u5bfc\u5165\u6a21\u5757<\/h2>\n

\u5bfc\u51fa\u6a21\u5757<\/h3>\n
\n JavaScript \u5141\u8bb8\u6211\u4eec\u4f7f\u7528export \u5173\u952e\u5b57\u5bfc\u51fa\u51fd\u6570\u3001\u5bf9\u8c61\u3001\u7c7b\u548c\u539f\u59cb\u503c\u3002\u6709\u4e24\u79cd\u5bfc\u51fa:\n <\/div>\n

\u547d\u540d\u5bfc\u51fa: \u4ee5\u540d\u79f0\u533a\u5206\u7684\u5bfc\u51fa\u79f0\u4e3a\u547d\u540d\u5bfc\u51fa\u3002\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u547d\u540d\u5bfc\u51fa\u5bfc\u51fa\u591a\u4e2a\u53d8\u91cf\u548c\u51fd\u6570\u3002<\/span>
\n \u9ed8\u8ba4\u5bfc\u51fa: \u4f7f\u7528\u9ed8\u8ba4\u5bfc\u51fa\u6700\u591a\u53ef\u4ee5\u5bfc\u51fa\u4e00\u4e2a\u503c\u3002<\/span> <\/p>\n

\u5bfc\u5165\u6a21\u5757<\/h3>\n
\n \u8981\u5bfc\u5165\u6a21\u5757\uff0c\u6211\u4eec\u9700\u8981\u4f7f\u7528import\u5173\u952e\u5b57\u3002\u4ece\u6a21\u5757\u5bfc\u51fa\u7684\u503c\u53ef\u4ee5\u4f7f\u7528 import \u5173\u952e\u5b57\u5bfc\u5165\u3002\u6211\u4eec\u53ef\u4ee5\u5728\u53e6\u4e00\u4e2a\u6a21\u5757\u4e2d\u5bfc\u5165\u5bfc\u51fa\u7684\u53d8\u91cf\u3001\u51fd\u6570\u548c\u7c7b\u3002\u8981\u5bfc\u5165\u4e00\u4e2a\u6a21\u5757\uff0c\u6211\u4eec\u53ea\u9700\u6307\u5b9a\u5b83\u4eec\u7684\u8def\u5f84\u3002\n <\/div>\n
\n \u5f53\u60a8\u5bfc\u5165named \u5bfc\u51fa\u65f6\uff0c\u60a8\u5fc5\u987b\u4f7f\u7528\u4e0e\u76f8\u5e94\u5bf9\u8c61\u76f8\u540c\u7684\u540d\u79f0\u3002\u5f53\u60a8\u5bfc\u5165\u9ed8\u8ba4\u5bfc\u51fa\u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u76f8\u5e94\u5bf9\u8c61\u7684\u4efb\u4f55\u540d\u79f0\u3002\n <\/div>\n
\n \u8ba9\u6211\u4eec\u8be6\u7ec6\u8bf4\u660e\u8fd9\u4e9b\u5bfc\u51fa\u548c\u5bfc\u5165\u3002\n <\/div>\n

\u547d\u540d\u5bfc\u51fa\u548c\u5bfc\u5165<\/h2>\n
\n \u547d\u540d\u5bfc\u51fa\u901a\u8fc7\u5b83\u4eec\u7684\u540d\u79f0\u6765\u533a\u5206\u3002\u4f7f\u7528\u547d\u540d\u5bfc\u51fa\u5bfc\u51fa\u7684\u7c7b\u3001\u53d8\u91cf\u6216\u4efb\u4f55\u51fd\u6570\u53ea\u80fd\u4f7f\u7528\u76f8\u540c\u7684\u540d\u79f0\u5bfc\u5165\u3002\n <\/div>\n
\n \u591a\u4e2a\u53d8\u91cf\u548c\u51fd\u6570\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528\u547d\u540d\u5bfc\u51fa\u3002\n <\/div>\n
\n \u8bed\u6cd5\n <\/div>\n
\n \u8ba9\u6211\u4eec\u770b\u770b\u5728\u7c7b\u4e2d\u4f7f\u7528\u547d\u540d\u5bfc\u51fa\u7684\u8bed\u6cd5\u3001\u51fd\u6570\u6216\u53d8\u91cf\u3002\u4e0b\u9762\u6211\u4eec\u5c06\u5c55\u793a\u5982\u4f55\u4f7f\u7528 named \u5bfc\u51fa\u5355\u72ec\u5bfc\u51fa\u7c7b\u3001\u53d8\u91cf\u548c\u51fd\u6570\u3002\n <\/div>\n
\n
\n\/\/Named export<\/span> in class<\/span>\nclass <\/span>Nokia{\n\/\/properties<\/span>\n\/\/methods<\/span>\n}\nexport {Nokia}; \/\/Named export\n\/\/Named export in functions<\/span>\nfunction show(){\n}\nexport {show};\n\/\/Named export in Variables<\/span>\nconst a = 10;\nexport {a};<\/pre>\n
<\/code>\n  <\/div>\n
\n    \u6211\u4eec\u53ef\u4ee5\u5728\u4e00\u4e2a\u6a21\u5757\u4e2d\u5e94\u7528\u591a\u4e2a\u547d\u540d\u5bfc\u51fa\u3002\u6211\u4eec\u53ef\u4ee5\u5728\u4e00\u4e2a\u6a21\u5757\u4e2d\u4f7f\u7528\u591a\u4e2a named \u5bfc\u51fa\u7684\u8bed\u6cd5\uff0c\u5982\u4e0b\u6240\u793a:\n  <\/div>\n
\n    Mobile.js\n  <\/div>\n
\n
\nclass <\/span>Nokia{\n\/\/properties<\/span>\n\/\/methods<\/span>\n}\nfunction show(){\n}\nconst a = 10;\nexport {Nokia, show};<\/pre>\n
<\/code>\n  <\/div>\n
\n    \u8ba9\u6211\u4eec\u770b\u770b\u5982\u4f55\u5bfc\u5165\u547d\u540d\u5bfc\u51fa\u3002\n  <\/div>\n
\u5bfc\u5165\u547d\u540d\u5bfc\u51fa<\/h3>\n
\n    \u5bfc\u5165\u7ed1\u5b9a\u7531\u53e6\u4e00\u4e2a\u6a21\u5757\u5bfc\u51fa\uff0c\u6211\u4eec\u5fc5\u987b\u4f7f\u7528\u9759\u6001 import \u8bed\u53e5\u3002 \u5bfc\u5165\u7684\u6a21\u5757\u59cb\u7ec8\u5904\u4e8e\u4e25\u683c\u6a21\u5f0f\uff0c\u65e0\u8bba\u6211\u4eec\u662f\u5426\u5728\u4e25\u683c\u6a21\u5f0f\u4e0b\u58f0\u660e\u5b83\u4eec\u3002\n  <\/div>\n
\n    \u8bed\u6cd5\n  <\/div>\n
\n    App.js\n  <\/div>\n
\n
\nimport {Nokia, show} from '.\/Mobile.js'<\/span>;<\/pre>\n
<\/code>\n  <\/div>\n
\n    \u5168\u90e8\u5bfc\u5165\n  <\/div>\n
\n    \u5982\u679c\u6211\u4eec\u60f3\u540c\u65f6\u5bfc\u5165\u6240\u6709\u5bfc\u51fa\u8bed\u53e5\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u5355\u72ec\u5bfc\u5165\u5b83\u4eec\u3002\n  <\/div>\n
\n    \u4f46\u5b83\u4f1a\u5f53\u6211\u4eec\u6709\u8fd9\u4e48\u591a\u547d\u540d\u7684\u5bfc\u51fa\u65f6\u5f88\u96be\u3002\u6240\u4ee5\uff0c\u4e3a\u4e86\u65b9\u4fbf\u8d77\u89c1\uff0c\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u505a:\n  <\/div>\n
\n
\nimport * as device from '.\/Mobile.js'<\/span>; \/\/ Here, the device is an alias, and Mobile.js is the module name.<\/span><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u5047\u8bbe\uff0c\u6211\u4eec\u5728Mobile.js\u6a21\u5757\u4e2d\u5b9a\u4e49\u4e86\u4e00\u4e2aNokia\u7c7b\uff0c\u5982\u679c\u6211\u4eec\u60f3\u4f7f\u7528\u5b83\uff0c\u90a3\u4e48\u901a\u8fc7\u4f7f\u7528\u522b\u540d\uff0c\u6211\u4eec\u53ef\u4ee5\u6267\u884c\u5b83\u5982:\n  <\/div>\n
\n
\ndevice.Nokia \/\/if <\/span>we have a class <\/span>Nokia<\/span>\ndevice.show \/\/ if <\/span>we have a function show<\/span>\ndevice.a \/\/ if <\/span>we have a variable a<\/span><\/pre>\n
<\/code>\n  <\/div>\n
\n    \u8ba9\u6211\u4eec\u8bd5\u7740\u5728\u4e00\u4e2a\u4f8b\u5b50\u4e2d\u7406\u89e3 Named \u5bfc\u51fa\u548c\u5bfc\u5165\u3002\n  <\/div>\n
\n    \u6211\u4eec\u5fc5\u987b\u5236\u4f5c\u4e24\u4e2a JavaScript \u6a21\u5757\u6765\u6267\u884c\u5bfc\u51fa\u548c\u5bfc\u5165\u3002\u5728\u7b2c\u4e00\u4e2a\u6a21\u5757\u4e2d\uff0c\u6211\u4eec\u5bfc\u51fa\u7c7b\u3001\u51fd\u6570\u548c\u53d8\u91cf\u3002\u5728\u7b2c\u4e8c\u4e2a\u6a21\u5757\u4e2d\uff0c\u6211\u4eec\u5c06\u4f7f\u7528 named \u5bfc\u5165\u6765\u5bfc\u5165\u5b83\u4eec\u3002\n  <\/div>\n
\u793a\u4f8b-\u547d\u540d\u5bfc\u51fa\u548c\u5bfc\u5165<\/h3>\n
\n    \u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u6b63\u5728\u521b\u5efa\u4e24\u4e2a JavaScript \u6a21\u5757\uff0c\u5176\u4e2d\u7b2c\u4e00\u4e2a JavaScript \u6a21\u5757\u662f Mobile.js\uff0c\uff0c\u7b2c\u4e8c\u4e2a\u6a21\u5757\u540d\u79f0\u662f App.js\u3002 \u6211\u4eec\u8fd8\u521b\u5efa\u4e86\u4e00\u4e2a HTML \u6587\u4ef6 Example.html. \u7136\u540e\uff0c\u6211\u4eec\u5c06\u5728\n  <\/div>\n
\n    \u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5fc5\u987b\u624b\u52a8\u94fe\u63a5 HTML \u6587\u4ef6\u4e2d\u7684 JavaScript \u6587\u4ef6\u4f7f\u7528
\n