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: 3 months ago
JSON representation

✨前端入门demos集合

Awesome Lists containing this project

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)