{"id":588,"date":"2008-10-07T20:10:04","date_gmt":"2008-10-07T12:10:04","guid":{"rendered":"http:\/\/fdream.net\/blog\/article\/588.aspx"},"modified":"2008-10-07T20:10:57","modified_gmt":"2008-10-07T12:10:57","slug":"%5b%e7%bf%bb%e8%af%91%5djQuery%e5%92%8cMooTools%e7%9a%84%e7%9c%9f%e6%ad%a3%e5%8c%ba%e5%88%ab%ef%bc%88%e4%b8%8a%ef%bc%89","status":"publish","type":"post","link":"https:\/\/fdream.net\/blog\/article\/588","title":{"rendered":"[\u7ffb\u8bd1]jQuery\u548cMooTools\u7684\u771f\u6b63\u533a\u522b\uff08\u4e0a\uff09"},"content":{"rendered":"

\u81ea\u5df1\u4e00\u76f4\u5728\u7528MooTools\u6846\u67b6<\/a>\uff0c\u5076\u7136\u770b\u89c1\u8fd9\u7bc7\u6587\u7ae0\uff0c\u4f5c\u8005\u662fMooTools Team\u7684\u6210\u5458\u4e4b\u4e00\uff0c\u8bb2\u89e3\u4e86jQuery\u548cMooTools\u7684\u4e00\u70b9\u70b9\u533a\u522b\uff0c\u4e3b\u8981\u662f\u6211\u89c9\u5f97\u4ed6\u5199JavaScript\u4ee3\u7801\u548c\u4ed6\u7684\u601d\u7ef4\u65b9\u5f0f\u5f88\u503c\u5f97\u5b66\u4e60\u3002\u53e6\u5916\uff0c\u5bf9JavaScript\u7684\u7f16\u7a0b\u601d\u60f3\u548c\u5bf9\u6846\u67b6\u7684\u9009\u62e9\u90fd\u6709\u5f88\u591a\u5f88\u597d\u7684\u5efa\u8bae\uff0c\u5bf9\u4e8e\u72b9\u8c6b\u5728\u5404\u79cd\u6846\u67b6\u4e0a\u7684\u4eba\u6709\u5f88\u597d\u7684\u6307\u5bfc\u4f5c\u7528\uff0c\u53e6\u5916\u5bf9\u4e8e\u60f3\u6df1\u5165\u5bf9\u6846\u67b6\u8fdb\u884c\u7814\u7a76\u6216\u8005\u60f3\u81ea\u5df1\u5f00\u53d1\u6846\u67b6\u7684\u4eba\u4e5f\u6709\u5f88\u597d\u7684\u5efa\u8bae\u3002\u6587\u7ae0\u867d\u7136\u5f88\u957f\uff0c\u4f46\u662f\u6211\u89c9\u5f97\u4e0d\u9519\uff0c\u7136\u540e\u5c31\u7ffb\u8bd1\u4e86\u3002\u6c34\u5e73\u6709\u9650\uff0c\u6587\u7b14\u7c97\u964b\uff0c\u5176\u4e2d\u6709\u5c11\u6570\u5730\u65b9\u81ea\u5df1\u90fd\u89c9\u5f97\u7ffb\u8bd1\u5f97\u6709\u4e9b\u7275\u5f3a\uff0c\u6b22\u8fce\u6279\u8bc4\u6307\u6b63\u3002<\/p>\n

\u7531\u4e8e\u6587\u7ae0\u592a\u957f\uff0c\u6211\u8fd9\u91cc\u5c31\u5206\u4e86\u4e0a\u4e0b\u4e24\u7bc7\uff0c\u4e0b\u6587\u5728\u8fd9\u91cc\uff1a[\u7ffb\u8bd1]jQuery\u548cMooTools\u7684\u771f\u6b63\u533a\u522b\uff08\u4e0b\uff09<\/a><\/p>\n

\u539f\u6587\uff1ajQuery, MooTools, which is the most popular and well represented framework and What Really Makes One Framework Different From Another<\/a><\/p>\n

\u6807\u9898\uff1a
jQuery, MooTools, which is the most popular and well represented framework and What Really Makes One Framework Different From Another<\/b>
jQuery\u548cMooTools\uff0c\u54ea\u4e00\u4e2a\u6846\u67b6\u66f4\u53d7\u6b22\u8fce\u6709\u66f4\u597d\u7684\u8868\u73b0\u4ee5\u53ca\u5b83\u4eec\u4e4b\u95f4\u7684\u771f\u6b63\u533a\u522b\u662f\u4ec0\u4e48<\/b><\/p>\n

I’ve been experimenting with several javascript libraries as well\u2026 the problem is finding the right mix of features\u2026 Ext.js is very extensive, but very large and complex: steep learning curve.<\/p>\n

\u6211\u4e00\u76f4\u5728\u5c1d\u8bd5\u4e00\u4e9b\u4e0d\u540c\u7684JavaScript\u5e93\uff0c\u8bd5\u56fe\u627e\u5230\u4e00\u4e9b\u5408\u9002\u7684\u7279\u6027\u7ec4\u5408\uff1aExt.js\u975e\u5e38\u597d\u6269\u5c55\uff0c\u4f46\u662f\u592a\u5927\u592a\u590d\u6742\uff0c\u5b66\u4e60\u96be\u5ea6\u5f88\u5927\u3002<\/p>\n

jQuery is very easy to learn, has some great features, but soon you start looking in the plugins database for much needed functionality that’s missing in the official library. The plugin feature is great, but there’s a downside as well\u2026 soon you get drowned by the number of available plugins, spending a lot time checking out which ones match the quality of the core library. It’s a good thing some plugins get listed on the main site, but still, it takes a great deal of effort to find that right mix. I’ve been working with Microsoft Ajax library as well, but don’t like their control extension framework (which is quite complex).<\/p>\n

jQuery\u975e\u5e38\u5bb9\u6613\u5b66\u4e60\uff0c\u6709\u5f88\u6770\u51fa\u7684\u7279\u6027\uff0c\u4f46\u662f\u5f53\u4f60\u4ece\u63d2\u4ef6\u5e93\u91cc\u53bb\u627e\u66f4\u591a\u7684\u529f\u80fd\u65f6\uff0c\u53d1\u73b0\u5b98\u65b9\u7684\u5e93\u91cc\u9762\u6839\u672c\u5c31\u6ca1\u6709\u3002\u63d2\u4ef6\u7279\u6027\u975e\u5e38\u597d\uff0c\u4f46\u662f\u4e5f\u6709\u5f88\u4e0d\u597d\u7684\u5730\u65b9\u2026\u2026\u5f88\u5feb\u4f60\u5c31\u4f1a\u88ab\u65e0\u6570\u4e2a\u53ef\u7528\u7684\u63d2\u4ef6\u5f04\u5f97\u6655\u5934\u8f6c\u5411\uff0c\u4f60\u9700\u8981\u82b1\u5f88\u591a\u65f6\u95f4\u53bb\u786e\u5b9a\u54ea\u4e9b\u63d2\u4ef6\u624d\u548c\u6838\u5fc3\u5e93\u7684\u8d28\u91cf\u76f8\u5339\u914d\u3002\u5982\u679c\u4e3b\u9875\u4e0a\u5217\u51fa\u4e86\u8fd9\u4e9b\u63d2\u4ef6\u8fd8\u597d\uff0c\u4f46\u662f\uff0c\u8fd8\u662f\u8981\u82b1\u8d39\u5f88\u5927\u7684\u529b\u6c14\u53bb\u627e\u5230\u5408\u9002\u7684\u7279\u6027\u7ec4\u5408\u3002\u6211\u4e5f\u540c\u65f6\u5728\u4f7f\u7528Microsoft Ajax\u5e93\uff0c\u4f46\u662f\u4e0d\u559c\u6b22\u4ed6\u4eec\u7684\u63a7\u4ef6\u6269\u5c55\u6846\u67b6\uff08\u5b83\u4eec\u5b9e\u5728\u662f\u592a\u590d\u6742\u4e86\uff09\u3002<\/p>\n

So, I must first attest that hands down, jQuery was the most popular and well represented framework there. They ruled the roost. John Resig (creator of jQuery) spoke 7 times in 3 days, Microsoft demonstrated how jQuery is included in its SDK, and the crowd attending was definitely there to talk about the framework. More than anything, this made it clear to me that jQuery is doing something right.<\/p>\n

\u56e0\u6b64\uff0c\u6211\u5fc5\u987b\u9996\u5148\u5f88\u8f7b\u800c\u6613\u4e3e\u5730\u8bc1\u660e\uff1ajQuery\u662f\u6700\u53d7\u6b22\u8fce\u4ee5\u53ca\u6709\u66f4\u597d\u8868\u73b0\u7684\u6846\u67b6\u3002\u4ed6\u4eec\u662f\u6700\u597d\u7684\u3002John Resig\uff08jQuery\u7684\u4f5c\u8005\uff09\u5728\u4e09\u5929\u91cc\u66fe\u4e03\u6b21\u8bf4\uff1a\u201cMicrosoft\u6f14\u793a\u4e86\u600e\u6837\u628ajQuery\u5305\u542b\u8fdb\u4e86\u5b83\u7684SDK\uff0c\u51fa\u5e2d\u4f1a\u8bae\u7684\u4eba\u4e5f\u975e\u5e38\u80af\u5b9a\u5730\u8c08\u8bba\u4e86\u8fd9\u4e2a\u6846\u67b6\u3002\u8fd9\u4e9b\u90fd\u6e05\u695a\u5730\u8ba9\u6211\u770b\u5230\uff1ajQuery\u6b63\u5728\u505a\u4e00\u4e9b\u6b63\u786e\u7684\u4e8b\u60c5\u3002\u201d<\/p>\n

Part of the task I set for myself in attending the conference was to attend as many of these jQuery sessions as I could both to learn as much of jQuery as I could (I have, in the past, dug into it, but I wanted to soak up as much as I could from the development team and John) and also to see if I could pick up on what accounts for the popularity of the framework.<\/p>\n

\u6211\u53bb\u53c2\u52a0\u8fd9\u4e2a\u4f1a\u8bae\u7684\u4e00\u90e8\u5206\u4efb\u52a1\u5c31\u662f\u5c3d\u53ef\u80fd\u591a\u5730\u53c2\u4e0ejQuery\u7684\u4ea4\u6d41\u548c\u5b66\u4e60\uff08\u6211\u66fe\u7ecf\u4e5f\u5f88\u6df1\u5165\u5730\u5b66\u4e60\u8fc7\uff0c\u4f46\u662f\u6211\u5e0c\u671b\u4ece\u5f00\u53d1\u56e2\u961f\u548cJohn\u90a3\u91cc\u5b66\u4e60\u5230\u66f4\u591a\u4e1c\u897f\uff09\uff0c\u540c\u65f6\u4e5f\u53ef\u4ee5\u770b\u4e00\u4e0b\u6211\u662f\u5426\u80fd\u591f\u627e\u5230\u8fd9\u4e2a\u6846\u67b6\u53d7\u6b22\u8fce\u7684\u539f\u56e0\u3002<\/p>\n

This requires a bit of explanation. The MooTools team (of which I am a part) has never really focused on how popular the framework is. We are interested in writing it for our own use and for its own sake, but we don’t really spend much energy trying to convince other people to use it. We don’t consider ourselves adversaries to other frameworks – as I’ve heard it put on numerous recent occassions, we’re at war with the browsers, not each other. In my own posts on the topic, my suggestion to people is to try a couple of options and choose the framework that suits your needs and your styles. You really can’t make a bad choice (so please stop arguing about it!). jQuery, Prototype. YUI, Dojo, MooTools – we’re all doing the same things just using different methods. More on this in a little bit, because I’ve started to think about this more lately.<\/p>\n

\u8fd9\u91cc\u9700\u8981\u4e00\u4e9b\u89e3\u91ca\u3002MooTools\u56e2\u961f\uff08\u6211\u4e5f\u662f\u5176\u4e2d\u4e4b\u4e00\uff09\u4ece\u6765\u6ca1\u6709\u771f\u6b63\u5173\u6ce8\u8fc7\u8fd9\u4e2a\u6846\u67b6\u6709\u591a\u53d7\u6b22\u8fce\u3002\u6211\u4eec\u53ea\u662f\u5bf9\u5199\u8fd9\u4e2a\u6846\u67b6\u611f\u5174\u8da3\uff0c\u4e3a\u6211\u4eec\u81ea\u5df1\u4f7f\u7528\u548c\u5b83\u672c\u8eab\u76ee\u7684\u53bb\u5199\uff0c\u4f46\u662f\u6211\u4eec\u771f\u7684\u6ca1\u6709\u82b1\u5f88\u591a\u7cbe\u529b\u53bb\u8ba9\u5176\u4ed6\u4eba\u53bb\u4f7f\u7528\u8fd9\u4e2a\u6846\u67b6\u3002\u6211\u4eec\u4ece\u4e0d\u8ba4\u4e3a\u5176\u5b83\u6846\u67b6\u662f\u6211\u4eec\u7684\u7ade\u4e89\u5bf9\u624b\u2014\u2014\u56e0\u4e3a\u6211\u66fe\u7ecf\u5728\u5f88\u591a\u573a\u5408\u90fd\u542c\u8bf4\u8fc7\u8fd9\u6837\u7684\u8bdd\uff0c\u6211\u4eec\u5728\u548c\u6d4f\u89c8\u5668\u8fdb\u884c\u6597\u4e89\uff0c\u800c\u4e0d\u662f\u76f8\u4e92\u6597\u4e89\u3002\u5728\u6211\u7684\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u7ed9\u4f60\u4eec\u7684\u5efa\u8bae\u662f\uff1a\u591a\u5c1d\u8bd5\u4e00\u4e9b\u9009\u62e9\uff0c\u7136\u540e\u9009\u62e9\u9002\u5408\u4f60\u7684\u9700\u6c42\u548c\u4f60\u7684\u98ce\u683c\u7684\u6846\u67b6\u3002\u4f60\u771f\u7684\u4e0d\u80fd\u505a\u4e00\u4e2a\u574f\u7684\u9009\u62e9\uff08\u56e0\u6b64\uff0c\u8bf7\u505c\u6b62\u4e89\u5435\uff01\uff09\u3002jQuery\u3001Prototype\u3001YUI\u3001Dojo\u3001MooTools\u2014\u2014\u6211\u4eec\u90fd\u53ea\u662f\u7528\u4e0d\u540c\u7684\u65b9\u6cd5\u5728\u505a\u540c\u6837\u7684\u4e8b\u3002\u5173\u4e8e\u8fd9\u4e00\u70b9\u5199\u5f97\u6709\u70b9\u591a\uff0c\u56e0\u4e3a\u6211\u6700\u8fd1\u4e00\u76f4\u5728\u601d\u8003\u8fd9\u4e2a\u3002<\/p>\n

Bill Scott Continues to Teach Me Things<\/b><\/p>\n

Bill Scott\u5728\u7ee7\u7eed\u6559\u6211\u4e00\u4e9b\u4e8b\u60c5<\/b><\/p>\n

While at the event in Boston, I ran into Bill Scott. Bill worked at Yahoo on the YUI team as their lead evangelist and is a great speaker (though he wasn\u2019t speaking in Boston other than a 5 minute \u201cflash\u201d talk about his current work). Bill helped to start the Rico framework a while back (I hope I don\u2019t mischaracterize this – I don\u2019t really know his history there), and then switched to YUI. Then he left Yahoo about a year ago and moved to Netflix and is leading the team there doing a lot of stuff – not just JavaScript (focused more on their new API and the user experience as a whole). Netflix is using jQuery and I had a chance to sit down and talk to him about that.<\/p>\n

\u5f53\u8fd9\u4e2a\u4e8b\u60c5\u8fd8\u5728Boston\u7684\u65f6\u5019\uff0c\u6211\u5076\u7136\u9047\u89c1\u4e86Bill Scott\u3002Bill\u662fYahoo\u7684YUI\u56e2\u961f\u7684\u9886\u5bfc\u8005\uff0c\u662f\u4e00\u4e2a\u5f88\u597d\u7684\u6f14\u8bb2\u8005\uff08\u5c3d\u7ba1\u4ed6\u5728Boston\u7684\u65f6\u5019\u53ea\u505a\u4e86\u4e00\u4e2a\u5173\u4e8e\u4ed6\u5f53\u524d\u5de5\u4f5c\u7684\u4e94\u5206\u949f\u7684\u201c\u95ea\u7535\u6f14\u8bb2\u201d\uff09\u3002\u4e00\u6bb5\u65f6\u95f4\u4ee5\u524d\uff0c\u4ed6\u5e2e\u52a9\u5f00\u59cb\u4e86Rico\u6846\u67b6\u7684\u5f00\u53d1\uff0c\u968f\u540e\u8f6c\u5230\u4e86YUI\u3002\u63a5\u7740\u5728\u4e00\u5e74\u524d\uff0c\u4ed6\u79bb\u5f00\u4e86Yahoo\uff0c\u53bb\u4e86Netflix\uff0c\u5e26\u9886\u56e2\u961f\u505a\u4e86\u8bb8\u591a\u5de5\u4f5c\u2014\u2014\u4e0d\u53ea\u662fJavaScript\uff08\u66f4\u591a\u5730\u5173\u6ce8\u4e86\u4ed6\u4eec\u7684\u65b0API\u548c\u7528\u6237\u4f53\u9a8c\uff09\u3002Netflix\u4e5f\u5728\u4f7f\u7528jQuery\uff0c\u56e0\u6b64\u6211\u6709\u673a\u4f1a\u548c\u4ed6\u5750\u4e0b\u6765\u8c08\u8bba\u8fd9\u4e9b\u4e8b\u60c5\u3002<\/p>\n

I want to be careful here, and remind anyone reading this that I don\u2019t have anything bad to say about jQuery, and I don\u2019t want to start a flame war on this post or others. jQuery and MooTools (and Prototype and Dojo and YUI, yada, yada, yada) are different and not competing with each other. They solve problems in different ways and I, personally, happen to like the way MooTools solves the problems it tries to solve. It\u2019s way too easy for me to make an incorrect statement about jQuery as I\u2019m still learning it, so please forgive me if I misspeak (er- mistype?) here.<\/p>\n

\u5728\u8fd9\u91cc\u6211\u8981\u5c0f\u5fc3\u4e00\u4e9b\uff0c\u5e76\u63d0\u9192\u6b63\u5728\u9605\u8bfb\u8fd9\u7bc7\u6587\u7ae0\u7684\u5404\u4f4d\u8bfb\u8005\uff0c\u6211\u6ca1\u6709\u4efb\u4f55\u5173\u4e8ejQuery\u7684\u574f\u8bdd\u8981\u8bf4\uff0c\u6211\u4e5f\u4e0d\u60f3\u5728\u8fd9\u7bc7\u6587\u7ae0\u6216\u8005\u5176\u4ed6\u6587\u7ae0\u4e2d\u6311\u8d77\u4e00\u573a\u65e0\u8c13\u7684\u4e89\u8bba\u3002jQuery\u548cMooTools\uff08\u4ee5\u53caPrototype\u3001Dojo\u3001YUI\u7b49\u7b49\u7b49\u7b49\uff09\u90fd\u662f\u4e0d\u540c\u7684\u800c\u4e14\u6ca1\u6709\u76f8\u4e92\u7ade\u4e89\u3002\u5b83\u4eec\u7528\u4e0d\u540c\u7684\u65b9\u5f0f\u89e3\u51b3\u95ee\u9898\uff0c\u800c\u6211\uff0c\u5c31\u4e2a\u4eba\u800c\u8a00\uff0c\u78b0\u5de7\u559c\u6b22Moot\u89e3\u51b3\u95ee\u9898\u7684\u65b9\u5f0f\u4ee5\u53ca\u5b83\u5c1d\u8bd5\u89e3\u51b3\u95ee\u9898\u7684\u65b9\u5f0f\u3002\u7531\u4e8e\u6211\u8fd8\u5728\u5b66\u4e60jQuery\uff0c\u56e0\u6b64\u5f88\u5bb9\u6613\u6211\u53ef\u80fd\u5c31\u4f1a\u5199\u4e00\u4e9b\u4e0d\u6b63\u786e\u7684jQuery\u8bed\u53e5\uff0c\u5982\u679c\u6211\u6709\u4ec0\u4e48\u8bf4\u5f97\u4e0d\u6b63\u786e\u7684\u5730\u65b9\uff0c\u8fd8\u8bf7\u5927\u5bb6\u8c05\u89e3\u3002<\/p>\n

Programming to the Pattern<\/b><\/p>\n

\u7f16\u7a0b\u6a21\u5f0f<\/b><\/p>\n

So in talking to Bill, I spoke about some of my recent thinking about what I\u2019ve been calling \u201cProgramming to the Pattern.\u201d It goes something like this: when I write my code, I can choose to be an architect, or a construction worker. I can design, or I can implement. In reality, I must do both, but I can choose which one I want to do more and, in many ways, it\u2019s possible for me to do almost entirely one or the other – though not 100%.<\/p>\n

\u5728\u548cBill\u7684\u8c08\u8bdd\u4e2d\uff0c\u6211\u8bf4\u4e86\u6211\u7684\u4e00\u4e9b\u5173\u4e8e\u201c\u7f16\u7a0b\u6a21\u5f0f\u201d\u7684\u601d\u8003\u3002\u6211\u6240\u8c13\u7684\u201c\u7f16\u7a0b\u6a21\u5f0f\u201d\u662f\u8fd9\u6837\u7684\uff1a\u5f53\u6211\u5199\u6211\u7684\u4ee3\u7801\u7684\u65f6\u5019\uff0c\u6211\u53ef\u4ee5\u9009\u62e9\u505a\u4e00\u4e2a\u67b6\u6784\u5e08\uff0c\u6216\u8005\u4e00\u4e2a\u4ee3\u7801\u7f16\u5199\u8005\u3002\u6211\u53ef\u4ee5\u8bbe\u8ba1\uff0c\u6211\u4e5f\u53ef\u4ee5\u5b9e\u65bd\u3002\u4e8b\u5b9e\u4e0a\uff0c\u6211\u5fc5\u987b\u90fd\u505a\uff0c\u4f46\u662f\u6211\u5fc5\u987b\u9009\u62e9\u6211\u66f4\u60f3\u505a\u7684\u4e00\u4e2a\uff0c\u800c\u4e14\uff0c\u5728\u8bb8\u591a\u60c5\u51b5\u4e0b\uff0c\u4e0d\u8bba\u662f\u6211\u8fd8\u662f\u5176\u4ed6\u4eba\uff0c\u90fd\u53ef\u80fd\u4e00\u4e2a\u4eba\u53bb\u5b8c\u6210\u51e0\u4e4e\u6240\u6709\u7684\u5de5\u4f5c\u2014\u2014\u5c3d\u7ba1\u4e0d\u662f100%\u3002<\/p>\n

What the hell am I talking about? Let me put it to you this way: if you write 20 lines of code to describe a user interaction on a page to make it snazzy or easier to use, is it worth writing another 5 or 10 lines to make that code reusable? If you program the experience directly, you\u2019ll always write it again and again. But if you program the pattern, you\u2019ll write less and less.<\/p>\n

\u6211\u7a76\u7adf\u5728\u8bf4\u4e9b\u4ec0\u4e48\uff1f\u8ba9\u6211\u8fd9\u6837\u8ddf\u4f60\u8bb2\uff1a\u5982\u679c\u4f60\u5199\u4e8620\u884c\u4ee3\u7801\uff0c\u6765\u63cf\u8ff0\u4e00\u4e2a\u9875\u9762\u4e0a\u7684\u7528\u6237\u4ea4\u4e92\uff0c\u4ee5\u4fbf\u4f7f\u9875\u9762\u770b\u8d77\u6765\u5f88\u6f02\u4eae\u6216\u8005\u5f88\u6613\u7528\uff0c\u90a3\u4e48\u5b83\u662f\u4e0d\u662f\u503c\u5f97\u518d\u591a\u51995\u884c\u6216\u800510\u884c\u4ee3\u7801\u6765\u4f7f\u5176\u53ef\u4ee5\u88ab\u91cd\u590d\u4f7f\u7528\uff1f\u5982\u679c\u4f60\u53ea\u662f\u4f9d\u636e\u7ecf\u9a8c\u76f4\u63a5\u7f16\u7a0b\uff0c\u90a3\u4e48\u4f60\u9700\u8981\u5199\u4e00\u904d\u53c8\u4e00\u904d\u3002\u4f46\u662f\u5982\u679c\u4f60\u6309\u7167\u6a21\u5f0f\u6765\u5199\uff0c\u4f60\u8981\u5199\u7684\u4ee3\u7801\u4f1a\u8d8a\u6765\u8d8a\u5c11\u3002<\/p>\n

Consider a user experience where, say, one has a log-in box that shows up when the user clicks \u201clog in.\u201d The user clicks \u201clog in\u201d and the box appears. The user fills out the form and the box displays a spinning indicator while it sends an ajax request. When the response comes back it tells (in the box) the user that they are now logged in and then a moment later it winks out.<\/p>\n

\u5047\u8bbe\u6709\u8fd9\u6837\u4e00\u4e2a\u7528\u6237\u4f53\u9a8c\uff1a\u5f53\u54df\u54e6\u96be\u602a\u4e4e\u70b9\u51fb\u201clog in\u201d\u6309\u94ae\u7684\u65f6\u5019\uff0c\u663e\u793a\u4e00\u4e2a\u767b\u9646\u6846\u3002\u5f53\u7528\u6237\u70b9\u51fb\u201clog in\u201d\u7684\u65f6\u5019\uff0c\u8fd9\u4e2a\u767b\u9646\u6846\u5c31\u51fa\u73b0\u3002\u7528\u6237\u63d0\u4ea4\u767b\u9646\u8868\u5355\uff0c\u767b\u9646\u6846\u53d1\u51fa\u4e00\u4e2aajax\u8bf7\u6c42\u5e76\u663e\u793a\u4e00\u4e2a\u63d0\u793a\u4fe1\u606f\u3002\u5f53\u8bf7\u6c42\u5b8c\u6210\u65f6\uff0c\u8fd9\u4e2a\u767b\u9646\u6846\u544a\u8bc9\u7528\u6237\u5df2\u7ecf\u767b\u9646\u4e86\u5e76\u5728\u8fc7\u4e00\u4f1a\u513f\u540e\u6d88\u5931\u3002<\/p>\n

I could express this as javascript right on the page or maybe in my site-wide code (presumably the log-in box is on every page, right?). It would look something like this (I\u2019m going to abbreviate this somewhat) – note I\u2019m using MooTools syntax here, but it looks about the same as it would in most frameworks these days, as we all borrow good ideas from each other:<\/p>\n

\u6211\u53ef\u4ee5\u7528JavaScript\u6765\u8868\u73b0\u8fd9\u4e9b\uff0c\u5c31\u5199\u5728\u5f53\u524d\u8fd9\u4e2a\u9875\u9762\u4e0a\u6216\u8005\u5728\u6211\u7684\u5168\u7ad9\u4ee3\u7801\u91cc\u9762\uff08\u53ef\u80fd\u8fd9\u4e2a\u767b\u9646\u6846\u5728\u6bcf\u4e2a\u9875\u9762\u4e0a\u90fd\u6709\uff0c\u662f\u5427\uff1f\uff09\u3002\u5b83\u53ef\u80fd\u662f\u8fd9\u6837\u4e00\u6bb5\u4ee3\u7801\uff08\u6211\u4f1a\u5728\u67d0\u79cd\u7a0b\u5ea6\u4e0a\u7701\u7565\u4e00\u4e9b\u4ee3\u7801\uff09\u2014\u2014\u6ce8\u610f\uff1a\u6211\u8fd9\u91cc\u4f7f\u7528\u7684\u662fMooTools\u7684\u8bed\u6cd5\uff0c\u4e0d\u8fc7\u5b83\u770b\u8d77\u6765\u548c\u73b0\u5728\u7684\u5927\u591a\u6570\u6846\u67b6\u90fd\u5dee\u4e0d\u591a\uff0c\u56e0\u4e3a\u6211\u4eec\u90fd\u76f8\u4e92\u501f\u9274\u597d\u7684\u70b9\u5b50\uff1a<\/p>\n

\nwindow.addEvent('domready', function(){\n    $('loginLink').addEvent('click', function(e){\n        e.stop(); \/\/don't follow the link\n        $('loginPopup').show();\n    });\n    \/\/loginPopup contains loginForm\n    $('loginForm').addEvent('submit', function(e){\n        e.stop(); \/\/don't submit the form\n        $('loginForm').send({\n            onComplete: function(result) {\n                $('loginPopup').set('html', result); \/\/show the result\n                (function(){\n                    $('loginPopup').hide();\n                }.delay(1000)); \/\/wait a sec, then hide the popup\n            }\n        })\n    });\n});\n<\/pre>\n<\/p>\n
Pretty straight forward, right? But what if we take a step back and ask ourselves, what\u2019s this pattern here? Could we ever see a part of it again? Certainly, a popup that contains a form that submits, updates itself and then does something could crop up again. Right?<\/p>\n
\u7f8e\u4e3d\u7684\u76f4\u63a5\u4e86\u5f53\uff0c\u662f\u5427\uff1f\u4f46\u662f\u6211\u4eec\u9000\u540e\u4e00\u6b65\uff0c\u7136\u540e\u95ee\u6211\u4eec\u81ea\u5df1\uff1a\u8fd9\u662f\u4ec0\u4e48\u6a21\u5f0f\u5462\uff1f\u6211\u4eec\u80fd\u518d\u770b\u5230\u5b83\u7684\u4e00\u90e8\u5206\u5417\uff1f\u5f53\u7136\uff0c\u4e00\u4e2a\u5f39\u51fa\u5c42\u5305\u542b\u4e00\u4e2aform\uff0c\u7136\u540e\u63d0\u4ea4\u3001\u66f4\u65b0\u81ea\u5df1\uff0c\u7136\u540e\u505a\u4e00\u4e9b\u5176\u5b83\u4e8b\u60c5\uff0c\u800c\u4e14\u53ef\u4ee5\u518d\u6b21\u51fa\u73b0\u3002\u662f\u5427\uff1f<\/p>\n
This is what I mean by \u201cProgramming the Pattern\u201d. In my old code, I would have maybe written the code above. If it were part of my site, I might have a namespace and named this a method called \u201cshowLogin\u201d, then called mySite.showLogin on domready. Or, maybe even more likely, my site would end up with a bunch of methods like this. showLogin, logOut, makeToolTips, autoScroll, setupDraggers, etc. Then I\u2019d have a method called mySite.init that called all these.<\/p>\n
\u8fd9\u5c31\u662f\u6211\u6240\u8bf4\u7684\u201c\u7f16\u7a0b\u6a21\u5f0f\u201d\u3002\u5728\u6211\u4ee5\u524d\u7684\u4ee3\u7801\u4e2d\uff0c\u6211\u53ef\u80fd\u50cf\u4e0a\u9762\u7684\u90a3\u6837\u5199\u4ee3\u7801\u3002\u5982\u679c\u5b83\u662f\u6211\u7684\u7f51\u7ad9\u7684\u4e00\u90e8\u5206\uff0c\u6211\u53ef\u80fd\u6709\u4e00\u4e2a\u540d\u5b57\u7a7a\u95f4\uff08namespace\uff09\u5e76\u4e14\u7ed9\u5b83\u4eec\u4e00\u4e2a\u53eb\u505a\u201cshowLogin\u201d\u7684\u65b9\u6cd5\uff0c\u7136\u540e\u5728on domready\u4e8b\u4ef6\u4e2d\u8c03\u7528mySite.showLogin\u3002\u6216\u8005\uff0c\u66f4\u53ef\u80fd\u662f\u8fd9\u6837\u5b50\u7684\uff0c\u6211\u7684\u7f51\u7ad9\u9700\u8981\u5f88\u591a\u8fd9\u6837\u7684\u65b9\u6cd5\u3002showLogin\u3001logOut\u3001makeToolTips\u3001autoScroll\u3001setupDraggers\u7b49\u7b49\u3002\u7136\u540e\u6211\u4f1a\u5199\u4e00\u4e2a\u53eb\u505amySite.init\u7684\u65b9\u6cd5\u6765\u8c03\u7528\u6240\u6709\u7684\u8fd9\u4e9b\u65b9\u6cd5\u3002<\/p>\n
But even moving back to my older code I would have just had a giant domready method with all these layout\/interaction instructions all in one big startup method.<\/p>\n
\u4f46\u662f\u5728\u56de\u5934\u770b\u770b\u6211\u7684\u8001\u4ee3\u7801\uff0c\u6211\u53ef\u80fd\u6709\u4e00\u4e2a\u5de8\u5927\u7684domready\u65b9\u6cd5\uff0c\u91cc\u9762\u5305\u62ec\u4e86\u6240\u6709\u7684\u8fd9\u4e9b\u5e03\u5c40\u548c\u4ea4\u4e92\u7684\u6307\u4ee4\uff0c\u4e00\u4e2a\u5f88\u5927\u7684\u542f\u52a8\u65b9\u6cd5\u3002<\/p>\n
If you\u2019ve ever had code like this, you\u2019ll know that it\u2019s never, ever fun to maintain. It takes a lot of effort to just understand what you were going after in the first place. Go look at that code example again and imagine encountering something like it that\u2019s 3 or 5 or 10 times longer and imagine encountering it again a year later. Just unraveling the intended behavior can be daunting.<\/p>\n
\u5982\u679c\u4f60\u4ece\u6765\u6ca1\u6709\u5199\u8fc7\u8fd9\u6837\u7684\u4ee3\u7801\uff0c\u4f60\u6c38\u8fdc\u4e5f\u4e0d\u4f1a\u77e5\u9053\u7ef4\u62a4\u8fd9\u4e2a\u4ee3\u7801\u7684\u4e50\u8da3\u3002\u5b83\u4f1a\u82b1\u8d39\u5927\u91cf\u7684\u7cbe\u529b\u53bb\u7406\u89e3\u5728\u7b2c\u4e00\u4ef6\u4e8b\u60c5\u4e4b\u540e\u8be5\u662f\u4ec0\u4e48\u4e8b\u60c5\u3002\u518d\u56de\u5934\u770b\u770b\u4e0a\u9762\u7684\u793a\u4f8b\u4ee3\u7801\uff0c\u60f3\u50cf\u4e00\u4e0b\uff0c\u5982\u679c\u6211\u4eec\u9047\u5230\u4e86\u7c7b\u4f3c\u7684\u4e8b\u60c5\uff0c\u4f46\u662f\u6709\u8fd9\u4e2a\u76843\u500d\u30015\u500d\u6216\u800510\u500d\u957f\uff0c\u7136\u540e\u518d\u60f3\u50cf\u4e00\u4e0b\u4e00\u5e74\u4ee5\u540e\u6211\u4eec\u518d\u6b21\u78b0\u5230\u7c7b\u4f3c\u7684\u4e8b\u60c5\u3002\u4ec5\u4ec5\u53ea\u662f\u62c6\u5206\u8fd9\u4e9b\u884c\u4e3a\u5c31\u5df2\u7ecf\u975e\u5e38\u4ee4\u4eba\u53ef\u6015\u4e86\u3002<\/p>\n
Now, let\u2019s program the pattern. A popup, with a form, that updates itself. That\u2019s a pattern that could totally crop up again. Here\u2019s the same thing as a MooTools class:<\/p>\n
\u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u6309\u7167\u6a21\u5f0f\u7f16\u7a0b\u3002\u4e00\u4e2a\u5f39\u51fa\u5c42\uff0c\u6709\u4e00\u4e2aform\uff0c\u5e76\u4e14\u81ea\u52a8\u66f4\u65b0\u3002\u8fd9\u5c31\u662f\u6211\u4eec\u8981\u91cd\u590d\u51fa\u73b0\u7684\u6a21\u5f0f\u3002\u4e0b\u9762\u662f\u4e00\u4e2aMooTools\u7c7b\uff0c\u5b9e\u73b0\u4e86\u540c\u6837\u7684\u4e1c\u897f\uff1a<\/p>\n
\nvar PopupForm = new Class({\n    Implements: [Events, Options],\n    options: {\n        requestOptions: {\/*the user can fill in additional ajax options*\/},\n        onComplete: $empty \/\/do nothing on complete by default\n    },\n    initialize: function(link, form, popup, options) {\n        this.form = $(form);\n        this.link = $(link);\n        this.popup = $(popup);\n        this.setOptions(options);\n        this.makeRequest();\n        this.attach();\n    },\n    makeRequest: function(){\n        this.request = this.form.retrieve('send', this.options.requestOptions);\n        this.request.addEvent('complete', function(response){\n            popup.set('html', response);\n            this.fireEvent('complete');\n        }.bind(this));\n    },\n    attach: function(){\n        this.link.addEvent('click', this.show.bind(this));\n        this.form.addEvent('submit', function(e){\n            e.stop();\n            this.request.send();\n        }.bind(this));\n    },\n    show: function(){\n        this.popup.show();\n    },\n    hide: function() {\n        this.popup.hide();\n    }\n});\n<\/pre>\n<\/p>\n
Now, my class is admittedly nearly twice as long, and it still isn\u2019t attached to my login link. To make that work, I have to initialize it:<\/p>\n
\u73b0\u5728\uff0c\u4e0d\u53ef\u5426\u8ba4\u7684\u662f\u6211\u7684\u7c7b\u5df2\u7ecf\u6709\u4e24\u500d\u957f\u4e86\uff0c\u4f46\u662f\u5b83\u8fd8\u4ecd\u7136\u6ca1\u6709\u4e0e\u6211\u7684\u767b\u9646\u94fe\u63a5\u5173\u8054\u8d77\u6765\u3002\u8981\u4f7f\u5176\u751f\u6548\uff0c\u6211\u8fd8\u9700\u8981\u5bf9\u5b83\u8fdb\u884c\u521d\u59cb\u5316\uff1a<\/p>\n
\nwindow.addEvent('domready', function(){\n    new PopupForm($('loginLink'), $('loginForm'), $('loginPopup'), {\n        onComplete: function(){\n            (function(){\n                this.hide();\n            }.delay(1000, this)); \/\/wait a sec, then hide the popup\n        }\n    })\n});\n<\/pre>\n<\/p>\n
Trade-offs, But Big Benefits<\/b><\/p>\n
\u6709\u6240\u53d6\u820d\uff0c\u4f46\u8ffd\u6c42\u6700\u5927\u5229\u76ca<\/b><\/p>\n
So in addition to being twice as long, I had to bang out another 9 lines before I was finished. 15 lines vs 42 doesn\u2019t look like a good trade off, but lately this is how I write nearly all my code. Changing to this way of thinking has saved me from writing many, many more lines of code and saved me a lot of time in ways I hadn\u2019t originally considered.<\/p>\n
\u9664\u4e86\u4ee3\u7801\u53d8\u6210\u4e86\u4ee5\u524d\u7684\u4e24\u500d\u957f\u4ee5\u5916\uff0c\u6211\u8fd8\u9700\u8981\u5176\u4ed6\u76849\u884c\u4ee3\u7801\u53bb\u5b8c\u6210\u8fd9\u4e2a\u4e8b\u60c5\u300215\u884c\u4ee3\u7801\u548c42\u884c\u4ee3\u7801\uff0c\u770b\u8d77\u6765\u5e76\u4e0d\u662f\u4e2a\u597d\u7684\u4ea4\u6613\uff0c\u4f46\u662f\u6211\u6700\u8fd1\u5728\u6211\u7684\u6240\u6709\u4ee3\u7801\u91cc\u9762\u90fd\u662f\u8fd9\u6837\u5199\u7684\u3002\u901a\u8fc7\u53d8\u6362\u5230\u8fd9\u79cd\u601d\u8003\u65b9\u5f0f\uff0c\u6211\u4ece\u5199\u5f88\u591a\u5f88\u591a\u4ee3\u7801\u6bb5\u4e2d\u89e3\u653e\u51fa\u6765\uff0c\u4e5f\u8282\u7ea6\u4e86\u5f88\u591a\u6211\u4ee5\u524d\u6839\u672c\u6ca1\u6709\u8003\u8651\u5230\u7684\u65f6\u95f4\u3002<\/p>\n
* My code is now far more legible. I have small methods that just do one thing and I know what it\u2019s doing and why. My classes are named things that describe what they do, and the classes themselves are small things that just do one thing. If I need a class that does two things, I write two classe and a small controller class that calls them.<\/p>\n
* \u6211\u7684\u4ee3\u7801\u73b0\u5728\u66f4\u52a0\u6e05\u6670\u6613\u8bfb\u4e86\u3002\u6211\u6709\u4e00\u4e9b\u5f88\u5c0f\u7684\u65b9\u6cd5\uff0c\u5b83\u4eec\u53ea\u505a\u4e00\u4ef6\u4e8b\u60c5\uff0c\u4f46\u662f\u6211\u77e5\u9053\u5b83\u4eec\u5728\u505a\u4ec0\u4e48\u4ee5\u53ca\u4e3a\u4ec0\u4e48\u505a\u3002\u6211\u7684\u7c7b\u7684\u540d\u5b57\u63cf\u8ff0\u4e86\u5b83\u4eec\u8981\u505a\u7684\u4e8b\u60c5\uff0c\u800c\u4e14\u5b83\u4eec\u4e5f\u5f88\u5c0f\uff0c\u4e5f\u53ea\u505a\u4e00\u4ef6\u4e8b\u60c5\u3002\u5982\u679c\u6211\u9700\u8981\u4e00\u4e2a\u505a\u4e24\u4ef6\u4e8b\u60c5\u7684\u7c7b\uff0c\u6211\u4f1a\u5199\u4e24\u4e2a\u7c7b\u548c\u4e00\u4e2a\u5c0f\u7684\u63a7\u5236\u7c7b\u6765\u8c03\u7528\u5b83\u4eec\u3002<\/p>\n
* My code is reusable – if the pattern ever comes up again, I don\u2019t have to write it again. I\u2019ve amazed myself in how often this has happened. Stuff I never, ever thought I\u2019d reuse ends up coming back to me in a week and there I am using it again.<\/p>\n
* \u6211\u7684\u4ee3\u7801\u53ef\u4ee5\u91cd\u590d\u4f7f\u7528\u2014\u2014\u5982\u679c\u8fd9\u4e2a\u6a21\u5f0f\u518d\u5ea6\u51fa\u73b0\uff0c\u6211\u4e0d\u9700\u8981\u518d\u91cd\u590d\u5199\u8fd9\u4e9b\u4ee3\u7801\u3002\u6211\u66fe\u7ecf\u88ab\u5b83\u4eec\u51fa\u73b0\u7684\u9891\u7387\u5413\u5012\u3002\u6211\u4ece\u6765\u6ca1\u6709\u60f3\u8fc7\u8981\u91cd\u7528\u4e00\u5468\u4ee5\u5185\u7684\u4ee3\u7801\uff0c\u4f46\u662f\u6211\u73b0\u5728\u53c8\u5f00\u59cb\u91cd\u65b0\u4f7f\u7528\u4ed6\u4eec\u4e86\u3002<\/p>\n
* The points where my application – the web page I\u2019m working on at the moment – touches my generic code are very small. I don\u2019t write much code about the pages themselves – all I do is instantiate classes for a given page element. This small footprint means that there\u2019s less code that\u2019s only good for that page.<\/p>\n
* \u6211\u7684\u5e94\u7528\u7a0b\u5e8f\u5728\u54ea\u2014\u2014\u6211\u73b0\u5728\u6b63\u5728\u505a\u7684web\u9875\u9762\u4e0a\uff0c\u6211\u7684\u4ee3\u7801\u4e00\u822c\u90fd\u5f88\u5c11\u3002\u6211\u4e0d\u7ed9\u9875\u9762\u5355\u72ec\u5199\u591a\u5c11\u4ee3\u7801\u2014\u2014\u6211\u6240\u505a\u7684\u53ea\u662f\u9488\u5bf9\u6bcf\u4e2a\u7ed9\u5b9a\u7684\u9875\u9762\u5143\u7d20\u5b9e\u4f8b\u5316\u4e00\u4e9b\u7c7b\u3002\u8fd9\u4e9b\u5c0f\u7684\u201c\u811a\u5370\u201d\uff08\u9875\u9762\u6267\u884c\u65f6\u95f4\uff1f\uff09\u610f\u5473\u8fd9\u8d8a\u5c11\u7684\u4ee3\u7801\u5bf9\u9875\u9762\u8d8a\u597d\u3002<\/p>\n
* When it\u2019s time to refactor – perhaps there\u2019s a new version of the framework I\u2019m using, or a new browser bug is found, or a new browser hits the market (oh, hi chrome), or I find a bug in my own code (which is the most frequent of all these reasons), I have to go fix it. If I\u2019m writing all my code for each page I have to go refactor it everywhere. If, on the other hand, my pages just instantiate my classes, I only have to refactor my classes. Since I control the interface to my classes, I can completely rewrite the class without having to touch the code that instantiates them.<\/p>\n
* \u4ec0\u4e48\u65f6\u5019\u9700\u8981\u91cd\u6784\u2014\u2014\u53ef\u80fd\u6211\u73b0\u5728\u4f7f\u7528\u7684\u6846\u67b6\u5df2\u7ecf\u6709\u65b0\u7684\u7248\u672c\u4e86\uff0c\u6216\u8005\u53d1\u73b0\u4e86\u4e00\u4e2a\u65b0\u7684\u6d4f\u89c8\u5668bug\uff0c\u6216\u8005\u4e00\u4e2a\u5148\u7684\u6d4f\u89c8\u5668\u51b2\u51fb\u4e86\u5e02\u573a\uff08\u4f8b\u5982Chrome\uff09\uff0c\u6216\u8005\u6211\u5728\u81ea\u5df1\u7684\u4ee3\u7801\u91cc\u9762\u53d1\u73b0\u4e86\u4e00\u4e2abug\uff08\u8fd9\u662f\u8fd9\u51e0\u4e2a\u539f\u56e0\u91cc\u9762\u6700\u5e38\u89c1\u7684\uff09\uff0c\u6211\u9700\u8981\u7acb\u5373\u4fee\u6b63\u5b83\u4eec\u3002\u5982\u679c\u6211\u4e3a\u6bcf\u4e2a\u9875\u9762\u90fd\u5199\u4e86\u6709\u4ee3\u7801\uff0c\u90a3\u4e48\u6211\u5c06\u9700\u8981\u4e00\u4e00\u4fee\u6b63\u3002\u4ece\u53e6\u5916\u4e00\u4e2a\u65b9\u9762\u6765\u8bf4\uff0c\u5982\u679c\u6211\u7684\u9875\u9762\u53ea\u662f\u5b9e\u4f8b\u5316\u4e86\u6211\u7684\u51e0\u4e2a\u7c7b\uff0c\u6211\u53ea\u9700\u8981\u4fee\u6539\u6211\u7684\u7c7b\u5c31\u884c\u4e86\u3002\u56e0\u4e3a\u6211\u63a7\u5236\u7740\u7c7b\u7684\u63a5\u53e3\uff0c\u6240\u4ee5\u6211\u53ef\u4ee5\u5b8c\u5168\u91cd\u5199\u6211\u7684\u7c7b\uff0c\u800c\u4e0d\u9700\u8981\u63a5\u89e6\u90a3\u4e9b\u5b9e\u4f8b\u5316\u5b83\u4eec\u7684\u4ee3\u7801\u3002<\/p>\n
* Finally, I end up changing the way I think about the user experience I develop. I\u2019m much more likely to develop an experience and reuse it than create a new one from scratch. This creates an experience consistency that, to me, means a better user experience.<\/p>\n
* \u6700\u540e\uff0c\u6211\u5f7b\u5e95\u5730\u6539\u53d8\u4e86\u6211\u7684\u5173\u4e8e\u5f00\u53d1\u7528\u6237\u4f53\u9a8c\u7684\u601d\u7ef4\u65b9\u5f0f\u3002\u6211\u66f4\u559c\u6b22\u5f00\u53d1\u4e00\u4e2a\u4f53\u9a8c\uff0c\u7136\u540e\u91cd\u7528\u5b83\uff0c\u800c\u4e0d\u662f\u4ece\u5934\u5f00\u59cb\u505a\u4e00\u4e2a\u65b0\u7684\u3002\u8fd9\u53ef\u4ee5\u521b\u9020\u4e00\u4e2a\u8fde\u8d2f\u7684\u4f53\u9a8c\uff0c\u5bf9\u6211\u800c\u8a00\uff0c\u610f\u5473\u7740\u66f4\u597d\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n
\u5982\u679c\u8fd8\u60f3\u770b\u4e0b\u6587\uff0c\u8bf7\u70b9\u51fb\u8fd9\u91cc\uff1a[\u7ffb\u8bd1]jQuery\u548cMooTools\u7684\u771f\u6b63\u533a\u522b\uff08\u4e0b\uff09<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u81ea\u5df1\u4e00\u76f4\u5728\u7528MooTools\u6846\u67b6\uff0c\u5076\u7136\u770b\u89c1\u8fd9\u7bc7\u6587\u7ae0\uff0c\u4f5c\u8005\u662fMooTools Team\u7684\u6210\u5458\u4e4b\u4e00\uff0c\u8bb2\u89e3\u4e86jQuery\u548cMooTools\u7684\u4e00\u70b9\u70b9\u533a\u522b\uff0c\u4e3b\u8981\u662f\u6211\u89c9\u5f97\u4ed6\u5199JavaScript\u4ee3\u7801\u548c\u4ed6\u7684\u601d\u7ef4\u65b9\u5f0f\u5f88\u503c\u5f97\u5b66\u4e60\u3002\u53e6\u5916\uff0c\u5bf9JavaScript\u7684\u7f16\u7a0b\u601d\u60f3\u548c\u5bf9\u6846\u67b6\u7684\u9009\u62e9\u90fd\u6709\u5f88\u591a\u5f88\u597d\u7684\u5efa\u8bae\uff0c\u5bf9\u4e8e\u72b9\u8c6b\u5728\u5404\u79cd\u6846\u67b6\u4e0a\u7684\u4eba\u6709\u5f88\u597d\u7684\u6307\u5bfc\u4f5c\u7528\uff0c\u53e6\u5916\u5bf9\u4e8e\u60f3\u6df1\u5165\u5bf9\u6846\u67b6\u8fdb\u884c\u7814\u7a76\u6216\u8005\u60f3\u81ea\u5df1\u5f00\u53d1\u6846\u67b6\u7684\u4eba\u4e5f\u6709\u5f88\u597d\u7684\u5efa\u8bae\u3002\u6587\u7ae0\u867d\u7136\u5f88\u957f\uff0c\u4f46\u662f\u6211\u89c9\u5f97\u4e0d\u9519\uff0c\u7136\u540e\u5c31\u7ffb\u8bd1\u4e86\u3002\u6c34\u5e73\u6709\u9650\uff0c\u6587\u7b14\u7c97\u964b\uff0c\u5176\u4e2d\u6709\u5c11\u6570\u5730\u65b9\u81ea\u5df1\u90fd\u89c9\u5f97\u7ffb\u8bd1\u5f97\u6709\u4e9b\u7275\u5f3a\uff0c\u6b22\u8fce\u6279\u8bc4\u6307\u6b63\u3002 \u7531\u4e8e\u6587\u7ae0\u592a\u957f\uff0c\u6211\u8fd9\u91cc\u5c31\u5206\u4e86\u4e0a\u4e0b\u4e24\u7bc7\uff0c\u4e0b\u6587\u5728\u8fd9\u91cc\uff1a[\u7ffb\u8bd1]jQuery\u548cMooTools\u7684\u771f\u6b63\u533a\u522b\uff08\u4e0b\uff09 \u539f\u6587\uff1ajQuery, MooTools, which is the most popular and well represented framework and What Really Makes One Framework Different From Another \u6807\u9898\uff1ajQuery, MooTools, which is the most popular and well represented framework and What Really Makes One Framework Different From AnotherjQuery\u548cMooTools\uff0c\u54ea\u4e00\u4e2a\u6846\u67b6\u66f4\u53d7\u6b22\u8fce\u6709\u66f4\u597d\u7684\u8868\u73b0\u4ee5\u53ca\u5b83\u4eec\u4e4b\u95f4\u7684\u771f\u6b63\u533a\u522b\u662f\u4ec0\u4e48 I’ve been experimenting with several javascript libraries as well\u2026 the problem is … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[120,104,334,328],"class_list":["post-588","post","type-post","status-publish","format-standard","hentry","category-coding","tag-AJAX","tag-JavaScript","tag-jQuery","tag-mootools"],"views":27700,"_links":{"self":[{"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":0,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"wp:attachment":[{"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}