{"id":483,"date":"2020-02-14T21:56:36","date_gmt":"2020-02-14T13:56:36","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=483"},"modified":"2020-02-14T21:56:36","modified_gmt":"2020-02-14T13:56:36","slug":"js%e6%a8%a1%e5%9d%97%e5%8c%96-%e6%80%bb%e7%bb%93%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/14\/js%e6%a8%a1%e5%9d%97%e5%8c%96-%e6%80%bb%e7%bb%93%e7%ac%94%e8%ae%b0\/","title":{"rendered":"JS\u6a21\u5757\u5316-\u603b\u7ed3\u7b14\u8bb0"},"content":{"rendered":"<pre class=\"pure-highlightjs\"><code class=\"\">## JS\u6a21\u5757\u5316\n* \u6a21\u5757\u5316\u7684\u7406\u89e3\n* \u4ec0\u4e48\u662f\u6a21\u5757?\n  * \u5c06\u4e00\u4e2a\u590d\u6742\u7684\u7a0b\u5e8f\u4f9d\u636e\u4e00\u5b9a\u7684\u89c4\u5219(\u89c4\u8303)\u5c01\u88c5\u6210\u51e0\u4e2a\u5757(\u6587\u4ef6), \u5e76\u8fdb\u884c\u7ec4\u5408\u5728\u4e00\u8d77\n  * \u5757\u7684\u5185\u90e8\u6570\u636e\/\u5b9e\u73b0\u662f\u79c1\u6709\u7684, \u53ea\u662f\u5411\u5916\u90e8\u66b4\u9732\u4e00\u4e9b\u63a5\u53e3(\u65b9\u6cd5)\u4e0e\u5916\u90e8\u5176\u5b83\u6a21\u5757\u901a\u4fe1\n* \u4e00\u4e2a\u6a21\u5757\u7684\u7ec4\u6210\n  * \u6570\u636e---&gt;\u5185\u90e8\u7684\u5c5e\u6027\n  * \u64cd\u4f5c\u6570\u636e\u7684\u884c\u4e3a---&gt;\u5185\u90e8\u7684\u51fd\u6570\n* \u6a21\u5757\u5316\n  * \u7f16\u7801\u65f6\u662f\u6309\u7167\u6a21\u5757\u4e00\u4e2a\u4e00\u4e2a\u7f16\u7801\u7684, \u6574\u4e2a\u9879\u76ee\u5c31\u662f\u4e00\u4e2a\u6a21\u5757\u5316\u7684\u9879\u76ee\n* \u6a21\u5757\u5316\u7684\u8fdb\u5316\u8fc7\u7a0b\n  * \u5168\u5c40function\u6a21\u5f0f : \n    * \u7f16\u7801: \u5168\u5c40\u53d8\u91cf\/\u51fd\u6570\n    * \u95ee\u9898: \u6c61\u67d3\u5168\u5c40\u547d\u540d\u7a7a\u95f4, \u5bb9\u6613\u5f15\u8d77\u547d\u540d\u51b2\u7a81\/\u6570\u636e\u4e0d\u5b89\u5168\n  * namespace\u6a21\u5f0f : \n    * \u7f16\u7801: \u5c06\u6570\u636e\/\u884c\u4e3a\u5c01\u88c5\u5230\u5bf9\u8c61\u4e2d\n    * \u89e3\u51b3: \u547d\u540d\u51b2\u7a81(\u51cf\u5c11\u4e86\u5168\u5c40\u53d8\u91cf)\n    * \u95ee\u9898: \u6570\u636e\u4e0d\u5b89\u5168(\u5916\u90e8\u53ef\u4ee5\u76f4\u63a5\u4fee\u6539\u6a21\u5757\u5185\u90e8\u7684\u6570\u636e)\n  * IIFE\u6a21\u5f0f\/\u589e\u5f3a\n    * IIFE : \u7acb\u5373\u8c03\u7528\u51fd\u6570\u8868\u8fbe\u5f0f---&gt;\u533f\u540d\u51fd\u6570\u81ea\u8c03\u7528\n    * \u7f16\u7801: \u5c06\u6570\u636e\u548c\u884c\u4e3a\u5c01\u88c5\u5230\u4e00\u4e2a\u51fd\u6570\u5185\u90e8, \u901a\u8fc7\u7ed9window\u6dfb\u52a0\u5c5e\u6027\u6765\u5411\u5916\u66b4\u9732\u63a5\u53e3\n    * \u5f15\u5165\u4f9d\u8d56: \u901a\u8fc7\u51fd\u6570\u5f62\u53c2\u6765\u5f15\u5165\u4f9d\u8d56\u6a21\u5757\n      ```\n      (function(window, module2){\n        var data = 'atguigu.com'\n        function foo() {\n           module2.xxx()\n           console.log('foo()'+data)\n        }\n        function bar() {\n           console.log('bar()'+data)\n        }\n        \n        window.module = {foo}\n      })(window, module2)\n      ```\n* \u6a21\u5757\u5316\u89c4\u8303\n  * CommonJS\n    * Node.js : \u670d\u52a1\u5668\u7aef\n    * Browserify : \u6d4f\u89c8\u5668\u7aef    \u4e5f\u79f0\u4e3ajs\u7684\u6253\u5305\u5de5\u5177\n    * \u57fa\u672c\u8bed\u6cd5:\n      * \u5b9a\u4e49\u66b4\u9732\u6a21\u5757 : exports\n        ```\n        exports.xxx = value\n        module.exports = value\n        ```\n      \u5f15\u5165\u6a21\u5757 : require\n        ```\n        var module = require('\u6a21\u5757\u540d\/\u6a21\u5757\u76f8\u5bf9\u8def\u5f84')\n        ```\n    * \u5f15\u5165\u6a21\u5757\u53d1\u751f\u5728\u4ec0\u4e48\u65f6\u5019?\n      * Node : \u8fd0\u884c\u65f6, \u52a8\u6001\u540c\u6b65\u5f15\u5165\n      * Browserify : \u5728\u8fd0\u884c\u524d\u5bf9\u6a21\u5757\u8fdb\u884c\u7f16\u8bd1\/\u8f6c\u8bd1\/\u6253\u5305\u7684\u5904\u7406(\u5df2\u7ecf\u5c06\u4f9d\u8d56\u7684\u6a21\u5757\u5305\u542b\u8fdb\u6765\u4e86), \n                  \u8fd0\u884c\u7684\u662f\u6253\u5305\u751f\u6210\u7684js, \u8fd0\u884c\u65f6\u4e0d\u5b58\u5728\u9700\u8981\u518d\u4ece\u8fdc\u7a0b\u5f15\u5165\u4f9d\u8d56\u6a21\u5757\n  * AMD : \u6d4f\u89c8\u5668\u7aef\n    * require.js\n    * \u57fa\u672c\u8bed\u6cd5\n      * \u5b9a\u4e49\u66b4\u9732\u6a21\u5757: define([\u4f9d\u8d56\u6a21\u5757\u540d], function(){return \u6a21\u5757\u5bf9\u8c61})\n      * \u5f15\u5165\u6a21\u5757: require(['\u6a21\u57571', '\u6a21\u57572', '\u6a21\u57573'], function(m1, m2){\/\/\u4f7f\u7528\u6a21\u5757\u5bf9\u8c61})\n      * \u914d\u7f6e: \n        ```\n        require.config({\n          \/\/\u57fa\u672c\u8def\u5f84\n          baseUrl : 'js\/',\n          \/\/\u6807\u8bc6\u540d\u79f0\u4e0e\u8def\u5f84\u7684\u6620\u5c04\n          paths : {\n            '\u6a21\u57571' : 'modules\/\u6a21\u57571',\n            '\u6a21\u57572' : 'modules\/\u6a21\u57572',\n            'angular' : 'libs\/angular',\n            'angular-messages' : 'libs\/angular-messages'\n          },\n          \/\/\u975eAMD\u7684\u6a21\u5757\n          shim : {\n            'angular' : {\n                exports : 'angular'\n            },\n            'angular-messages' : {\n                exports : 'angular-messages',\n                deps : ['angular']\n            }\n          }\n        })\n        ```\n  * CMD : \u6d4f\u89c8\u5668\u7aef\n    * sea.js\n    * \u57fa\u672c\u8bed\u6cd5\n      * \u5b9a\u4e49\u66b4\u9732\u6a21\u5757: \n        ```\n        define(function(require, module, exports){\n          \u901a\u8fc7require\u5f15\u5165\u4f9d\u8d56\u6a21\u5757\n          \u901a\u8fc7module\/exports\u6765\u66b4\u9732\u6a21\u5757\n          exports.xxx = value\n        })\n        ```\n      * \u4f7f\u7528\u6a21\u5757seajs.use(['\u6a21\u57571', '\u6a21\u57572'])\n  * ES6\n    * ES6\u5185\u7f6e\u4e86\u6a21\u5757\u5316\u7684\u5b9e\u73b0\n    * \u57fa\u672c\u8bed\u6cd5\n      * \u5b9a\u4e49\u66b4\u9732\u6a21\u5757 : export\n        * \u66b4\u9732\u4e00\u4e2a\u5bf9\u8c61: \n          ```\n          export default \u5bf9\u8c61\n          ```\n        * \u66b4\u9732\u591a\u4e2a: \n          ```\n          export var xxx = value1\n          export let yyy = value2\n          \n          var xxx = value1\n          let yyy = value2\n          export {xxx, yyy}\n          ```\n              \n      * \u5f15\u5165\u4f7f\u7528\u6a21\u5757 : import\n        * default\u6a21\u5757:\n          ```\n          import xxx  from '\u6a21\u5757\u8def\u5f84\/\u6a21\u5757\u540d'\n          ```\n        * \u5176\u5b83\u6a21\u5757\n          ```\n          import {xxx, yyy} from '\u6a21\u5757\u8def\u5f84\/\u6a21\u5757\u540d'\n          import * as module1 from '\u6a21\u5757\u8def\u5f84\/\u6a21\u5757\u540d'\n          ```\n    * \u95ee\u9898: \u6240\u6709\u6d4f\u89c8\u5668\u8fd8\u4e0d\u80fd\u76f4\u63a5\u8bc6\u522bES6\u6a21\u5757\u5316\u7684\u8bed\u6cd5  \n    * \u89e3\u51b3:\n        * \u4f7f\u7528Babel\u5c06ES6---&gt;ES5(\u4f7f\u7528\u4e86CommonJS) ----\u6d4f\u89c8\u5668\u8fd8\u4e0d\u80fd\u76f4\u63a5\u652f\u884c\n        * \u4f7f\u7528Browserify---&gt;\u6253\u5305\u5904\u7406----\u6d4f\u89c8\u5668\u53ef\u4ee5\u8fd0\u884c\n            \n    \n    <\/code><\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>## JS\u6a21\u5757\u5316 * \u6a21\u5757\u5316\u7684\u7406\u89e3 * \u4ec0\u4e48\u662f\u6a21\u5757? * \u5c06\u4e00\u4e2a\u590d\u6742\u7684\u7a0b\u5e8f\u4f9d\u636e\u4e00\u5b9a\u7684\u89c4\u5219(\u89c4\u8303)\u5c01\u88c5\u6210\u51e0\u4e2a\u5757(\u6587\u4ef6), \u5e76\u8fdb\u884c\u7ec4\u5408 &#8230;<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[6],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/483"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=483"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/483\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}