原理笔记与手写代码 demo。以前端为主,也覆盖跨端开发要用到的原生知识(RN 桥接、Safe Area、iOS 底层)。
49 个浏览器单文件示例 + 15 个可编译运行的 iOS 验证程序,都无构建、无依赖。
git clone git@github.com:anotherleon/deepLearn.git
cd deepLearn
open index.html # 从导航页进入所有 demoindex.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.htmlios-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.pytools/polish-original-pages.py 会把原始 HTML demo 包装成适合直接打开的学习展示页,包含参考答案、运行预览、运行输出和源码阅读区。首页里的 HTML 题目会直接打开这些原始页面。tools/render-demo-pages.py 只为 3 个纯 .js 源码题生成 demos/ 学习页,用来提供可阅读的源码页面。
| 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 | 综合编程题(二) |
| Demo | 说明 |
|---|---|
| drag | 原生拖拽,含边界处理 |
| popover | 文本溢出时的气泡提示 |
| lazy-load | 图片懒加载,使用本地图片资源 |
| lazy-man | LazyMan 链式调用与任务队列 |
| get-xpath | 计算元素的 XPath |
| serialize-form | 表单序列化为查询串 |