All Projects → mqyqingfeng → Wheels

mqyqingfeng / Wheels

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Wheels

Redom
Tiny (2 KB) turboboosted JavaScript library for creating user interfaces.
Stars: ✭ 3,123 (+669.21%)
Mutual labels:  dom
Ngx Meta
Dynamic page title & meta tags utility for Angular (w/server-side rendering)
Stars: ✭ 331 (-18.47%)
Mutual labels:  dom
Ply
CSS inspection aided by visual regression pruning
Stars: ✭ 370 (-8.87%)
Mutual labels:  dom
Wpt
Test suites for Web platform specs — including WHATWG, W3C, and others
Stars: ✭ 3,573 (+780.05%)
Mutual labels:  dom
Fluentdom
A fluent api for working with XML in PHP
Stars: ✭ 327 (-19.46%)
Mutual labels:  dom
Nanocomponent
🚃 - create performant HTML components
Stars: ✭ 355 (-12.56%)
Mutual labels:  dom
Javascript For Everyone
A step by step guide to learn JavaScript and programming
Stars: ✭ 285 (-29.8%)
Mutual labels:  dom
Eslint Plugin Testing Library
ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library
Stars: ✭ 384 (-5.42%)
Mutual labels:  dom
Three Elements
Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. 🎉
Stars: ✭ 331 (-18.47%)
Mutual labels:  dom
Highlighter.js
Easily navigate the DOM and highlight the elements - http://720kb.github.io/highlighter.js/
Stars: ✭ 370 (-8.87%)
Mutual labels:  dom
Tags Input
🔖 <input type="tags"> like magic
Stars: ✭ 312 (-23.15%)
Mutual labels:  dom
Scrollmonitor
A simple and fast API to monitor elements as you scroll
Stars: ✭ 3,250 (+700.49%)
Mutual labels:  dom
Plain Draggable
The simple and high performance library to allow HTML/SVG element to be dragged.
Stars: ✭ 362 (-10.84%)
Mutual labels:  dom
Typescript Dom Lib Generator
Tool for generating dom related TypeScript and JavaScript library files
Stars: ✭ 300 (-26.11%)
Mutual labels:  dom
Fn Fx
A Functional API around JavaFX / OpenJFX.
Stars: ✭ 373 (-8.13%)
Mutual labels:  dom
Snuggsi
snuggsi ツ - Easy Custom Elements in ~1kB
Stars: ✭ 288 (-29.06%)
Mutual labels:  dom
Linkedom
A triple-linked lists based DOM implementation.
Stars: ✭ 255 (-37.19%)
Mutual labels:  dom
Js Tracker
A chrome extension tracks front-end JavaScript that uses DOM / jQuery APIs to manipulate html dom elements (e.g., change style, attach event listener) at runtime.
Stars: ✭ 387 (-4.68%)
Mutual labels:  dom
Anglesharp
👼 The ultimate angle brackets parser library parsing HTML5, MathML, SVG and CSS to construct a DOM based on the official W3C specifications.
Stars: ✭ 4,018 (+889.66%)
Mutual labels:  dom
Html Dom
This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.
Stars: ✭ 4,269 (+951.48%)
Mutual labels:  dom

一起造轮子

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

为什么造轮子?

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. 自适应的输入框
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].