Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/BryanAdamss/fe-awesome-demos

✨前端入门demos集合
https://github.com/BryanAdamss/fe-awesome-demos
List: fe-awesome-demos
css html js practice
Last synced: 16 days ago
JSON representation
✨前端入门demos集合
Host: GitHub
URL: https://github.com/BryanAdamss/fe-awesome-demos
Owner: BryanAdamss
Created: 2016-10-27T08:14:45.000Z (about 8 years ago)
Default Branch: master
Last Pushed: 2023-01-03T20:39:09.000Z (almost 2 years ago)
Last Synced: 2024-05-23T08:18:05.640Z (7 months ago)
Topics: css, html, js, practice
Language: JavaScript
Homepage: https://bryanadamss.github.io
Size: 15.6 MB
Stars: 147
Watchers: 5
Forks: 23
Open Issues: 18
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

ultimate-awesome - fe-awesome-demos - ✨前端入门demos集合. (Other Lists / Monkey C Lists)
README

        # fe-awesome-demos

> `vue-awesome-template`[https://github.com/BryanAdamss/vue-awesome-template](https://github.com/BryanAdamss/vue-awesome-template)；一个基于[email protected]的[email protected] 项目模板；集成各种常用组件、轮子、最佳实践；新手友好😊

此 `repo` 保存了学习前端时积累的一些demo案例，绝大部都带有详细注释，对新手入门有很大帮助；

如果您喜欢此 repo，欢迎`star`、`fork`

## 目录介绍(由易入难)

### [DaNei](https://github.com/BryanAdamss/SourceSave/tree/master/DaNei)

- 早期看 Danei 教程的一些 demo

- 重要点的

  - [jQuery 插件](https://github.com/BryanAdamss/SourceSave/blob/master/DaNei/105_jQuery%E6%8F%92%E4%BB%B6.html)

  - [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)

  - [让 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)

  - [尺寸位置大小总结](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)

### [Dmd](https://github.com/BryanAdamss/SourceSave/tree/master/Dmd)

- 常用代码段相关 demo(demo 较少...懒)

### [MiaoV](https://github.com/BryanAdamss/SourceSave/tree/master/MiaoV)

- 妙 V 教程一些 demo(demo 较少...懒)

### [Zns](https://github.com/BryanAdamss/SourceSave/tree/master/Zns)

- 智能社教程相关 demo

### [CssSecrets](https://github.com/BryanAdamss/SourceSave/tree/master/CssSecrets)

- CssSecrets 书籍的 demo

- 在线演示可以查看[此链接](https://bryanadamss.github.io/2017/12/13/CSS-Secrets/)

### [Plugins](https://github.com/BryanAdamss/SourceSave/tree/master/Plugins)

- 自己模仿造的一些简单轮子

- 重要点的

  - [jQuery 插件模板](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/00_template.js)

  - [倒计时](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/09_timeCountDown.js)

  - [拖拽](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/10_drag.js)

  - [本地分页器](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/11_pagination.js)

  - [jsonp 实现](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/12_jsonp.js)

  - [移动端手势组件](https://github.com/BryanAdamss/SourceSave/blob/master/Plugins/js/vendor/13_gestures.js)

### [Practice](https://github.com/BryanAdamss/SourceSave/tree/master/Practice)

- 一些练习 demo

- 重要点的

  - [requestAnimationFrame 使用总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/08_requestAnimationFrame.html)

  - [原生 js 模块化写法总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/11_Module%E6%A8%A1%E5%BC%8F.html)

  - [Handlebars 模板引擎总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/14_Handlebars-%E5%AE%9E%E4%BE%8B.html)

  - [数据类型判断及存在性检测](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)

    - 具体文章可参照这个[链接](https://bryanadamss.github.io/2017/08/04/type-existence/)

  - [兼容 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)

  - [兼容 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)

  - [二十行实现一个模板引擎](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/18_TemplateEngine.html)

  - [flex 总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/19_flex.html)

  - [flex 实例](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/20_flex%E5%AE%9E%E4%BE%8B.html)

  - [移动端相册查看组件 PhotoSwipe 使用总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/22_photoSwipe.html)

  - [移动端 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)

  - [bootstrap-table 相关 API 总结](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/27_bootstrap-table%E7%9B%B8%E5%85%B3API.html)

  - [自定义滚动条总结](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)

  - [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)

  - [常用地图坐标转换算法总结](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)

  - [生成复合层demo](https://github.com/BryanAdamss/SourceSave/blob/master/Practice/34_CompositingLayer.html)

### [QA](https://github.com/BryanAdamss/SourceSave/tree/master/QA)

- 面试中的高频基础考点

- 数组去重

  - [数组去重](https://github.com/BryanAdamss/SourceSave/blob/master/QA/02_%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D.html)

  - [数组去重\_第二项开始遍历](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)

  - [数组去重\_filter](https://github.com/BryanAdamss/SourceSave/blob/master/QA/04_%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D_filter.html)

  - [数组去重\_es6](https://github.com/BryanAdamss/SourceSave/blob/master/QA/05_%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D_es6.html)

  - [数组去重\_对象存放](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)

  - [数组去重\_先排序](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)

- 深浅拷贝

  - [数组浅拷贝](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)

  - [数组浅拷贝\_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)

  - [数组浅拷贝\_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)

  - [数组浅拷贝\_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)

  - [对象浅拷贝](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)

  - [对象浅拷贝\_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)

  - [引用类型深拷贝](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)

  - [引用类型深拷贝\_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)

  - [引用类型深拷贝\_兼容](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)

- 遍历方法总结

  - 数组遍历

    - [数组遍历方法比较](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)

    - [是否改变原数组方法总结](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)

  - 对象遍历

    - [对象的遍历总结](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)

- [随机数](https://github.com/BryanAdamss/SourceSave/blob/master/QA/20_%E9%9A%8F%E6%9C%BA%E6%95%B0.html)

- [数组最小最大值](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)

- DOM Ready

  - [DOM 加载时机](https://github.com/BryanAdamss/SourceSave/blob/master/QA/22_DOM%E5%8A%A0%E8%BD%BD%E6%97%B6%E6%9C%BA.html)

  - [ready 兼容处理](https://github.com/BryanAdamss/SourceSave/blob/master/QA/23_ready%E5%85%BC%E5%AE%B9%E5%A4%84%E7%90%86.html)

  - [ready 终极处理](https://github.com/BryanAdamss/SourceSave/blob/master/QA/24_ready%E7%BB%88%E6%9E%81%E5%A4%84%E7%90%86.html)

### Canvas

- [慕课网 canvas 教程学习总结](https://github.com/BryanAdamss/SourceSave/tree/master/Canvas)

- [MDN canvas教程](https://github.com/BryanAdamss/fe-awesome-demos/tree/master/CanvasMDN)

### [AngularJs](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs)

- [AngularJs 官方文档 demo 总结](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs/AngualrJs%40guide)

- [AngularJs 慕课网 demo 总结](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs/AngualrJs%40imooc)

- [AngularJs 拉勾网实例](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs/AngularJs%40lg)

- [AngularJs 小猫杯教程总结](https://github.com/BryanAdamss/SourceSave/tree/master/AngularJs/AngularJs%40xmb)

- [TodoMVC](https://github.com/BryanAdamss/SourceSave/tree/master/TodoMVC/angularjs)

### [Vue](https://github.com/BryanAdamss/SourceSave/tree/master/Vue)

- [Vue 官网学习 demo 总结](https://github.com/BryanAdamss/SourceSave/tree/master/Vue/Vue%40guide)

  - 详情可查看[此链接](https://bryanadamss.github.io/2017/08/01/Vue-guide/)

- [Vue 音乐 App 实例](https://github.com/BryanAdamss/SourceSave/tree/master/Vue/vue-music)

- [VueCli 详细注释总结](https://github.com/BryanAdamss/SourceSave/tree/master/Vue/vue-cli-study)

### [Webpack](https://github.com/BryanAdamss/SourceSave/tree/master/Webpack)

- [Webpack 官网学习 demo 总结](https://github.com/BryanAdamss/SourceSave/tree/master/Webpack/webpack-guide)

  - 详情可查看[此链接](https://bryanadamss.github.io/2017/12/21/webpack/)

- [Webpack 多页面实践总结](https://github.com/BryanAdamss/SourceSave/tree/master/Webpack/webpack-multi-page)

  - 详情可查看[此链接](https://bryanadamss.github.io/2018/01/02/webpack-multi-page/)

  - 相关 repo[WebpackTemplate](https://github.com/BryanAdamss/WebpackTemplate)

### [Sjms](https://github.com/BryanAdamss/SourceSave/tree/master/Sjms)

- 设计模式学习 demo 总结

- 常用模式

  - [通用的惰性单例](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)

  - [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)

  - [支持先发布再订阅、并提供命名空间的观察者模式](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)

### 其他

- [个人博客](https://github.com/BryanAdamss/BryanAdamss.github.io)

- [一个 pc、移动端项目脚手架](https://github.com/BryanAdamss/ProjectTemplate)

- [webpack 多页面脚手架](https://github.com/BryanAdamss/WebpackTemplate)

- [Vue 脚手架](https://github.com/BryanAdamss/VueTemplate)