{"id":469,"date":"2020-02-14T20:07:08","date_gmt":"2020-02-14T12:07:08","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=469"},"modified":"2020-02-14T20:07:08","modified_gmt":"2020-02-14T12:07:08","slug":"%e6%a8%a1%e5%9d%97%e5%8c%96%e8%bf%9b%e5%8c%96%e5%8f%b2","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/14\/%e6%a8%a1%e5%9d%97%e5%8c%96%e8%bf%9b%e5%8c%96%e5%8f%b2\/","title":{"rendered":"\u6a21\u5757\u5316\u8fdb\u5316\u53f2"},"content":{"rendered":"
## \u6a21\u5757\u5316\u8fdb\u5316\u53f2\n1. \u5168\u5c40function\u6a21\u5f0f\n  * module1.js\n    ```\n    \/\/\u6570\u636e\n    let data = 'atguigu.com'\n    \n    \/\/\u64cd\u4f5c\u6570\u636e\u7684\u51fd\u6570\n    function foo() {\n      console.log(`foo() ${data}`)\n    }\n    function bar() {\n      console.log(`bar() ${data}`)\n    }\n    ```\n  * module2.js\n    ```\n    let data2 = 'other data'\n    \n    function foo() {  \/\/\u4e0e\u53e6\u4e00\u4e2a\u6a21\u5757\u4e2d\u7684\u51fd\u6570\u51b2\u7a81\u4e86\n      console.log(`foo() ${data2}`)\n    }\n    ```\n  * test1.html\n    ```\n    <script type=\"text\/javascript\" src=\"module1.js\"><\/script>\n    <script type=\"text\/javascript\" src=\"module2.js\"><\/script>\n    <script type=\"text\/javascript\">\n    \n      let data = \"\u4fee\u6539\u540e\u7684\u6570\u636e\"\n      foo()\n      bar()\n    <\/script>\n    ```\n   * \u8bf4\u660e:\n      * \u5168\u5c40\u51fd\u6570\u6a21\u5f0f: \u5c06\u4e0d\u540c\u7684\u529f\u80fd\u5c01\u88c5\u6210\u4e0d\u540c\u7684\u5168\u5c40\u51fd\u6570\n      * \u95ee\u9898: Global\u88ab\u6c61\u67d3\u4e86, \u5f88\u5bb9\u6613\u5f15\u8d77\u547d\u540d\u51b2\u7a81\n2. namespace\u6a21\u5f0f\n  * module1.js\n    ```\n    let myModule = {\n      data: 'atguigu.com',\n      foo() {\n        console.log(`foo() ${this.data}`)\n      },\n      bar() {\n        console.log(`bar() ${this.data}`)\n      }\n    }\n    ```\n  * module2.js\n    ```\n    let myModule2 = {\n      data: 'atguigu.com2222',\n      foo() {\n        console.log(`foo() ${this.data}`)\n      },\n      bar() {\n        console.log(`bar() ${this.data}`)\n      }\n    }\n    ```\n  * test2.html\n    ```\n    <script type=\"text\/javascript\" src=\"module2.js\"><\/script>\n    <script type=\"text\/javascript\" src=\"module22.js\"><\/script>\n    <script type=\"text\/javascript\">\n      myModule.foo()\n      myModule.bar()\n    \n      myModule2.foo()\n      myModule2.bar()\n    \n      myModule.data = 'other data' \/\/\u80fd\u76f4\u63a5\u4fee\u6539\u6a21\u5757\u5185\u90e8\u7684\u6570\u636e\n      myModule.foo()\n    \n    <\/script>\n    ```\n  * \u8bf4\u660e\n    * namespace\u6a21\u5f0f: \u7b80\u5355\u5bf9\u8c61\u5c01\u88c5\n    * \u4f5c\u7528: \u51cf\u5c11\u4e86\u5168\u5c40\u53d8\u91cf\n    * \u95ee\u9898: \u4e0d\u5b89\u5168\n3. IIFE\u6a21\u5f0f\n  * module3.js\n    ```\n    (function (window) {\n      \/\/\u6570\u636e\n      let data = 'atguigu.com'\n    \n      \/\/\u64cd\u4f5c\u6570\u636e\u7684\u51fd\u6570\n      function foo() { \/\/\u7528\u4e8e\u66b4\u9732\u6709\u51fd\u6570\n        console.log(`foo() ${data}`)\n      }\n    \n      function bar() {\/\/\u7528\u4e8e\u66b4\u9732\u6709\u51fd\u6570\n        console.log(`bar() ${data}`)\n        otherFun() \/\/\u5185\u90e8\u8c03\u7528\n      }\n    \n      function otherFun() { \/\/\u5185\u90e8\u79c1\u6709\u7684\u51fd\u6570\n        console.log('otherFun()')\n      }\n    \n      \/\/\u66b4\u9732\u884c\u4e3a\n      window.myModule = {foo, bar}\n    })(window)\n    ```\n  * test3.html\n    ```\n    <script type=\"text\/javascript\" src=\"module3.js\"><\/script>\n    <script type=\"text\/javascript\">\n      myModule.foo()\n      myModule.bar()\n      \/\/myModule.otherFun()  \/\/myModule.otherFun is not a function\n      console.log(myModule.data) \/\/undefined \u4e0d\u80fd\u8bbf\u95ee\u6a21\u5757\u5185\u90e8\u6570\u636e\n      myModule.data = 'xxxx' \/\/\u4e0d\u662f\u4fee\u6539\u7684\u6a21\u5757\u5185\u90e8\u7684data\n      myModule.foo() \/\/\u6ca1\u6709\u6539\u53d8\n    \n    <\/script>\n    ```\n  * \u8bf4\u660e:\n    * IIFE\u6a21\u5f0f: \u533f\u540d\u51fd\u6570\u81ea\u8c03\u7528(\u95ed\u5305)\n    * IIFE : immediately-invoked function expression(\u7acb\u5373\u8c03\u7528\u51fd\u6570\u8868\u8fbe\u5f0f)\n    * \u4f5c\u7528: \u6570\u636e\u662f\u79c1\u6709\u7684, \u5916\u90e8\u53ea\u80fd\u901a\u8fc7\u66b4\u9732\u7684\u65b9\u6cd5\u64cd\u4f5c\n    * \u95ee\u9898: \u5982\u679c\u5f53\u524d\u8fd9\u4e2a\u6a21\u5757\u4f9d\u8d56\u53e6\u4e00\u4e2a\u6a21\u5757\u600e\u4e48\u529e?\n4. IIFE\u6a21\u5f0f\u589e\u5f3a\n  * \u5f15\u5165jquery\u5230\u9879\u76ee\u4e2d\n  * module4.js\n    ```\n    (function (window, $) {\n      \/\/\u6570\u636e\n      let data = 'atguigu.com'\n    \n      \/\/\u64cd\u4f5c\u6570\u636e\u7684\u51fd\u6570\n      function foo() { \/\/\u7528\u4e8e\u66b4\u9732\u6709\u51fd\u6570\n        console.log(`foo() ${data}`)\n        $('body').css('background', 'red')\n      }\n    \n      function bar() {\/\/\u7528\u4e8e\u66b4\u9732\u6709\u51fd\u6570\n        console.log(`bar() ${data}`)\n        otherFun() \/\/\u5185\u90e8\u8c03\u7528\n      }\n    \n      function otherFun() { \/\/\u5185\u90e8\u79c1\u6709\u7684\u51fd\u6570\n        console.log('otherFun()')\n      }\n    \n      \/\/\u66b4\u9732\u884c\u4e3a\n      window.myModule = {foo, bar}\n    })(window, jQuery)\n    ``` \n  * test4.html\n    ```\n    <script type=\"text\/javascript\" src=\"jquery-1.10.1.js\"><\/script>\n    <script type=\"text\/javascript\" src=\"module4.js\"><\/script>\n    <script type=\"text\/javascript\">\n      myModule.foo()\n    <\/script>\n    ```\n  * \u8bf4\u660e\n    * IIFE\u6a21\u5f0f\u589e\u5f3a : \u5f15\u5165\u4f9d\u8d56\n    * \u8fd9\u5c31\u662f\u73b0\u4ee3\u6a21\u5757\u5b9e\u73b0\u7684\u57fa\u77f3\n      \n5. \u9875\u9762\u52a0\u8f7d\u591a\u4e2ajs\u7684\u95ee\u9898\n  * \u9875\u9762:\n    ```\n    <script type=\"text\/javascript\" src=\"module1.js\"><\/script>\n    <script type=\"text\/javascript\" src=\"module2.js\"><\/script>\n    <script type=\"text\/javascript\" src=\"module3.js\"><\/script>\n    <script type=\"text\/javascript\" src=\"module4.js\"><\/script>\n    ```\n  * \u8bf4\u660e\n    * \u4e00\u4e2a\u9875\u9762\u9700\u8981\u5f15\u5165\u591a\u4e2ajs\u6587\u4ef6\n    * \u95ee\u9898:\n        * \u8bf7\u6c42\u8fc7\u591a\n        * \u4f9d\u8d56\u6a21\u7cca\n        * \u96be\u4ee5\u7ef4\u62a4\n    * \u8fd9\u4e9b\u95ee\u9898\u53ef\u4ee5\u901a\u8fc7\u73b0\u4ee3\u6a21\u5757\u5316\u7f16\u7801\u548c\u9879\u76ee\u6784\u5efa\u6765\u89e3\u51b3<\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
## \u6a21\u5757\u5316\u8fdb\u5316\u53f2 1. \u5168\u5c40function\u6a21\u5f0f * module1.js “` \/\/\u6570\u636e let data = ‘atgui ","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\/469"}],"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=469"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}