针对一些 github 上的开源项目进行源码分析
欢迎
pull request
&issue
提出值得分析源码的项目
首要满足:
- 源码短小精悍
- 有学习的价值
源码分析戳这里:blazy analysis
一个基于 jQuery 的图片懒加载插件。其特性有:
- 首屏图片异步加载
- 可根据预设和是否是 retina 屏幕加载高清图片
- 可进行视频懒加载
new Blazy({
success() {}
})
值得学习的方面:
- 针对低版本浏览器的兼容性处理,在没有某些 API 时(例如 querySelectorAll)则进行创建
- 检测模块引入方式,以不同方式进行模块暴露
- 构造类 jQuery 的 helper
- 绑定/解绑事件
源码分析戳这里:redux analysis
全球知名女主播。啊不,知名函数式插件,性感。
值得学习的方面:
- 函数式编程思想。柯里化、代码组合。。
源码分析戳这里:notification-logger analysis
一个将console.log
转换为浏览器Notification
的插件,功能比较简单,代码很短便于学习。
值得学习的方面:
- 对原生方法的覆盖
- 原生方法的缓存
- 浏览器
Notification
API的使用
源码分析戳这里:push.js analysis
一个兼容多平台多种类浏览器的 notification 插件,封装了各种浏览器下的Notification API
Push.create('Hello World!');
Push.count();
值得学习的方面:
- 浏览器兼容性处理
- 不同平台/浏览器下的
Notification API
- 对不同接口进行统一封装
- helper 类方法,对 func 等对象进行类型检查
源码分析戳这里:nprogress analysis
一个在页面(或特定容器)顶部创建进度条的插件。
NProgress.start();
NProgress.done();
值得学习的方面:
- 代码结构
- 获取浏览器支持的兼容性 CSS
- 递归调用 func
- 构造类似 jQuery API 的函数
源码分析戳这里:cookies.js analysis
提供了友好的cookie
操作 API,例如:
cookies({ token: '42' }); // Set it
var token = cookies('token'); // Get it
cookies({ token: null }); // Eat it
值得学习的方面:
cookie
操作cookie
数据转换及处理- 容错处理
源码分析戳这里:store.js analysis
通过封装localStorage
API,提供了友好的操作,并兼容IE,可储存Object
store.set('username', 'marcus');
store.get('username');
store.remove('username');
store.clear();
值得学习的方面:
localStorage
操作userData
操作
源码分析戳这里:jquery.hotkeys analysis
一个依赖于 jQuery 的插件,提供按键监听:
// 例如
$(document).bind('keydown', 'ctrl+a', fn);
值得学习的方面:
- jQuery 插件编写
- 键盘事件的监听和处理
源码分析戳这里:object-assign analysis
针对于Object.assign
的
6C08
ponyfill
,兼容性很好
// 原生 Object.assign
Object.assign({}, target, obj1, obj2...);
// object-assign
import objectAssign from 'object-assign';
objectAssign({}, target, obj1, obj2...);
值得学习的方面:
- 获取对象可枚举属性
- 遍历对象属性
hasOwnProperty
&propertyIsEnumerable
- push.js
- cookies.js
- store.js
- KeyboardJS
- jquery.hotkeys
- validator.js
- doctoc
- data.js
- cookie.js
- js-bits
- object-assign
- why-did-you-update
- tipso
- timeago.js
- Edit-This-Cookie
欢迎
pull request
&issue
提出值得分析源码的项目
MIT