• Stars
    star
    548
  • Rank 81,119 (Top 2 %)
  • Language
  • Created about 7 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

以自己是否能造出轮子来衡量学习的效果

一起造轮子

如果你想造些轮子,不妨可以看看这里。

为什么造轮子?

vczh 在知乎问题 如何能以后达到温赵轮三位大神的水平?下的回答:

这十几年我一共做了三件事:

1、不以赚钱为目的选择学习的内容;

2、以自己是否能造出轮子来衡量学习的效果;

3、坚持每天写自己的代码,前10年每天至少6个小时,不包含学习和工作的时间。

就做了一点微小的工作,很惭愧,谢谢大家。

仓库目的

记录自己造过的一些轮子,方便大家参考实现。

如果你造过比较好的轮子,也欢迎发起 PR。

要求

原生实现

注意

现在的轮子主要偏 DOM 类。

目录

  1. EventEmitter
  2. 返回顶部
  3. 顶部进度条
  4. 滚动时固定顶部
  5. 懒加载
  6. 预加载
  7. 下拉刷新
  8. 上拉加载
  9. 日历

列表

1.EventEmitter

难度:⭐️

介绍:一个简单的 EventEmitter,可在浏览器中使用,帮助你实现事件的订阅和发布。

地址:https://github.com/mqyqingfeng/EventEmitter

备注:首要阅读,负责组件的事件系统。

参考:EventEmitter.js

2.返回顶部

难度:⭐️

介绍:原生 JavaScript 实现的回到顶部库,适应 PC 和移动,兼容到 IE7+。

地址:https://github.com/mqyqingfeng/ScrollToTop

Demo:https://mqyqingfeng.github.io/ScrollToTop/

预览:

回到顶部

3.顶部进度条

难度:⭐️

介绍:仿阮一峰老师的《ECMAScript 6 入门》的顶部进度条。

地址:https://github.com/mqyqingfeng/progress-indicator

Demo:https://mqyqingfeng.github.io/progress-indicator/

预览:

进度条

4.滚动时固定顶部

难度:⭐️

介绍:原生 JavaScript 实现的固定在顶部效果,兼容到 IE7+。

地址:https://github.com/mqyqingfeng/Sticky

Demo:https://mqyqingfeng.github.io/Sticky/

预览:

滚动时固定顶部

5.懒加载

难度:⭐️

介绍:原生 JavaScript 懒加载库,兼容到 IE8+。

地址:https://github.com/mqyqingfeng/LazyLoad

Demo:https://mqyqingfeng.github.io/LazyLoad/

预览:

懒加载

参考:Echo.js

6.预加载

难度:⭐️

介绍:原生 JavaScript 实现的预加载库,兼容到 IE7+。

地址:https://github.com/mqyqingfeng/Preload

Demo:https://mqyqingfeng.github.io/Preload/

预览:

预加载

7.下拉刷新

难度:⭐️⭐️

介绍:移动端下拉刷新库,原生 JavaScript 实现。

地址:https://github.com/mqyqingfeng/pulltorefresh

Demo:https://mqyqingfeng.github.io/pulltorefresh/

预览:

下拉刷新

参考:pulltorefresh.js

8.上拉加载

难度:⭐️

介绍:移动端上拉加载库,原生 JavaScript 实现。

地址:https://github.com/mqyqingfeng/pulltoload

Demo:https://mqyqingfeng.github.io/pulltoload/

预览:

下拉刷新

使用方法

打开地址,拷贝 clone 地址, git clone 到本地后,打开 docs/index.html 即可

9.日历

难度:⭐️⭐️

介绍:原生 JavaScript 实现的日历📅,兼容没试 -_-|||。

作者:Haner

地址:https://github.com/haner199401/calendar

Demo:https://haner199401.github.io/calendar/

预览:

日历

10.打字效果

难度:⭐️

介绍:原生 JavaScript 实现的自动打字效果。

