{"id":428,"date":"2014-05-05T16:05:53","date_gmt":"2014-05-05T08:05:53","guid":{"rendered":"http:\/\/blog.turn.tw\/?p=428"},"modified":"2014-05-05T16:05:53","modified_gmt":"2014-05-05T08:05:53","slug":"%e9%9b%a2%e9%96%8bjavascript%e6%96%b0%e6%89%8b%e6%9d%91%ef%bc%9amodule-pattern","status":"publish","type":"post","link":"https:\/\/blog.turn.tw\/?p=428","title":{"rendered":"\u96e2\u958bJavaScript\u65b0\u624b\u6751\uff1aModule Pattern"},"content":{"rendered":"<p><span style=\"line-height: 1.5;\">\u6700\u8fd1\u5728\u958b\u767c\u300c\u6309\u8b9a\u300d\u529f\u80fd\uff0c\u4e5f\u5c31\u662f\u985e\u4f3c\u5c0d\u5546\u54c1\u5217\u8868\u300c\u6309\u8b9a\u300d\u6216\u662f\u300c\u52a0\u5165\u6211\u7684\u6700\u611b\u300d\u4e4b\u985e\u7684\u529f\u80fd\u3002<\/span><\/p>\n<p><em>\uff08\u672c\u7bc7\u4e0d\u8a0e\u8ad6server side\u8207database\u5be6\u4f5c\uff0c\u50c5\u8a0e\u8ad6client side\u7684JavaScript\uff09<\/em><\/p>\n<p>\u6309\u8b9a\u7684\u5c0d\u8c61\u662f\u8863\u670d\uff0c\u65bc\u662f\u6211\u5148\u958b\u4efdjs\u6a94\uff1a<\/p>\n<blockquote>\n<pre>\/\/ clothing.js\r\n\r\n\/\/ \u6211\u77e5\u9053\u76f4\u63a5\u5beb\u6574\u4e32\u7a0b\u5f0f\u908f\u8f2f\u4e0d\u597d\uff0c\u4e00\u5927\u5718\u96e3\u4ee5\u7406\u89e3\r\n\/\/ \u90a3\u6211\u7528function\u628a\u5404\u5c0f\u529f\u80fd\u5305\u8d77\u4f86\u597d\u4e86\uff01\r\n\r\n\/\/ \u5148\u66ff\u6309\u9215\u52a0\u4e0aclick event\uff0c\u9ede\u4e86\u4e4b\u5f8c\u5c31\u9001\u51faajax\uff0c\r\n\/\/ \u628a\u9019\u500b\u8863\u670d\u52a0\u5165\u6211\u7684\u6700\u611b\r\nfunction setupToLikeButton(){\r\n    \/\/ some codes\r\n    $('.to_like').click(function(e){\r\n        \/\/ some codes\r\n    });\r\n}\r\n\r\n\/\/ \u518d\u4f86\u66ff\u5df2\u7d93\u6309\u8b9a\u904e\u7684\u6771\u897f\u52a0\u4e0aclick event\uff0c\r\n\/\/ \u9ede\u4e0b\u53bb\u5c31\u9001\u51faajax\uff0c\u5f9e\u6211\u7684\u6700\u611b\u79fb\u9664\r\nfunction setupLikedButton(){\r\n    \/\/ some codes\r\n    $('.liked').click(function(e){\r\n        \/\/ some codes\r\n    });\r\n}\r\n\r\n\/\/ \u5927\u529f\u544a\u6210\uff0c\u5beb\u500b\u300c\u521d\u59cb\u5316\u300d\u529f\u80fd\r\n\/\/ \u6b63\u5f0f\u57f7\u884cclothing.js\u9019\u500b\u5049\u5927\u7684\u6a21\u7d44\r\nfunction registerLikeButtonEvent(){\r\n    setupToLikeButton();\r\n    setupLikedButton();\r\n}<\/pre>\n<\/blockquote>\n<p>\u7136\u5f8c\u5728\u6240\u6709\u9700\u8981\u300c\u6309\u8b9a\u300d\u529f\u80fd\u7684\u9801\u9762\uff0c\u52a0\u5165\u9019\u4e9b\u7a0b\u5f0f\u78bc\uff1a<\/p>\n<blockquote>\n<pre>&lt;script src=\"\/assets\/js\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/assets\/js\/clothing.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    $(document).ready(function(){\r\n        registerLikeButtonEvent();\r\n    });\r\n&lt;\/script&gt;<\/pre>\n<\/blockquote>\n<p>\u5beb\u5b8c\u4e4b\u5f8c\uff0c\u518d\u770b\u4e86\u4e00\u773c\uff0c\u4e00\u80a1\u6dbc\u610f\u4e0a\u5fc3\u982d\uff0c\u89ba\u5f97\u9019\u4e9b\u7a0b\u5f0f\u78bc\u771f\u7684\u5f88\u53ef\u60b2\u3002<\/p>\n<ul>\n<li>\u9019\u53ea\u662f\u628a\u4e00\u4e32js code\uff0c\u7528function\u96a8\u4fbf\u5305\u4e00\u5305\u3001\u628a\u529f\u80fd\u96a8\u4fbf\u5206\u958b\u800c\u5df2<\/li>\n<li>\u5728\u6240\u6709\u9700\u8981\u300c\u6309\u8b9a\u529f\u80fd\u300d\u7684\u9801\u9762\u52a0\u4e0a\u4e00\u884cregisterLikeButtonEvent()\uff0c\u611f\u89ba\u4e0d\u662f\u6a21\u7d44\u5316\uff08\u4e00\u9ede\u4e5f\u4e0d\u7269\u4ef6\u5c0e\u5411\uff09\uff0c\u4f9d\u7136\u505c\u7559\u5728procedural programming\uff08\u9019\u908a\u57f7\u884c\u4e00\u4e32code\u3001\u518d\u8df3\u904e\u53bb\u57f7\u884c\u90a3\u908a\u4e00\u4e32code\uff0c\u6709bug\u7684\u6642\u5019\u5149tracing code\u5c31\u7d2f\u6b7b\u4eba\uff09<\/li>\n<li>setupToLikeButton\u8ddfsetupLikedButton\u53ef\u80fd\u6703\u88ab\u8aa4\u7528\u3002\u61c9\u8a72\u7981\u6b62\u5728registerLikeButtonEvent\u4ee5\u5916\u7684\u5730\u65b9\u57f7\u884c\uff08\u6709\u9ede\u50cfprivate method\uff09<\/li>\n<li>\u591a\u4e86setupToLikeButton\u3001setupLikedButton\u3001registerLikeButtonEvent\u4e09\u500bglobal function\uff0c\u611f\u89ba\u5c31\u662f\u5f88\u4e0d\u723d<\/li>\n<\/ul>\n<p>\u6211\u5c0d\u9019\u4e32code\u5f88\u4e0d\u6eff\u610f\u3001\u89ba\u5f97\u61c9\u8a72\u6709\u66f4\u597d\u7684pattern\u3002<\/p>\n<p>\u7acb\u99ac\u4e0a\u7db2\u8cb7\u4e09\u672c\u66f8<\/p>\n<ul>\n<li>JavaScript \u8a2d\u8a08\u6a21\u5f0f<\/li>\n<li>JavaScript\u5927\u5168(\u7b2c\u516d\u7248)<\/li>\n<li>JavaScript\uff1a\u512a\u826f\u90e8\u5206<\/li>\n<\/ul>\n<p>\u5176\u4e2d\u300cJavaScript \u8a2d\u8a08\u6a21\u5f0f\u300d\u679c\u7136\u662f\u958b\u5377\u6709\u76ca\u3002\u4e0b\u9762\u5c31\u662f\u61c9\u7528Module Pattern\u4e4b\u5f8c\u7684\u5beb\u6cd5\u3002<\/p>\n<blockquote>\n<pre>\/\/ clothing.js\r\n\r\n\/\/ \u5148\u505a\u51fa\u4e00\u500b\u547d\u540d\u7a7a\u9593\uff0c\u8b93\u8b8a\u6578\u540d\u7a31\u7559\u5728local\r\nvar LikeButtonModule;\r\n\r\nLikeButtonModule = (function(){\r\n\r\n    \/\/ \u63d0\u793a\u4f7f\u7528\u8005\u9019\u500b\u6a21\u7d44\u8ddfjQuery\u6709\u76f8\u4f9d\u6027\r\n    if (!window.jQuery) { throw new Error(\"LikeButtonModule requires jQuery\") }\r\n\r\n    \/\/ this line declares the module dependency and\r\n    \/\/ gives the global variable a local reference.\r\n    \/\/ \u9019\u884c\u53ef\u4ee5\u589e\u9032\u6548\u80fd\r\n    var $ = window.jQuery;\r\n    var _setupToLikeButton = function(){\r\n        \/\/ some codes\r\n        $('.to_like').click(function(e){\r\n            \/\/ some codes\r\n        });\r\n    }\/\/ end _setupToLikeButton\r\n\r\n    var _setupLikedButton = function(){\r\n        \/\/ some codes\r\n        $('.liked').click(function(e){\r\n            \/\/ some codes\r\n        });\r\n    }\/\/ end _setupLikedButton\r\n\r\n    \/\/ the public API interface\r\n    return {\r\n        initialize: function(){\r\n            \/\/ initialization\r\n            _setupToLikeButton();\r\n            _setupLikedButton();\r\n        }\r\n    };\r\n}());<\/pre>\n<\/blockquote>\n<p>\u7136\u5f8c\u5728\u6240\u6709\u9700\u8981\u300c\u6309\u8b9a\u300d\u529f\u80fd\u7684\u9801\u9762\uff0c\u52a0\u5165\u9019\u4e9b\u7a0b\u5f0f\u78bc\uff1a<\/p>\n<blockquote>\n<pre>&lt;script src=\"\/assets\/js\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"\/assets\/js\/clothing.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n    $(document).ready(function(){\r\n        LikeButtonModule.initialize();\r\n    });\r\n&lt;\/script&gt;<\/pre>\n<\/blockquote>\n<p>\u5404\u4f4d\u89ba\u5f97\uff0c\u6709\u6c92\u6709\u6bd4\u8f03\u6a21\u7d44\u5316\u7684\u611f\u89ba\u5462\uff1f<\/p>\n<h3>Q&amp;A<\/h3>\n<p><em>Q1: \u70ba\u4ec0\u9ebc\u00a0setupToLikeButton\u51fd\u5f0f\u524d\u9762\u591a\u4e86\u5e95\u7dda\uff1f<\/em><\/p>\n<p>\u53ea\u662f\u547d\u540d\u6163\u4f8b\uff0c\u63d0\u9192developer\u5b83\u6709private\u6027\u8cea\u3002<\/p>\n<p><em>Q2: \u90a3setupToLikeButton\u70ba\u4f55\u6703\u5f97\u5230private\u6027\u8cea\uff1f<\/em><\/p>\n<p>\u56e0\u70ba\u5b83\u662ffunction\u5167\u7684\u4e00\u500bvar\uff0c\u88ab\u9650\u5b9a\u5728function\u7684closure\u5167\uff0c\u6240\u4ee5function\u4ee5\u5916\u7684\u5730\u65b9\u4e0d\u80fd\u57f7\u884c\u5b83\u3002<\/p>\n<p><em>Q3:\u00a0LikeButtonModule\u53ea\u6709\u63d0\u4f9b\u4e00\u500binitialize\u51fd\u5f0f\u7d66\u5225\u4eba\u4f7f\u7528\uff1f\u9019\u4ec0\u9ebc\u721b\u6a21\u7d44\uff1f<\/em><\/p>\n<p>\u7b49\u5230\u300c\u6309\u8b9a\u7cfb\u7d71\u300d\u9700\u8981\u7684\u529f\u80fd\u66f4\u8907\u96dc\u3001\u66f4\u8c50\u5bcc\u6642\uff0c\u53ef\u4ee5\u5728\u6700\u5f8creturn\u7684\u7269\u4ef6\u5167\u5b9a\u7fa9\u6a21\u7d44\u516c\u958bAPI\uff0c\u5230\u6642\u9019\u500bpattern\u6703\u770b\u8d77\u4f86\u5f88\u5b8c\u6574\u5f88\u6f02\u4eae\u3002<\/p>\n<p><em>Q4: \u6211\u770b\u5230\u4e00\u500b\u5f88\u602a\u7684\u6587\u6cd5 (function(){}()); \u8acb\u554f\u5b83\u662f\u4ec0\u9ebc\uff1f<\/em><\/p>\n<p>\u90a3\u662fJavaScript\u7684\u7acb\u5373\u51fd\u5f0f\u3002\u7c21\u55ae\u4f86\u8aaa\u5c31\u662f\u5b9a\u7fa9\u4e00\u500bfunction\u7136\u5f8c\u99ac\u4e0a\u57f7\u884c\u5b83\u3002\u6ce8\u610f\u9019\u500b\u51fd\u5f0f\u6700\u5f8creturn\u4e00\u500b\u7269\u4ef6\uff0c\u800c\u9019\u500b\u7269\u4ef6\u4e5f\u5c31\u662f\u9019\u500b\u6a21\u7d44\u7684\u516c\u958bAPI\u4ecb\u9762\u3002<\/p>\n<p>(Photo via \u00a0<a href=\"https:\/\/www.flickr.com\/photos\/alisonchristine\/\">Alison Christine<\/a>, CC licensed)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u5728\u958b\u767c\u300c\u6309\u8b9a\u300d\u529f\u80fd\uff0c\u4e5f\u5c31\u662f\u985e\u4f3c\u5c0d\u5546\u54c1\u5217\u8868\u300c\u6309\u8b9a\u300d\u6216\u662f\u300c\u52a0\u5165\u6211\u7684\u6700\u611b\u300d\u4e4b\u985e\u7684\u529f\u80fd\u3002 \uff08\u672c\u7bc7\u4e0d\u8a0e\u8ad6server &hellip; <a href=\"https:\/\/blog.turn.tw\/?p=428\" class=\"more-link\">\u7e7c\u7e8c\u95b1\u8b80 <span class=\"screen-reader-text\">\u96e2\u958bJavaScript\u65b0\u624b\u6751\uff1aModule Pattern<\/span> <span class=\"meta-nav\">&rarr;<\/span> <\/a><\/p>\n","protected":false},"author":1,"featured_media":449,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/posts\/428"}],"collection":[{"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=428"}],"version-history":[{"count":20,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/posts\/428\/revisions"}],"predecessor-version":[{"id":450,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/posts\/428\/revisions\/450"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/media\/449"}],"wp:attachment":[{"href":"https:\/\/blog.turn.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}