{"id":13561688,"url":"https://github.com/mqyqingfeng/Wheels","last_synced_at":"2025-04-03T17:31:31.371Z","repository":{"id":39499925,"uuid":"107491064","full_name":"mqyqingfeng/Wheels","owner":"mqyqingfeng","description":"以自己是否能造出轮子来衡量学习的效果","archived":false,"fork":false,"pushed_at":"2022-06-26T15:06:11.000Z","size":10598,"stargazers_count":549,"open_issues_count":2,"forks_count":71,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-11-04T13:37:55.275Z","etag":null,"topics":["dom","javascript","learn-javascript","wheels"],"latest_commit_sha":null,"homepage":"","language":null,"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/mqyqingfeng.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}},"created_at":"2017-10-19T02:58:31.000Z","updated_at":"2024-10-22T02:52:00.000Z","dependencies_parsed_at":"2022-07-12T19:30:46.450Z","dependency_job_id":null,"html_url":"https://github.com/mqyqingfeng/Wheels","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mqyqingfeng%2FWheels","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mqyqingfeng%2FWheels/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mqyqingfeng%2FWheels/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mqyqingfeng%2FWheels/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mqyqingfeng","download_url":"https://codeload.github.com/mqyqingfeng/Wheels/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247046952,"owners_count":20874746,"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","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":["dom","javascript","learn-javascript","wheels"],"created_at":"2024-08-01T13:00:59.983Z","updated_at":"2025-04-03T17:31:26.361Z","avatar_url":"https://github.com/mqyqingfeng.png","language":null,"readme":"# 一起造轮子\n\n如果你想造些轮子，不妨可以看看这里。\n\n## 为什么造轮子？\n\nvczh 在知乎问题 [如何能以后达到温赵轮三位大神的水平？](https://www.zhihu.com/question/35864522)下的回答：\n\n\u003e 这十几年我一共做了三件事：\n\u003e \n\u003e 1、不以赚钱为目的选择学习的内容；\n\u003e \n\u003e 2、以自己是否能造出轮子来衡量学习的效果；\n\u003e \n\u003e 3、坚持每天写自己的代码，前10年每天至少6个小时，不包含学习和工作的时间。\n\u003e \n\u003e 就做了一点微小的工作，很惭愧，谢谢大家。\n\n## 仓库目的\n\n记录自己造过的一些轮子，方便大家参考实现。\n\n如果你造过比较好的轮子，也欢迎发起 PR。\n\n## 要求\n\n原生实现\n\n## 注意\n\n现在的轮子主要偏 DOM 类。\n\n## 目录\n\n1. [EventEmitter](#1eventemitter)\n2. [返回顶部](#2返回顶部)\n3. [顶部进度条](#3顶部进度条)\n4. [滚动时固定顶部](#4滚动时固定顶部)\n5. [懒加载](#5懒加载)\n6. [预加载](#6预加载)\n7. [下拉刷新](#7下拉刷新)\n8. [上拉加载](#8上拉加载)\n9. [日历](#9日历)\n\n## 列表\n\n### 1.EventEmitter\n\n难度：⭐️\n\n介绍：一个简单的 EventEmitter，可在浏览器中使用，帮助你实现事件的订阅和发布。\n\n地址：[https://github.com/mqyqingfeng/EventEmitter\n](https://github.com/mqyqingfeng/EventEmitter)\n\n备注：**首要阅读**，负责组件的事件系统。\n\n参考：[EventEmitter.js](https://github.com/Olical/EventEmitter)\n\n### 2.返回顶部\n\n难度：⭐️\n\n介绍：原生 JavaScript 实现的回到顶部库，适应 PC 和移动，兼容到 IE7+。\n\n地址：[https://github.com/mqyqingfeng/ScrollToTop\n](https://github.com/mqyqingfeng/ScrollToTop)\n\nDemo：[https://mqyqingfeng.github.io/ScrollToTop/](https://mqyqingfeng.github.io/ScrollToTop/)\n\n预览：\n\n![回到顶部](https://raw.githubusercontent.com/mqyqingfeng/Wheels/master/images/ScrollToTop.gif)\n\n### 3.顶部进度条\n\n难度：⭐️\n\n介绍：仿阮一峰老师的《ECMAScript 6 入门》的顶部进度条。\n\n地址：[https://github.com/mqyqingfeng/progress-indicator\n](https://github.com/mqyqingfeng/progress-indicator)\n\nDemo：[https://mqyqingfeng.github.io/progress-indicator/](https://mqyqingfeng.github.io/progress-indicator/)\n\n预览：\n\n![进度条](https://raw.githubusercontent.com/mqyqingfeng/Wheels/master/images/progress-indicator.gif)\n\n### 4.滚动时固定顶部\n\n难度：⭐️\n\n介绍：原生 JavaScript 实现的固定在顶部效果，兼容到 IE7+。\n\n地址：[https://github.com/mqyqingfeng/Sticky\n](https://github.com/mqyqingfeng/Sticky)\n\nDemo：[https://mqyqingfeng.github.io/Sticky/](https://mqyqingfeng.github.io/Sticky/)\n\n预览：\n\n![滚动时固定顶部](https://raw.githubusercontent.com/mqyqingfeng/Wheels/master/images/Sticky.gif)\n\n### 5.懒加载\n\n难度：⭐️\n\n介绍：原生 JavaScript 懒加载库，兼容到 IE8+。\n\n地址：[https://github.com/mqyqingfeng/LazyLoad\n](https://github.com/mqyqingfeng/LazyLoad)\n\nDemo：[https://mqyqingfeng.github.io/LazyLoad/](https://mqyqingfeng.github.io/LazyLoad/)\n\n预览：\n\n![懒加载](https://raw.githubusercontent.com/mqyqingfeng/Wheels/master/images/LazyLoad.gif)\n\n参考：[Echo.js](https://github.com/toddmotto/echo)\n\n### 6.预加载\n\n难度：⭐️\n\n介绍：原生 JavaScript 实现的预加载库，兼容到 IE7+。\n\n地址：[https://github.com/mqyqingfeng/Preload\n](https://github.com/mqyqingfeng/Preload)\n\nDemo：[https://mqyqingfeng.github.io/Preload/](https://mqyqingfeng.github.io/Preload/)\n\n预览：\n\n![预加载](https://raw.githubusercontent.com/mqyqingfeng/Wheels/master/images/Preload.gif)\n\n### 7.下拉刷新\n\n难度：⭐️⭐️\n\n介绍：移动端下拉刷新库，原生 JavaScript 实现。\n\n地址：[https://github.com/mqyqingfeng/pulltorefresh\n](https://github.com/mqyqingfeng/pulltorefresh)\n\nDemo：[https://mqyqingfeng.github.io/pulltorefresh/](https://mqyqingfeng.github.io/pulltorefresh/)\n\n预览：\n\n![下拉刷新](https://raw.githubusercontent.com/mqyqingfeng/Wheels/master/images/pulltorefresh.gif)\n\n参考：[pulltorefresh.js](https://github.com/BoxFactura/pulltorefresh.js)\n\n### 8.上拉加载\n\n难度：⭐️\n\n介绍：移动端上拉加载库，原生 JavaScript 实现。\n\n地址：[https://github.com/mqyqingfeng/pulltoload\n](https://github.com/mqyqingfeng/pulltoload)\n\nDemo：[https://mqyqingfeng.github.io/pulltoload/](https://mqyqingfeng.github.io/pulltoload/)\n\n预览：\n\n![下拉刷新](https://raw.githubusercontent.com/mqyqingfeng/Wheels/master/images/pulltoload.gif)\n\n## 使用方法\n\n打开地址，拷贝 clone 地址， git clone 到本地后，打开 docs/index.html 即可\n\n### 9.日历\n\n难度：⭐️⭐️\n\n介绍：原生 JavaScript 实现的日历📅，兼容没试 -_-|||。\n\n作者：[Haner](https://github.com/haner199401)\n\n地址：[https://github.com/haner199401/calendar](https://github.com/haner199401/calendar)\n\nDemo：[https://haner199401.github.io/calendar/](https://haner199401.github.io/calendar/)\n\n预览：\n\n![日历](https://raw.githubusercontent.com/haner199401/haner199401.github.io/develop/images/my-calendar.gif)\n\n### 10.打字效果\n\n难度：⭐️\n\n介绍：原生 JavaScript 实现的自动打字效果。\n\n地址：[https://github.com/mqyqingfeng/AutoType](https://github.com/mqyqingfeng/AutoType)\n\nDemo：[https://mqyqingfeng.github.io/AutoType/](https://mqyqingfeng.github.io/AutoType/)\n\n预览：\n\n![打字](https://raw.githubusercontent.com/mqyqingfeng/AutoType/master/demonstration.gif)\n\n### 11. 瀑布流\n\n难度：⭐️⭐️\n\n介绍：原生 JavaScript 实现的瀑布流效果，兼容到 IE8。\n\n地址：[https://github.com/mqyqingfeng/waterfall](https://github.com/mqyqingfeng/waterfall)\n\nDemo：[https://mqyqingfeng.github.io/waterfall/](https://mqyqingfeng.github.io/waterfall/)\n\n预览：\n\n![演示图](https://raw.githubusercontent.com/mqyqingfeng/waterfall/master/demonstration.gif)\n\n## 说明\n\n如果有对实现方式的疑问或者发现错误，可以在相应库的 issues 进行提问或勘误。\n\n如果对你有所帮助，欢迎 star，对作者也是一种鼓励。\n\n## 更多轮子\n\n1. 移动端手势库\n2. 拖动\n3. 自适应的输入框\n","funding_links":[],"categories":["miscellaneous"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmqyqingfeng%2FWheels","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmqyqingfeng%2FWheels","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmqyqingfeng%2FWheels/lists"}