地址:https://github.com/mqyqingfeng/AutoType

Demo:https://mqyqingfeng.github.io/AutoType/

预览:

打字

11. 瀑布流

难度:⭐️⭐️

介绍:原生 JavaScript 实现的瀑布流效果,兼容到 IE8。

地址:https://github.com/mqyqingfeng/waterfall

Demo:https://mqyqingfeng.github.io/waterfall/

预览:

演示图

说明

如果有对实现方式的疑问或者发现错误,可以在相应库的 issues 进行提问或勘误。

如果对你有所帮助,欢迎 star,对作者也是一种鼓励。

更多轮子

  1. 移动端手势库
  2. 拖动
  3. 自适应的输入框

More Repositories

1

Blog

冴羽写博客的地方,预计写四个系列:JavaScript深入系列、JavaScript专题系列、ES6系列、React系列。
30,601
star
2

learn-typescript

可能是中国最好的 TypeScript 从入门到进阶系统教程
437
star
3

frontend-interview-question-and-answer

前端校招面试题和答案
415
star
4

waterfall

原生 JavaScript 实现的瀑布流效果,兼容到 IE8。
JavaScript
119
star
5

AutoType

原生 JavaScript 实现的自动打字效果。
JavaScript
96
star
6

react-admin

基于React + ant-design的用作后台管理项目的脚手架
JavaScript
96
star
7

EventEmitter

一个简单的 EventEmitter,可在浏览器中使用,帮助你实现事件的订阅和发布。
JavaScript
55
star
8

lnv-mobile-base

移动端开发脚手架-基于gulp的使用zepto、handlebars、sass并且带移动端适配方案(flexible.js)的前端工作流,旨在帮助移动端项目的开发
JavaScript
41
star
9

introduction-for-lnv-mobile-base

教程-移动端开发脚手架 lnv-mobile-base 使用教程
40
star
10

progress-indicator

仿阮一峰老师的《ECMAScript 6 入门》的顶部进度条
JavaScript
33
star
11

ScrollToTop

原生 JavaScript 实现的回到顶部库,适应 PC 和移动,兼容到 IE7+。
JavaScript
26
star
12

pulltoload

移动端上拉加载库,原生 JavaScript 实现。
JavaScript
22
star
13

next-react-notes-demo

掘金 《Next.js 开发指南》小册实战篇 React Notes 项目源码
22
star
14

pulltorefresh

移动端下拉刷新库,原生 JavaScript 实现。
JavaScript
19
star
15

LazyLoad

原生 JavaScript 实现的懒加载库,兼容到 IE8+。
JavaScript
15
star
16

Preload

原生 JavaScript 实现的预加载库,兼容到 IE7+。
JavaScript
14
star
17

draft-js-doc-translation

draft-js文档中文翻译
11
star
18

Sticky

原生 JavaScript 实现的固定在顶部效果,兼容到 IE7+。
JavaScript
8
star
19

dialog

Weui样式的dialog组件,需要依赖jQuery或者Zepto
JavaScript
8
star
20

loading

Weui样式的loading组件,需要依赖jQuery或者Zepto
CSS
8
star
21

next-app-demo

小册《Next.js 开发指南》和掘金专栏《Next.js 开发指北》Demo
TypeScript
7
star
22

QYEditor

基于Draft.js的干净利落功能齐全的富文本编辑器
JavaScript
5
star
23

mqyqingfeng

5
star
24

gulp-handlebars-precompile

gulp插件-提取html文件引入的handerbars模板文件预编译到指定目录
JavaScript
3
star
25

picture

个人图床
3
star
26

EventUtil

用于抹平 IE 旧版本(IE8 及以下) 与现代浏览器在事件绑定上的差异
JavaScript
2
star
27

learn-svelte

掘金小册《Svelte开发指南》源码
Svelte
2
star
28

generator-lnv-mobile

yeoman脚手架-构建lnv-mobile基础库
JavaScript
1
star