{"id":47235,"url":"https://github.com/awesome-vault/fe-awesome-demos","name":"fe-awesome-demos","description":"✨前端入门demos集合","projects_count":74,"last_synced_at":"2026-06-27T02:00:23.564Z","repository":{"id":43502018,"uuid":"72086222","full_name":"awesome-vault/fe-awesome-demos","owner":"awesome-vault","description":"✨前端入门demos集合","archived":false,"fork":false,"pushed_at":"2023-01-03T20:39:09.000Z","size":16332,"stargazers_count":147,"open_issues_count":18,"forks_count":21,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-06-10T01:03:09.083Z","etag":null,"topics":["css","html","js","practice"],"latest_commit_sha":null,"homepage":"https://bryanadamss.github.io","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/awesome-vault.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":"2016-10-27T08:14:45.000Z","updated_at":"2026-02-10T14:54:52.000Z","dependencies_parsed_at":"2023-02-01T10:01:17.285Z","dependency_job_id":null,"html_url":"https://github.com/awesome-vault/fe-awesome-demos","commit_stats":null,"previous_names":["awesome-vault/fe-awesome-demos","bryanadamss/fe-awesome-demos"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/awesome-vault/fe-awesome-demos","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesome-vault%2Ffe-awesome-demos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesome-vault%2Ffe-awesome-demos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesome-vault%2Ffe-awesome-demos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesome-vault%2Ffe-awesome-demos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/awesome-vault","download_url":"https://codeload.github.com/awesome-vault/fe-awesome-demos/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awesome-vault%2Ffe-awesome-demos/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34839005,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-27T02:00:06.362Z","response_time":126,"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"}},"created_at":"2024-01-14T11:15:08.552Z","updated_at":"2026-06-27T02:00:23.565Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["目录介绍(由易入难)"],"sub_categories":["[DaNei](https://github.com/BryanAdamss/SourceSave/tree/master/DaNei)","[CssSecrets](https://github.com/BryanAdamss/SourceSave/tree/master/CssSecrets)","[Plugins](https://github.com/BryanAdamss/SourceSave/tree/master/Plugins)","[Practice](https://github.com/BryanAdamss/SourceSave/tree/master/Practice)","[QA](https://github.com/BryanAdamss/SourceSave/tree/master/QA)","Canvas","[AngularJs](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs)","[Vue](https://github.com/BryanAdamss/SourceSave/tree/master/Vue)","[Webpack](https://github.com/BryanAdamss/SourceSave/tree/master/Webpack)","[Sjms](https://github.com/BryanAdamss/SourceSave/tree/master/Sjms)","其他"],"readme":"# fe-awesome-demos\n\n\u003e `vue-awesome-template`[https://github.com/BryanAdamss/vue-awesome-template](https://github.com/BryanAdamss/vue-awesome-template)；一个基于vue-cli@4.x的vue@2.x 项目模板；集成各种常用组件、轮子、最佳实践；新手友好😊\n\n此 `repo` 保存了学习前端时积累的一些demo案例，绝大部都带有详细注释，对新手入门有很大帮助；\n如果您喜欢此 repo，欢迎`star`、`fork`\n\n## 目录介绍(由易入难)\n\n### [DaNei](https://github.com/BryanAdamss/SourceSave/tree/master/DaNei)\n\n- 早期看 Danei 教程的一些 demo\n- 重要点的\n  - [jQuery 插件](https://github.com/BryanAdamss/SourceSave/blob/master/DaNei/105_jQuery%E6%8F%92%E4%BB%B6.html)\n  - [jQuery 插件开发最佳实践](https://github.com/BryanAdamss/SourceSave/blob/master/DaNei/106_jQuery%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5.html)\n  - [让 jQuery 插件支持 AMD、CMD、CommonJs 规范](https://github.com/BryanAdamss/SourceSave/blob/master/DaNei/107_%E8%AE%A9jQuery%E6%8F%92%E4%BB%B6%E6%94%AF%E6%8C%81AMD%E3%80%81CMD%E3%80%81CommonJs%E8%A7%84%E8%8C%83.html)\n  - [尺寸位置大小总结](https://github.com/BryanAdamss/SourceSave/blob/master/DaNei/89_%E5%B0%BA%E5%AF%B8%E4%BD%8D%E7%BD%AE%E5%A4%A7%E5%B0%8F%E6%80%BB%E7%BB%93.html)\n\n### [Dmd](https://github.com/BryanAdamss/SourceSave/tree/master/Dmd)\n\n- 常用代码段相关 demo(demo 较少...懒)\n\n### [MiaoV](https://github.com/BryanAdamss/SourceSave/tree/master/MiaoV)\n\n- 妙 V 教程一些 demo(demo 较少...懒)\n\n### [Zns](https://github.com/BryanAdamss/SourceSave/tree/master/Zns)\n\n- 智能社教程相关 demo\n\n### [CssSecrets](https://github.com/BryanAdamss/SourceSave/tree/master/CssSecrets)\n\n- CssSecrets 书籍的 demo\n- 在线演示可以查看[此链接](https://bryanadamss.github.io/2017/12/13/CSS-Secrets/)\n\n### [Plugins](https://github.com/BryanAdamss/SourceSave/tree/master/Plugins)\n\n- 自己模仿造的一些简单轮子\n- 重要点的\n  - [jQuery 插件模板](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/00_template.js)\n  - [倒计时](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/09_timeCountDown.js)\n  - [拖拽](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/10_drag.js)\n  - [本地分页器](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/11_pagination.js)\n  - [jsonp 实现](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/12_jsonp.js)\n  - [移动端手势组件](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/13_gestures.js)\n\n### [Practice](https://github.com/BryanAdamss/SourceSave/tree/master/Practice)\n\n- 一些练习 demo\n- 重要点的\n  - [requestAnimationFrame 使用总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/08_requestAnimationFrame.html)\n  - [原生 js 模块化写法总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/11_Module%E6%A8%A1%E5%BC%8F.html)\n  - [Handlebars 模板引擎总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/14_Handlebars-%E5%AE%9E%E4%BE%8B.html)\n  - [数据类型判断及存在性检测](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/15_%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%88%A4%E6%96%AD%E3%80%81%E5%B1%9E%E6%80%A7%E5%AD%98%E5%9C%A8%E6%80%A7%E7%9A%84%E6%A3%80%E6%B5%8B.html)\n    - 具体文章可参照这个[链接](https://bryanadamss.github.io/2017/08/04/type-existence/)\n  - [兼容 amd 规范的 js 插件模板](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/16_%E5%85%BC%E5%AE%B9amd%E7%9A%84js%E6%8F%92%E4%BB%B6%E6%A8%A1%E6%9D%BF.html)\n  - [兼容 amd 规范的 jQuery 插件模板](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/17_%E5%85%BC%E5%AE%B9amd%E7%9A%84jQuery%E6%8F%92%E4%BB%B6%E6%A8%A1%E6%9D%BF.html)\n  - [二十行实现一个模板引擎](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/18_TemplateEngine.html)\n  - [flex 总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/19_flex.html)\n  - [flex 实例](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/20_flex%E5%AE%9E%E4%BE%8B.html)\n  - [移动端相册查看组件 PhotoSwipe 使用总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/22_photoSwipe.html)\n  - [移动端 fixed 定位、input 被遮挡解决方案总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/23_%E7%A7%BB%E5%8A%A8%E7%AB%AFfixed%E5%AE%9A%E4%BD%8D%E3%80%81input%E8%A2%AB%E9%81%AE%E6%8C%A1%E8%A7%A3%E5%86%B3.html)\n  - [bootstrap-table 相关 API 总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/27_bootstrap-table%E7%9B%B8%E5%85%B3API.html)\n  - [自定义滚动条总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/28_%E8%87%AA%E5%AE%9A%E4%B9%89%E6%BB%9A%E5%8A%A8%E6%9D%A1.html)\n  - [des3 加密、解密总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/30_des3%E5%8A%A0%E5%AF%86%E3%80%81%E8%A7%A3%E5%AF%86.html)\n  - [常用地图坐标转换算法总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/31_%E5%9C%B0%E5%9B%BE%E5%9D%90%E6%A0%87%E8%BD%AC%E6%8D%A2.html)\n  - [生成复合层demo](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/34_CompositingLayer.html)\n\n### [QA](https://github.com/BryanAdamss/SourceSave/tree/master/QA)\n\n- 面试中的高频基础考点\n- 数组去重\n  - [数组去重](https://github.com/BryanAdamss/SourceSave/blob/master/QA/02_%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D.html)\n  - [数组去重\\_第二项开始遍历](https://github.com/BryanAdamss/SourceSave/blob/master/QA/03_%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D_%E7%AC%AC%E4%BA%8C%E9%A1%B9%E5%BC%80%E5%A7%8B%E9%81%8D%E5%8E%86.html)\n  - [数组去重\\_filter](https://github.com/BryanAdamss/SourceSave/blob/master/QA/04_%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D_filter.html)\n  - [数组去重\\_es6](https://github.com/BryanAdamss/SourceSave/blob/master/QA/05_%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D_es6.html)\n  - [数组去重\\_对象存放](https://github.com/BryanAdamss/SourceSave/blob/master/QA/06_%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D_%E5%AF%B9%E8%B1%A1%E5%AD%98%E6%94%BE.html)\n  - [数组去重\\_先排序](https://github.com/BryanAdamss/SourceSave/blob/master/QA/07_%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D_%E5%85%88%E6%8E%92%E5%BA%8F.html)\n- 深浅拷贝\n  - [数组浅拷贝](https://github.com/BryanAdamss/SourceSave/blob/master/QA/08_%E6%95%B0%E7%BB%84%E6%B5%85%E6%8B%B7%E8%B4%9D.html)\n  - [数组浅拷贝\\_slice](https://github.com/BryanAdamss/SourceSave/blob/master/QA/09_%E6%95%B0%E7%BB%84%E6%B5%85%E6%8B%B7%E8%B4%9D_slice.html)\n  - [数组浅拷贝\\_concat](https://github.com/BryanAdamss/SourceSave/blob/master/QA/10_%E6%95%B0%E7%BB%84%E6%B5%85%E6%8B%B7%E8%B4%9D_concat.html)\n  - [数组浅拷贝\\_es6](https://github.com/BryanAdamss/SourceSave/blob/master/QA/11_%E6%95%B0%E7%BB%84%E6%B5%85%E6%8B%B7%E8%B4%9D_es6.html)\n  - [对象浅拷贝](https://github.com/BryanAdamss/SourceSave/blob/master/QA/12_%E5%AF%B9%E8%B1%A1%E6%B5%85%E6%8B%B7%E8%B4%9D.html)\n  - [对象浅拷贝\\_assign](https://github.com/BryanAdamss/SourceSave/blob/master/QA/13_%E5%AF%B9%E8%B1%A1%E6%B5%85%E6%8B%B7%E8%B4%9D_assign.html)\n  - [引用类型深拷贝](https://github.com/BryanAdamss/SourceSave/blob/master/QA/14_%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B%E6%B7%B1%E6%8B%B7%E8%B4%9D.html)\n  - [引用类型深拷贝\\_JSON](https://github.com/BryanAdamss/SourceSave/blob/master/QA/15_%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B%E6%B7%B1%E6%8B%B7%E8%B4%9D_JSON.html)\n  - [引用类型深拷贝\\_兼容](https://github.com/BryanAdamss/SourceSave/blob/master/QA/16_%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B%E6%B7%B1%E6%8B%B7%E8%B4%9D_%E5%85%BC%E5%AE%B9.html)\n- 遍历方法总结\n  - 数组遍历\n    - [数组遍历方法比较](https://github.com/BryanAdamss/SourceSave/blob/master/QA/17_%E6%95%B0%E7%BB%84%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95%E6%AF%94%E8%BE%83.html)\n    - [是否改变原数组方法总结](https://github.com/BryanAdamss/SourceSave/blob/master/QA/18_%E6%98%AF%E5%90%A6%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.html)\n  - 对象遍历\n    - [对象的遍历总结](https://github.com/BryanAdamss/SourceSave/blob/master/QA/19_%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%81%8D%E5%8E%86.html)\n- [随机数](https://github.com/BryanAdamss/SourceSave/blob/master/QA/20_%E9%9A%8F%E6%9C%BA%E6%95%B0.html)\n- [数组最小最大值](https://github.com/BryanAdamss/SourceSave/blob/master/QA/21_%E6%95%B0%E7%BB%84%E6%9C%80%E5%B0%8F%E6%9C%80%E5%A4%A7%E5%80%BC.html)\n- DOM Ready\n  - [DOM 加载时机](https://github.com/BryanAdamss/SourceSave/blob/master/QA/22_DOM%E5%8A%A0%E8%BD%BD%E6%97%B6%E6%9C%BA.html)\n  - [ready 兼容处理](https://github.com/BryanAdamss/SourceSave/blob/master/QA/23_ready%E5%85%BC%E5%AE%B9%E5%A4%84%E7%90%86.html)\n  - [ready 终极处理](https://github.com/BryanAdamss/SourceSave/blob/master/QA/24_ready%E7%BB%88%E6%9E%81%E5%A4%84%E7%90%86.html)\n\n### Canvas\n\n- [慕课网 canvas 教程学习总结](https://github.com/BryanAdamss/SourceSave/tree/master/Canvas)\n- [MDN canvas教程](https://github.com/BryanAdamss/fe-awesome-demos/tree/master/CanvasMDN)\n\n### [AngularJs](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs)\n\n- [AngularJs 官方文档 demo 总结](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs/AngualrJs%40guide)\n- [AngularJs 慕课网 demo 总结](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs/AngualrJs%40imooc)\n- [AngularJs 拉勾网实例](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs/AngularJs%40lg)\n- [AngularJs 小猫杯教程总结](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs/AngularJs%40xmb)\n- [TodoMVC](https://github.com/BryanAdamss/SourceSave/tree/master/TodoMVC/angularjs)\n\n### [Vue](https://github.com/BryanAdamss/SourceSave/tree/master/Vue)\n\n- [Vue 官网学习 demo 总结](https://github.com/BryanAdamss/SourceSave/tree/master/Vue/Vue%40guide)\n  - 详情可查看[此链接](https://bryanadamss.github.io/2017/08/01/Vue-guide/)\n- [Vue 音乐 App 实例](https://github.com/BryanAdamss/SourceSave/tree/master/Vue/vue-music)\n- [VueCli 详细注释总结](https://github.com/BryanAdamss/SourceSave/tree/master/Vue/vue-cli-study)\n\n### [Webpack](https://github.com/BryanAdamss/SourceSave/tree/master/Webpack)\n\n- [Webpack 官网学习 demo 总结](https://github.com/BryanAdamss/SourceSave/tree/master/Webpack/webpack-guide)\n  - 详情可查看[此链接](https://bryanadamss.github.io/2017/12/21/webpack/)\n- [Webpack 多页面实践总结](https://github.com/BryanAdamss/SourceSave/tree/master/Webpack/webpack-multi-page)\n  - 详情可查看[此链接](https://bryanadamss.github.io/2018/01/02/webpack-multi-page/)\n  - 相关 repo[WebpackTemplate](https://github.com/BryanAdamss/WebpackTemplate)\n\n### [Sjms](https://github.com/BryanAdamss/SourceSave/tree/master/Sjms)\n\n- 设计模式学习 demo 总结\n- 常用模式\n  - [通用的惰性单例](https://github.com/BryanAdamss/SourceSave/blob/master/Sjms/24_%E9%80%9A%E7%94%A8%E7%9A%84%E6%83%B0%E6%80%A7%E5%8D%95%E4%BE%8B.html)\n  - [JS 中的策略模式](https://github.com/BryanAdamss/SourceSave/blob/master/Sjms/27_JS%E4%B8%AD%E7%9A%84%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F.html)\n  - [支持先发布再订阅、并提供命名空间的观察者模式](https://github.com/BryanAdamss/SourceSave/blob/master/Sjms/44_%E6%94%AF%E6%8C%81%E5%85%88%E5%8F%91%E5%B8%83%E5%86%8D%E8%AE%A2%E9%98%85%E3%80%81%E5%B9%B6%E6%8F%90%E4%BE%9B%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%E7%9A%84%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F.html)\n\n### 其他\n\n- [个人博客](https://github.com/BryanAdamss/BryanAdamss.github.io)\n- [一个 pc、移动端项目脚手架](https://github.com/BryanAdamss/ProjectTemplate)\n- [webpack 多页面脚手架](https://github.com/BryanAdamss/WebpackTemplate)\n- [Vue 脚手架](https://github.com/BryanAdamss/VueTemplate)\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/awesome-vault%2Ffe-awesome-demos/projects"}