{"id":21479309,"url":"https://github.com/meathill/gitbook-design-patterns-in-jquery","last_synced_at":"2025-10-06T21:49:26.423Z","repository":{"id":44768320,"uuid":"185414237","full_name":"meathill/gitbook-design-patterns-in-jquery","owner":"meathill","description":"My gitbook to share design patterns learn from jQuery.","archived":false,"fork":false,"pushed_at":"2023-12-05T23:55:11.000Z","size":994,"stargazers_count":4,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-04T12:36:40.489Z","etag":null,"topics":["chinese","design-pattern","gitbook","gitchat","jquery","tutorial"],"latest_commit_sha":null,"homepage":"https://meathill.com/gitbook-design-patterns-in-jquery/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meathill.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-05-07T14:04:09.000Z","updated_at":"2025-03-24T10:35:38.000Z","dependencies_parsed_at":"2025-06-13T21:37:56.760Z","dependency_job_id":"e357ea5f-42cd-494e-a6db-b8c91413bb73","html_url":"https://github.com/meathill/gitbook-design-patterns-in-jquery","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/meathill/gitbook-design-patterns-in-jquery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-design-patterns-in-jquery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-design-patterns-in-jquery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-design-patterns-in-jquery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-design-patterns-in-jquery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meathill","download_url":"https://codeload.github.com/meathill/gitbook-design-patterns-in-jquery/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meathill%2Fgitbook-design-patterns-in-jquery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278686637,"owners_count":26028325,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chinese","design-pattern","gitbook","gitchat","jquery","tutorial"],"created_at":"2024-11-23T11:24:35.179Z","updated_at":"2025-10-06T21:49:26.400Z","avatar_url":"https://github.com/meathill.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"从 jQuery 里学习设计模式\n========\n\n前言\n========\n\njQuery 前些天陆续发布了 [3.4.0](https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/) 和 [3.4.1](https://t.co/EsgL4kXTcP?amp=1) 版本，修复了一些问题，提升了性能。得知 jQuery 仍然健在，仍在持续开发、进化，我很高兴，只是，我已经不怎么用 jQuery 了。\n\n如今，不止是我，整个前端界会选择 jQuery 搭建新产品的人寥寥无几。一方面，MVVM 已经证明了架构方面的巨大优势；另一方面，大量优秀的设计被原生 JS 吸收，甚至连 jQuery 都放弃 Sizzle 改用原生选择器。但是，jQuery 十几年的积淀绝非 `querySelector` 就能取代。\n\n入行晚的同学可能不知道，当年 jQuery 绝对是统治级的基础类库。我记得当时看到一个数字，99+% 的网站使用 jQuery，甚至超过当时如日中天的 Flash Player，后者是一个商业软件，有完整的公司和团队在努力推广，而前者，则是广大开发者用脚投票的结果。jQuery 的 Slogen 是：“write less, do more”，翻译成汉语就是：代码量更少，功能更强大。jQuery 也是如此践行的，使用它对所有开发者都有巨大帮助，以致于很多开发者离开它都没法工作了。使用 jQuery，开发者可以更聚焦于业务逻辑当中，因为：\n\n1. 少写很多兼容性判定代码\n2. 更加方便地操作 DOM\n3. 更加方便地管理事件\n4. 不用担心目标不存在导致出错\n5. 非常容易地创建和组织 DOM\n6. 创建大量可复用的组件\n\n其实上面这些杀手级 feature，几乎都和设计模式有着莫大的关系：\n\n1. 使用工厂模式，解决一切创建 jQuery 实例的需求\n2. 使用适配器模式解决兼容性问题\n3. 使用外观模式方便的操作 DOM\n4. 使用组合模式，让我们不用担心找不到对象的问题\n5. 使用享元模式，降低组件的内存消耗\n\n我想结合自身的开发经验，以大家都熟悉的 jQuery 为例，教大家理解和使用更多设计模式，尤其是那些曾帮助 jQuery 取得卓越成就的设计模式。这样，起码大家在面试时不至于只知道单例和观察者（哈哈）；当然，也能在今后的工作中更加无往不利。\n\n本次分享大纲如下：\n\n1. 设计模式与面向对象\n2. 享元模式\n3. 外观模式\n4. 组合模式\n5. 工厂模式\n6. 适配器模式\n\n\n面向读者\n--------\n\n1. 中级开发者，熟悉 jQuery，熟悉原生 JS\n2. 希望用设计模式武装自己\n\n名词及约定\n--------\n\n1. 我假定所有读者都很熟悉 jQuery 的用法和 API，文中不再解释。\n2. 文中的“模式”和“设计模式”基本上都指“设计模式”。\n3. 所有模式的中文译名以《设计模式：可复用面向对象软件的基础》一书中为准。我会在章节开始处写明其英文名称。\n\n其它约定：\n\n1. 为节省时间，范例代码中的 HTML 会以 pug 书写，这种语言很容易阅读，文中也用不到高级语法，应该问题不大。另外，如果你还在写原生 HTML 或 CSS，我建议你尽快切换到新语言。\n2. 范例代码以 ES6 为基础，也会使用 ES2017+ 新增语法，如果你对这些“新”语法不熟悉，附录里有一些资源方便你学习。\n\n名词：\n\n1. 使用者：指用 jQuery 开发业务逻辑的人，也就是你我。\n2. 经典(版)：指《设计模式》中的内容\n\n文中代码的目标环境：\n\n1. jQuery \u003e= 3.4.1\n5. Node.js \u003e= 10.15\n\n作者介绍\n-------\n\n大家好，我叫翟路佳，花名“肉山”，这个名字跟 Dota 没关系，从高中起伴随我到现在。\n\n我热爱编程，喜欢学习，喜欢分享，从业十余年，投入的比较多，学习积累到的也比较多，对前端方方面面都有所了解，希望能与大家分享。\n\n我兴趣爱好比较广泛，尤其喜欢旅游，欢迎大家相互交流。\n\n我目前就职于 OpenResty Inc.，定居广州。\n\n你可以在这里找到我：\n\n* [博客](https://blog.meathill.com)\n* [微博](https://weibo.com/meathill)\n* [GitChat](https://gitbook.cn/gitchat/author/593cb520ef8d9c2863173543)\n\n或者通过 [邮件](mailto:meathill@gmail.com) 联系我。\n\n\u003cadsense /\u003e\n\n--------\n\n限于个人能力、知识视野、文字技术不足，文中难免有疏漏差错，如果你有任何疑问，欢迎在任何时间通过任何形式向我提出，我一定尽快答复修改。\n\n[GitHub issue](https://github.com/meathill/gitchat-design-patterns-in-jquery/issues)。\n\n再次感谢大家。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeathill%2Fgitbook-design-patterns-in-jquery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeathill%2Fgitbook-design-patterns-in-jquery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeathill%2Fgitbook-design-patterns-in-jquery/lists"}