Skip to content

Latest commit

 

History

111 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

deepLearn

原理笔记与手写代码 demo。以前端为主,也覆盖跨端开发要用到的原生知识(RN 桥接、Safe Area、iOS 底层)。

49 个浏览器单文件示例 + 15 个可编译运行的 iOS 验证程序,都无构建、无依赖。

怎么跑

git clone git@github.com:anotherleon/deepLearn.git
cd deepLearn
open index.html          # 从导航页进入所有 demo

index.html 是分类导航页,核心 Markdown 笔记也已生成对应的 HTML 阅读页。少数 demo 需要额外条件:

标记 含义
需 server 用到 ES module,需 python3 -m http.server 8080 后访问
需双端口 跨域三件套,需同时起 8080 与 8081 两个端口模拟不同源
需联网 从 CDN 加载 React、Babel 等依赖,本地文件可直接打开但要能联网
需后端 依赖本地或远端接口,仓库内不含服务端代码

跨域 demo 的完整跑法:

python3 -m http.server 8080 &
python3 -m http.server 8081 &
open http://127.0.0.1:8081/cross-origin-a.html

ios-snippets/ 是另一类东西——不在浏览器里跑,是 iOS 面试题里标「✅ 实测」结论的验证代码。需要 Xcode 命令行工具:

cd ios-snippets && ./run-all.sh      # 15 个程序,全部通过

笔记

文档 内容
01 手写代码 20+ 道手写实现题的完整题解
02 深入学习 JS / 浏览器 / HTTP / HTML / CSS / React / 工程化 问答,答案已抓到本地
React Hooks 面试题 19 题,含链表原理、闭包陷阱、依赖比较,配可运行 demo
状态管理对比 Flux → Redux → Vuex → MobX 横向对比
React-Redux 原理 Provider 与 connect 源码剖析
原生 / RN / H5 通信 iOS 与 Android 双向桥接方案
搞懂 Safe Area 安全区概念,H5 用 env() 与 RN 的适配方式
iOS 面试题 187 题,启动 / Runtime / 内存 / 并发 / 崩溃,配 15 个可运行验证程序

修改 Markdown 后,可重新生成阅读页:

python3 tools/render-notes.py
python3 tools/polish-original-pages.py
python3 tools/render-demo-pages.py
python3 tools/verify-site.py

tools/polish-original-pages.py 会把原始 HTML demo 包装成适合直接打开的学习展示页,包含参考答案、运行预览、运行输出和源码阅读区。首页里的 HTML 题目会直接打开这些原始页面。tools/render-demo-pages.py 只为 3 个纯 .js 源码题生成 demos/ 学习页,用来提供可阅读的源码页面。

Demo

手写实现

Demo 说明
handwritten-new 实现 new 操作符
handwritten-bind 实现 Function.prototype.bind
handwritten-call-apply 实现 call 与 apply
handwritten-object-create 实现 Object.create
handwritten-currying 函数柯里化
handwritten-promise 符合 Promise/A+ 的完整实现
handwritten-async 用 Generator 模拟 async/await
handwritten-deep-clone 深拷贝,处理循环引用
handwritten-index-of 实现 Array.prototype.indexOf
handwritten-instanceof 沿原型链实现 instanceof
handwritten-json-stringify-parse 实现 JSON.stringify 与 JSON.parse
handwritten-throttle 节流,含时间戳与定时器两版
handwritten-debounce 防抖,含立即执行选项
ajax-wrapper 基于 Promise 封装 XHR · 需后端
event-utils 跨浏览器事件绑定与解绑
event-emitter-test 发布订阅,配套 event-emitter.js · 需 server

浏览器与网络

Demo 说明
browser-rendering 对比 4 种批量插入 2000 个节点的方式
jsonp JSONP 跨域原理与实现 · 需后端
cross-origin-a 跨域入口:location.hash 与 window.name · 需双端口
cross-origin-b 跨域中间层,被 a 以 iframe 引入 · 需双端口
cross-origin-c 跨域同域代理页,回传数据给 a · 需双端口
cookie-as-localstorage 用 cookie 模拟 localStorage API
hash-router hash 模式前端路由原理
async-iframe 动态创建 iframe,不阻塞 load 事件
memory-leak-closure 闭包引用导致的经典泄漏案例
memory-leak-detection 点按钮观察内存增长,配合 DevTools

框架与语言原理

Demo 说明
react-hooks 8 个 Hooks 行为交互演示 · 需联网
es6-inheritance class extends 编译后的原型结构
proxy Proxy 的 get / set / apply / construct 拦截
observable-array 可监听数组,拦截 push / pop 变更
vue-two-way-binding defineProperty 实现 MVVM 双向绑定
react-router-internals 用 pushState 实现最简 React Router · 需联网
redux-implementation 从零实现 createStore、combineReducers 与中间件

算法与编程题

Demo 说明
sort-algorithms.js 十大经典排序算法
data-structures.js 栈、队列、链表、哈希表、二叉搜索树、图
async-execution-order.js 宏任务与微任务的执行顺序
shuffle Fisher-Yates 洗牌算法
permutation 全排列
deep-traverse-and-modify 深度遍历并就地修改嵌套结构
parse-url-params 解析 URL query 参数
thousands-separator-template-engine 千位分隔符与极简模板引擎
exercises-1 综合编程题(一)
exercises-2 综合编程题(二)

DOM 与交互

Demo 说明
drag 原生拖拽,含边界处理
popover 文本溢出时的气泡提示
lazy-load 图片懒加载,使用本地图片资源
lazy-man LazyMan 链式调用与任务队列
get-xpath 计算元素的 XPath
serialize-form 表单序列化为查询串

About

深入学习Javascrpit,理解某些实现背后的原理

Topics

Resources

Stars

3 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages