├── .gitignore ├── CSS高级 ├── CSS工作原理和性能优化 │ ├── CSS布局模型.md │ ├── 块级格式化上下文BFC.md │ └── 行级格式化上下文IFC.md ├── CSS工程化和框架应用 │ └── postCSS.md ├── CSS预处理器及bootstrap工作原理 │ ├── CSS预处理器的作用和原理.md │ └── bootstrap原理和用法.md ├── HTML（5）和CSS（3）语言核心 │ ├── CSS变量的使用.md │ ├── CSS机制At-rule.md │ ├── CSS绘制高级技巧.md │ ├── CSS选择器.md │ ├── HTML及拓展.md │ ├── HTML语义化--如何写出更优的html.md │ └── 伪类和伪元素.md ├── demos │ ├── CSS变量的使用 │ │ └── css var.html │ ├── CSS绘制高级技巧 │ │ ├── background-clip.html │ │ ├── background-origin.html │ │ ├── background-radius.html │ │ ├── background-size.html │ │ ├── box-shadow.html │ │ ├── example.png │ │ ├── linear-gradient.html │ │ ├── radial-gradient.html │ │ ├── text-shadow.html │ │ └── zuihao.png │ ├── icon │ │ └── icomoon │ │ │ ├── Read Me.txt │ │ │ ├── demo-files │ │ │ ├── demo.css │ │ │ └── demo.js │ │ │ ├── demo.html │ │ │ ├── fonts │ │ │ ├── icomoon.eot │ │ │ ├── icomoon.svg │ │ │ ├── icomoon.ttf │ │ │ └── icomoon.woff │ │ │ ├── index.html │ │ │ ├── selection.json │ │ │ └── style.css │ ├── less和sass实践 │ │ ├── .gitignore │ │ ├── compiler.js │ │ ├── less │ │ │ ├── less.html │ │ │ ├── less │ │ │ │ ├── _nc_importing-variable.less │ │ │ │ ├── extend.less │ │ │ │ ├── importing.less │ │ │ │ ├── loop.less │ │ │ │ ├── mixin.less │ │ │ │ ├── nest.less │ │ │ │ ├── scope.less │ │ │ │ └── variable.less │ │ │ └── target │ │ │ │ ├── extend.css │ │ │ │ ├── importing.css │ │ │ │ ├── loop.css │ │ │ │ ├── mixin.css │ │ │ │ ├── nest.css │ │ │ │ ├── scope.css │ │ │ │ └── variable.css │ │ ├── note.md │ │ ├── package.json │ │ ├── sass │ │ │ ├── sass │ │ │ │ ├── _nc_import1.scss │ │ │ │ ├── _nc_import2.scss │ │ │ │ ├── _nc_import3.scss │ │ │ │ ├── extend.scss │ │ │ │ ├── import.scss │ │ │ │ ├── loop.scss │ │ │ │ ├── mixin.scss │ │ │ │ ├── nest.scss │ │ │ │ └── variable.scss │ │ │ └── target │ │ │ │ ├── extend.css │ │ │ │ ├── import.css │ │ │ │ ├── loop.css │ │ │ │ ├── mixin.css │ │ │ │ ├── nest.css │ │ │ │ └── variable.css │ │ └── yarn.lock │ ├── 伪类和伪元素 │ │ └── 伪类和伪元素.html │ ├── 动画 │ │ ├── animation.html │ │ ├── create │ │ │ ├── bubble.html │ │ │ ├── loading-byteDance.html │ │ │ └── loading-circle.html │ │ ├── steps.html │ │ ├── transform & transition.html │ │ └── 微信图片_20200408134722.jpg │ ├── 响应式 │ │ ├── vw图标列表 │ │ │ ├── iconfont.css │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.js │ │ │ ├── iconfont.json │ │ │ ├── iconfont.svg │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ ├── iconfont.woff2 │ │ │ ├── index.css │ │ │ └── index.html │ │ └── 网易 │ │ │ ├── css │ │ │ ├── index.css │ │ │ └── media.css │ │ │ └── index.html │ ├── 定位和层叠上下文 │ │ ├── 不同层叠上下文的层叠顺序研究.html │ │ ├── 定位常见值及原理.html │ │ └── 层叠顺序.html │ ├── 小米官网布局 │ │ ├── css │ │ │ ├── index.css │ │ │ └── reset.css │ │ └── index.html │ ├── 小米移动端全还原 │ │ ├── .gitignore │ │ ├── compiler.js │ │ ├── css │ │ │ ├── iconfont.css │ │ │ └── index.css │ │ ├── index.html │ │ ├── js │ │ │ ├── rem.js │ │ │ └── share.js │ │ ├── package.json │ │ ├── sass │ │ │ └── index.scss │ │ └── yarn.lock │ └── 布局 │ │ ├── 三列布局 │ │ ├── flex.html │ │ ├── float+margin.html │ │ ├── float+overflow.html │ │ ├── grid.html │ │ ├── table+table-cell.html │ │ ├── 双飞翼布局.html │ │ └── 圣杯布局.html │ │ ├── 两列布局 │ │ ├── flex.html │ │ ├── float+overflow.html │ │ ├── float.html │ │ ├── float2.html │ │ ├── grid.html │ │ ├── position.html │ │ └── table+table-cell.html │ │ ├── 全屏布局 │ │ └── 全屏布局.html │ │ ├── 多列布局 │ │ └── 多列布局.html │ │ ├── 居中布局 │ │ ├── flex.html │ │ ├── position.html │ │ └── table-cell.html │ │ ├── 等分布局 │ │ ├── flex.html │ │ ├── float.html │ │ └── table.html │ │ └── 等高布局 │ │ ├── padding+margin.html │ │ └── table.html ├── icon全解析 │ ├── icon-Sprites.md │ ├── iconfont-HTML.md │ └── img以及HTML[area]技术.md ├── imgs │ └── HtmlEntity.jpg ├── 动画 │ ├── animation.md │ ├── steps功能符介绍.md │ ├── transform.md │ └── transition.md ├── 响应式 │ ├── @media媒体查询.md │ ├── CSS常用长度单位.md │ ├── 像素.md │ ├── 弹性flex布局.md │ └── 视口.md ├── 定位和层叠上下文 │ ├── 定位常见值和实现原理.md │ └── 层叠上下文和层叠顺序.md ├── 布局 │ ├── 三列布局.md │ ├── 两列布局.md │ ├── 全屏布局.md │ ├── 多列布局.md │ ├── 居中布局.md │ ├── 布局基本知识.md │ ├── 等分布局.md │ └── 等高布局.md └── 面试真题解析 │ ├── 响应式布局方案.md │ ├── 布局相关.md │ └── 水平垂直居中.md ├── Git ├── git基础工作流程.md ├── 关于git的回滚.md ├── 分支处理和团队协作.md ├── 常用的Linux命令.md └── 集中式对比分布式.md ├── Plan ├── 100day.md ├── 腾讯面试题-01.png └── 腾讯面试题-02.png ├── README.md ├── Typescript ├── JS │ ├── MapQueue.js │ ├── Merge.js │ ├── Overwrite.js │ ├── Proxy.js │ ├── compose.js │ ├── example.js │ ├── infer.js │ ├── mixin.js │ ├── 内置工具类型.js │ ├── 内置条件类型.js │ ├── 函数的双向协变.js │ ├── 扩展变量类型.js │ ├── 抽象类.js │ ├── 接口.js │ ├── 条件类型.js │ ├── 泛型.js │ ├── 结构类型系统.js │ ├── 自定义的类型保护.js │ ├── 装饰器.js │ └── 面试题.js ├── MapQueue.ts ├── Merge.ts ├── Overwrite.ts ├── Proxy.ts ├── compose.ts ├── example.ts ├── infer.ts ├── mixin.ts ├── note.md ├── tsconfig.json ├── types │ ├── MapQueue.d.ts │ ├── Merge.d.ts │ ├── Overwrite.d.ts │ ├── Proxy.d.ts │ ├── compose.d.ts │ ├── example.d.ts │ ├── infer.d.ts │ ├── mixin.d.ts │ ├── 内置工具类型.d.ts │ ├── 内置条件类型.d.ts │ ├── 函数的双向协变.d.ts │ ├── 扩展变量类型.d.ts │ ├── 抽象类.d.ts │ ├── 接口.d.ts │ ├── 条件类型.d.ts │ ├── 泛型.d.ts │ ├── 结构类型系统.d.ts │ ├── 自定义的类型保护.d.ts │ ├── 装饰器.d.ts │ └── 面试题.d.ts ├── 内置工具类型.ts ├── 内置条件类型.ts ├── 函数的双向协变.ts ├── 扩展变量类型.ts ├── 抽象类.ts ├── 接口.ts ├── 条件类型.ts ├── 泛型.ts ├── 结构类型系统.ts ├── 自定义的类型保护.ts └── 装饰器.ts ├── WebRTC └── Demo │ ├── client.js │ └── index.html ├── images └── 2020 │ └── 08 │ ├── 1.png │ └── 图片解析.png ├── js底层，核心，基础 ├── JQuery源码解读 │ ├── jquery-3.5.1.js │ ├── jquery.js │ └── note.md ├── JS高阶编程 │ ├── example.js │ ├── note.md │ └── 面试题.md ├── imgs │ ├── 01.png │ ├── 02.png │ ├── sign_have_anime.gif │ ├── 函数的三种角色.png │ ├── 微信图片_20200902210254.png │ ├── 微信图片_20200910174720.png │ ├── 面试题_01.png │ ├── 面试题_02.png │ └── 面试题_03.png ├── 事件及事件高级应用 │ └── 事件传播机制.md ├── 作业题 │ └── THIS作业题.md ├── 同步异步编程 │ ├── note.md │ ├── promise基本知识.md │ └── 手写Promise │ │ ├── .gitignore │ │ ├── DTPromise.js │ │ ├── package.json │ │ └── yarn.lock ├── 掌握变量提升的处理机制 │ ├── example.js │ ├── note.md │ └── 变量提升面试题.md ├── 数据类型和堆栈内存 │ ├── example.js │ ├── note.md │ ├── 数据类型检测.js │ └── 面试题.md ├── 浏览器底层渲染机制 │ ├── CRP关键路径节点性能优化.md │ └── 浏览器拿到服务器的数据后做了什么.md ├── 第一周作业.js ├── 第一周作业.md ├── 第二周作业.js ├── 第二周作业.md ├── 补充 │ └── merge.js ├── 设计模式 │ └── 发布订阅模式.md ├── 错题 │ └── 错题.md ├── 闭包和作用域链 │ ├── example.js │ ├── note.md │ ├── 函数的节流和防抖 │ │ ├── debounce.js │ │ ├── throttle.js │ │ └── 防抖和节流.html │ └── 面试题.md └── 面向对象 │ ├── example.js │ ├── note.md │ ├── 对象和数组的深浅拷贝.js │ ├── 对象和数组的深浅拷贝.md │ └── 面试题.md ├── learn-vue-deeply ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── myvue │ ├── Compiler.js │ ├── DVue.html │ ├── DVue.js │ ├── mvvm.html │ └── mvvm.js ├── note │ ├── vue全家桶原理分析.md │ ├── vue组件通信.md │ └── 手写MVVM.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── source │ └── vue │ │ ├── LICENSE │ │ ├── README.md │ │ ├── dist │ │ ├── README.md │ │ ├── vue.common.dev.js │ │ ├── vue.common.js │ │ ├── vue.common.prod.js │ │ ├── vue.esm.browser.js │ │ ├── vue.esm.browser.min.js │ │ ├── vue.esm.js │ │ ├── vue.js │ │ ├── vue.min.js │ │ ├── vue.runtime.common.dev.js │ │ ├── vue.runtime.common.js │ │ ├── vue.runtime.common.prod.js │ │ ├── vue.runtime.esm.js │ │ ├── vue.runtime.js │ │ └── vue.runtime.min.js │ │ ├── package.json │ │ ├── src │ │ ├── compiler │ │ │ ├── codeframe.js │ │ │ ├── codegen │ │ │ │ ├── events.js │ │ │ │ └── index.js │ │ │ ├── create-compiler.js │ │ │ ├── directives │ │ │ │ ├── bind.js │ │ │ │ ├── index.js │ │ │ │ ├── model.js │ │ │ │ └── on.js │ │ │ ├── error-detector.js │ │ │ ├── helpers.js │ │ │ ├── index.js │ │ │ ├── optimizer.js │ │ │ ├── parser │ │ │ │ ├── entity-decoder.js │ │ │ │ ├── filter-parser.js │ │ │ │ ├── html-parser.js │ │ │ │ ├── index.js │ │ │ │ └── text-parser.js │ │ │ └── to-function.js │ │ ├── core │ │ │ ├── components │ │ │ │ ├── index.js │ │ │ │ └── keep-alive.js │ │ │ ├── config.js │ │ │ ├── global-api │ │ │ │ ├── assets.js │ │ │ │ ├── extend.js │ │ │ │ ├── index.js │ │ │ │ ├── mixin.js │ │ │ │ └── use.js │ │ │ ├── index.js │ │ │ ├── instance │ │ │ │ ├── events.js │ │ │ │ ├── index.js │ │ │ │ ├── init.js │ │ │ │ ├── inject.js │ │ │ │ ├── lifecycle.js │ │ │ │ ├── proxy.js │ │ │ │ ├── render-helpers │ │ │ │ │ ├── bind-dynamic-keys.js │ │ │ │ │ ├── bind-object-listeners.js │ │ │ │ │ ├── bind-object-props.js │ │ │ │ │ ├── check-keycodes.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── render-list.js │ │ │ │ │ ├── render-slot.js │ │ │ │ │ ├── render-static.js │ │ │ │ │ ├── resolve-filter.js │ │ │ │ │ ├── resolve-scoped-slots.js │ │ │ │ │ └── resolve-slots.js │ │ │ │ ├── render.js │ │ │ │ └── state.js │ │ │ ├── observer │ │ │ │ ├── array.js │ │ │ │ ├── dep.js │ │ │ │ ├── index.js │ │ │ │ ├── scheduler.js │ │ │ │ ├── traverse.js │ │ │ │ └── watcher.js │ │ │ ├── util │ │ │ │ ├── debug.js │ │ │ │ ├── env.js │ │ │ │ ├── error.js │ │ │ │ ├── index.js │ │ │ │ ├── lang.js │ │ │ │ ├── next-tick.js │ │ │ │ ├── options.js │ │ │ │ ├── perf.js │ │ │ │ └── props.js │ │ │ └── vdom │ │ │ │ ├── create-component.js │ │ │ │ ├── create-element.js │ │ │ │ ├── create-functional-component.js │ │ │ │ ├── helpers │ │ │ │ ├── extract-props.js │ │ │ │ ├── get-first-component-child.js │ │ │ │ ├── index.js │ │ │ │ ├── is-async-placeholder.js │ │ │ │ ├── merge-hook.js │ │ │ │ ├── normalize-children.js │ │ │ │ ├── normalize-scoped-slots.js │ │ │ │ ├── resolve-async-component.js │ │ │ │ └── update-listeners.js │ │ │ │ ├── modules │ │ │ │ ├── directives.js │ │ │ │ ├── index.js │ │ │ │ └── ref.js │ │ │ │ ├── patch.js │ │ │ │ └── vnode.js │ │ ├── platforms │ │ │ ├── web │ │ │ │ ├── compiler │ │ │ │ │ ├── directives │ │ │ │ │ │ ├── html.js │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ ├── model.js │ │ │ │ │ │ └── text.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── modules │ │ │ │ │ │ ├── class.js │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ ├── model.js │ │ │ │ │ │ └── style.js │ │ │ │ │ ├── options.js │ │ │ │ │ └── util.js │ │ │ │ ├── entry-compiler.js │ │ │ │ ├── entry-runtime-with-compiler.js │ │ │ │ ├── entry-runtime.js │ │ │ │ ├── entry-server-basic-renderer.js │ │ │ │ ├── entry-server-renderer.js │ │ │ │ ├── runtime │ │ │ │ │ ├── class-util.js │ │ │ │ │ ├── components │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ ├── transition-group.js │ │ │ │ │ │ └── transition.js │ │ │ │ │ ├── directives │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ ├── model.js │ │ │ │ │ │ └── show.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── modules │ │ │ │ │ │ ├── attrs.js │ │ │ │ │ │ ├── class.js │ │ │ │ │ │ ├── dom-props.js │ │ │ │ │ │ ├── events.js │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ ├── style.js │ │ │ │ │ │ └── transition.js │ │ │ │ │ ├── node-ops.js │ │ │ │ │ ├── patch.js │ │ │ │ │ └── transition-util.js │ │ │ │ ├── server │ │ │ │ │ ├── compiler.js │ │ │ │ │ ├── directives │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ ├── model.js │ │ │ │ │ │ └── show.js │ │ │ │ │ ├── modules │ │ │ │ │ │ ├── attrs.js │ │ │ │ │ │ ├── class.js │ │ │ │ │ │ ├── dom-props.js │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── style.js │ │ │ │ │ └── util.js │ │ │ │ └── util │ │ │ │ │ ├── attrs.js │ │ │ │ │ ├── class.js │ │ │ │ │ ├── compat.js │ │ │ │ │ ├── element.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── style.js │ │ │ └── weex │ │ │ │ ├── compiler │ │ │ │ ├── directives │ │ │ │ │ ├── index.js │ │ │ │ │ └── model.js │ │ │ │ ├── index.js │ │ │ │ └── modules │ │ │ │ │ ├── append.js │ │ │ │ │ ├── class.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── props.js │ │ │ │ │ ├── recycle-list │ │ │ │ │ ├── component-root.js │ │ │ │ │ ├── component.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── recycle-list.js │ │ │ │ │ ├── text.js │ │ │ │ │ ├── v-bind.js │ │ │ │ │ ├── v-for.js │ │ │ │ │ ├── v-if.js │ │ │ │ │ ├── v-on.js │ │ │ │ │ └── v-once.js │ │ │ │ │ └── style.js │ │ │ │ ├── entry-compiler.js │ │ │ │ ├── entry-framework.js │ │ │ │ ├── entry-runtime-factory.js │ │ │ │ ├── runtime │ │ │ │ ├── components │ │ │ │ │ ├── index.js │ │ │ │ │ ├── richtext.js │ │ │ │ │ ├── transition-group.js │ │ │ │ │ └── transition.js │ │ │ │ ├── directives │ │ │ │ │ └── index.js │ │ │ │ ├── index.js │ │ │ │ ├── modules │ │ │ │ │ ├── attrs.js │ │ │ │ │ ├── class.js │ │ │ │ │ ├── events.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── style.js │ │ │ │ │ └── transition.js │ │ │ │ ├── node-ops.js │ │ │ │ ├── patch.js │ │ │ │ ├── recycle-list │ │ │ │ │ ├── render-component-template.js │ │ │ │ │ └── virtual-component.js │ │ │ │ └── text-node.js │ │ │ │ └── util │ │ │ │ ├── element.js │ │ │ │ ├── index.js │ │ │ │ └── parser.js │ │ ├── server │ │ │ ├── bundle-renderer │ │ │ │ ├── create-bundle-renderer.js │ │ │ │ ├── create-bundle-runner.js │ │ │ │ └── source-map-support.js │ │ │ ├── create-basic-renderer.js │ │ │ ├── create-renderer.js │ │ │ ├── optimizing-compiler │ │ │ │ ├── codegen.js │ │ │ │ ├── index.js │ │ │ │ ├── modules.js │ │ │ │ ├── optimizer.js │ │ │ │ └── runtime-helpers.js │ │ │ ├── render-context.js │ │ │ ├── render-stream.js │ │ │ ├── render.js │ │ │ ├── template-renderer │ │ │ │ ├── create-async-file-mapper.js │ │ │ │ ├── index.js │ │ │ │ ├── parse-template.js │ │ │ │ └── template-stream.js │ │ │ ├── util.js │ │ │ ├── webpack-plugin │ │ │ │ ├── client.js │ │ │ │ ├── server.js │ │ │ │ └── util.js │ │ │ └── write.js │ │ ├── sfc │ │ │ └── parser.js │ │ └── shared │ │ │ ├── constants.js │ │ │ └── util.js │ │ └── types │ │ ├── index.d.ts │ │ ├── options.d.ts │ │ ├── plugin.d.ts │ │ ├── umd.d.ts │ │ ├── vnode.d.ts │ │ └── vue.d.ts ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── HelloWorld.vue │ │ ├── Notice.vue │ │ └── form │ │ │ ├── d-form-item.vue │ │ │ ├── d-form.vue │ │ │ └── d-input.vue │ ├── drouter │ │ ├── drouter-link.js │ │ ├── drouter-view.js │ │ ├── dvue-router.js │ │ ├── index.js │ │ └── modules │ │ │ ├── Login.js │ │ │ ├── component-pratice.js │ │ │ └── dvuex.js │ ├── dstore │ │ ├── dvuex.js │ │ ├── getters.js │ │ └── index.js │ ├── main.js │ ├── mixins │ │ └── emitter.js │ ├── router │ │ ├── index.js │ │ └── modules │ │ │ ├── Login.js │ │ │ └── component-pratice.js │ ├── store │ │ ├── getters.js │ │ ├── index.js │ │ └── modules │ │ │ ├── menu.js │ │ │ └── test.js │ ├── style │ │ └── index.css │ ├── utils │ │ └── create.js │ └── views │ │ ├── About.vue │ │ ├── Home.vue │ │ ├── component-pratice │ │ └── component-pratice.vue │ │ └── dvuex │ │ └── dvuex.vue ├── vue.config.js ├── vue │ ├── .babelrc │ ├── dist │ │ ├── vue.js │ │ └── vue.js.map │ ├── index.html │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ └── index.js │ └── yarn.lock └── vue项目最佳实践.pdf ├── learn-webpack-deeply ├── webpack-01.pdf ├── webpack-Day2.pdf ├── webpack-Day3.pdf ├── webpack-Day4.pdf ├── webpack-Day5.pdf ├── webpack-Day6.pdf └── webpack-core-config │ ├── .babelrc │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src │ ├── bg.png │ ├── index.js │ ├── index.scss │ └── zs.ttf │ ├── webpack.config.base.js │ ├── webpack.config.dev.js │ ├── webpack.config.js │ └── webpack.config.prod.js ├── react ├── learn-react-deeply │ ├── React.xmind │ └── my-react │ │ ├── .env.development │ │ ├── .eslintcache │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── Component.js │ │ ├── constants.js │ │ ├── event.js │ │ ├── index.js │ │ ├── react-dom.js │ │ ├── react.js │ │ └── utils.js ├── preview │ ├── JSX.md │ ├── init.md │ ├── setState.md │ ├── 组件.md │ └── 组件的生命周期.md └── react-ts │ ├── .gitignore │ ├── README.md │ ├── config │ ├── env.js │ ├── getHttpsConfig.js │ ├── jest │ │ ├── cssTransform.js │ │ └── fileTransform.js │ ├── modules.js │ ├── paths.js │ ├── pnpTs.js │ ├── webpack.config.js │ └── webpackDevServer.config.js │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── scripts │ ├── build.js │ ├── start.js │ └── test.js │ ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── api │ │ ├── api.ts │ │ └── http.ts │ ├── components │ │ ├── Layout.tsx │ │ ├── ProtectRoute.tsx │ │ └── nav.tsx │ ├── index.css │ ├── index.d.ts │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ ├── setupTests.ts │ ├── store │ │ ├── actions │ │ │ └── find.ts │ │ ├── index.ts │ │ └── reducers │ │ │ ├── findReducers.ts │ │ │ └── types.ts │ ├── style │ │ ├── find.scss │ │ ├── layout.scss │ │ └── nav.scss │ └── views │ │ ├── Login.tsx │ │ ├── cloud.tsx │ │ ├── find.tsx │ │ ├── regist.tsx │ │ ├── search.tsx │ │ ├── user.tsx │ │ └── video.tsx │ └── tsconfig.json ├── vue3 ├── .gitignore ├── examples │ ├── 1.reactive-api.html │ ├── 2.effect.html │ ├── 3.ref.html │ ├── 4.computed.html │ └── 5.createApp.html ├── package.json ├── packages │ ├── reactivity │ │ ├── dist │ │ │ ├── reactivity.cjs.js │ │ │ ├── reactivity.cjs.js.map │ │ │ ├── reactivity.esm-bundler.js │ │ │ ├── reactivity.esm-bundler.js.map │ │ │ ├── reactivity.global.js │ │ │ └── reactivity.global.js.map │ │ ├── package.json │ │ └── src │ │ │ ├── baseHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── index.ts │ │ │ ├── operators.ts │ │ │ ├── reactive.ts │ │ │ └── ref.ts │ ├── runtime-core │ │ ├── package.json │ │ └── src │ │ │ ├── apiCreateApp.ts │ │ │ ├── component.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ ├── runtime-dom │ │ ├── dist │ │ │ ├── runtime-dom.esm-bundler.js │ │ │ ├── runtime-dom.esm-bundler.js.map │ │ │ ├── runtime-dom.global.js │ │ │ └── runtime-dom.global.js.map │ │ ├── package.json │ │ └── src │ │ │ ├── index.ts │ │ │ ├── modules │ │ │ ├── attr.ts │ │ │ ├── class.ts │ │ │ ├── events.ts │ │ │ └── style.ts │ │ │ ├── nodeOps.ts │ │ │ └── patchProp.ts │ └── shared │ │ ├── dist │ │ ├── shared.cjs.js │ │ ├── shared.cjs.js.map │ │ ├── shared.esm-bundler.js │ │ └── shared.esm-bundler.js.map │ │ ├── package.json │ │ └── src │ │ ├── index.ts │ │ └── shapeFlag.ts ├── rollup.config.js ├── scripts │ ├── build.js │ └── dev.js ├── tsconfig.json └── yarn.lock ├── web-component ├── collapse │ ├── collapse-item.js │ ├── collapse.js │ ├── event-bus.js │ ├── index.html │ └── index.js └── index.txt ├── webpack4.0 ├── Tree-Shaking&Scope-Hosting.md ├── webpack的零配置操作.md ├── 关于CSS（LESS）的处理.md ├── 关于JS的处理（兼容转换和词法检测）.md ├── 关于图片的处理（含优化压缩）.md ├── 删除无用的JS和CSS.md ├── 基于自定义配置项打包编译(环境区分).md ├── 配置HTML页面模板进行打包.md ├── 配置devServer.md └── 配置多入口的打包编译.md ├── 专题 ├── Generator │ ├── JS │ │ ├── btree.js │ │ └── flat-array.js │ ├── btree.js │ ├── btree.js.map │ ├── btree.ts │ ├── flat-array.js │ ├── flat-array.js.map │ ├── flat-array.ts │ └── tsconfig.json ├── Promise │ ├── index.js │ └── index.ts ├── 前端安全 │ └── note.md ├── 前端文件处理 │ ├── note.md │ ├── upload.html │ └── 文件上传Plus │ │ ├── client │ │ ├── .eslintcache │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── index.html │ │ │ └── worker.js │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.tsx │ │ │ ├── Upload.tsx │ │ │ ├── index.tsx │ │ │ ├── react-app-env.d.ts │ │ │ └── utils.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ │ └── server │ │ ├── dist │ │ ├── app.js │ │ ├── app.js.map │ │ ├── utils.js │ │ ├── utils.js.map │ │ ├── www.js │ │ └── www.js.map │ │ ├── package.json │ │ ├── src │ │ ├── app.ts │ │ ├── utils.ts │ │ └── www.ts │ │ ├── tsconfig.json │ │ └── yarn.lock ├── 浏览器渲染原理 │ ├── browserRender1.png │ └── note1.md └── 跨域 │ └── 跨域.xmind ├── 前端性能优化 ├── 代码优化 │ ├── CSS对性能的影响.md │ ├── HTML优化.md │ ├── JavaScript对象优化.md │ ├── JavaScript的开销和如何缩短解析时间.md │ ├── 函数优化.md │ └── 配合V8有效优化代码.md ├── 性能优化的指标和工具 │ ├── RAIL测量模型.md │ ├── 为什么要进行Web性能优化.md │ ├── 使用Chrome DevTools分析性能.md │ ├── 使用Lighthouse分析性能.md │ ├── 使用WebPageTest评估Web网站性能.md │ ├── 性能指标APIs.md │ └── 性能指标和优化目标.md ├── 渲染优化 │ ├── 使用fastdom.md │ ├── 减少重绘.md │ ├── 复合线程和图层.md │ └── 布局和绘制.md └── 资源优化 │ ├── 图片优化-图片加载优化.md │ ├── 图片优化-图片格式优化.md │ ├── 字体优化.md │ └── 资源的压缩与合并.md ├── 正则表达式 ├── 常用的正则表达式.md ├── 正则表达式中的分组捕获和分组引用.md ├── 正则表达式之queryURLParams.md ├── 正则表达式之其它捕获方法.md ├── 正则表达式之千分符.md ├── 正则表达式之取消贪婪性.md ├── 正则表达式之时间字符串格式化.md ├── 正则表达式之获取最多出现的字母.md ├── 正则表达式捕获的懒惰性.md ├── 正则表达式概述.md └── 正则表达式的元字符剖析.md ├── 算法和数据结构 ├── JS │ ├── src │ │ ├── 数据结构 │ │ │ ├── Heap.js │ │ │ ├── Tree.js │ │ │ └── 优先级队列.js │ │ └── 算法 │ │ │ ├── 减治法 │ │ │ ├── Heap.js │ │ │ ├── 堆排序.js │ │ │ └── 插入排序.js │ │ │ ├── 分治法 │ │ │ ├── 归并排序.js │ │ │ └── 快速排序.js │ │ │ ├── 动态规划 │ │ │ └── 数塔问题.js │ │ │ └── 蛮力法 │ │ │ ├── KMP.js │ │ │ └── 选择排序.js │ └── test │ │ ├── 数据结构 │ │ ├── Heap.test.js │ │ ├── Tree.test.js │ │ └── 优先级队列.test.js │ │ └── 算法 │ │ ├── KMP.test.js │ │ ├── 减治法 │ │ ├── Heap.test.js │ │ ├── 堆排序.test.js │ │ └── 插入排序.test.js │ │ ├── 分治法 │ │ ├── 归并排序.test.js │ │ └── 快速排序.test.js │ │ └── 蛮力法 │ │ ├── KMP.test.js │ │ └── 选择排序.test.js ├── coverage │ ├── clover.xml │ ├── coverage-final.json │ ├── lcov-report │ │ ├── Heap.ts.html │ │ ├── Tree.ts.html │ │ ├── base.css │ │ ├── block-navigation.js │ │ ├── favicon.png │ │ ├── index.html │ │ ├── prettify.css │ │ ├── prettify.js │ │ ├── sort-arrow-sprite.png │ │ ├── sorter.js │ │ ├── 优先级队列.ts.html │ │ ├── 数据结构 │ │ │ ├── Heap.ts.html │ │ │ ├── Tree.ts.html │ │ │ ├── index.html │ │ │ └── 优先级队列.ts.html │ │ └── 算法 │ │ │ ├── KMP.ts.html │ │ │ ├── index.html │ │ │ ├── 减治法 │ │ │ ├── Heap.ts.html │ │ │ ├── index.html │ │ │ ├── 堆排序.ts.html │ │ │ └── 插入排序.ts.html │ │ │ ├── 分治法 │ │ │ ├── index.html │ │ │ ├── 归并排序.ts.html │ │ │ └── 快速排序.ts.html │ │ │ └── 蛮力法 │ │ │ ├── KMP.ts.html │ │ │ ├── index.html │ │ │ └── 选择排序.ts.html │ └── lcov.info ├── jest.config.js ├── note.md ├── package.json ├── src │ ├── types │ │ ├── src │ │ │ ├── 数据结构 │ │ │ │ ├── Heap.d.ts │ │ │ │ ├── Tree.d.ts │ │ │ │ └── 优先级队列.d.ts │ │ │ └── 算法 │ │ │ │ ├── KMP.d.ts │ │ │ │ ├── 减治法 │ │ │ │ ├── Heap.d.ts │ │ │ │ ├── 堆排序.d.ts │ │ │ │ └── 插入排序.d.ts │ │ │ │ ├── 分治法 │ │ │ │ ├── 归并排序.d.ts │ │ │ │ └── 快速排序.d.ts │ │ │ │ ├── 动态规划 │ │ │ │ └── 数塔问题.d.ts │ │ │ │ └── 蛮力法 │ │ │ │ ├── KMP.d.ts │ │ │ │ └── 选择排序.d.ts │ │ └── test │ │ │ ├── 数据结构 │ │ │ ├── Heap.test.d.ts │ │ │ ├── Tree.test.d.ts │ │ │ └── 优先级队列.test.d.ts │ │ │ └── 算法 │ │ │ ├── KMP.test.d.ts │ │ │ ├── 减治法 │ │ │ ├── Heap.test.d.ts │ │ │ ├── 堆排序.test.d.ts │ │ │ └── 插入排序.test.d.ts │ │ │ ├── 分治法 │ │ │ ├── 归并排序.test.d.ts │ │ │ └── 快速排序.test.d.ts │ │ │ └── 蛮力法 │ │ │ ├── KMP.test.d.ts │ │ │ └── 选择排序.test.d.ts │ ├── 数据结构 │ │ ├── Heap.js │ │ ├── Heap.js.map │ │ ├── Heap.ts │ │ ├── Tree.ts │ │ ├── 优先级队列.js │ │ ├── 优先级队列.js.map │ │ └── 优先级队列.ts │ └── 算法 │ │ ├── 减治法 │ │ ├── 堆排序.ts │ │ └── 插入排序.ts │ │ ├── 分治法 │ │ ├── 归并排序.ts │ │ └── 快速排序.ts │ │ ├── 动态规划 │ │ └── 数塔问题.ts │ │ └── 蛮力法 │ │ ├── KMP.ts │ │ └── 选择排序.ts ├── test │ ├── 数据结构 │ │ ├── Heap.test.js │ │ ├── Heap.test.js.map │ │ ├── Heap.test.ts │ │ ├── Tree.test.ts │ │ ├── 优先级队列.test.js │ │ ├── 优先级队列.test.js.map │ │ └── 优先级队列.test.ts │ └── 算法 │ │ ├── 减治法 │ │ ├── 堆排序.test.ts │ │ └── 插入排序.test.ts │ │ ├── 分治法 │ │ ├── 归并排序.test.ts │ │ └── 快速排序.test.ts │ │ └── 蛮力法 │ │ ├── KMP.test.ts │ │ └── 选择排序.test.ts ├── tsconfig.json └── yarn.lock ├── 算法练习 ├── JS │ ├── 15.三数之和.js │ └── 20.有效的括号.js ├── TS │ ├── 15.三数之和.ts │ ├── 155.最小栈.ts │ └── 20.有效的括号.ts ├── package-lock.json ├── package.json ├── tsconfig.json └── types │ ├── 15.三数之和.d.ts │ └── 20.有效的括号.d.ts ├── 编译原理 ├── JS │ ├── docs │ │ ├── flexier.js │ │ └── tokenizer.js │ └── src │ │ ├── index.js │ │ └── tokenizer.js ├── docs │ ├── flexier.ts │ └── tokenizer.ts ├── package.json ├── src │ ├── JSX文法.txt │ ├── ast.ts │ ├── compiler.ts │ ├── index.ts │ ├── targets │ │ ├── ShareImage-AST.json │ │ └── ShareImage-reserved-AST.json │ ├── templates │ │ ├── ShareImage.dxml │ │ ├── auth.dxml │ │ ├── vform-item.dxml │ │ └── vform.dxml │ ├── token-reader.ts │ └── tokenizer.ts ├── tsconfig.json ├── types │ ├── docs │ │ ├── flexier.d.ts │ │ └── tokenizer.d.ts │ └── src │ │ ├── index.d.ts │ │ └── tokenizer.d.ts └── 笔记.md ├── 计算机网络 ├── assets │ ├── ARQ&SlideWindow.png │ ├── ARQ.png │ ├── ARQ2.png │ ├── Reset.png │ ├── TCP01_序号_确认号.png │ ├── TCP02_流量控制.png │ ├── image-20201124090935078.png │ ├── image-20201124100153097.png │ ├── image-20201124100153097_l72f2re26.png │ ├── image-20201124100153097_l72f2re26_g49ef3rgy.png │ ├── ip-packet-header-protocol.png │ └── netcard.png ├── 计算机网络.md └── 计算机网络.xmind └── 设计模式 ├── entity ├── JS │ ├── src │ │ ├── 单例模式.js │ │ ├── 命令模式.js │ │ ├── 工厂模式.js │ │ ├── 状态模式.js │ │ ├── 策略模式.js │ │ ├── 组合模式.js │ │ ├── 装饰器模式.js │ │ ├── 观察者模式.js │ │ ├── 适配器模式.js │ │ ├── 门面模式.js │ │ └── 面向对象.js │ └── 图片懒加载-代理模式 │ │ └── server.js ├── package.json ├── src │ ├── types │ │ ├── src │ │ │ ├── 单例模式.d.ts │ │ │ ├── 命令模式.d.ts │ │ │ ├── 工厂模式.d.ts │ │ │ ├── 状态模式.d.ts │ │ │ ├── 策略模式.d.ts │ │ │ ├── 组合模式.d.ts │ │ │ ├── 装饰器模式.d.ts │ │ │ ├── 观察者模式.d.ts │ │ │ ├── 适配器模式.d.ts │ │ │ ├── 门面模式.d.ts │ │ │ └── 面向对象.d.ts │ │ ├── 单例模式.d.ts │ │ ├── 图片懒加载-代理模式 │ │ │ └── server.d.ts │ │ ├── 工厂模式.d.ts │ │ ├── 状态模式.d.ts │ │ ├── 策略模式.d.ts │ │ ├── 组合模式.d.ts │ │ ├── 装饰器模式.d.ts │ │ ├── 观察者模式.d.ts │ │ ├── 适配器模式.d.ts │ │ ├── 门面模式.d.ts │ │ └── 面向对象.d.ts │ ├── 单例模式.ts │ ├── 原型模式.html │ ├── 命令模式.ts │ ├── 工厂模式.ts │ ├── 状态模式.ts │ ├── 策略模式.ts │ ├── 组合模式.ts │ ├── 装饰器模式.ts │ ├── 观察者模式.ts │ ├── 适配器模式.ts │ ├── 门面模式.ts │ └── 面向对象.ts ├── tsconfig.json ├── yarn.lock └── 图片懒加载-代理模式 │ ├── images │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg │ ├── server.ts │ └── 图片懒加载.html └── 设计模式.md /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .idea 3 | node_modules 4 | /专题/前端文件处理/文件上传Plus/server/src/public/ 5 | -------------------------------------------------------------------------------- /CSS高级/CSS工作原理和性能优化/行级格式化上下文IFC.md: -------------------------------------------------------------------------------- 1 | ## 行级格式化上下文IFC 2 | 3 | IFC叫做内联格式化上下文 4 | 5 | 内部的元素从包含块的顶部开始排列，从左到右排列成一行形成的一个矩形盒子叫做line-box； 6 | 7 | 8 | 9 | ### IFC的布局规则 10 | 11 | 盒子是水平一个接着一个的排列，水平的margin，内边距，边框是可以有的。 12 | 13 | 垂直方向上的对齐可能是顶部对齐，底部对齐也可能是**基线对齐(默认)**； 14 | 15 | 行框中的内联盒子的高度小于行框高度时，内敛盒子的垂直方向的对齐方式取决于vertical-align属性。 16 | 17 | 当一个行框水平不能容纳内联盒子时，他们会在垂直方向上产生多个行框，他们上下一个挨着一个，但是不会重叠。 18 | 19 | 一般来说，行框的左边界紧挨着包含容器的左边界，行框的右边界紧挨着包含容器的右边界。然而，浮动盒子可能存在于包含边框边界和行框边界之间。 20 | 21 | 22 | 23 | ### IFC的作用 24 | 25 | 水平居中: 当一个块要在环境中水平居中的时候，设置其为inline-block则会在外层产生IFC，通过text-align: center则可以使其水平居中。 26 | 27 | 垂直居中：创建一个IFC，用其中一个元素撑开父元素高度，然后设置其vertical-align: middle，其他行内元素可以在此父元素下垂直居中。 -------------------------------------------------------------------------------- /CSS高级/CSS工程化和框架应用/postCSS.md: -------------------------------------------------------------------------------- 1 | ## post CSS 2 | 3 | postCSS 主要负责解析CSS 4 | 5 | 然后生成AST，然后把JS 对象交给一个个插件从而再生成CSS -------------------------------------------------------------------------------- /CSS高级/CSS预处理器及bootstrap工作原理/CSS预处理器的作用和原理.md: -------------------------------------------------------------------------------- 1 | ## CSS预处理器原理和作用 2 | 3 | 4 | 5 | ### 什么是CSS预处理器 6 | 7 | CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标文件输出，然后开发者就只需要使用这种语言进行编码工作。 8 | 9 | 通俗的说，"CSS预处理器用一种专门的语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS 预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容问题"，例如你可以在CSS中使用变量，简单的逻辑程序，函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。 10 | 11 | 12 | 13 | ### CSS预处理器框架 14 | 15 | **Less - Lesshat** 16 | 17 | **sass - Compass** 18 | 19 | 框架中提供了现成的mixin 20 | 21 | 类似JS类库 封装常用功能 22 | 23 | -------------------------------------------------------------------------------- /CSS高级/CSS预处理器及bootstrap工作原理/bootstrap原理和用法.md: -------------------------------------------------------------------------------- 1 | ## bootstrap原理和用法 2 | 3 | version:4+ 4 | 5 | 6 | 7 | ### 优缺点 8 | 9 | **优点：** CSS代码结构合理 现成的样式可以直接使用 10 | 11 | **缺点：** 定制较为繁琐 体积较大 12 | 13 | 14 | 15 | ### 响应式布局 16 | 17 | 原理：通过media query设置不同分辨率的class 18 | 19 | 使用：为不同分辨率选择不同的网格class 20 | 21 | 22 | 23 | ### 定制 24 | 25 | 使用CSS同名类覆盖 26 | 27 | 修改源码重新构建 28 | 29 | 引用scss源文件 修改变量 -------------------------------------------------------------------------------- /CSS高级/HTML（5）和CSS（3）语言核心/CSS机制At-rule.md: -------------------------------------------------------------------------------- 1 | ## CSS机制At-rule 2 | 3 | ### 常规规则 4 | 5 | - @charset 声明字符集（基本不用写了，html中有meta声明了） 6 | - @import 导入外部CSS但是是同步的，很影响性能，不建议使用 7 | - @namespace 命名空间(用于xml中) 8 | 9 | ### 嵌套规则 10 | 11 | - @document 文档 12 | - @font-face 字体图标 13 | - @keyframes 关键帧，动画的运动轨迹 14 | - @media 媒体查询，响应式适配 15 | - @page 16 | - @supports 兼容写法处理 17 | -------------------------------------------------------------------------------- /CSS高级/demos/CSS变量的使用/css var.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS变量使用 8 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /CSS高级/demos/CSS绘制高级技巧/box-shadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | box-shadow 8 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /CSS高级/demos/CSS绘制高级技巧/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/CSS绘制高级技巧/example.png -------------------------------------------------------------------------------- /CSS高级/demos/CSS绘制高级技巧/text-shadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | text-shadow 8 | 15 | 16 | 17 | 18 |
text-shadow
19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /CSS高级/demos/CSS绘制高级技巧/zuihao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/CSS绘制高级技巧/zuihao.png -------------------------------------------------------------------------------- /CSS高级/demos/icon/icomoon/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts 4 | 5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 6 | 7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. 8 | -------------------------------------------------------------------------------- /CSS高级/demos/icon/icomoon/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/icon/icomoon/fonts/icomoon.eot -------------------------------------------------------------------------------- /CSS高级/demos/icon/icomoon/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/icon/icomoon/fonts/icomoon.ttf -------------------------------------------------------------------------------- /CSS高级/demos/icon/icomoon/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/icon/icomoon/fonts/icomoon.woff -------------------------------------------------------------------------------- /CSS高级/demos/icon/icomoon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | icon-font 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/less.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | LESS 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/less/_nc_importing-variable.less: -------------------------------------------------------------------------------- 1 | @fontSize: 12px; 2 | @bgColor: red; -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/less/extend.less: -------------------------------------------------------------------------------- 1 | @fontSize: 12px; 2 | @bgColor: red; 3 | 4 | .block { 5 | font-size: 12px; 6 | border: 1px solid #ccc; 7 | border-radius: 4px; 8 | } 9 | 10 | .wrapper { 11 | background-color: lighten(@bgColor, 40%); 12 | 13 | .nav:extend(.block) { 14 | color: #333333; 15 | } 16 | 17 | .content { 18 | &:extend(.block); 19 | 20 | &:hover { 21 | background-color: red; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/less/importing.less: -------------------------------------------------------------------------------- 1 | @import "./_nc_importing-variable.less"; 2 | 3 | .box{ 4 | background-color: @bgColor; 5 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/less/loop.less: -------------------------------------------------------------------------------- 1 | .gen-col(@n) when (@n > 0) { 2 | .gen-col(@n - 1); 3 | 4 | .col-@{n} { 5 | width: 1000px/12*@n; 6 | } 7 | } 8 | 9 | .gen-col(12); -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/less/nest.less: -------------------------------------------------------------------------------- 1 | #header { 2 | color: black; 3 | 4 | .navgation { 5 | font-size: 12px; 6 | } 7 | 8 | .logo { 9 | width: 300px; 10 | } 11 | } 12 | 13 | 14 | .clearfix { 15 | display: block; 16 | zoom: 1; 17 | 18 | &::after { 19 | display: block; 20 | clear: both; 21 | content: ""; 22 | font-size: 0; 23 | visibility: hidden; 24 | } 25 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/less/scope.less: -------------------------------------------------------------------------------- 1 | @var: red; 2 | 3 | #page { 4 | @var: white; 5 | 6 | #header { 7 | color: @var; // white 8 | } 9 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/less/variable.less: -------------------------------------------------------------------------------- 1 | @width: 10px; 2 | @height: @width + 10px; 3 | 4 | #header { 5 | width: @width; 6 | height: @height; 7 | } 8 | 9 | @fontSize: 16px; 10 | @bgColor: red; 11 | 12 | html { 13 | background-color: @bgColor; 14 | } 15 | 16 | body { 17 | background-color: @bgColor; 18 | font-size: @fontSize; 19 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/target/extend.css: -------------------------------------------------------------------------------- 1 | .block, 2 | .wrapper .nav, 3 | .wrapper .content { 4 | font-size: 12px; 5 | border: 1px solid #ccc; 6 | border-radius: 4px; 7 | } 8 | .wrapper { 9 | background-color: #ffcccc; 10 | } 11 | .wrapper .nav { 12 | color: #333333; 13 | } 14 | .wrapper .content:hover { 15 | background-color: red; 16 | } 17 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/target/importing.css: -------------------------------------------------------------------------------- 1 | .box { 2 | background-color: red; 3 | } 4 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/target/loop.css: -------------------------------------------------------------------------------- 1 | .col-1 { 2 | width: 83.33333333px; 3 | } 4 | .col-2 { 5 | width: 166.66666667px; 6 | } 7 | .col-3 { 8 | width: 250px; 9 | } 10 | .col-4 { 11 | width: 333.33333333px; 12 | } 13 | .col-5 { 14 | width: 416.66666667px; 15 | } 16 | .col-6 { 17 | width: 500px; 18 | } 19 | .col-7 { 20 | width: 583.33333333px; 21 | } 22 | .col-8 { 23 | width: 666.66666667px; 24 | } 25 | .col-9 { 26 | width: 750px; 27 | } 28 | .col-10 { 29 | width: 833.33333333px; 30 | } 31 | .col-11 { 32 | width: 916.66666667px; 33 | } 34 | .col-12 { 35 | width: 1000px; 36 | } 37 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/target/mixin.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | background-color: #ffcccc; 3 | } 4 | .wrapper .nav { 5 | font-size: 14px; 6 | border: 1px solid #ccc; 7 | border-radius: 4px; 8 | } 9 | .wrapper .content { 10 | font-size: 14px; 11 | border: 1px solid #ccc; 12 | border-radius: 4px; 13 | } 14 | .wrapper .content:hover { 15 | background-color: red; 16 | } 17 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/target/nest.css: -------------------------------------------------------------------------------- 1 | #header { 2 | color: black; 3 | } 4 | #header .navgation { 5 | font-size: 12px; 6 | } 7 | #header .logo { 8 | width: 300px; 9 | } 10 | .clearfix { 11 | display: block; 12 | zoom: 1; 13 | } 14 | .clearfix::after { 15 | display: block; 16 | clear: both; 17 | content: ""; 18 | font-size: 0; 19 | visibility: hidden; 20 | } 21 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/target/scope.css: -------------------------------------------------------------------------------- 1 | #page #header { 2 | color: white; 3 | } 4 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/less/target/variable.css: -------------------------------------------------------------------------------- 1 | #header { 2 | width: 10px; 3 | height: 20px; 4 | } 5 | html { 6 | background-color: red; 7 | } 8 | body { 9 | background-color: red; 10 | font-size: 16px; 11 | } 12 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/note.md: -------------------------------------------------------------------------------- 1 | ## less实践 2 | 3 | 4 | 5 | ### less的功能 6 | 7 | 变量：@ 8 | 9 | 嵌套 Nesting 10 | 11 | 混合 Mixins 12 | 13 | 扩展 Extend 14 | 15 | 作用域 Scope 16 | 17 | 循环 Loop 18 | 19 | 导入 Importing -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "less", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "devDependencies": { 7 | "less": "^3.12.2" 8 | }, 9 | "scripts": { 10 | "less": "nodemon -w ./less/less -e .less ./compiler.js lang=less", 11 | "sass": "nodemon -w ./sass/sass -e .scss ./compiler.js lang=sass" 12 | }, 13 | "dependencies": { 14 | "lessc": "^1.0.2", 15 | "node-cmd": "^3.0.0", 16 | "node-sass": "^4.14.1" 17 | } 18 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/sass/_nc_import1.scss: -------------------------------------------------------------------------------- 1 | $fontSize: 12px; 2 | $bgColor: lightblue; -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/sass/_nc_import2.scss: -------------------------------------------------------------------------------- 1 | .module2 { 2 | .box { 3 | font-size: 18px; 4 | background-color: $bgColor; 5 | } 6 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/sass/_nc_import3.scss: -------------------------------------------------------------------------------- 1 | .module3 { 2 | .box { 3 | font-size: 24px; 4 | } 5 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/sass/extend.scss: -------------------------------------------------------------------------------- 1 | $fontSize: 12px; 2 | $bgColor: blue; 3 | .block { 4 | font-size: $fontSize; 5 | border: 1px solid gold; 6 | border-radius: 4px; 7 | } 8 | 9 | .nav { 10 | .inner { 11 | @extend .block; 12 | } 13 | .other { 14 | @extend .block; 15 | background-color: wheat; 16 | } 17 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/sass/import.scss: -------------------------------------------------------------------------------- 1 | @import "./nc_import1"; 2 | @import "./nc_import2"; 3 | @import "./nc_import3"; -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/sass/loop.scss: -------------------------------------------------------------------------------- 1 | @for $i from 1 through 12 { 2 | .col-#{$i} { 3 | width: 1000px/12*$i; 4 | } 5 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/sass/mixin.scss: -------------------------------------------------------------------------------- 1 | $fontSize: 12px; 2 | $bgColor: blue; 3 | @mixin block($fontSize) { 4 | font-size: $fontSize; 5 | border: 1px solid gold; 6 | border-radius: 4px; 7 | } 8 | 9 | .nav { 10 | .inner { 11 | @include block($fontSize +2px); 12 | } 13 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/sass/nest.scss: -------------------------------------------------------------------------------- 1 | $fontSize: 12px; 2 | $bgColor: blue; 3 | .parent { 4 | background-color: $bgColor; 5 | .child { 6 | font-size: $fontSize; 7 | } 8 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/sass/variable.scss: -------------------------------------------------------------------------------- 1 | $fontSize: 12px; 2 | $bgColor: blue; 3 | .box1 { 4 | background-color: $bgColor; 5 | font-size: $fontSize; 6 | } -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/target/extend.css: -------------------------------------------------------------------------------- 1 | .block, .nav .inner, .nav .other { 2 | font-size: 12px; 3 | border: 1px solid gold; 4 | border-radius: 4px; } 5 | 6 | .nav .other { 7 | background-color: wheat; } 8 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/target/import.css: -------------------------------------------------------------------------------- 1 | .module2 .box { 2 | font-size: 18px; 3 | background-color: lightblue; } 4 | 5 | .module3 .box { 6 | font-size: 24px; } 7 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/target/loop.css: -------------------------------------------------------------------------------- 1 | .col-1 { 2 | width: 83.33333px; } 3 | 4 | .col-2 { 5 | width: 166.66667px; } 6 | 7 | .col-3 { 8 | width: 250px; } 9 | 10 | .col-4 { 11 | width: 333.33333px; } 12 | 13 | .col-5 { 14 | width: 416.66667px; } 15 | 16 | .col-6 { 17 | width: 500px; } 18 | 19 | .col-7 { 20 | width: 583.33333px; } 21 | 22 | .col-8 { 23 | width: 666.66667px; } 24 | 25 | .col-9 { 26 | width: 750px; } 27 | 28 | .col-10 { 29 | width: 833.33333px; } 30 | 31 | .col-11 { 32 | width: 916.66667px; } 33 | 34 | .col-12 { 35 | width: 1000px; } 36 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/target/mixin.css: -------------------------------------------------------------------------------- 1 | .nav .inner { 2 | font-size: 14px; 3 | border: 1px solid gold; 4 | border-radius: 4px; } 5 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/target/nest.css: -------------------------------------------------------------------------------- 1 | .parent { 2 | background-color: blue; } 3 | .parent .child { 4 | font-size: 12px; } 5 | -------------------------------------------------------------------------------- /CSS高级/demos/less和sass实践/sass/target/variable.css: -------------------------------------------------------------------------------- 1 | .box1 { 2 | background-color: blue; 3 | font-size: 12px; } 4 | -------------------------------------------------------------------------------- /CSS高级/demos/动画/微信图片_20200408134722.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/动画/微信图片_20200408134722.jpg -------------------------------------------------------------------------------- /CSS高级/demos/响应式/vw图标列表/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/响应式/vw图标列表/iconfont.eot -------------------------------------------------------------------------------- /CSS高级/demos/响应式/vw图标列表/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/响应式/vw图标列表/iconfont.ttf -------------------------------------------------------------------------------- /CSS高级/demos/响应式/vw图标列表/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/响应式/vw图标列表/iconfont.woff -------------------------------------------------------------------------------- /CSS高级/demos/响应式/vw图标列表/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/demos/响应式/vw图标列表/iconfont.woff2 -------------------------------------------------------------------------------- /CSS高级/demos/小米移动端全还原/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /CSS高级/demos/小米移动端全还原/css/iconfont.css: -------------------------------------------------------------------------------- 1 | .iconfont { 2 | font-family: "iconfont" !important; 3 | font-size: 16px; 4 | font-style: normal; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } -------------------------------------------------------------------------------- /CSS高级/demos/小米移动端全还原/js/rem.js: -------------------------------------------------------------------------------- 1 | const handleResize = utils.throttle(() => { 2 | let desW = 750; 3 | let winW = document.body.clientWidth; 4 | let ratio = winW / desW; 5 | document.querySelector('html').style.fontSize = ratio * 100 + 'px'; 6 | }); 7 | 8 | window.addEventListener('resize', handleResize); 9 | handleResize(); -------------------------------------------------------------------------------- /CSS高级/demos/小米移动端全还原/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "less", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "devDependencies": { 7 | "less": "^3.12.2" 8 | }, 9 | "scripts": { 10 | "less": "nodemon -w ./less -e .less ./compiler.js lang=less", 11 | "sass": "nodemon -w ./sass -e .scss ./compiler.js lang=sass" 12 | }, 13 | "dependencies": { 14 | "lessc": "^1.0.2", 15 | "node-cmd": "^3.0.0", 16 | "node-sass": "^4.14.1" 17 | } 18 | } -------------------------------------------------------------------------------- /CSS高级/icon全解析/icon-Sprites.md: -------------------------------------------------------------------------------- 1 | ## icon-Sprites 2 | 3 | 雪碧图(精灵图) 4 | 5 | ### 原理 6 | 7 | 将网页中所有较小的图片合并为一个大图片，然后设置背景图的位置来显示图片 8 | 9 | ### 优点 10 | 11 | 减少http请求次数，使页面的加载速度加快，提高了网页性能 12 | 13 | ### 缺点 14 | 15 | 需要设置标签背景图片，再通过精灵图中小图标的位置和宽高，设置对应的div宽高和背景定位坐标 16 | 17 | -------------------------------------------------------------------------------- /CSS高级/icon全解析/iconfont-HTML.md: -------------------------------------------------------------------------------- 1 | ## iconfont-HTML 2 | 3 | ### 优点 4 | 5 | 轻量，灵活，兼容性好 6 | 7 | ### 缺点 8 | 9 | 单色 10 | 11 | ### 图标库 12 | 13 | [阿里巴巴图标库](http://www.iconfont.cn) 14 | 15 | [icomoon图标库](https://icomoon.io/app/#/select) 16 | 17 | -------------------------------------------------------------------------------- /CSS高级/icon全解析/img以及HTML[area]技术.md: -------------------------------------------------------------------------------- 1 | ## img以及HTML技术 2 | 3 | img及img标签引入图标 4 | 5 | 6 | 7 | ### HTML技术 8 | 9 | 标签定义图像映射中的区域 10 | 11 | area元素总是嵌套在标签中 12 | 13 | img标签中的usemap属性与map元素name属性相关联，创建图像和映射之间的联系。所有主流浏览器都支持area标签 14 | 15 | 一款在线工具Image-Maps: [http://www.image-maps.com/](http://www.image-maps.com/)（需要梯子） 16 | 17 | 我们只需要在Image-Maps上注册一个账号就能够通过可视化工具对图片进行裁剪，获取裁剪图片的坐标 18 | 19 | 20 | 21 | ### background-icon 22 | 23 | 设置元素的background-image从而引入图标 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /CSS高级/imgs/HtmlEntity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/CSS高级/imgs/HtmlEntity.jpg -------------------------------------------------------------------------------- /CSS高级/动画/animation.md: -------------------------------------------------------------------------------- 1 | ## animation 2 | 3 | 4 | 5 | ### keyframes关键帧动画 6 | 7 | 相当于多个补间动画 8 | 9 | 与元素状态的变化无关 10 | 11 | 定义更加灵活 12 | 13 | **可取值** 14 | 15 | #### animation 16 | 17 | 所有动画属性的简写，复合属性 18 | 19 | #### animation-name 20 | 21 | 动画名字 22 | 23 | #### animation-duration 24 | 25 | 动画持续时间 26 | 27 | #### animation-timing-function 28 | 29 | 动画函数 30 | 31 | #### animation-delay 32 | 33 | 动画延迟 34 | 35 | #### animation-iteration-count 36 | 37 | 动画执行次数 38 | 39 | #### animation-direction 40 | 41 | 动画方向 42 | 43 | #### animation-play-state 44 | 45 | 动画播放状态 46 | 47 | #### animation-fill-mode 48 | 49 | 动画暂停的状态 forwords是停留在结束的状态，backwards是停留在开始的状态 -------------------------------------------------------------------------------- /CSS高级/动画/steps功能符介绍.md: -------------------------------------------------------------------------------- 1 | ## steps功能符深入理解 2 | 3 | 逐帧动画，资源较大，使用steps() 4 | 5 | ### steps()语法 6 | 7 | 贝塞尔曲线 8 | 9 | linear，ease... 10 | 11 | **steps**(number, position) number表示把一帧动画分成了几段，position表示动画是从时间段的开头连续还是末尾连续，支持start和and两个关键字，默认是end 12 | 13 | start 会忽略开始帧 14 | 15 | end 会忽略结束帧 16 | 17 | 18 | 19 | steps(1) 可以用来做逐帧动画，1帧只显示一张图片 20 | 21 | -------------------------------------------------------------------------------- /CSS高级/动画/transition.md: -------------------------------------------------------------------------------- 1 | ## transition过渡 2 | 3 | 4 | 5 | ### 补间动画 6 | 7 | 位置，方位，大小透明度以及其他的线性动画 8 | 9 | 10 | 11 | ### 可取值 12 | 13 | #### transition复合属性 14 | 15 | transition-property:检索或设置对象中的参与过度的属性。默认值为all。默认为所有可以进行过度的CSS属性。 16 | 17 | transition-duration：过渡时间 18 | 19 | transition-timing-function：过渡动画类型 20 | 21 | transition-delay：延迟过度的时间 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /CSS高级/响应式/@media媒体查询.md: -------------------------------------------------------------------------------- 1 | ## @media媒体查询 2 | 3 | ```css 4 | /* 5 | 连接符号 and not only 6 | 复杂的页面不适合这样做响应式 7 | */ 8 | @media screen and (min-width:375px){};/*最小375px时走这套配置*/ 9 | @media (min-width: 414px) /*简写模式*/ 10 | 11 | @media (orientation: portrait) /*竖屏*/ 12 | 13 | @media (orientation: landscape) /*横屏*/ 14 | ``` 15 | 16 | -------------------------------------------------------------------------------- /CSS高级/响应式/像素.md: -------------------------------------------------------------------------------- 1 | ## 像素 2 | 3 | 4 | 5 | ### 设备像素 6 | 7 | 物理像素或像素分辨率，显示器的最小物理单位 8 | 9 | 10 | 11 | ### 设备独立像素(dips) 12 | 13 | 设备独立像素，我们平常说的玩游戏2k带不动把分辨率调小一点，这里的分辨率就是设备独立像素 14 | 15 | 可通过window.screen.width/height查看 16 | 17 | 另外，平时我们所说的iPhoneX的逻辑分辨率是375×812指的就是设备独立像素。chrome检查元素模拟调试手机设备时显示475×667这些都是独立像素 18 | 19 | 一个设备独立像素而可能包含多个物理像素，包含的越多显示越清晰 20 | 21 | ### **device Pixel Ratio** 22 | 23 | 像素比window.devicePixelRatio 24 | 25 | devicePixelRatio指的是物理像素和设备独立像素的比，即1独立像素由多少物理像素渲染 26 | 27 | dpr指的是设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系 28 | 29 | 30 | 31 | ### CSS像素 32 | 33 | 在页面不缩放的时候，1px的CSS像素===1设备独立像素 34 | 35 | 页面放大200%时，页面的设备独立像素不变，放大的时CSS像素。但是此时CSS像素与设备像素的关系变化了，1px===4设备独立像素 36 | 37 | 38 | 39 | ### PPI 40 | 41 | 指的是每英寸的物理像素数 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /CSS高级/响应式/弹性flex布局.md: -------------------------------------------------------------------------------- 1 | ## 弹性flex布局 2 | 3 | ### flex-direction 4 | 5 | 控制子容器排列的方向 6 | 7 | ### flex-wrap 8 | 9 | 子容器折到下一行 10 | 11 | ### flex-flow 12 | 13 | 上两个属性的复合属性 14 | 15 | ### justify-content 16 | 17 | 控制元素水平对齐方式 18 | 19 | ### align-items 20 | 21 | 控制元素的垂直居中 22 | 23 | ### align-content 24 | 25 | 控制多排文字时排列方式 -------------------------------------------------------------------------------- /CSS高级/响应式/视口.md: -------------------------------------------------------------------------------- 1 | ## 视口 2 | 3 | ### viewport 4 | 5 | 视口，可视区域的大小 6 | 7 | width=device-width 让可视区域大小=设备大小 8 | 9 | height=device-height 让可视区域大小=设备大小 10 | 11 | user-scaleable:no 禁止用户进行手动缩放 12 | 13 | maximum-scale 定义最大比例 14 | 15 | minimum-scale 定义最大比例 16 | 17 | initial-scale 初始比例 18 | 19 | 20 | 21 | ### layout viewport布局视口 22 | 23 | ### 24 | 25 | ### visual viewport视觉视口和物理像素 26 | 27 | 28 | 29 | ### ideal viewport理想视口和dip(设备逻辑像素) -------------------------------------------------------------------------------- /CSS高级/布局/三列布局.md: -------------------------------------------------------------------------------- 1 | ## 三列布局 2 | 3 | 三列布局一般情况下是指三列中左边两列是确定的宽度，右边一列是自动填满剩余所有空间的一种布局效果； 4 | 5 | ### float+margin 6 | 7 | ### float+overflow 8 | 9 | ### table+table-cell 10 | 11 | ### flex 12 | 13 | ### grid 14 | 15 | 以上效果见demo 16 | 17 | ### 圣杯布局 18 | 19 | **核心：**主要实现主体中左右定宽，中间自适应的布局效果，但是圣杯布局的center列在HTML文档结构上处于最前面，因为主体部分比较重要，放在前面优先加载 20 | 21 | ### 双飞翼布局 22 | 23 | **核心：**在圣杯布局的基础上，取消了定位 -------------------------------------------------------------------------------- /CSS高级/布局/全屏布局.md: -------------------------------------------------------------------------------- 1 | ## 全屏布局 2 | 3 | 头部和底部定高，中间分为左右，左侧定宽，右侧自适应，不出现滚动条 4 | 5 | **定位后left:0和right:0可以把容器左右拉伸至最宽且自适应，top:0和bottom:0也同理** 6 | 7 | **详情见demo** 8 | 9 | -------------------------------------------------------------------------------- /CSS高级/布局/布局基本知识.md: -------------------------------------------------------------------------------- 1 | ## 什么是布局 2 | 3 | 简单来说就是HTML页面的整体结构或骨架，类似于传统的报纸或杂志中的排版 4 | 5 | 布局不是某个技术内容，而是一种设计思想 6 | 7 | CSS体系中的重中之重 8 | 9 | 10 | 11 | ## DEMO中布局方案 12 | 13 | - 居中布局 14 | - 多列布局 15 | - 圣杯布局 16 | - 双飞翼布局 17 | - 等分布局 18 | - 登高布局 19 | - 全屏布局 20 | 21 | 22 | 23 | ## 布局常见面试题 24 | 25 | 已知宽高实现盒子水平垂直居中 26 | 27 | 宽高不定实现盒子水平垂直居中 28 | 29 | 实现两栏（三栏）布局的方法 30 | 31 | 两列布局&三列布局 32 | 33 | 块级元素水平垂直居中，文字内容在div中始终水平垂直居中 34 | 35 | 让元素垂直左右居中的方法，越多越好（最好包含flex的方法） 36 | 37 | 实现页面的三栏布局，左右均为定宽，高度可以自适应 38 | 39 | 经典布局方案：圣杯，双飞翼布局等 -------------------------------------------------------------------------------- /CSS高级/布局/等高布局.md: -------------------------------------------------------------------------------- 1 | ## 等高布局 2 | 3 | ### 利用table实现 4 | 5 | 默认水平排列，高度和宽度自动计算 6 | 7 | ### 伪等高布局 8 | 9 | padding-bottom:-9999px;margin-bottom:-9999px实现； -------------------------------------------------------------------------------- /CSS高级/面试真题解析/响应式布局方案.md: -------------------------------------------------------------------------------- 1 | ## 响应式布局方案 2 | 3 | 4 | 5 | ### rem 6 | 7 | 8 | 9 | ### vw/vh 10 | 11 | 12 | 13 | ### % 14 | 15 | 16 | 17 | ### @media 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Git/git基础工作流程.md: -------------------------------------------------------------------------------- 1 | ## git基础工作流程 2 | 3 | 每一个GIT仓库都有3个区 4 | 5 | - 工作区：写代码 6 | - 暂存区：临时存放每一次修改的代码，但是并没有生成历史记录 7 | - 历史区：存放所有的历史版本 8 | 9 | 10 | 11 | ### 工作流程 12 | 13 | - 创建GIT仓库 14 | 15 | git init 16 | 17 | - 编写代码并将工作代码提交到暂存区 18 | 19 | git add -A/. (可以指定提交某些文件) 20 | 21 | - 把暂存区还没有提交的内容提交到历史区，生成一个历史版本 22 | 23 | git commit -m['备注'] 24 | 25 | 每一次区域间的信息提交不会删除原有区域的内容，这样保证下一次提交，只是把区域间对比不一样的内容提交，而不是所有 26 | 27 | 28 | 29 | ### 细节问题 30 | 31 | git config 查看git 配置 32 | 33 | .gitignore 可以配置什么文件不提交 34 | 35 | git log 查看历史版本 -------------------------------------------------------------------------------- /Git/关于git的回滚.md: -------------------------------------------------------------------------------- 1 | ## 关于git的回滚 2 | 3 | ### 代码回滚操作 4 | 5 | #### git checkout . 6 | 7 | 把暂存内容回滚到工作区（一旦回滚，工作区内容无法恢复） 8 | 9 | #### git reset HEAD . 10 | 11 | 把当前暂存区的内容回滚到上一个暂存区，目的是为了把上一个暂存区的内容回滚到工作区 12 | 13 | #### git reset --hard + (版本号) 14 | 15 | 在历史区中退回某一个版本（强制把暂存区和工作区都变为退回后的版本） 16 | 17 | #### history> xxx.txt 18 | 19 | 把历史操作步骤输入到某个文件 20 | -------------------------------------------------------------------------------- /Git/分支处理和团队协作.md: -------------------------------------------------------------------------------- 1 | ## 分支处理和团队协作 2 | 3 | 不是同一行冲突时，直接在冲突的命令行中同意即可 4 | 5 | 同一行冲突时，需要手动把代码进行合并，并且再次提交 6 | 7 | 分支只是管控历史区 8 | 9 | ### 10 | 11 | ### 单独分支管理模式 12 | 13 | 每天第一件事就是把远程master内容拉取到本地master上(提交之前也是)，每个人现在自己的本地仓库中进行分支的创建和切换，分支合并完后，最好删除掉 14 | 15 | - git branch 查看当前所在分支，* 代表当前在哪个分支上 16 | - git branch dev 表示创建一个叫dev的分支 17 | - git checkout dev 表示切换到dev分支上 18 | - git checkout -b dev 表示创建并切换到这个分支上 19 | - git stash 暂存文件 20 | - git stash pop 还原暂存文件 21 | - git merge dev 把dev分支合并到当前分支 -------------------------------------------------------------------------------- /Git/常用的Linux命令.md: -------------------------------------------------------------------------------- 1 | ## 常用的Linux命令 2 | 3 | - ls -a /-l 查看当前目录文件(-a 查看包含隐藏的文件/-l 列出清单) 4 | - clear 清屏 5 | - mkdir 创建文件夹 6 | - touch 创建空文件 7 | - vi 编辑文件 8 | - echo 向指定的文件中输入内容 9 | - cat 查看文件中内容 10 | - cp 拷贝 11 | - rm 删除文件 -r 递归删除 -f 强制删除， 一旦删除无法还原 -------------------------------------------------------------------------------- /Git/集中式对比分布式.md: -------------------------------------------------------------------------------- 1 | ## 集中式对比分布式 2 | 3 | 4 | 5 | ### 版本控制系统 6 | 7 | 开发中，我们把每一次修改都有效的记录(记录成一个版本)，后期如果有需要回退到原有的某个版本或者要与现在的版本进行对比，都可以进行有效的管理 8 | 9 | ### 分布式版本管理的特点 10 | 11 | **集中式版本管理**把所有的历史版本都是在中央服务器上建立的，并且保存在中央服务器，本地只是一个开发环境，开发完成后需要推送到远程在中央服务器生成一个新的记录，若需要回退到某个版本也需要从中央服务器拉取，这样的话，如果想生成历史版本或拉去旧版本比较，必须得连接上中央服务器也就是说必须联网 12 | 13 | 所谓的**分布式版本管理**就是每个开发者本地就是一个完整的仓库，都能记录历史版本信息，这样不需要联网，我们也可以生成历史版本或回退到某个版本 -------------------------------------------------------------------------------- /Plan/腾讯面试题-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/Plan/腾讯面试题-01.png -------------------------------------------------------------------------------- /Plan/腾讯面试题-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/Plan/腾讯面试题-02.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FrontendStudy 2 | ### 记录前端的学历过程 3 | 4 | ### 学而不思则罔，思而不学则殆 5 | ### @autor Doctorwu 6 | -------------------------------------------------------------------------------- /Typescript/JS/Merge.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | // let obj:R2 = {} 4 | // {id:number, name:string, age:number}; 5 | -------------------------------------------------------------------------------- /Typescript/JS/Overwrite.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | // InterSection 4 | var InterSection; 5 | (function (InterSection) { 6 | var obj = { 7 | age: 20 8 | }; 9 | })(InterSection || (InterSection = {})); 10 | -------------------------------------------------------------------------------- /Typescript/JS/infer.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var t3; // 类型 T1&T2 4 | -------------------------------------------------------------------------------- /Typescript/JS/mixin.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function mixin(one, two) { 3 | var result = {}; 4 | for (var key in one) { 5 | if (one.hasOwnProperty(key)) { 6 | result[key] = one[key]; 7 | } 8 | } 9 | for (var key in two) { 10 | if (two.hasOwnProperty(key)) { 11 | result[key] = two[key]; 12 | } 13 | } 14 | return result; 15 | } 16 | var x = mixin({ name: "doctorwu" }, { age: 20 }); 17 | console.log(x.name, x.age); 18 | -------------------------------------------------------------------------------- /Typescript/JS/内置工具类型.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var p = { 4 | id: 1, 5 | name: "doctorwu", 6 | company: { 7 | // 这个company现在也是Partial的 8 | } 9 | }; 10 | var person = { 11 | name: "doctorwu", 12 | age: 20, 13 | gender: 1 14 | }; 15 | function mapObject(obj, mapFn) { 16 | var result = {}; 17 | for (var key in obj) { 18 | if (obj.hasOwnProperty(key)) { 19 | result[key] = mapFn(obj[key]); 20 | } 21 | } 22 | return result; 23 | } 24 | var obj = { 25 | count1: 1, 26 | count2: 2 27 | }; 28 | var map = function (x) { return x * 2 + ''; }; 29 | var newObj = mapObject(obj, map); 30 | -------------------------------------------------------------------------------- /Typescript/JS/内置条件类型.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // type R6 = 'a' 3 | // ReturnType 4 | // type ReturnType = T extends (...args: any[]) => infer R ? R : T; 5 | function getUser(a, b) { 6 | return { 7 | name: 'doctorwu', 8 | age: 20 9 | }; 10 | } 11 | var u = { 12 | name: 'dtwu', 13 | age: 21 14 | }; 15 | //ConstructorParameters 16 | var Person = /** @class */ (function () { 17 | function Person(name) { 18 | this.name = name; 19 | } 20 | Person.prototype.getName = function () { 21 | return this.name; 22 | }; 23 | return Person; 24 | }()); 25 | -------------------------------------------------------------------------------- /Typescript/JS/扩展变量类型.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 扩展局部变量的类型 3 | // declare var String: StringConstructor; 4 | // 5 | // interface StringConstructor { 6 | // new(value?: any): String; 7 | // 8 | // (value?: any): string; 9 | // 10 | // readonly prototype: String; 11 | // } 12 | // 13 | // interface String { 14 | // toString(): string; 15 | // } 16 | String.prototype.double = function () { 17 | // @ts-ignore 18 | return this + this; 19 | }; 20 | var result = "hello".double(); // hellohello 21 | console.log(result); 22 | -------------------------------------------------------------------------------- /Typescript/JS/接口.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | // 接口修饰构造函数 4 | var Animal = /** @class */ (function () { 5 | function Animal(name) { 6 | this.name = name; 7 | } 8 | return Animal; 9 | }()); 10 | function createAnimal(clazz, name) { 11 | return new clazz(name); 12 | } 13 | var a = createAnimal(Animal, "Dog"); 14 | console.log(a.name); 15 | -------------------------------------------------------------------------------- /Typescript/JS/条件类型.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var con = { 4 | name2: "水" 5 | }; 6 | // 条件类型的分发 7 | var con1 = { 8 | name2: "", 9 | }; 10 | // type R = 'd' 11 | -------------------------------------------------------------------------------- /Typescript/JS/泛型.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 泛型工厂 3 | function factory(Cstr) { 4 | return new Cstr(); 5 | } 6 | var sum = function (a, b) { 7 | return (a + b); 8 | }; 9 | console.log(sum(1, 2)); 10 | // 多泛型 11 | function swap(tuple) { 12 | return [tuple[1], tuple[0]]; 13 | } 14 | console.log(swap(["doctorwu", 123456])); 15 | function logger(val) { 16 | console.log(val.length); 17 | } 18 | var obj = { 19 | length: 10 20 | }; 21 | logger("doctorwu"); // 传入的参数需要满足Lengthwise 22 | -------------------------------------------------------------------------------- /Typescript/JS/结构类型系统.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var sum; 4 | function f1(a, b) { 5 | } 6 | sum = f1; // OK 7 | function f2(a) { 8 | } 9 | sum = f2; // OK 参数可以少 10 | function f3(a, b, c) { 11 | } 12 | // sum = f3; // Error 参数不能多 13 | -------------------------------------------------------------------------------- /Typescript/JS/自定义的类型保护.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function isBird(x) { 3 | return x.leg === 2; 4 | } 5 | function getLeg(x) { 6 | if (isBird(x)) { 7 | return x.birdLeg; 8 | } 9 | else { 10 | return x.dogLeg; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Typescript/MapQueue.ts: -------------------------------------------------------------------------------- 1 | export class MapQueue { 2 | constructor(private queue: Map = new Map, private accuTime: number = 0) { 3 | } 4 | 5 | addTask(task: Function, time: number) { 6 | this.accuTime += time; 7 | this.queue.set(this.accuTime, task); 8 | return this; 9 | } 10 | 11 | start() { 12 | this.queue.forEach((task, time) => { 13 | setTimeout(() => { 14 | task(); 15 | }, time*1000) 16 | }) 17 | } 18 | } 19 | 20 | 21 | function log(msg: string | number) { 22 | console.log(msg) 23 | } 24 | 25 | new MapQueue().addTask(() => log(1), 1).addTask(() => log(3), 2).addTask(() => log(4), 3).start(); 26 | -------------------------------------------------------------------------------- /Typescript/Merge.ts: -------------------------------------------------------------------------------- 1 | // Merge = Compute + Omit 2 | import {Omit} from "./Overwrite"; 3 | 4 | export {}; 5 | type O1 = { 6 | id: number; 7 | name: string; 8 | } 9 | type O2 = { 10 | id: number; 11 | age: number; 12 | } 13 | 14 | 15 | type Compute = A extends Function ? A : { [K in keyof A]: A[K] }; 16 | type R1 = Compute<{ x: 'x' & { y: 'y' } }>; 17 | 18 | 19 | type Merge = Compute> 20 | 21 | type R2 = Merge; 22 | // let obj:R2 = {} 23 | // {id:number, name:string, age:number}; 24 | -------------------------------------------------------------------------------- /Typescript/infer.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | type ElementOf = T extends Array?E:never; // 把元组转换成联合类型 3 | 4 | type Ttuple = [string, number]; 5 | type TupleToUnion = ElementOf; 6 | 7 | 8 | 9 | type T1 = {name:string}; 10 | type T2 = {age:number}; 11 | type ToIntersection = T extends {a:(x:infer U)=>void, b:(x:infer U)=>void}?U:never; 12 | 13 | type T3 = ToIntersection<{a:(x:T1)=>void, b:(x:T2)=>void}>; 14 | 15 | let t3:T3; // 类型 T1&T2 16 | -------------------------------------------------------------------------------- /Typescript/mixin.ts: -------------------------------------------------------------------------------- 1 | interface AnyObject{ 2 | [prop:string]:any 3 | } 4 | 5 | function mixin(one: T, two:U):T&U{ 6 | const result = <(T&U)>{}; 7 | for(let key in one) { 8 | if((one as Object).hasOwnProperty(key)){ 9 | (result)[key] = one[key]; 10 | } 11 | } 12 | for(let key in two){ 13 | if((two as Object).hasOwnProperty(key)){ 14 | (result)[key] = two[key]; 15 | } 16 | } 17 | 18 | return result; 19 | } 20 | 21 | const x = mixin({name:"doctorwu"},{age:20}); 22 | console.log(x.name, x.age); 23 | -------------------------------------------------------------------------------- /Typescript/types/MapQueue.d.ts: -------------------------------------------------------------------------------- 1 | export declare class MapQueue { 2 | private queue; 3 | private accuTime; 4 | constructor(queue?: Map, accuTime?: number); 5 | addTask(task: Function, time: number): this; 6 | start(): void; 7 | } 8 | -------------------------------------------------------------------------------- /Typescript/types/Merge.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /Typescript/types/Overwrite.d.ts: -------------------------------------------------------------------------------- 1 | export declare type SetDifference = A extends B ? never : A; 2 | export declare type Omit = Pick>; 3 | -------------------------------------------------------------------------------- /Typescript/types/Proxy.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /Typescript/types/compose.d.ts: -------------------------------------------------------------------------------- 1 | declare type Func = (...a: T) => R; 2 | export default function compose(): (a: R) => R; 3 | export default function compose(f1: F): F; 4 | export default function compose(f1: (a: A) => R, f2: Func): Func; 5 | export default function compose(f1: (a: B) => R, f2: (a: A) => B, f3: Func): Func; 6 | export default function compose(f1: (a: C) => R, f2: (a: B) => C, f3: (a: A) => B, f4: Func): Func; 7 | export default function compose(f1: (a: any) => R, ...funcs: Function[]): (...args: any[]) => R; 8 | export {}; 9 | -------------------------------------------------------------------------------- /Typescript/types/example.d.ts: -------------------------------------------------------------------------------- 1 | declare class Base { 2 | invoke, Property extends string>(this: This, property: Property, ...args: Parameters): void; 3 | } 4 | -------------------------------------------------------------------------------- /Typescript/types/infer.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /Typescript/types/mixin.d.ts: -------------------------------------------------------------------------------- 1 | interface AnyObject { 2 | [prop: string]: any; 3 | } 4 | declare function mixin(one: T, two: U): T & U; 5 | declare const x: { 6 | name: string; 7 | } & { 8 | age: number; 9 | }; 10 | -------------------------------------------------------------------------------- /Typescript/types/内置工具类型.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /Typescript/types/内置条件类型.d.ts: -------------------------------------------------------------------------------- 1 | declare type R4 = Exclude<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; 2 | declare type R5 = Extract<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; 3 | declare type R6 = NonNullable<'a' | null | undefined>; 4 | declare function getUser(a: string, b: number): { 5 | name: string; 6 | age: number; 7 | }; 8 | declare type getUserType = typeof getUser; 9 | declare type ReturnUser = ReturnType; 10 | declare let u: ReturnUser; 11 | declare type ParamsType = Parameters; 12 | declare class Person { 13 | name: string; 14 | constructor(name: string); 15 | getName(): string; 16 | } 17 | declare type Params = ConstructorParameters; 18 | declare type PersonInstance = InstanceType; 19 | -------------------------------------------------------------------------------- /Typescript/types/函数的双向协变.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /Typescript/types/扩展变量类型.d.ts: -------------------------------------------------------------------------------- 1 | interface String { 2 | double(): string; 3 | } 4 | declare let result: string; 5 | -------------------------------------------------------------------------------- /Typescript/types/抽象类.d.ts: -------------------------------------------------------------------------------- 1 | declare abstract class Animal { 2 | name: string; 3 | abstract speak(): void; 4 | } 5 | declare class Cat extends Animal { 6 | speak(): void; 7 | } 8 | declare let cat: Cat; 9 | -------------------------------------------------------------------------------- /Typescript/types/接口.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /Typescript/types/条件类型.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /Typescript/types/泛型.d.ts: -------------------------------------------------------------------------------- 1 | declare function factory(Cstr: { 2 | new (): T; 3 | }): T; 4 | interface Calculate { 5 | (a: T, b: T): U; 6 | } 7 | declare let sum: Calculate; 8 | declare function swap(tuple: [A, B]): [B, A]; 9 | interface LengthWise { 10 | length: number; 11 | } 12 | declare function logger(val: T): void; 13 | declare let obj: { 14 | length: number; 15 | }; 16 | declare type withLengthObj = typeof obj; 17 | -------------------------------------------------------------------------------- /Typescript/types/结构类型系统.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /Typescript/types/自定义的类型保护.d.ts: -------------------------------------------------------------------------------- 1 | interface Bird { 2 | leg: number; 3 | birdLeg: number; 4 | } 5 | interface Dog { 6 | leg: number; 7 | dogLeg: number; 8 | } 9 | declare function isBird(x: any): x is Bird; 10 | declare function getLeg(x: Bird | Dog): number; 11 | -------------------------------------------------------------------------------- /Typescript/types/装饰器.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace classDecorator { 2 | } 3 | declare namespace propertyDecorator { 4 | } 5 | declare namespace paramDecorator { 6 | } 7 | -------------------------------------------------------------------------------- /Typescript/types/面试题.d.ts: -------------------------------------------------------------------------------- 1 | interface Action { 2 | payload?: T; 3 | type: string; 4 | } 5 | declare type Connected = { 6 | delay(input: number): Action; 7 | setMessage(action: Date): Action; 8 | }; 9 | export declare const connected: Connected; 10 | export {}; 11 | -------------------------------------------------------------------------------- /Typescript/扩展变量类型.ts: -------------------------------------------------------------------------------- 1 | // 扩展局部变量的类型 2 | // declare var String: StringConstructor; 3 | // 4 | // interface StringConstructor { 5 | // new(value?: any): String; 6 | // 7 | // (value?: any): string; 8 | // 9 | // readonly prototype: String; 10 | // } 11 | // 12 | // interface String { 13 | // toString(): string; 14 | // } 15 | 16 | // 相同名称的多个interface会进行合并 17 | interface String { 18 | double(): string; 19 | } 20 | 21 | String.prototype.double = function () { 22 | // @ts-ignore 23 | return this+this; 24 | } 25 | 26 | let result = "hello".double();// hellohello 27 | console.log(result) 28 | -------------------------------------------------------------------------------- /Typescript/抽象类.ts: -------------------------------------------------------------------------------- 1 | abstract class Animal { 2 | name!: string; 3 | 4 | abstract speak(): void 5 | } 6 | 7 | class Cat extends Animal { 8 | speak(): void { 9 | console.log("喵喵喵"); 10 | } 11 | } 12 | 13 | let cat = new Cat(); 14 | cat.speak(); 15 | -------------------------------------------------------------------------------- /Typescript/接口.ts: -------------------------------------------------------------------------------- 1 | export {} 2 | 3 | // 接口约束类 4 | interface Speakable { 5 | speak(): void; 6 | }// 实现的类中实现speak方法即可 7 | 8 | 9 | // 接口修饰构造函数 10 | class Animal { 11 | constructor(public name: string) { 12 | 13 | } 14 | } 15 | 16 | // 修饰普通函数的接口加上new之后就是用来描述构造函数类型的接口 17 | interface WithNameClass { 18 | new(name: string): Animal 19 | } 20 | 21 | function createAnimal(clazz: WithNameClass, name: string) { 22 | return new clazz(name); 23 | } 24 | 25 | let a = createAnimal(Animal, "Dog"); 26 | console.log(a.name) 27 | -------------------------------------------------------------------------------- /Typescript/条件类型.ts: -------------------------------------------------------------------------------- 1 | export {} 2 | 3 | interface Fish{ 4 | name1:string; 5 | } 6 | interface Water{ 7 | name2:string; 8 | } 9 | interface Bird{ 10 | name3:string; 11 | } 12 | interface Sky{ 13 | name4:string; 14 | } 15 | 16 | type Condition = T extends Fish?Water:Sky; 17 | 18 | let con:Condition = { 19 | name2: "水" 20 | } 21 | 22 | 23 | // 条件类型的分发 24 | let con1:Condition = { 25 | name2: "", 26 | // name4: "" 27 | } 28 | // con1的类型为：Water | Sky 29 | 30 | type Diff = T extends U?never:T; 31 | type R = Diff<'a'|'b'|'c'|'d', 'a'|'b'|'c'>; 32 | // type R = 'd' 33 | -------------------------------------------------------------------------------- /Typescript/结构类型系统.ts: -------------------------------------------------------------------------------- 1 | // 比较参数 2 | // 比较返回值 3 | export {}; 4 | type Func = (a: number, b: number) => void; 5 | 6 | let sum: Func; 7 | 8 | function f1(a: number, b: number): void { 9 | } 10 | 11 | sum = f1; // OK 12 | 13 | function f2(a: number): void { 14 | } 15 | 16 | sum = f2; // OK 参数可以少 17 | 18 | 19 | function f3(a: number, b: number, c: number): void { 20 | } 21 | 22 | // sum = f3; // Error 参数不能多 23 | -------------------------------------------------------------------------------- /Typescript/自定义的类型保护.ts: -------------------------------------------------------------------------------- 1 | interface Bird{ 2 | leg: number; 3 | birdLeg: number; 4 | } 5 | interface Dog{ 6 | leg: number; 7 | dogLeg: number; 8 | } 9 | 10 | function isBird(x:any):x is Bird{ 11 | return x.leg === 2; 12 | } 13 | 14 | function getLeg(x:Bird|Dog):number{ 15 | if(isBird(x)){ 16 | return x.birdLeg; 17 | }else{ 18 | return x.dogLeg; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /WebRTC/Demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
11 |
13 |
14 |
16 |
18 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /images/2020/08/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/images/2020/08/1.png -------------------------------------------------------------------------------- /images/2020/08/图片解析.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/images/2020/08/图片解析.png -------------------------------------------------------------------------------- /js底层，核心，基础/JQuery源码解读/note.md: -------------------------------------------------------------------------------- 1 | ## jQuery源码解读 -------------------------------------------------------------------------------- /js底层，核心，基础/JS高阶编程/example.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/JS高阶编程/example.js -------------------------------------------------------------------------------- /js底层，核心，基础/JS高阶编程/面试题.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/JS高阶编程/面试题.md -------------------------------------------------------------------------------- /js底层，核心，基础/imgs/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/imgs/01.png -------------------------------------------------------------------------------- /js底层，核心，基础/imgs/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/imgs/02.png -------------------------------------------------------------------------------- /js底层，核心，基础/imgs/sign_have_anime.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/imgs/sign_have_anime.gif -------------------------------------------------------------------------------- /js底层，核心，基础/imgs/函数的三种角色.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/imgs/函数的三种角色.png -------------------------------------------------------------------------------- /js底层，核心，基础/imgs/微信图片_20200902210254.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/imgs/微信图片_20200902210254.png -------------------------------------------------------------------------------- /js底层，核心，基础/imgs/微信图片_20200910174720.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/imgs/微信图片_20200910174720.png -------------------------------------------------------------------------------- /js底层，核心，基础/imgs/面试题_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/imgs/面试题_01.png -------------------------------------------------------------------------------- /js底层，核心，基础/imgs/面试题_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/imgs/面试题_02.png -------------------------------------------------------------------------------- /js底层，核心，基础/imgs/面试题_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/imgs/面试题_03.png -------------------------------------------------------------------------------- /js底层，核心，基础/事件及事件高级应用/事件传播机制.md: -------------------------------------------------------------------------------- 1 | ## 事件传播机制 2 | 3 | ### 阶段一：捕获阶段 CAPTURING_PHASE 4 | 5 | 从外层元素一直向里层元素查找，直到查找到事件源为止，目的是为冒泡阶段的传播提供路径 => ev.path存储的就是捕获阶段收集的传播路径 6 | 7 | 8 | 9 | ### 阶段二：目标阶段 AT_TARGET 10 | 11 | 把当前事件源的相关事件行为触发 12 | 13 | 14 | 15 | ### 阶段三：冒泡阶段 BUBBLE_PHASE 16 | 17 | 按照捕获阶段收集的传播路径，不仅仅当前事件源的事件行为被触发，整条传播路径上的元素事件行为都被触发（如果做了相关事件的触发事件绑定，则相关方法也会执行） -------------------------------------------------------------------------------- /js底层，核心，基础/同步异步编程/note.md: -------------------------------------------------------------------------------- 1 | ## JS同步异步编程 2 | 3 | ### [ 进程/线程 ] 4 | 5 | 进程是系统中正在运行的一个程序，程序一旦运行就是进程。 (浏览器开一个页卡就是一个进程) 6 | 7 | 线程是进程的一个实体，是进程的一条执行路径。 一个线程同时只能做一件事 8 | 9 | 10 | 11 | 浏览器是多线程的 12 | 13 | - GUI渲染线程 14 | - HTTP网络线程 15 | - JS代码渲染线程 16 | - ... 17 | 18 | JS是单线程的：浏览器只分配了一个线程用来渲染JS代码 19 | 20 | - JS大部分代码都是"同步编程": 上面的任务没有处理完,下面的任务没法处理 21 | - 但是利用浏览器的多线程机制可以规划出JS的"异步编程效果" 22 | - 定时器 23 | - Ajax/fetch/跨域 24 | - 事件绑定 25 | - Promise中的异步编程 26 | - Generator yield 27 | - async / await 28 | - ... -------------------------------------------------------------------------------- /js底层，核心，基础/同步异步编程/手写Promise/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /js底层，核心，基础/同步异步编程/手写Promise/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DTPromise", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "devDependencies": { 7 | "promises-aplus-tests": "^2.1.2" 8 | }, 9 | "scripts": { 10 | "test": "promises-aplus-tests DTPromise" 11 | } 12 | } -------------------------------------------------------------------------------- /js底层，核心，基础/掌握变量提升的处理机制/example.js: -------------------------------------------------------------------------------- 1 | // fn();// 5 2 | // function fn(){ // 变量提升阶段已经处理过了，这里不再处理 3 | // console.log(1); 4 | // } 5 | // fn();// 5 6 | // function fn(){ // 变量提升阶段已经处理过了，这里不再处理 7 | // console.log(2); 8 | // } 9 | // fn();// 5 10 | // var fn = function (){ // var fn不用再处理，但是赋值在变量提升阶段没处理过，此处需处理 全局上下文中的那个函数输出3 11 | // console.log(3); 12 | // } 13 | // fn();// 3 14 | // function fn(){ // 变量提升阶段已经处理过了，这里不再处理 15 | // console.log(4); 16 | // } 17 | // fn();// 3 18 | // function fn(){ // 变量提升阶段已经处理过了，这里不再处理 19 | // console.log(5); 20 | // } 21 | // fn();// 3 22 | 23 | 24 | { 25 | function foo() {}; 26 | foo = 1; 27 | } 28 | 29 | console.log(foo); -------------------------------------------------------------------------------- /js底层，核心，基础/掌握变量提升的处理机制/变量提升面试题.md: -------------------------------------------------------------------------------- 1 | ## 面试题 2 | 3 | - ```javascript 4 | // 涉及到新老版本的浏览器兼容问题 5 | 6 | //[新版本]浏览器 7 | // 向前兼容ES3/5规范 8 | // 1. 判断体和函数体中不存在块级上下文，上下文只有全局和私有 9 | // 2. 判断体中不论条件是否成立， 带function的都要声明 + 定义 10 | // 向后兼容ES6 11 | // 1.存在块级作用域， 大括号中出现let/const/function...都会被认为是块级作用域 12 | // 2.不论条件是否成立，带function的只提前声明，不会提前赋值了 13 | 14 | var a = 0; 15 | if(true){ 16 | a = 1; 17 | function a(){}; 18 | a = 21; 19 | console.log(a); 20 | } 21 | console.log(a); 22 | ``` 23 | 24 | 25 | 26 | 27 | ```javascript 28 | 29 | ``` 30 | 31 | -------------------------------------------------------------------------------- /js底层，核心，基础/数据类型和堆栈内存/example.js: -------------------------------------------------------------------------------- 1 | // var x = [12, 23]; 2 | // 3 | // function fn(y) { 4 | // y[0] = 100; 5 | // y = [100]; 6 | // y[1] = 200; 7 | // console.log(y); // [100, 200] 8 | // } 9 | // 10 | // fn(x); 11 | // console.log(x); // [100, 23] 12 | 13 | // var fn = 123; 14 | // 15 | // var fn = function fn() { 16 | // console.log('fn'); 17 | // } 18 | // console.log(fn); 19 | -------------------------------------------------------------------------------- /js底层，核心，基础/浏览器底层渲染机制/浏览器拿到服务器的数据后做了什么.md: -------------------------------------------------------------------------------- 1 | ## 浏览器拿到服务器的数据后做了什么 2 | 3 | 4 | 5 | ### 生成DOM TREE 6 | 7 | - 从服务器获取到字节流(进制编码) 8 | - 将进制编码编译为具体的字符 9 | - 根据TOKEN解析生成不同的Tag(词法解析，就比如什么标签在哪里闭合之类的) 10 | - 生成具体的节点 11 | - 按照相互的对照关系生成DOM TREE 12 | 13 | ### 生成CSSOM TREE 14 | 15 | - 对CSS的处理 16 | 17 | ### 生成 RENDER TREE 18 | 19 | - DOM TREE + CSSOM TREE = RENDER TREE 20 | - 对于开始设置display为none的元素是不会在渲染树内生成的 21 | 22 | ### 布局/回流/重排 Layout 23 | 24 | - 根据生成的渲染树，计算出每个元素相对于视口的大小和方位 25 | 26 | ### 分层 27 | 28 | - 按照计算出来的层级进行分层 29 | - 开始单独计算每一个层的绘制列表(具体怎么绘制的) 30 | - More-tools -> Layers 31 | 32 | 33 | 34 | 以上的操作都是交给"GUI渲染线程"来完成的 35 | 36 | **** 37 | 38 | 39 | 40 | ### 绘制/重绘 Painting 41 | 42 | - 把生成的绘制列表交给合成线程 43 | - "合成线程"进行我们最后的绘制，呈现在浏览器上 -------------------------------------------------------------------------------- /js底层，核心，基础/第一周作业.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/js底层，核心，基础/第一周作业.md -------------------------------------------------------------------------------- /js底层，核心，基础/设计模式/发布订阅模式.md: -------------------------------------------------------------------------------- 1 | ## 发布订阅模式 2 | 3 | 一个非常经典的设计模式 4 | 5 | 例子：DOM2级事件绑定 6 | 7 | ```javascript 8 | 首先把当前元素的某个事件[内置事件]需要绑定的方法放置在事件池中 9 | 当事件触发时依次通知事件池中对应元素的对应事件类型绑定的所有方法按顺序执行 10 | ``` 11 | 12 | 我们自己写发布订阅其实就相当于模拟一个事件池和相应的添加和移除方法 13 | 14 | ### 塌陷问题 15 | 16 | 如果在取消某个事件绑定的处理函数时，如果直接splice取消的话，会导致数组塌陷，故取消绑定时我们将对应函数所处的位置设置为null即可 -------------------------------------------------------------------------------- /js底层，核心，基础/面向对象/对象和数组的深浅拷贝.md: -------------------------------------------------------------------------------- 1 | ## 对象和数组的深浅拷贝 2 | 3 | -------------------------------------------------------------------------------- /learn-vue-deeply/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /learn-vue-deeply/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /learn-vue-deeply/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /learn-vue-deeply/README.md: -------------------------------------------------------------------------------- 1 | # learn-vue-deeply 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | yarn lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /learn-vue-deeply/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /learn-vue-deeply/note/vue全家桶原理分析.md: -------------------------------------------------------------------------------- 1 | ## Vue全家桶原理分析 2 | 3 | 4 | 5 | ### vue-router源码实现 6 | 7 | #### 需求分析 8 | 9 | - 作为一个插件存在:实现VueRouter类和install方法 10 | - 实现两个全局组件:router-view用于显示匹配组件内容,router-link用于跳转 11 | - 监控url变化:监听hashchange或popstate事件 12 | - 响应最新url:创建一个响应式的属性current,当它改变时获取对应组件并显示 13 | 14 | 15 | 16 | ### vuex原理解析 17 | 18 | #### 任务分析 19 | 20 | **实现一个插件:声明Store类,挂载$store** 21 | Store具体实现: 22 | 23 | - 创建响应式的state,保存mutations、actions和getters 24 | - 实现commit根据用户传入type执行对应mutation 25 | - 实现dispatch根据用户传入type执行对应action,同时传递上下文 26 | - 实现getters,按照getters定义对state做派生 -------------------------------------------------------------------------------- /learn-vue-deeply/note/手写MVVM.md: -------------------------------------------------------------------------------- 1 | ## 手写MVVM原理 -------------------------------------------------------------------------------- /learn-vue-deeply/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-vue-deeply/public/favicon.ico -------------------------------------------------------------------------------- /learn-vue-deeply/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/dist/vue.common.js: -------------------------------------------------------------------------------- 1 | if (process.env.NODE_ENV === 'production') { 2 | module.exports = require('./vue.common.prod.js') 3 | } else { 4 | module.exports = require('./vue.common.dev.js') 5 | } 6 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/dist/vue.runtime.common.js: -------------------------------------------------------------------------------- 1 | if (process.env.NODE_ENV === 'production') { 2 | module.exports = require('./vue.runtime.common.prod.js') 3 | } else { 4 | module.exports = require('./vue.runtime.common.dev.js') 5 | } 6 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/compiler/directives/bind.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | export default function bind (el: ASTElement, dir: ASTDirective) { 4 | el.wrapData = (code: string) => { 5 | return `_b(${code},'${el.tag}',${dir.value},${ 6 | dir.modifiers && dir.modifiers.prop ? 'true' : 'false' 7 | }${ 8 | dir.modifiers && dir.modifiers.sync ? ',true' : '' 9 | })` 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/compiler/directives/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import on from './on' 4 | import bind from './bind' 5 | import { noop } from 'shared/util' 6 | 7 | export default { 8 | on, 9 | bind, 10 | cloak: noop 11 | } 12 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/compiler/directives/on.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { warn } from 'core/util/index' 4 | 5 | export default function on (el: ASTElement, dir: ASTDirective) { 6 | if (process.env.NODE_ENV !== 'production' && dir.modifiers) { 7 | warn(`v-on without argument does not support modifiers.`) 8 | } 9 | el.wrapListeners = (code: string) => `_g(${code},${dir.value})` 10 | } 11 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/compiler/parser/entity-decoder.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | let decoder 4 | 5 | export default { 6 | decode (html: string): string { 7 | decoder = decoder || document.createElement('div') 8 | decoder.innerHTML = html 9 | return decoder.textContent 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/components/index.js: -------------------------------------------------------------------------------- 1 | import KeepAlive from './keep-alive' 2 | 3 | export default { 4 | KeepAlive 5 | } 6 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/global-api/mixin.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { mergeOptions } from '../util/index' 4 | 5 | export function initMixin (Vue: GlobalAPI) { 6 | Vue.mixin = function (mixin: Object) { 7 | this.options = mergeOptions(this.options, mixin) 8 | return this 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/global-api/use.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { toArray } from '../util/index' 4 | 5 | export function initUse (Vue: GlobalAPI) { 6 | Vue.use = function (plugin: Function | Object) { 7 | const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) 8 | if (installedPlugins.indexOf(plugin) > -1) { 9 | return this 10 | } 11 | 12 | // additional parameters 13 | const args = toArray(arguments, 1) 14 | args.unshift(this) 15 | if (typeof plugin.install === 'function') { 16 | plugin.install.apply(plugin, args) 17 | } else if (typeof plugin === 'function') { 18 | plugin.apply(null, args) 19 | } 20 | installedPlugins.push(plugin) 21 | return this 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/instance/index.js: -------------------------------------------------------------------------------- 1 | import { initMixin } from './init' 2 | import { stateMixin } from './state' 3 | import { renderMixin } from './render' 4 | import { eventsMixin } from './events' 5 | import { lifecycleMixin } from './lifecycle' 6 | import { warn } from '../util/index' 7 | 8 | function Vue (options) { 9 | if (process.env.NODE_ENV !== 'production' && 10 | !(this instanceof Vue) 11 | ) { 12 | warn('Vue is a constructor and should be called with the `new` keyword') 13 | } 14 | this._init(options) 15 | } 16 | 17 | initMixin(Vue) 18 | stateMixin(Vue) 19 | eventsMixin(Vue) 20 | lifecycleMixin(Vue) 21 | renderMixin(Vue) 22 | 23 | export default Vue 24 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/instance/render-helpers/bind-object-listeners.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { warn, extend, isPlainObject } from 'core/util/index' 4 | 5 | export function bindObjectListeners (data: any, value: any): VNodeData { 6 | if (value) { 7 | if (!isPlainObject(value)) { 8 | process.env.NODE_ENV !== 'production' && warn( 9 | 'v-on without argument expects an Object value', 10 | this 11 | ) 12 | } else { 13 | const on = data.on = data.on ? extend({}, data.on) : {} 14 | for (const key in value) { 15 | const existing = on[key] 16 | const ours = value[key] 17 | on[key] = existing ? [].concat(existing, ours) : ours 18 | } 19 | } 20 | } 21 | return data 22 | } 23 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/instance/render-helpers/resolve-filter.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { identity, resolveAsset } from 'core/util/index' 4 | 5 | /** 6 | * Runtime helper for resolving filters 7 | */ 8 | export function resolveFilter (id: string): Function { 9 | return resolveAsset(this.$options, 'filters', id, true) || identity 10 | } 11 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/util/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | export * from 'shared/util' 4 | export * from './lang' 5 | export * from './env' 6 | export * from './options' 7 | export * from './debug' 8 | export * from './props' 9 | export * from './error' 10 | export * from './next-tick' 11 | export { defineReactive } from '../observer/index' 12 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/util/perf.js: -------------------------------------------------------------------------------- 1 | import { inBrowser } from './env' 2 | 3 | export let mark 4 | export let measure 5 | 6 | if (process.env.NODE_ENV !== 'production') { 7 | const perf = inBrowser && window.performance 8 | /* istanbul ignore if */ 9 | if ( 10 | perf && 11 | perf.mark && 12 | perf.measure && 13 | perf.clearMarks && 14 | perf.clearMeasures 15 | ) { 16 | mark = tag => perf.mark(tag) 17 | measure = (name, startTag, endTag) => { 18 | perf.measure(name, startTag, endTag) 19 | perf.clearMarks(startTag) 20 | perf.clearMarks(endTag) 21 | // perf.clearMeasures(name) 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/vdom/helpers/get-first-component-child.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { isDef } from 'shared/util' 4 | import { isAsyncPlaceholder } from './is-async-placeholder' 5 | 6 | export function getFirstComponentChild (children: ?Array): ?VNode { 7 | if (Array.isArray(children)) { 8 | for (let i = 0; i < children.length; i++) { 9 | const c = children[i] 10 | if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) { 11 | return c 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/vdom/helpers/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | export * from './merge-hook' 4 | export * from './extract-props' 5 | export * from './update-listeners' 6 | export * from './normalize-children' 7 | export * from './resolve-async-component' 8 | export * from './get-first-component-child' 9 | export * from './is-async-placeholder' 10 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/vdom/helpers/is-async-placeholder.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | export function isAsyncPlaceholder (node: VNode): boolean { 4 | return node.isComment && node.asyncFactory 5 | } 6 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/core/vdom/modules/index.js: -------------------------------------------------------------------------------- 1 | import directives from './directives' 2 | import ref from './ref' 3 | 4 | export default [ 5 | ref, 6 | directives 7 | ] 8 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/compiler/directives/html.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { addProp } from 'compiler/helpers' 4 | 5 | export default function html (el: ASTElement, dir: ASTDirective) { 6 | if (dir.value) { 7 | addProp(el, 'innerHTML', `_s(${dir.value})`, dir) 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/compiler/directives/index.js: -------------------------------------------------------------------------------- 1 | import model from './model' 2 | import text from './text' 3 | import html from './html' 4 | 5 | export default { 6 | model, 7 | text, 8 | html 9 | } 10 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/compiler/directives/text.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { addProp } from 'compiler/helpers' 4 | 5 | export default function text (el: ASTElement, dir: ASTDirective) { 6 | if (dir.value) { 7 | addProp(el, 'textContent', `_s(${dir.value})`, dir) 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/compiler/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { baseOptions } from './options' 4 | import { createCompiler } from 'compiler/index' 5 | 6 | const { compile, compileToFunctions } = createCompiler(baseOptions) 7 | 8 | export { compile, compileToFunctions } 9 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/compiler/modules/index.js: -------------------------------------------------------------------------------- 1 | import klass from './class' 2 | import style from './style' 3 | import model from './model' 4 | 5 | export default [ 6 | klass, 7 | style, 8 | model 9 | ] 10 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/compiler/options.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { 4 | isPreTag, 5 | mustUseProp, 6 | isReservedTag, 7 | getTagNamespace 8 | } from '../util/index' 9 | 10 | import modules from './modules/index' 11 | import directives from './directives/index' 12 | import { genStaticKeys } from 'shared/util' 13 | import { isUnaryTag, canBeLeftOpenTag } from './util' 14 | 15 | export const baseOptions: CompilerOptions = { 16 | expectHTML: true, 17 | modules, 18 | directives, 19 | isPreTag, 20 | isUnaryTag, 21 | mustUseProp, 22 | canBeLeftOpenTag, 23 | isReservedTag, 24 | getTagNamespace, 25 | staticKeys: genStaticKeys(modules) 26 | } 27 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/entry-compiler.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | export { parseComponent } from 'sfc/parser' 4 | export { compile, compileToFunctions } from './compiler/index' 5 | export { ssrCompile, ssrCompileToFunctions } from './server/compiler' 6 | export { generateCodeFrame } from 'compiler/codeframe' 7 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/entry-runtime.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import Vue from './runtime/index' 4 | 5 | export default Vue 6 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/entry-server-basic-renderer.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import modules from './server/modules/index' 4 | import directives from './server/directives/index' 5 | import { isUnaryTag, canBeLeftOpenTag } from './compiler/util' 6 | import { createBasicRenderer } from 'server/create-basic-renderer' 7 | 8 | export default createBasicRenderer({ 9 | modules, 10 | directives, 11 | isUnaryTag, 12 | canBeLeftOpenTag 13 | }) 14 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/runtime/components/index.js: -------------------------------------------------------------------------------- 1 | import Transition from './transition' 2 | import TransitionGroup from './transition-group' 3 | 4 | export default { 5 | Transition, 6 | TransitionGroup 7 | } 8 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/runtime/directives/index.js: -------------------------------------------------------------------------------- 1 | import model from './model' 2 | import show from './show' 3 | 4 | export default { 5 | model, 6 | show 7 | } 8 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/runtime/modules/index.js: -------------------------------------------------------------------------------- 1 | import attrs from './attrs' 2 | import klass from './class' 3 | import events from './events' 4 | import domProps from './dom-props' 5 | import style from './style' 6 | import transition from './transition' 7 | 8 | export default [ 9 | attrs, 10 | klass, 11 | events, 12 | domProps, 13 | style, 14 | transition 15 | ] 16 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/runtime/patch.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import * as nodeOps from 'web/runtime/node-ops' 4 | import { createPatchFunction } from 'core/vdom/patch' 5 | import baseModules from 'core/vdom/modules/index' 6 | import platformModules from 'web/runtime/modules/index' 7 | 8 | // the directive module should be applied last, after all 9 | // built-in modules have been applied. 10 | const modules = platformModules.concat(baseModules) 11 | 12 | export const patch: Function = createPatchFunction({ nodeOps, modules }) 13 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/server/compiler.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { baseOptions } from '../compiler/options' 4 | import { createCompiler } from 'server/optimizing-compiler/index' 5 | 6 | const { compile, compileToFunctions } = createCompiler(baseOptions) 7 | 8 | export { 9 | compile as ssrCompile, 10 | compileToFunctions as ssrCompileToFunctions 11 | } 12 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/server/directives/index.js: -------------------------------------------------------------------------------- 1 | import show from './show' 2 | import model from './model' 3 | 4 | export default { 5 | show, 6 | model 7 | } 8 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/server/directives/show.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | export default function show (node: VNodeWithData, dir: VNodeDirective) { 4 | if (!dir.value) { 5 | const style: any = node.data.style || (node.data.style = {}) 6 | if (Array.isArray(style)) { 7 | style.push({ display: 'none' }) 8 | } else { 9 | style.display = 'none' 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/server/modules/class.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { escape } from '../util' 4 | import { genClassForVnode } from 'web/util/index' 5 | 6 | export default function renderClass (node: VNodeWithData): ?string { 7 | const classList = genClassForVnode(node) 8 | if (classList !== '') { 9 | return ` class="${escape(classList)}"` 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/server/modules/index.js: -------------------------------------------------------------------------------- 1 | import attrs from './attrs' 2 | import domProps from './dom-props' 3 | import klass from './class' 4 | import style from './style' 5 | 6 | export default [ 7 | attrs, 8 | domProps, 9 | klass, 10 | style 11 | ] 12 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/util/compat.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { inBrowser } from 'core/util/index' 4 | 5 | // check whether current browser encodes a char inside attribute values 6 | let div 7 | function getShouldDecode (href: boolean): boolean { 8 | div = div || document.createElement('div') 9 | div.innerHTML = href ? `` : `
` 10 | return div.innerHTML.indexOf(' ') > 0 11 | } 12 | 13 | // #3663: IE encodes newlines inside attribute values while other browsers don't 14 | export const shouldDecodeNewlines = inBrowser ? getShouldDecode(false) : false 15 | // #6828: chrome encodes content in a[href] 16 | export const shouldDecodeNewlinesForHref = inBrowser ? getShouldDecode(true) : false 17 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/web/util/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { warn } from 'core/util/index' 4 | 5 | export * from './attrs' 6 | export * from './class' 7 | export * from './element' 8 | 9 | /** 10 | * Query an element selector if it's not an element already. 11 | */ 12 | export function query (el: string | Element): Element { 13 | if (typeof el === 'string') { 14 | const selected = document.querySelector(el) 15 | if (!selected) { 16 | process.env.NODE_ENV !== 'production' && warn( 17 | 'Cannot find element: ' + el 18 | ) 19 | return document.createElement('div') 20 | } 21 | return selected 22 | } else { 23 | return el 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/compiler/directives/index.js: -------------------------------------------------------------------------------- 1 | import model from './model' 2 | 3 | export default { 4 | model 5 | } 6 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/compiler/modules/index.js: -------------------------------------------------------------------------------- 1 | import klass from './class' 2 | import style from './style' 3 | import props from './props' 4 | import append from './append' 5 | import recycleList from './recycle-list/index' 6 | 7 | export default [ 8 | recycleList, 9 | klass, 10 | style, 11 | props, 12 | append 13 | ] 14 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/compiler/modules/recycle-list/component-root.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { addAttr } from 'compiler/helpers' 4 | 5 | // mark component root nodes as 6 | export function postTransformComponentRoot (el: ASTElement) { 7 | if (!el.parent) { 8 | // component root 9 | addAttr(el, '@isComponentRoot', 'true') 10 | addAttr(el, '@templateId', '_uid') 11 | addAttr(el, '@componentProps', '$props || {}') 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/compiler/modules/recycle-list/component.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { addAttr } from 'compiler/helpers' 4 | import { RECYCLE_LIST_MARKER } from 'weex/util/index' 5 | 6 | // mark components as inside recycle-list so that we know we need to invoke 7 | // their special @render function instead of render in create-component.js 8 | export function postTransformComponent ( 9 | el: ASTElement, 10 | options: WeexCompilerOptions 11 | ) { 12 | // $flow-disable-line (we know isReservedTag is there) 13 | if (!options.isReservedTag(el.tag) && el.tag !== 'cell-slot') { 14 | addAttr(el, RECYCLE_LIST_MARKER, 'true') 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/compiler/modules/recycle-list/text.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { addAttr } from 'compiler/helpers' 4 | 5 | function genText (node: ASTNode) { 6 | const value = node.type === 3 7 | ? node.text 8 | : node.type === 2 9 | ? node.tokens.length === 1 10 | ? node.tokens[0] 11 | : node.tokens 12 | : '' 13 | return JSON.stringify(value) 14 | } 15 | 16 | export function postTransformText (el: ASTElement) { 17 | // weex can only contain text, so the parser 18 | // always generates a single child. 19 | if (el.children.length) { 20 | addAttr(el, 'value', genText(el.children[0])) 21 | el.children = [] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/compiler/modules/recycle-list/v-bind.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { camelize } from 'shared/util' 4 | import { generateBinding } from 'weex/util/parser' 5 | import { bindRE } from 'compiler/parser/index' 6 | import { getAndRemoveAttr, addRawAttr } from 'compiler/helpers' 7 | 8 | function parseAttrName (name: string): string { 9 | return camelize(name.replace(bindRE, '')) 10 | } 11 | 12 | export function preTransformVBind (el: ASTElement) { 13 | for (const attr in el.attrsMap) { 14 | if (bindRE.test(attr)) { 15 | const name: string = parseAttrName(attr) 16 | const value = generateBinding(getAndRemoveAttr(el, attr)) 17 | delete el.attrsMap[attr] 18 | addRawAttr(el, name, value) 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/compiler/modules/recycle-list/v-once.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { getAndRemoveAttr, addRawAttr } from 'compiler/helpers' 4 | 5 | function containVOnce (el: ASTElement): boolean { 6 | for (const attr in el.attrsMap) { 7 | if (/^v\-once$/i.test(attr)) { 8 | return true 9 | } 10 | } 11 | return false 12 | } 13 | 14 | export function preTransformVOnce (el: ASTElement) { 15 | if (containVOnce(el)) { 16 | getAndRemoveAttr(el, 'v-once', true) 17 | addRawAttr(el, '[[once]]', true) 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/entry-compiler.js: -------------------------------------------------------------------------------- 1 | export { compile } from 'weex/compiler/index' 2 | export { generateCodeFrame } from 'compiler/codeframe' 3 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/entry-runtime-factory.js: -------------------------------------------------------------------------------- 1 | // this entry is built and wrapped with a factory function 2 | // used to generate a fresh copy of Vue for every Weex instance. 3 | 4 | import Vue from './runtime/index' 5 | 6 | exports.Vue = Vue 7 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/runtime/components/index.js: -------------------------------------------------------------------------------- 1 | import Richtext from './richtext' 2 | import Transition from './transition' 3 | import TransitionGroup from './transition-group' 4 | 5 | export default { 6 | Richtext, 7 | Transition, 8 | TransitionGroup 9 | } 10 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/runtime/components/transition.js: -------------------------------------------------------------------------------- 1 | // reuse same transition component logic from web 2 | export { 3 | transitionProps, 4 | extractTransitionData 5 | } from 'web/runtime/components/transition' 6 | 7 | import Transition from 'web/runtime/components/transition' 8 | 9 | export default Transition 10 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/runtime/directives/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | } 3 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/runtime/modules/index.js: -------------------------------------------------------------------------------- 1 | import attrs from './attrs' 2 | import klass from './class' 3 | import events from './events' 4 | import style from './style' 5 | import transition from './transition' 6 | 7 | export default [ 8 | attrs, 9 | klass, 10 | events, 11 | style, 12 | transition 13 | ] 14 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/runtime/patch.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import * as nodeOps from 'weex/runtime/node-ops' 4 | import { createPatchFunction } from 'core/vdom/patch' 5 | import baseModules from 'core/vdom/modules/index' 6 | import platformModules from 'weex/runtime/modules/index' 7 | 8 | // the directive module should be applied last, after all 9 | // built-in modules have been applied. 10 | const modules = platformModules.concat(baseModules) 11 | 12 | export const patch: Function = createPatchFunction({ 13 | nodeOps, 14 | modules, 15 | LONG_LIST_THRESHOLD: 10 16 | }) 17 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/platforms/weex/runtime/text-node.js: -------------------------------------------------------------------------------- 1 | let latestNodeId = 1 2 | 3 | export default function TextNode (text) { 4 | this.instanceId = '' 5 | this.nodeId = latestNodeId++ 6 | this.parentNode = null 7 | this.nodeType = 3 8 | this.text = text 9 | } 10 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/server/optimizing-compiler/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { parse } from 'compiler/parser/index' 4 | import { generate } from './codegen' 5 | import { optimize } from './optimizer' 6 | import { createCompilerCreator } from 'compiler/create-compiler' 7 | 8 | export const createCompiler = createCompilerCreator(function baseCompile ( 9 | template: string, 10 | options: CompilerOptions 11 | ): CompiledResult { 12 | const ast = parse(template.trim(), options) 13 | optimize(ast, options) 14 | const code = generate(ast, options) 15 | return { 16 | ast, 17 | render: code.render, 18 | staticRenderFns: code.staticRenderFns 19 | } 20 | }) 21 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/server/util.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | export const isJS = (file: string): boolean => /\.js(\?[^.]+)?$/.test(file) 4 | 5 | export const isCSS = (file: string): boolean => /\.css(\?[^.]+)?$/.test(file) 6 | 7 | export function createPromiseCallback () { 8 | let resolve, reject 9 | const promise: Promise = new Promise((_resolve, _reject) => { 10 | resolve = _resolve 11 | reject = _reject 12 | }) 13 | const cb = (err: Error, res?: string) => { 14 | if (err) return reject(err) 15 | resolve(res || '') 16 | } 17 | return { promise, cb } 18 | } 19 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/src/shared/constants.js: -------------------------------------------------------------------------------- 1 | export const SSR_ATTR = 'data-server-rendered' 2 | 3 | export const ASSET_TYPES = [ 4 | 'component', 5 | 'directive', 6 | 'filter' 7 | ] 8 | 9 | export const LIFECYCLE_HOOKS = [ 10 | 'beforeCreate', 11 | 'created', 12 | 'beforeMount', 13 | 'mounted', 14 | 'beforeUpdate', 15 | 'updated', 16 | 'beforeDestroy', 17 | 'destroyed', 18 | 'activated', 19 | 'deactivated', 20 | 'errorCaptured', 21 | 'serverPrefetch' 22 | ] 23 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Vue } from "./vue"; 2 | import "./umd"; 3 | 4 | export default Vue; 5 | 6 | export { 7 | CreateElement, 8 | VueConstructor 9 | } from "./vue"; 10 | 11 | export { 12 | Component, 13 | AsyncComponent, 14 | ComponentOptions, 15 | FunctionalComponentOptions, 16 | RenderContext, 17 | PropType, 18 | PropOptions, 19 | ComputedOptions, 20 | WatchHandler, 21 | WatchOptions, 22 | WatchOptionsWithHandler, 23 | DirectiveFunction, 24 | DirectiveOptions 25 | } from "./options"; 26 | 27 | export { 28 | PluginFunction, 29 | PluginObject 30 | } from "./plugin"; 31 | 32 | export { 33 | VNodeChildren, 34 | VNodeChildrenArrayContents, 35 | VNode, 36 | VNodeComponentOptions, 37 | VNodeData, 38 | VNodeDirective 39 | } from "./vnode"; 40 | -------------------------------------------------------------------------------- /learn-vue-deeply/source/vue/types/plugin.d.ts: -------------------------------------------------------------------------------- 1 | import { Vue as _Vue } from "./vue"; 2 | 3 | export type PluginFunction = (Vue: typeof _Vue, options?: T) => void; 4 | 5 | export interface PluginObject { 6 | install: PluginFunction; 7 | [key: string]: any; 8 | } 9 | -------------------------------------------------------------------------------- /learn-vue-deeply/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 36 | -------------------------------------------------------------------------------- /learn-vue-deeply/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-vue-deeply/src/assets/logo.png -------------------------------------------------------------------------------- /learn-vue-deeply/src/drouter/drouter-link.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | to: { 4 | type: String, 5 | required: true 6 | }, 7 | }, 8 | render(h) { 9 | return h("a", { 10 | attrs: { 11 | href: "#" + this.to 12 | } 13 | }, this.$slots.default) 14 | } 15 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/drouter/modules/Login.js: -------------------------------------------------------------------------------- 1 | export default { 2 | path: '/Login', 3 | name: "关于", 4 | component: () => 5 | import ( /* webpackChunkName: "about" */ '@/views/About.vue') 6 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/drouter/modules/component-pratice.js: -------------------------------------------------------------------------------- 1 | let name = "component-pratice"; 2 | export default { 3 | path: `/${name}`, 4 | name: "组件实践练习", 5 | component: () => 6 | import( /* webpackChunkName: "about" */ `@/views/${name}/${name}.vue`) 7 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/drouter/modules/dvuex.js: -------------------------------------------------------------------------------- 1 | let name = "dvuex"; 2 | export default { 3 | path: `/${name}`, 4 | name: "实现自己的vuex", 5 | component: () => 6 | import( /* webpackChunkName: "about" */ `@/views/${name}/${name}.vue`) 7 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/dstore/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | doubleValue: state => { 3 | return state.value * 2 4 | } 5 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/dstore/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from './dvuex'; 3 | import getters from './getters'; 4 | 5 | Vue.use(Vuex); 6 | 7 | export const store = new Vuex.Store({ 8 | state: { 9 | value: 0 10 | }, 11 | mutations: { 12 | UPDATE_VALUE(state, payload) { 13 | state.value += payload; 14 | } 15 | }, 16 | actions: { 17 | update_value({ 18 | commit 19 | }, payload) { 20 | setTimeout(() => { 21 | commit('UPDATE_VALUE', payload); 22 | }, 1000); 23 | } 24 | }, 25 | getters 26 | }); 27 | 28 | export default store -------------------------------------------------------------------------------- /learn-vue-deeply/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './drouter' 4 | import store from './dstore' 5 | import create from '@/utils/create' 6 | import "./style/index.css" 7 | 8 | Vue.prototype.$create = create; 9 | 10 | Vue.config.productionTip = false 11 | 12 | new Vue({ 13 | router, 14 | store, 15 | render: h => h(App) 16 | }).$mount('#app') -------------------------------------------------------------------------------- /learn-vue-deeply/src/router/modules/Login.js: -------------------------------------------------------------------------------- 1 | export default { 2 | path: '/Login', 3 | name: "关于", 4 | component: () => 5 | import ( /* webpackChunkName: "about" */ '@/views/About.vue') 6 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/router/modules/component-pratice.js: -------------------------------------------------------------------------------- 1 | export default { 2 | path: '/component-pratice', 3 | name: "组件实践练习", 4 | component: () => 5 | import( /* webpackChunkName: "about" */ '@/views/component-pratice/component-pratice.vue') 6 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/store/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | getMenus: state => { 3 | return state.menu.menus 4 | } 5 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/store/modules/menu.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | menus: [] 3 | } 4 | const mutations = { 5 | CHANGE_MENU: (state, val) => { 6 | state.menus = val.filter(i => true); 7 | } 8 | } 9 | const actions = { 10 | change_menu(context, val) { 11 | context.commit('CHANGE_MENU', val); 12 | } 13 | } 14 | export default { 15 | namespaced: true, 16 | state, 17 | mutations, 18 | actions 19 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/store/modules/test.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | test: 'doctorwu' 3 | } 4 | const mutations = { 5 | CHANGE_TEST: (state, val) => { 6 | state.msg = val 7 | } 8 | } 9 | const actions = { 10 | change_test(context, val) { 11 | context.commit('CHANGE_TEST', val) 12 | } 13 | } 14 | export default { 15 | namespaced: true, 16 | state, 17 | mutations, 18 | actions 19 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/style/index.css: -------------------------------------------------------------------------------- 1 | html,body{ 2 | height: 100%; 3 | width: 100%; 4 | } 5 | *{ 6 | margin: 0; 7 | padding: 0; 8 | } -------------------------------------------------------------------------------- /learn-vue-deeply/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /learn-vue-deeply/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /learn-vue-deeply/src/views/dvuex/dvuex.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /learn-vue-deeply/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false 3 | } 4 | -------------------------------------------------------------------------------- /learn-vue-deeply/vue/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /learn-vue-deeply/vue/dist/vue.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Vue = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | var a = 12; 8 | console.log(a); 9 | 10 | return a; 11 | 12 | }))); 13 | //# sourceMappingURL=vue.js.map 14 | -------------------------------------------------------------------------------- /learn-vue-deeply/vue/dist/vue.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vue.js","sources":["../src/index.js"],"sourcesContent":["let a = 12;\nconsole.log(a);\n\nexport default a;\n"],"names":["a","console","log"],"mappings":";;;;;;KAAIA,CAAC,GAAG;CACRC,OAAO,CAACC,GAAR,CAAYF,CAAZ;;;;;;;;"} -------------------------------------------------------------------------------- /learn-vue-deeply/vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /learn-vue-deeply/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "rollup --config --watch" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@babel/core": "^7.12.10", 14 | "@babel/preset-env": "^7.12.11", 15 | "rollup": "^2.36.1", 16 | "rollup-plugin-babel": "^4.4.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /learn-vue-deeply/vue/rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from "rollup-plugin-babel"; 2 | 3 | export default { 4 | input: "./src/index.js", 5 | output: { 6 | format: "umd",// amd + commonjs 7 | name: "Vue", // window.Vue 8 | file: "dist/vue.js", // 打包输出路径 9 | sourcemap: true // es5 -> es6源码 10 | }, 11 | plugins: [ 12 | babel({ 13 | exclude: "node_modules/**" // node_modules下的文件不用babel转换 14 | }) 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /learn-vue-deeply/vue/src/index.js: -------------------------------------------------------------------------------- 1 | let a = 12; 2 | console.log(a); 3 | 4 | export default a; 5 | -------------------------------------------------------------------------------- /learn-vue-deeply/vue项目最佳实践.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-vue-deeply/vue项目最佳实践.pdf -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-01.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-webpack-deeply/webpack-01.pdf -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-Day2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-webpack-deeply/webpack-Day2.pdf -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-Day3.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-webpack-deeply/webpack-Day3.pdf -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-Day4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-webpack-deeply/webpack-Day4.pdf -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-Day5.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-webpack-deeply/webpack-Day5.pdf -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-Day6.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-webpack-deeply/webpack-Day6.pdf -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-core-config/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "targets": { 7 | "edge": "17", 8 | "firefox": "60", 9 | "chrome": "67", 10 | "safari": "11.1" 11 | }, 12 | "corejs": 2, //新版本需要指定核心心库版本 13 | "useBuiltIns": "usage" //按需注入入 14 | } 15 | ] 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-core-config/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%=htmlWebpackPlugin.options.title%> 6 | 7 | 8 | 9 |

这里是Doctorwu

10 | 11 | -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-core-config/postcss.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require("autoprefixer"); 2 | 3 | module.exports = { 4 | plugins: [ 5 | autoprefixer({ 6 | overrideBrowserslist: ["last 2 versions", ">1%"] 7 | }), 8 | ], 9 | } -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-core-config/src/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-webpack-deeply/webpack-core-config/src/bg.png -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-core-config/src/index.js: -------------------------------------------------------------------------------- 1 | import "./index.scss"; 2 | import bg from "./bg.png"; 3 | 4 | const img = new Image(); 5 | img.src = bg; 6 | 7 | document.body.insertBefore(img, document.body.firstChild); 8 | 9 | console.log("Hello webpack"); 10 | 11 | const promiseArr = [new Promise((r) => { 12 | r(1) 13 | })].map(p => p.then()) 14 | 15 | console.log(promiseArr) -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-core-config/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: lightseagreen; 3 | display: flex; 4 | padding: 0; 5 | margin: 0; 6 | font-family: "ZS" !important; 7 | } 8 | 9 | @font-face { 10 | font-family: "ZS"; 11 | font-display: swap; 12 | src: url("./zs.ttf") format("ttf"); 13 | } -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-core-config/src/zs.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/learn-webpack-deeply/webpack-core-config/src/zs.ttf -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-core-config/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | const { 3 | CleanWebpackPlugin 4 | } = require("clean-webpack-plugin"); 5 | module.exports = { 6 | 7 | mode: "development", 8 | devtool: "source-map", 9 | 10 | devServer: { 11 | // 静态资源目录 12 | // contentBase: "./dist", 13 | // 是否在开启服务后自动打开默认浏览器窗口 14 | // open: true, 15 | port: 8088 16 | }, 17 | plugins: [ 18 | new CleanWebpackPlugin(), 19 | new HtmlWebpackPlugin({ 20 | template: "./index.html", 21 | title: "webpack", 22 | filename: "index.html" 23 | }), 24 | ] 25 | } -------------------------------------------------------------------------------- /learn-webpack-deeply/webpack-core-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | const isProd = process.env.NODE_ENV === "production"; 2 | const { 3 | merge 4 | } = require("webpack-merge"); 5 | 6 | const commonConfig = require("./webpack.config.base.js"); 7 | const prodConfig = require("./webpack.config.prod.js"); 8 | const devConfig = require("./webpack.config.dev.js"); 9 | 10 | console.log(process.env.NODE_ENV, isProd); 11 | 12 | 13 | module.exports = () => { 14 | if (isProd) { 15 | return merge(commonConfig, prodConfig) 16 | } else { 17 | return merge(commonConfig, devConfig) 18 | } 19 | } -------------------------------------------------------------------------------- /react/learn-react-deeply/React.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/react/learn-react-deeply/React.xmind -------------------------------------------------------------------------------- /react/learn-react-deeply/my-react/.env.development: -------------------------------------------------------------------------------- 1 | DISABLE_NEW_JSX_TRANSFORM=true 2 | -------------------------------------------------------------------------------- /react/learn-react-deeply/my-react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/learn-react-deeply/my-react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | React 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /react/learn-react-deeply/my-react/src/constants.js: -------------------------------------------------------------------------------- 1 | export const REACT_TEXT = Symbol("REACT_TEXT"); 2 | -------------------------------------------------------------------------------- /react/learn-react-deeply/my-react/src/react.js: -------------------------------------------------------------------------------- 1 | import {wrapToVdom} from './utils'; 2 | import Component from './Component'; 3 | 4 | function createElement(type, config, children) { 5 | if (config) { 6 | delete config._owner; 7 | delete config._store; 8 | delete config.__self; 9 | delete config.__source; 10 | delete config.ref; 11 | } 12 | let props = {...config}; 13 | if (arguments.length > 3) { 14 | props.children = Array.prototype.slice.call(arguments, 2).map(wrapToVdom); 15 | } else { 16 | props.children = wrapToVdom(children); 17 | } 18 | return { 19 | type, 20 | props 21 | }; 22 | } 23 | 24 | const React = { 25 | createElement, 26 | Component 27 | }; 28 | export default React; 29 | -------------------------------------------------------------------------------- /react/learn-react-deeply/my-react/src/utils.js: -------------------------------------------------------------------------------- 1 | import {REACT_TEXT} from './constants'; 2 | 3 | export function isText(obj) { 4 | return typeof obj === 'string' || typeof obj === 'number'; 5 | } 6 | 7 | export function wrapToVdom(obj) { 8 | return isText(obj) ? {type: REACT_TEXT, props: {content: obj}} : obj; 9 | } 10 | 11 | export function isFunction(obj) { 12 | return typeof obj === 'function'; 13 | } 14 | -------------------------------------------------------------------------------- /react/preview/JSX.md: -------------------------------------------------------------------------------- 1 | ## JSX 2 | 3 | - 基本使用 表达式用{}包裹 4 | - 函数 5 | - JSX 对象 6 | - 条件语句 7 | - 数组 8 | - 属性 9 | - 模块化 10 | 11 | -------------------------------------------------------------------------------- /react/preview/init.md: -------------------------------------------------------------------------------- 1 | ## React-init 2 | 3 | ### 创建一个React应用 4 | 5 | ```bash 6 | npx create-react-app 7 | yarn start; 8 | yarn build 9 | ``` 10 | 11 | -------------------------------------------------------------------------------- /react/preview/组件的生命周期.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/react/preview/组件的生命周期.md -------------------------------------------------------------------------------- /react/react-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react/react-ts/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/en/webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /react/react-ts/config/pnpTs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const { resolveModuleName } = require('ts-pnp'); 4 | 5 | exports.resolveModuleName = ( 6 | typescript, 7 | moduleName, 8 | containingFile, 9 | compilerOptions, 10 | resolutionHost 11 | ) => { 12 | return resolveModuleName( 13 | moduleName, 14 | containingFile, 15 | compilerOptions, 16 | resolutionHost, 17 | typescript.resolveModuleName 18 | ); 19 | }; 20 | 21 | exports.resolveTypeReferenceDirective = ( 22 | typescript, 23 | moduleName, 24 | containingFile, 25 | compilerOptions, 26 | resolutionHost 27 | ) => { 28 | return resolveModuleName( 29 | moduleName, 30 | containingFile, 31 | compilerOptions, 32 | resolutionHost, 33 | typescript.resolveTypeReferenceDirective 34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /react/react-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/react/react-ts/public/favicon.ico -------------------------------------------------------------------------------- /react/react-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/react/react-ts/public/logo192.png -------------------------------------------------------------------------------- /react/react-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/react/react-ts/public/logo512.png -------------------------------------------------------------------------------- /react/react-ts/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react/react-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/react-ts/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/react-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Layout from "./components/Layout"; 3 | import "./App.css"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /react/react-ts/src/api/api.ts: -------------------------------------------------------------------------------- 1 | import { 2 | $get, 3 | // $post, 4 | } from "./http"; 5 | 6 | export const getBanner = (data: any) => { 7 | return $get("/banner", data); 8 | }; 9 | 10 | export const getCode = (phone: string) => { 11 | return $get(`/captcha/sent`, { phone }); 12 | }; 13 | 14 | export const getRegist = (data: any) => { 15 | return $get(`/register/cellphone`, data); 16 | }; 17 | -------------------------------------------------------------------------------- /react/react-ts/src/components/ProtectRoute.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Redirect, Route } from "react-router-dom"; 3 | 4 | function ProtectRoute(props: any) { 5 | let Com = props.component; 6 | return ( 7 | { 10 | let isLogin = true; 11 | return isLogin ? ( 12 | 13 | ) : ( 14 | 15 | ); 16 | }} 17 | > 18 | ); 19 | } 20 | 21 | export default ProtectRoute; 22 | -------------------------------------------------------------------------------- /react/react-ts/src/components/nav.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | import "../style/nav.scss"; 4 | 5 | 6 | const Nav = () => { 7 | return ( 8 |
9 |
10 |
11 | 我的 12 | 发现 13 | 云村 14 | 视频 15 |
16 | 17 |
18 | 19 |
20 | ); 21 | }; 22 | 23 | export default Nav; 24 | -------------------------------------------------------------------------------- /react/react-ts/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react/react-ts/src/index.d.ts: -------------------------------------------------------------------------------- 1 | export interface IProps { 2 | history: any; 3 | [prop: string]: any; 4 | } 5 | -------------------------------------------------------------------------------- /react/react-ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import "antd-mobile/dist/antd-mobile.css"; // or 'antd-mobile/dist/antd-mobile.less' 7 | import store from "./store/index"; 8 | import { Provider } from "react-redux"; 9 | 10 | ReactDOM.render( 11 | 12 | 13 | , 14 | document.getElementById("root") 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /react/react-ts/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | } 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /react/react-ts/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react/react-ts/src/store/actions/find.ts: -------------------------------------------------------------------------------- 1 | import {getBanner} from "../../api/api"; 2 | import {Dispatch} from "redux"; 3 | import {actionTypes} from "../reducers/types"; 4 | 5 | export const getBannerAction: () => any = () => 6 | (dispatch: Dispatch) => getBanner({type: 2}) 7 | .then((res: any) => { 8 | console.log(res); 9 | dispatch({type: actionTypes.SETBANNERLIST, list: res.banners}); 10 | }); 11 | -------------------------------------------------------------------------------- /react/react-ts/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { createStore, combineReducers, applyMiddleware } from "redux"; 2 | import thunk from "redux-thunk"; 3 | import findReducer, { IFindState } from "./reducers/findReducers"; 4 | 5 | export interface IState { 6 | find: IFindState; 7 | } 8 | 9 | let rootReducer = combineReducers({ 10 | find: findReducer, 11 | }); 12 | 13 | let store = createStore(rootReducer, applyMiddleware(thunk)); 14 | export default store; 15 | -------------------------------------------------------------------------------- /react/react-ts/src/store/reducers/findReducers.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from "./types"; 2 | 3 | export interface IFindState { 4 | bannerList: []; 5 | playList: []; 6 | } 7 | 8 | export interface IFIndAction { 9 | type: Symbol; 10 | [prop: string]: any; 11 | } 12 | 13 | let initState: IFindState = { 14 | bannerList: [], 15 | playList: [], 16 | }; 17 | 18 | export default function findReducer( 19 | state: IFindState = initState, 20 | action: IFIndAction 21 | ): IFindState { 22 | switch (action.type) { 23 | case actionTypes.SETPLAYLIST: 24 | return state; 25 | 26 | case actionTypes.SETBANNERLIST: 27 | return { 28 | ...state, 29 | bannerList: action.list, 30 | }; 31 | 32 | default: 33 | return { ...state }; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react/react-ts/src/store/reducers/types.ts: -------------------------------------------------------------------------------- 1 | export interface IActionTypes { 2 | readonly SETBANNERLIST: Symbol; 3 | readonly SETPLAYLIST: Symbol; 4 | } 5 | 6 | const actionTypes: IActionTypes = { 7 | SETBANNERLIST: Symbol(), 8 | SETPLAYLIST: Symbol(), 9 | }; 10 | 11 | export { actionTypes }; 12 | -------------------------------------------------------------------------------- /react/react-ts/src/style/find.scss: -------------------------------------------------------------------------------- 1 | .banner_box { 2 | border-radius: 8px; 3 | overflow: hidden; 4 | } -------------------------------------------------------------------------------- /react/react-ts/src/style/layout.scss: -------------------------------------------------------------------------------- 1 | .full_screen_wrap { 2 | position: fixed; 3 | top: 0; 4 | width: 100%; 5 | height: 100%; 6 | background-color: #fff; 7 | } -------------------------------------------------------------------------------- /react/react-ts/src/views/Login.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { IProps } from "../index.d"; 3 | import { Button } from "antd-mobile"; 4 | 5 | class Login extends Component { 6 | render() { 7 | return ( 8 |
9 | 15 |
16 | ); 17 | } 18 | } 19 | 20 | export default Login; 21 | -------------------------------------------------------------------------------- /react/react-ts/src/views/cloud.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Cloud extends Component { 4 | render() { 5 | return ( 6 |
7 | Cloud Page 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Cloud; 14 | -------------------------------------------------------------------------------- /react/react-ts/src/views/search.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Search extends Component { 4 | render() { 5 | return
搜索页面
; 6 | } 7 | } 8 | 9 | export default Search; 10 | -------------------------------------------------------------------------------- /react/react-ts/src/views/user.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button } from "antd-mobile"; 3 | import { IProps } from "../index.d"; 4 | 5 | function User(props: IProps) { 6 | console.log(props); 7 | 8 | const goLogin = () => { 9 | props.history.push({ 10 | pathname: "/login", 11 | }); 12 | }; 13 | return ( 14 | <> 15 | My Info 16 | 19 | 20 | ); 21 | } 22 | 23 | export default User; 24 | -------------------------------------------------------------------------------- /react/react-ts/src/views/video.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Video extends Component { 4 | render() { 5 | return
6 | Video Page 7 |
; 8 | } 9 | } 10 | 11 | export default Video; 12 | -------------------------------------------------------------------------------- /react/react-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */, 17 | "emitDecoratorMetadata": true, 18 | "noEmit": true, 19 | "jsx": "react" 20 | }, 21 | "include": ["src"] 22 | } 23 | -------------------------------------------------------------------------------- /vue3/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ -------------------------------------------------------------------------------- /vue3/examples/1.reactive-api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3", 3 | "private":true, 4 | "workspaces": [ 5 | "packages/*" 6 | ], 7 | "version": "1.0.0", 8 | "main": "index.js", 9 | "scripts": { 10 | "dev": "node scripts/dev.js", 11 | "build": "node scripts/build.js" 12 | }, 13 | "license": "MIT", 14 | "devDependencies": { 15 | "@rollup/plugin-json": "^4.1.0", 16 | "@rollup/plugin-node-resolve": "^13.0.0", 17 | "execa": "^5.1.1", 18 | "rollup": "^2.52.3", 19 | "rollup-plugin-typescript2": "^0.30.0", 20 | "typescript": "^4.3.4" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /vue3/packages/reactivity/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vue/reactivity", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "module": "dist/reactivity.esm-bundler.js", 6 | "license": "MIT", 7 | "buildOptions": { 8 | "name": "VueReactivity", 9 | "formats": [ 10 | "cjs", 11 | "esm-bundler", 12 | "global" 13 | ] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /vue3/packages/reactivity/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | reactive, 3 | shallowReactive, 4 | readonly, 5 | shallowReadonly, 6 | } from './reactive'; 7 | 8 | export { 9 | effect, 10 | } from './effect'; 11 | 12 | export { 13 | ref, 14 | shallowRef, 15 | toRef, 16 | toRefs, 17 | } from './ref'; 18 | 19 | export { 20 | computed, 21 | } from './computed'; 22 | -------------------------------------------------------------------------------- /vue3/packages/reactivity/src/operators.ts: -------------------------------------------------------------------------------- 1 | export const enum TrackOpTypes { 2 | GET, 3 | }; 4 | 5 | export const enum TriggerOpTypes { 6 | ADD, 7 | SET, 8 | } -------------------------------------------------------------------------------- /vue3/packages/runtime-core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vue/runtime-core", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "module": "dist/runtime-core.esm-bundler.js", 7 | "buildOptions": { 8 | "name": "VueRuntimeCore", 9 | "formats": [ 10 | "esm-bundler" 11 | ] 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC" 16 | } 17 | -------------------------------------------------------------------------------- /vue3/packages/runtime-core/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | createRenderer 3 | } from './renderer'; -------------------------------------------------------------------------------- /vue3/packages/runtime-dom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vue/runtime-dom", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "module": "dist/runtime-dom.esm-bundler.js", 6 | "license": "MIT", 7 | "buildOptions": { 8 | "name": "VueRuntimeDOM", 9 | "formats": [ 10 | "esm-bundler", 11 | "global" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /vue3/packages/runtime-dom/src/modules/attr.ts: -------------------------------------------------------------------------------- 1 | export const patchAttr = (el, key, value) => { 2 | if (value == null) { 3 | el.removeAttribute(key); 4 | } else { 5 | el.setAttribute(key, value); 6 | } 7 | } -------------------------------------------------------------------------------- /vue3/packages/runtime-dom/src/modules/class.ts: -------------------------------------------------------------------------------- 1 | export const patchClass = (el, value) => { 2 | if (value == null) { 3 | value = ''; 4 | } 5 | 6 | el.className = value; 7 | } -------------------------------------------------------------------------------- /vue3/packages/runtime-dom/src/modules/style.ts: -------------------------------------------------------------------------------- 1 | export const patchStyle = (el, prev, next) => { 2 | const style = el.style; // 获取样式 3 | if (next == null) { 4 | el.removeAttribute('style'); 5 | } else { 6 | // diff style 新加的要加上 新的没有的要去掉 7 | 8 | if (prev) { 9 | for (const key in prev) { 10 | if (next[key] == null) { // 老的有 新的没有 要去掉 11 | style[key] = ''; 12 | } 13 | } 14 | } 15 | 16 | for (const key in next) { 17 | style[key] = next[key]; 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /vue3/packages/runtime-dom/src/nodeOps.ts: -------------------------------------------------------------------------------- 1 | // 节点操作 2 | export const nodeOps = { 3 | // 元素操作 4 | createElement: tagName => document.createElement(tagName), 5 | remove: child => { 6 | const parent = child.parentNode; 7 | if (parent) { 8 | parent.removeChild(child); 9 | } 10 | }, 11 | insert: (child, parent, anchor = null) => { 12 | parent.insertBefore(child, anchor); 13 | }, 14 | querySelector: selector => document.querySelector(selector), 15 | setElementText: (el, text) => el.textContent = text, 16 | // 文本操作 17 | createText: text => document.createTextNode(text), 18 | setText: (node, text) => node.nodeValue = text, 19 | } -------------------------------------------------------------------------------- /vue3/packages/runtime-dom/src/patchProp.ts: -------------------------------------------------------------------------------- 1 | // 针对属性操作 2 | 3 | import { patchAttr } from "./modules/attr"; 4 | import { patchClass } from "./modules/class"; 5 | import { patchEvent } from "./modules/events"; 6 | import { patchStyle } from "./modules/style"; 7 | 8 | export const isEvent = key => /^on[^a-z]/.test(key); 9 | 10 | export const patchProp = (el, key, preValue, nextValue) => { 11 | switch (key) { 12 | case 'class': 13 | patchClass(el, nextValue); 14 | break; 15 | case 'style': 16 | patchStyle(el, preValue, nextValue); 17 | break; 18 | default: 19 | // 如果不是事件 才是属性 20 | if (isEvent(key)) { 21 | patchEvent(el, key, nextValue); 22 | } else { 23 | patchAttr(el, key, nextValue); 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /vue3/packages/shared/dist/shared.cjs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { value: true }); 4 | 5 | var Shared = {}; 6 | 7 | exports.Shared = Shared; 8 | //# sourceMappingURL=shared.cjs.js.map 9 | -------------------------------------------------------------------------------- /vue3/packages/shared/dist/shared.cjs.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"shared.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"} -------------------------------------------------------------------------------- /vue3/packages/shared/dist/shared.esm-bundler.js: -------------------------------------------------------------------------------- 1 | var Shared = {}; 2 | 3 | export { Shared }; 4 | //# sourceMappingURL=shared.esm-bundler.js.map 5 | -------------------------------------------------------------------------------- /vue3/packages/shared/dist/shared.esm-bundler.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"shared.esm-bundler.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"} -------------------------------------------------------------------------------- /vue3/packages/shared/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vue/shared", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "module": "dist/shared.esm-bundler.js", 6 | "license": "MIT", 7 | "buildOptions": { 8 | "name": "VueShared", 9 | "formats": [ 10 | "cjs", 11 | "esm-bundler" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /vue3/packages/shared/src/shapeFlag.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, 3 | FUNCTIONAL_COMPONENT = 1 << 1, 4 | STATEFUL_COMPONENT = 1 << 2, 5 | TEXT_CHILDREN = 1 << 3, 6 | ARRAY_CHILDREN = 1 << 4, 7 | SLOTS_CHILDREN = 1 << 5, 8 | TELEPORT = 1 << 6, 9 | SUSPENSE = 1 << 7, 10 | COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, 11 | COMPONENT_KEPT_ALIVE = 1 << 9, 12 | COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT 13 | } -------------------------------------------------------------------------------- /vue3/scripts/dev.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const fs = require("fs"); 3 | const execa = require("execa"); 4 | 5 | 6 | const packages = ['runtime-dom']; 7 | 8 | runParallel(packages, build); 9 | 10 | function runParallel(packages, iteratorFn) { 11 | const ret = []; 12 | 13 | for (const pkgName of packages) { 14 | const p = iteratorFn(pkgName); 15 | ret.push(p); 16 | } 17 | 18 | return Promise.all(ret); 19 | } 20 | 21 | async function build(pkgName) { 22 | await execa( 23 | 'rollup', 24 | [ 25 | '-cw', 26 | '--environment', 27 | `TARGET:${pkgName}` 28 | ], 29 | { stdio: 'inherit' }, 30 | ); 31 | } -------------------------------------------------------------------------------- /web-component/collapse/collapse.js: -------------------------------------------------------------------------------- 1 | class Collpase extends HTMLElement { 2 | constructor() { 3 | super(); 4 | let shadow = this.attachShadow({ mode: "open" }); 5 | 6 | let template = document.getElementById("collapse_tmpl"); 7 | let templateContent = template.content; 8 | shadow.appendChild(templateContent.cloneNode(true)); 9 | 10 | let style = document.createElement("style"); 11 | style.textContent = ` 12 | :host{ 13 | display: flex; 14 | flex-direction: column; 15 | padding: 10px; 16 | border: 2px solid #dfdfdf; 17 | border-radius: 8px; 18 | } 19 | `; 20 | shadow.appendChild(style); 21 | } 22 | } 23 | 24 | export default Collpase; 25 | -------------------------------------------------------------------------------- /web-component/collapse/event-bus.js: -------------------------------------------------------------------------------- 1 | class EventBus { 2 | constructor() { 3 | this.events = {}; 4 | } 5 | 6 | on(evtName, handler) { 7 | if (!this.events[evtName]) this.events[evtName] = []; 8 | this.events[evtName].push(handler); 9 | } 10 | 11 | emit(evtName, ...args) { 12 | this.events[evtName] && 13 | this.events[evtName].forEach((handler) => { 14 | handler.apply(null, args); 15 | }); 16 | } 17 | 18 | cancel(evtName, handler) { 19 | this.events[evtName] && 20 | (this.events[evtName] = this.events[evtName].filter((h) => h !== handler)); 21 | } 22 | } 23 | 24 | export default EventBus; 25 | -------------------------------------------------------------------------------- /web-component/collapse/index.js: -------------------------------------------------------------------------------- 1 | import Collpase from "./collapse.js"; 2 | import CollpaseItem from "./collapse-item.js"; 3 | import EventBus from "./event-bus.js"; 4 | 5 | customElements.define("dt-collapse", Collpase); 6 | customElements.define("dt-collapse-item", CollpaseItem); 7 | 8 | export let $event = new EventBus(); 9 | 10 | $event.on("collapse-item-update",(item)=>{ 11 | console.log(item.isShow); 12 | item.render(); 13 | }); 14 | console.log($event); 15 | -------------------------------------------------------------------------------- /web-component/index.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/web-component/index.txt -------------------------------------------------------------------------------- /webpack4.0/Tree-Shaking&Scope-Hosting.md: -------------------------------------------------------------------------------- 1 | ## Tree-Shaking&Scope-Hosting 2 | 3 | 4 | 5 | ### Tree-Shaking 6 | 7 | 唯一一个需要在package.json中配置的 8 | 9 | ```javascript 10 | // package.json 11 | "sideEffects": [ 12 | "**/*.css" // 排除CSS文件 13 | ] 14 | // 这样配置过后就会把没使用的文件晃动掉 15 | ``` 16 | 17 | ```javascript 18 | // webpack.config.js 19 | 20 | optimization:{ 21 | usedExports: true //开发环境下配置标识，会告诉你用到了哪些模块 22 | } 23 | ``` 24 | 25 | 26 | 27 | ### Scope-Hosting 28 | 29 | 作用域提升，减少代码体积，节约内存 30 | 31 | 多个函数内存的占用也减少 -------------------------------------------------------------------------------- /webpack4.0/webpack的零配置操作.md: -------------------------------------------------------------------------------- 1 | ## webpack的零配置操作 2 | 3 | ### 安装 4 | 5 | 安装webpack, webpack-cli 6 | 7 | 8 | 9 | ### 零配置使用 10 | 11 | npx webpack 12 | 13 | webpack默认会把当前项目src目录下的文件打包编译，编译到dist文件目录下(webpack编译代码的过程中支持CommonJS规范和ESModule规范) 14 | 15 | 默认入口是index.js -------------------------------------------------------------------------------- /webpack4.0/配置devServer.md: -------------------------------------------------------------------------------- 1 | ## 配置devServer 2 | 3 | ```javascript 4 | // webpack.config.js 5 | devServer: { 6 | prot: 8888, 7 | open: true, 8 | compress: true, 9 | contentBase: path.resolve(__dirname, "static"), 10 | proxy:{ 11 | "/api":{ 12 | target: "http://localhost:9000", 13 | secure: false, // true的话表示的是https false表示的是http 14 | changeOrigin: true, // 把请求头的host值改成服务器的地址 15 | pathRewrite: {"/api":""} 16 | } 17 | }, 18 | before: function(app, server){ // webpack提供的代理服务 19 | app.get("/xxx", function(req, res){ 20 | res.json({}) 21 | }) 22 | } 23 | } 24 | ``` 25 | 26 | -------------------------------------------------------------------------------- /专题/Generator/btree.js: -------------------------------------------------------------------------------- 1 | //# sourceMappingURL=btree.js.map -------------------------------------------------------------------------------- /专题/Generator/btree.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"btree.js","sourceRoot":"","sources":["btree.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /专题/Generator/flat-array.js: -------------------------------------------------------------------------------- 1 | //# sourceMappingURL=flat-array.js.map -------------------------------------------------------------------------------- /专题/Generator/flat-array.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"flat-array.js","sourceRoot":"","sources":["flat-array.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /专题/Generator/flat-array.ts: -------------------------------------------------------------------------------- 1 | function* make(array: any): Iterable { 2 | for (let i = 0; i < array.length; i++) { 3 | if (Array.isArray(array[i])) yield* make(array[i]); 4 | else yield array[i]; 5 | } 6 | } 7 | 8 | let genArray: () => Array | number = function () { 9 | let res = Math.random(); 10 | return res > .1 ? [res, genArray()] : res; 11 | } 12 | 13 | // let arr = [1, 2, [3, 4], 5, [6, [7, 8]]]; 14 | 15 | let arr = genArray(); 16 | console.log(arr); 17 | console.log(...make(arr)); 18 | -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/client/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 文件上传 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/client/src/App.css: -------------------------------------------------------------------------------- 1 | @import "~antd/dist/antd.css"; 2 | 3 | 4 | .preview{ 5 | width: 500px; 6 | border: 1px solid #ccc; 7 | } 8 | -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/client/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Upload from './Upload'; 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | export default App; 12 | -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/client/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/client/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/client/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/server/dist/www.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __importDefault = (this && this.__importDefault) || function (mod) { 3 | return (mod && mod.__esModule) ? mod : { "default": mod }; 4 | }; 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | const app_1 = __importDefault(require("./app")); 7 | const http_1 = __importDefault(require("http")); 8 | const port = process.env.PORT || 8000; 9 | const server = http_1.default.createServer(app_1.default); 10 | server.listen(port); 11 | server.on('error', onError); 12 | server.on('listening', onListening); 13 | function onError(error) { 14 | console.error(error); 15 | } 16 | function onListening() { 17 | console.log('Listening on ' + port); 18 | } 19 | //# sourceMappingURL=www.js.map -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/server/dist/www.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"www.js","sourceRoot":"","sources":["../src/www.ts"],"names":[],"mappings":";;;;;AAAA,gDAAwB;AACxB,gDAAwB;AAExB,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC;AAEtC,MAAM,MAAM,GAAG,cAAI,CAAC,YAAY,CAAC,aAAG,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACpB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAC5B,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAEpC,SAAS,OAAO,CAAC,KAAU;IACvB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACzB,CAAC;AAED,SAAS,WAAW;IAChB,OAAO,CAAC,GAAG,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;AACxC,CAAC"} -------------------------------------------------------------------------------- /专题/前端文件处理/文件上传Plus/server/src/www.ts: -------------------------------------------------------------------------------- 1 | import app from './app'; 2 | import http from 'http'; 3 | 4 | const port = process.env.PORT || 8000; 5 | 6 | const server = http.createServer(app); 7 | 8 | server.listen(port); 9 | server.on('error', onError); 10 | server.on('listening', onListening); 11 | 12 | function onError(error: any) { 13 | console.error(error); 14 | } 15 | 16 | function onListening() { 17 | console.log('Listening on ' + port); 18 | } 19 | -------------------------------------------------------------------------------- /专题/浏览器渲染原理/browserRender1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/专题/浏览器渲染原理/browserRender1.png -------------------------------------------------------------------------------- /专题/跨域/跨域.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/专题/跨域/跨域.xmind -------------------------------------------------------------------------------- /前端性能优化/代码优化/CSS对性能的影响.md: -------------------------------------------------------------------------------- 1 | ## CSS对性能的影响 2 | 3 | CSS selector是从右向左解析的 4 | 5 | 6 | 7 | ### CSS优化 8 | 9 | - 降低CSS对渲染的阻塞，尽量早的加载CSS并解析 10 | - 利用GPU完成动画 11 | - 使用contain属性 12 | - 使用font-display属性 13 | 14 | ### contain 15 | 16 | ```css 17 | .news li { 18 | contain: layout; // 告诉浏览器，这个盒子无论怎么变化和外界都没有影响 19 | } 20 | ``` 21 | 22 | -------------------------------------------------------------------------------- /前端性能优化/代码优化/HTML优化.md: -------------------------------------------------------------------------------- 1 | ## HTML优化 2 | 3 | - 减少iframes使用，一定要使用时可以延时加载，否则iframes的加载会影响主页面的onload事件 4 | - 压缩空白符 5 | - 避免节点多重嵌套 6 | - 避免使用table布局 7 | - 删除注释 8 | - CSS&JavaScript尽量外链 9 | - 删除元素默认属性 10 | 11 | 12 | 13 | ### 借助工具 14 | 15 | - html-minifier 16 | 17 | -------------------------------------------------------------------------------- /前端性能优化/代码优化/JavaScript对象优化.md: -------------------------------------------------------------------------------- 1 | ## JavaScript对象优化 2 | 3 | - 以相同顺序初始化对象成员，避免隐藏类的调整 4 | - 实例化后避免添加新属性 5 | - 尽量使用Array代替array-like对象 6 | 7 | ### 对象优化可以做哪些 8 | 9 | - 对象访问时不要越界 10 | 11 | -------------------------------------------------------------------------------- /前端性能优化/代码优化/JavaScript的开销和如何缩短解析时间.md: -------------------------------------------------------------------------------- 1 | ## JavaScript的开销和如何缩短解析时间 2 | 3 | 4 | 5 | ### JavaScript开销在哪里 6 | 7 | - 加载 8 | - 解析&编译 9 | - 执行 10 | 11 | 12 | 13 | ### 如何缩短解析时间 14 | 15 | - Code splitting代码拆分，按需加载 16 | - Tree shaking 代码减重 17 | 18 | 19 | 20 | ### 减少主线程工作量 21 | 22 | - 避免长任务 23 | - 避免超过1 KB的行间脚本 24 | - 使用rAF和rIC进行时间调度 25 | 26 | 27 | 28 | ### Progressive Bootstrapping 29 | 30 | - 可见不可交互vs最小可交互资源集 -------------------------------------------------------------------------------- /前端性能优化/代码优化/函数优化.md: -------------------------------------------------------------------------------- 1 | ## 函数优化 2 | 3 | 4 | 5 | ### 函数的解析方式 6 | 7 | - lazy parsing懒解析vs eager parsing饥饿解析 8 | - 利用Optimize.js优化初次加载事件 9 | 10 | ```javascript 11 | const add = (a,b)=>a+b;// 如果不做任何处理，这个函数会被懒解析 12 | // const add = ((a,b)=>a+b); 在函数外再套一层括号，可以告诉解析气进行饥饿解析 13 | const num1 = 1; 14 | const num2 = 2; 15 | add(num1, num2); 16 | ``` 17 | 18 | -------------------------------------------------------------------------------- /前端性能优化/性能优化的指标和工具/RAIL测量模型.md: -------------------------------------------------------------------------------- 1 | ## RAIL测量模型 2 | 3 | 4 | 5 | ### 什么是RAIL 6 | 7 | *是一个谷歌推出的性能标准*。 8 | 9 | - **R: Response 响应 用户交互后有没有及时给出响应** 10 | - **A: Animation 动画 动画是否足够流畅** 11 | - **I: Idle 空闲 浏览器主线程是否有足够的空闲** 12 | - **L: Load 加载 浏览器加载是否足够及时** 13 | 14 | 15 | 16 | ### RAIL评估标准 17 | 18 | - 响应: 所有的处理事件(交互)应在50ms以内完成 19 | - 动画：每i0ms产生一帧 20 | - 空闲：尽可能增加空闲时间 21 | - 加载：在5s内完成内容的加载并可以交互 22 | 23 | 24 | 25 | 26 | 27 | ## 性能测量工具 28 | 29 | - Chrome DevTools 开发调试，性能评测 30 | - Lighthouse 网站整体质量评估 31 | - WebPageTest 多测试地点，全面性能报告 -------------------------------------------------------------------------------- /前端性能优化/性能优化的指标和工具/为什么要进行Web性能优化.md: -------------------------------------------------------------------------------- 1 | ## 为什么要进行Web性能优化 2 | 3 | 4 | 5 | - ### 影响用户体验，用户留存度低 6 | 7 | Amazon发现每100 ms延迟导致1%的销量损失 8 | 9 | 10 | 11 | ## 寻找性能瓶颈 12 | 13 | - 了解性能指标-多块才算快 14 | - 利用测量工具和API 15 | - 优化问题，重新测量(迭代) 16 | 17 | ## 18 | 19 | ## 移动端挑战多 20 | 21 | - 设备硬件，网速，屏幕尺寸，交互方式 22 | - 用户更缺少耐心，> 3s 加载导致53%的跳出率 23 | - 持续增长的移动用户和移动电商业务 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /前端性能优化/性能优化的指标和工具/使用Chrome DevTools分析性能.md: -------------------------------------------------------------------------------- 1 | ## 使用Chrome DevTools 分析性能 2 | 3 | 使用Performance查看main细看DOMContentLoaded -------------------------------------------------------------------------------- /前端性能优化/性能优化的指标和工具/使用Lighthouse分析性能.md: -------------------------------------------------------------------------------- 1 | ## 使用Lighthouse分析性能 2 | 3 | lighthouse *网址* 4 | 5 | 6 | 7 | ### Opportunity 8 | 9 | 提供的参考优化项 10 | 11 | 12 | 13 | ### Diagnostics 14 | 15 | 诊断 16 | 17 | 18 | 19 | ### Passed audits 20 | 21 | 没问题的地方 -------------------------------------------------------------------------------- /前端性能优化/性能优化的指标和工具/使用WebPageTest评估Web网站性能.md: -------------------------------------------------------------------------------- 1 | ## 使用WebPageTest评估Web网站性能 2 | 3 | https://webpagetest.org 4 | 5 | 6 | 7 | ### waterfall chart 请求瀑布图 8 | 9 | 10 | 11 | ### first view 首次访问 12 | 13 | 14 | 15 | ### repeat view 二次访问 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /前端性能优化/性能优化的指标和工具/性能指标和优化目标.md: -------------------------------------------------------------------------------- 1 | ## 性能指标 2 | 3 | ### 4 | 5 | ### TTFB(Waiting) 6 | 7 | TTFB是发出页面请求到接收到应答数据第一个字节所花费的毫秒数 8 | 9 | 10 | 11 | ### First Contentful Paint 12 | 13 | 网页第一个有内容绘制的时间 14 | 15 | 16 | 17 | ### Speed Index 18 | 19 | 速度指数。告诉我们多快是快，多慢是慢 -------------------------------------------------------------------------------- /前端性能优化/渲染优化/使用fastdom.md: -------------------------------------------------------------------------------- 1 | ## 使用fastdom 2 | 3 | 可以解决布局抖动问题，fastdom帮我们批量执行读写 4 | 5 | ### fastdom.measure 6 | 7 | 在这个方法里读属性 8 | 9 | ### fastdom.mutate 10 | 11 | 在这个方法里修改属性 -------------------------------------------------------------------------------- /前端性能优化/渲染优化/减少重绘.md: -------------------------------------------------------------------------------- 1 | ## 减少重绘 2 | 3 | 尽量不要使用会导致回流的操作 4 | 5 | 6 | 7 | ### 利用willChange可以创建新的图层 8 | 9 | ```css 10 | .root{ 11 | willChange: 'transform' 12 | } 13 | ``` 14 | 15 | -------------------------------------------------------------------------------- /前端性能优化/渲染优化/复合线程和图层.md: -------------------------------------------------------------------------------- 1 | ## 复合线程和图层 2 | 3 | 复合主要把页面拆解成不同的图层，在复合的过程中只修改必要的图层 4 | 5 | 6 | 7 | ### 哪些样式仅影响复合 8 | 9 | - Position 10 | - Scale 11 | - Rotation 12 | - Opacity -------------------------------------------------------------------------------- /前端性能优化/渲染优化/布局和绘制.md: -------------------------------------------------------------------------------- 1 | ## 布局和绘制 2 | 3 | 4 | 5 | - 渲染树只包含网页需要的节点(不需要渲染的就不会在这棵树上) 6 | - 布局计算每个节点精确到位置和大小(盒模型) 7 | - 绘制是像素化每个节点的过程 8 | 9 | 10 | 11 | ### 影响回流的操作 12 | 13 | - 添加/删除元素 14 | - 操作styles 15 | - display:none 16 | - offsetLeft,scrollTop,clientWidth 17 | - 移动元素位置 18 | - 修改浏览器大小，字体大小 19 | 20 | 21 | 22 | ### 避免layout thrashing(布局抖动) 23 | 24 | - 避免回流 25 | - 读写分离 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /前端性能优化/资源优化/图片优化-图片加载优化.md: -------------------------------------------------------------------------------- 1 | ## 图片优化-图片加载优化 2 | 3 | 4 | 5 | ### 图片懒加载(lazy loading) 6 | 7 | - 原生的图片懒加载方案 8 | - 第三方图片懒加载方案 9 | - verlok/lazyload 10 | - yall.js 11 | - Blazy 12 | 13 | 14 | 15 | ### 使用渐进式图片 16 | 17 | - Progressive JPEG(从模糊到清楚) 18 | - Baseline JPEG(一行行像素的加载) 19 | 20 | 21 | 22 | ### 使用响应式图片 23 | 24 | - Srcset属性的使用 25 | - Sizes属性的使用 26 | - picture的使用 -------------------------------------------------------------------------------- /前端性能优化/资源优化/图片优化-图片格式优化.md: -------------------------------------------------------------------------------- 1 | ## 图片优化-图片格式优化 2 | 3 | 4 | 5 | ### 图片优化的方案 6 | 7 | - 选择合适的格式 8 | - 选择合适的图片大小 9 | - 适配不同屏幕的尺寸 10 | - 谨慎的压缩 11 | - 对图片进行优先级加载 12 | - 懒加载暂时不需要的图片 13 | - 利用工具 14 | 15 | 16 | 17 | ### 图片格式比较 18 | 19 | - JPG/JPEG 20 | 21 | 压缩比很高，色彩保存的不错，通常使用在web开发中 22 | 23 | imagemin是一个对图片进行压缩的包 24 | 25 | - JPG/JPEG的缺陷 26 | 27 | 压缩比比较高，会显得有锯齿感 28 | 29 | - PNG 30 | 31 | 可以做透明背景的图片 32 | 33 | 可以把纹理更好的保留，锯齿感不强 34 | 35 | imagemin-pngquant可以进行png压缩 36 | 37 | - PNG缺陷 38 | 39 | 体积比较大 40 | 41 | - WebP 42 | 43 | 谷歌*声称*WebP有png的质量但是压缩率比png更高 44 | 45 | - WebP缺陷 46 | 47 | 浏览器支持度不太好 48 | 49 | -------------------------------------------------------------------------------- /前端性能优化/资源优化/字体优化.md: -------------------------------------------------------------------------------- 1 | ## 字体优化 2 | 3 | 4 | 5 | ### 什么是FOIT和FOUT 6 | 7 | - 字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁 8 | - Flash Of Invisible Text 9 | - Flash Of Unstyled Text 10 | 11 | 12 | 13 | ### 使用font-display 14 | 15 | CSS at-rule: @font-face: font-display 16 | 17 | - auto 18 | - block 19 | - swap 20 | - fallback 21 | - optional -------------------------------------------------------------------------------- /前端性能优化/资源优化/资源的压缩与合并.md: -------------------------------------------------------------------------------- 1 | ## 为什么要压缩&合并 2 | 3 | - 减少http请求数量 4 | - 减少资源的大小 5 | 6 | 7 | 8 | ### HTML压缩 9 | 10 | - 使用在线工具进行压缩 11 | - 使用html-minifier等npm工具 12 | 13 | 14 | 15 | ### CSS压缩 16 | 17 | - 使用在线工具进行压缩 18 | - 使用clean-css等npm工具 19 | 20 | 21 | 22 | ### JS压缩与混淆 23 | 24 | - 使用在线工具进行压缩 25 | - 使用webpack对JS在构建时压缩 26 | 27 | 28 | 29 | ### CSS JS 文件合并 30 | 31 | - 若干小文件，可以合成一个大文件 32 | - 如果合并完不会造成冲突，服务相同的模块就ok 33 | - 优化网络加载，NO！！！(推荐使用渐进式加载) 34 | 35 | -------------------------------------------------------------------------------- /正则表达式/正则表达式中的分组捕获和分组引用.md: -------------------------------------------------------------------------------- 1 | ## 正则表达式中的分组捕获和分组引用 2 | 3 | 4 | 5 | ### 正则的分组捕获 6 | 7 | ```javascript 8 | // => 身份证号 9 | let str = "369200200010014032"; 10 | let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(?:\d|X)$/;// (?:) 只匹配不捕获 11 | 12 | // 既要捕获到{数字}，也想单独的把数字也获取到，例如：第一次找到{0}，还要单独获取0 13 | let str = "{0}年{1}月{2}日"; 14 | let reg = /\{(\d+)\}/ 15 | ``` 16 | 17 | 18 | 19 | ### 分组引用 20 | 21 | ```javascript 22 | let str = "book"; //=> "good","soon"... 23 | let reg = /^[a-zA-Z]([a-zA-Z])\1[a-zA-Z]$/; // \1就是匹配和第一个分组一模一样的内容 24 | ``` 25 | 26 | -------------------------------------------------------------------------------- /正则表达式/正则表达式之千分符.md: -------------------------------------------------------------------------------- 1 | ## 正则表达式之千分符 2 | 3 | ```javascript 4 | let num = "1829403203403"; 5 | 6 | (function(){ 7 | function millimeter(){ // ?= 正向预查 8 | return this.replace(/\d{1,3}(?=(\d{3})+$)/g,content=>content+","); 9 | } 10 | 11 | 12 | ["millimeter"].forEach(item=>{ 13 | String.prototype[item] = eval(item); 14 | }) 15 | })() 16 | 17 | 18 | num.millimeter(); // "1,829,403,203,403" 19 | ``` 20 | 21 | -------------------------------------------------------------------------------- /正则表达式/正则表达式之取消贪婪性.md: -------------------------------------------------------------------------------- 1 | ## 正则表达式之取消贪婪性 2 | 3 | 4 | 5 | ### 正则表达式的贪婪性 6 | 7 | ```javascript 8 | let str = "doctorwu2020@2021正则"; 9 | let reg = /\d+/g; 10 | console.log(str.match(reg)); //=> ["2020", "2021"] 不捕获2，20，202而捕获2020，这就是正则表达式的贪婪性 11 | 12 | reg = /\d+?/g; 13 | console.log(str.match(reg)); //=> ["2", "0", "2", "0", "2", "0", "2", "1"] 14 | 15 | 16 | // 取消正则表达式贪婪性的方法，就是在量词[此例是+]后面设置? 17 | //=> 取消正则捕获的贪婪性(按照正则匹配的最短结果来获取) 18 | ``` 19 | 20 | -------------------------------------------------------------------------------- /算法和数据结构/JS/test/数据结构/Heap.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | /** 4 | * HelloWorld.test.ts 5 | */ 6 | var Heap_1 = require("../../src/\u6570\u636E\u7ED3\u6784/Heap"); 7 | test('init', function () { 8 | expect(function () { 9 | var heap = new Heap_1.MaxHeap([1, 2, 3, 4, 5]); 10 | expect(heap.data).toEqual([5, 4, 3, 1, 2]); 11 | }); 12 | }); 13 | test('sort', function () { 14 | expect(function () { 15 | var heap = new Heap_1.MaxHeap([1, 2, 3, 4, 5]); 16 | expect(heap.data).toEqual([5, 4, 3, 1, 2]); 17 | heap.sort(); 18 | expect(heap.data).toEqual([1, 2, 3, 4, 5]); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /算法和数据结构/JS/test/算法/KMP.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var KMP_1 = require("../../src/\u7B97\u6CD5/KMP"); 4 | test("get-next", function () { 5 | expect(KMP_1.KMP.getNext("ababc")).toEqual([-1, 0, 0, 1, 2]); 6 | expect(KMP_1.KMP.getNext("adaddadd")).toEqual([-1, 0, 0, 1, 2, 0, 1, 2]); 7 | }); 8 | test("kmp-compare-0", function () { 9 | expect(KMP_1.KMP.compare("ababaababcb", "ababc")).toEqual(5); 10 | }); 11 | test("kmp-compare-1", function () { 12 | expect(KMP_1.KMP.compare("cdmamdmmaassdd", "maass")).toEqual(7); 13 | }); 14 | -------------------------------------------------------------------------------- /算法和数据结构/JS/test/算法/蛮力法/KMP.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var KMP_1 = require("../../../src/\u7B97\u6CD5/\u86EE\u529B\u6CD5/KMP"); 4 | test("get-next", function () { 5 | expect(KMP_1.KMP.getNext("ababc")).toEqual([-1, 0, 0, 1, 2]); 6 | expect(KMP_1.KMP.getNext("adaddadd")).toEqual([-1, 0, 0, 1, 2, 0, 1, 2]); 7 | }); 8 | test("kmp-compare-0", function () { 9 | expect(KMP_1.KMP.compare("ababaababcb", "ababc")).toEqual(5); 10 | }); 11 | test("kmp-compare-1", function () { 12 | expect(KMP_1.KMP.compare("cdmamdmmaassdd", "maass")).toEqual(7); 13 | }); 14 | -------------------------------------------------------------------------------- /算法和数据结构/coverage/lcov-report/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/算法和数据结构/coverage/lcov-report/favicon.png -------------------------------------------------------------------------------- /算法和数据结构/coverage/lcov-report/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} 2 | -------------------------------------------------------------------------------- /算法和数据结构/coverage/lcov-report/sort-arrow-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/算法和数据结构/coverage/lcov-report/sort-arrow-sprite.png -------------------------------------------------------------------------------- /算法和数据结构/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | roots: [ 3 | "/test" 4 | ], 5 | testRegex: 'test/(.+)\\.test\\.(tsx?)$', 6 | transform: { 7 | "^.+\\.tsx?$": "ts-jest" 8 | }, 9 | // 转换过程中，需要被忽略的文件。 10 | "transformIgnorePatterns": [ 11 | "/node_modules/(moment|core-js|babel-runtime|regenerator-runtime|lodash)/" 12 | ], 13 | // 是否搜集单测覆盖率信息。 14 | // "collectCoverage": true, 15 | "testPathIgnorePatterns": [ 16 | "/(node_modules|lib|coverage|types)/" 17 | ], 18 | moduleFileExtensions: ['ts', 'tsx', 19 | 'js', 'jsx', 20 | 'json', 'node'], 21 | }; 22 | -------------------------------------------------------------------------------- /算法和数据结构/note.md: -------------------------------------------------------------------------------- 1 | # 算法和数据结构 2 | 3 | 4 | 5 | 6 | 7 | ## 数据结构 8 | 9 | 10 | 11 | ### 堆 12 | 13 | **最大堆**：一种二叉树 14 | 15 | ```typescript 16 | class Heap{ 17 | constructor(arr){ 18 | this.data = [...arr]; 19 | this.size = this.data.length; 20 | } 21 | 22 | 23 | maxHeapify(i){ 24 | 25 | } 26 | } 27 | ``` 28 | 29 | 30 | 31 | ### 二叉搜索树 32 | 33 | 搜索时间和树的高度成正比例 34 | 35 | 对任何一个节点x，对任何一个x左边的节点y，y.key <= x.key; 36 | 37 | 对任何一个x右边的节点y，y.key >= x.key 38 | 39 | 中序遍历后可以从小到大输出 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | ## 算法 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /算法和数据结构/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "@types/jest": "^26.0.19", 4 | "jest": "^26.6.3", 5 | "ts-jest": "^26.4.4", 6 | "typescript": "^4.1.3" 7 | }, 8 | "scripts": { 9 | "build": "tsc", 10 | "test": "jest", 11 | "test-c": "jest --coverage" 12 | }, 13 | "jest": { 14 | "testEnvironment": "node" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/数据结构/Heap.d.ts: -------------------------------------------------------------------------------- 1 | export declare class Heap { 2 | size: number; 3 | data: Array; 4 | constructor(data: Array); 5 | rebuildHeap(): void; 6 | } 7 | export declare class MaxHeap extends Heap { 8 | constructor(arr: Array); 9 | /** 10 | * 重构堆 11 | * [1,2,3,4,5] 12 | * 1 13 | * 2 3 14 | * 4 5 15 | */ 16 | rebuildHeap(): void; 17 | /** 18 | * 堆排序 19 | */ 20 | sort(): void; 21 | /** 22 | * 假设堆其它地方都满足性质 23 | * 唯独根节点不满足，重构堆性质 24 | * @param i 25 | */ 26 | maxHeapify(i: number): void; 27 | } 28 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/数据结构/Tree.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 二叉搜索树 3 | * 搜索时间和树的高度成正比例 4 | * 对任何一个节点x，对任何一个x左边的节点y，y.key <= x.key; 5 | * 对任何一个x右边的节点y，y.key >= x.key 6 | */ 7 | declare type treeNode = BinarySearchTreeNode | null; 8 | declare type ClipNull = U extends null ? never : U; 9 | export declare class BinarySearchTreeNode { 10 | key: T; 11 | parent: treeNode; 12 | left: treeNode; 13 | right: treeNode; 14 | constructor(key: T); 15 | } 16 | export declare class BinarySearchTree { 17 | root?: BinarySearchTreeNode | null | undefined; 18 | constructor(root?: BinarySearchTreeNode | null | undefined); 19 | insert(key: T): void; 20 | inorder(node?: ClipNull>): IterableIterator>>; 21 | } 22 | export {}; 23 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/数据结构/优先级队列.d.ts: -------------------------------------------------------------------------------- 1 | import { MaxHeap } from "./Heap"; 2 | export declare class PriorityQueue extends MaxHeap { 3 | constructor(data: Array); 4 | push(item: T): number; 5 | } 6 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/算法/KMP.d.ts: -------------------------------------------------------------------------------- 1 | export declare class KMP { 2 | static getNext(template: string): Array; 3 | static compare(mainStr: string, template: string): number; 4 | } 5 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/算法/减治法/Heap.d.ts: -------------------------------------------------------------------------------- 1 | export declare class Heap { 2 | size: number; 3 | data: Array; 4 | constructor(data: Array); 5 | } 6 | export declare class MaxHeap extends Heap { 7 | constructor(arr: Array); 8 | /** 9 | * 重构堆 10 | * [1,2,3,4,5] 11 | * 1 12 | * 2 3 13 | * 4 5 14 | */ 15 | rebuildHeap(): T[]; 16 | /** 17 | * 堆排序 18 | */ 19 | sort(): T[]; 20 | /** 21 | * 假设堆其它地方都满足性质 22 | * 唯独根节点不满足，重构堆性质 23 | * @param i 24 | */ 25 | maxHeapify(i: number): T | undefined; 26 | } 27 | export declare function left(i: number): number; 28 | export declare function right(i: number): number; 29 | export declare function swap(arr: Array, src: number, des: number): T[]; 30 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/算法/减治法/堆排序.d.ts: -------------------------------------------------------------------------------- 1 | export declare class Heap { 2 | size: number; 3 | data: Array; 4 | constructor(data: Array); 5 | } 6 | export declare class MaxHeap extends Heap { 7 | constructor(arr: Array); 8 | /** 9 | * 重构堆 10 | * [1,2,3,4,5] 11 | * 1 12 | * 2 3 13 | * 4 5 14 | */ 15 | rebuildHeap(): T[]; 16 | /** 17 | * 堆排序 18 | */ 19 | sort(): T[]; 20 | /** 21 | * 假设堆其它地方都满足性质 22 | * 唯独根节点不满足，重构堆性质 23 | * @param i 24 | */ 25 | maxHeapify(i: number): T | undefined; 26 | } 27 | export declare function left(i: number): number; 28 | export declare function right(i: number): number; 29 | export declare function swap(arr: Array, src: number, des: number): T[]; 30 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/算法/减治法/插入排序.d.ts: -------------------------------------------------------------------------------- 1 | import { ISort } from "../蛮力法/选择排序"; 2 | export declare class InsertSort implements ISort { 3 | record: Array; 4 | constructor(record: Array); 5 | sort(): T[]; 6 | insert(sorted: T[], inserted: T): void; 7 | } 8 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/算法/分治法/归并排序.d.ts: -------------------------------------------------------------------------------- 1 | import { ISort } from "../蛮力法/选择排序"; 2 | export declare class MergeSort implements ISort { 3 | record: Array; 4 | constructor(record: Array); 5 | merge(record: Array, divide: number): T[]; 6 | sort(): Array; 7 | } 8 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/算法/分治法/快速排序.d.ts: -------------------------------------------------------------------------------- 1 | import { ISort } from "../蛮力法/选择排序"; 2 | export declare class QuickSort implements ISort { 3 | record: Array; 4 | start: number; 5 | end: number; 6 | pivot: number; 7 | constructor(record: Array, start: number, end: number); 8 | partition(start: number, end: number): number; 9 | swap(record: Array, src: number, des: number): void; 10 | sort(): Array; 11 | } 12 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/算法/动态规划/数塔问题.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 数塔问题 3 | * 4 | * 从数塔的顶层出发，在每一个节点可以选择向左或者向右走，一直走到最底层，要求找出一条路径，使得路径上的数值和最大。 5 | * */ 6 | declare class RandomNumTower { 7 | size: number; 8 | tower: number[][]; 9 | maxAdd: number[][]; 10 | path: number[][]; 11 | constructor(size: number); 12 | private generateRandomNumTower; 13 | private programming; 14 | /** 15 | * 打印函数 16 | * @param tower 17 | * @param radix 18 | */ 19 | print(tower: number[][], radix?: number): void; 20 | /** 21 | * 打印路径 22 | * @param path 23 | */ 24 | printPath(path: number[][]): void; 25 | } 26 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/算法/蛮力法/KMP.d.ts: -------------------------------------------------------------------------------- 1 | export declare class KMP { 2 | static getNext(template: string): Array; 3 | static compare(mainStr: string, template: string): number; 4 | } 5 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/src/算法/蛮力法/选择排序.d.ts: -------------------------------------------------------------------------------- 1 | export interface ISort { 2 | sort(): Array; 3 | } 4 | export declare class SelectionSort implements ISort { 5 | data: Array; 6 | constructor(data: Array); 7 | sort(): Array; 8 | judgeLess(m: T, n: T): boolean; 9 | swap(src: number, des: number): void; 10 | } 11 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/数据结构/Heap.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/数据结构/Tree.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/数据结构/优先级队列.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/算法/KMP.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/算法/减治法/Heap.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/算法/减治法/堆排序.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/算法/减治法/插入排序.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/算法/分治法/归并排序.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/算法/分治法/快速排序.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/算法/蛮力法/KMP.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/types/test/算法/蛮力法/选择排序.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /算法和数据结构/src/数据结构/优先级队列.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"优先级队列.js","sourceRoot":"","sources":["优先级队列.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+BAA+B;AAE/B;IAAsC,iCAAU;IAC5C,uBAAY,IAAa;eACrB,kBAAM,IAAI,CAAC;IACf,CAAC;IAED,4BAAI,GAAJ,UAAK,IAAM;QACP,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACnB,OAAO,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IACL,oBAAC;AAAD,CAAC,AAZD,CAAsC,cAAO,GAY5C;AAZY,sCAAa;AAc1B,IAAI,aAAa,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AACzE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvB,aAAa,CAAC,IAAI,EAAE,CAAC;AAErB,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA"} -------------------------------------------------------------------------------- /算法和数据结构/src/数据结构/优先级队列.ts: -------------------------------------------------------------------------------- 1 | import {MaxHeap} from "./Heap"; 2 | 3 | export class PriorityQueue extends MaxHeap{ 4 | constructor(data:Array) { 5 | super(data) 6 | } 7 | 8 | push(item:T):number{ 9 | this.data.unshift(item); 10 | this.size++; 11 | 12 | this.maxHeapify(0); 13 | return this.size; 14 | } 15 | } 16 | 17 | // let priorityQueue = new PriorityQueue([1,2,3,4,5]); 18 | // // priorityQueue.push(11); 19 | // // priorityQueue.sort(); 20 | // 21 | // console.log(priorityQueue.data) 22 | -------------------------------------------------------------------------------- /算法和数据结构/src/算法/减治法/插入排序.ts: -------------------------------------------------------------------------------- 1 | import {ISort} from "../蛮力法/选择排序"; 2 | 3 | export class InsertSort implements ISort{ 4 | constructor(public record:Array) { 5 | } 6 | 7 | sort(){ 8 | let sorted:T[] = [this.record[0]]; 9 | for (let i = 1; iinserted){ 18 | insertIndex--; 19 | } 20 | if(insertIndex < 0) { 21 | sorted.unshift(inserted); 22 | return; 23 | } 24 | sorted.splice(insertIndex+1,0,inserted); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /算法和数据结构/test/数据结构/Heap.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | exports.__esModule = true; 3 | /** 4 | * HelloWorld.test.ts 5 | */ 6 | var Heap_1 = require("../../src/\u6570\u636E\u7ED3\u6784/Heap"); 7 | test('init', function () { 8 | expect(function () { 9 | var heap = new Heap_1.MaxHeap([1, 2, 3, 4, 5]); 10 | expect(heap.data).toEqual([5, 4, 3, 2, 1]); 11 | }); 12 | }); 13 | test('sort', function () { 14 | expect(function () { 15 | var heap = new Heap_1.MaxHeap([1, 2, 3, 4, 5]); 16 | expect(heap.data).toEqual([5, 4, 3, 2, 1]); 17 | heap.sort(); 18 | expect(heap.data).toEqual([1, 2, 3, 4, 5]); 19 | }); 20 | }); 21 | //# sourceMappingURL=Heap.test.js.map -------------------------------------------------------------------------------- /算法和数据结构/test/数据结构/Heap.test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * HelloWorld.test.ts 3 | */ 4 | import {MaxHeap} from '../../src/数据结构/Heap'; 5 | 6 | test('init', () => { 7 | expect(()=>{ 8 | let heap = new MaxHeap([1,2,3,4,5]); 9 | expect(heap.data).toEqual([5,4,3,1,2]); 10 | }); 11 | }); 12 | 13 | test('sort', () => { 14 | expect(()=>{ 15 | let heap = new MaxHeap([1,2,3,4,5]); 16 | expect(heap.data).toEqual([5,4,3,1,2]); 17 | heap.sort(); 18 | expect(heap.data).toEqual([1,2,3,4,5]); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /算法和数据结构/test/数据结构/Tree.test.ts: -------------------------------------------------------------------------------- 1 | import {BinarySearchTree, BinarySearchTreeNode} from "../../src/数据结构/Tree" 2 | 3 | test("Tree-transverse",()=>{ 4 | const tree = new BinarySearchTree(new BinarySearchTreeNode(4)); 5 | 6 | tree.insert(2); 7 | tree.insert(3); 8 | tree.insert(10); 9 | tree.insert(7); 10 | tree.insert(1); 11 | 12 | expect([...tree.inorder()].map(n=>n.key)).toEqual([1,2,3,4,7,10]) 13 | }) 14 | -------------------------------------------------------------------------------- /算法和数据结构/test/数据结构/优先级队列.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | exports.__esModule = true; 3 | var _____1 = require("../../src/\u6570\u636E\u7ED3\u6784/\u4F18\u5148\u7EA7\u961F\u5217"); 4 | test('init', function () { 5 | var priorityQueue = new _____1.PriorityQueue([1, 2, 3, 4, 5]); 6 | expect(priorityQueue.data).toEqual([5, 4, 3, 2, 1]); 7 | }); 8 | test('push', function () { 9 | var priorityQueue = new _____1.PriorityQueue([1, 2, 3, 4, 5]); 10 | expect(priorityQueue.data).toEqual([5, 4, 3, 2, 1]); 11 | priorityQueue.push(3.2); 12 | expect(priorityQueue.data).toEqual([5, 3.2, 4, 3, 2, 1]); 13 | }); 14 | //# sourceMappingURL=优先级队列.test.js.map -------------------------------------------------------------------------------- /算法和数据结构/test/算法/减治法/插入排序.test.ts: -------------------------------------------------------------------------------- 1 | import {InsertSort} from "../../../src/算法/减治法/插入排序" 2 | 3 | test("insert-sort",()=>{ 4 | let record = [23, 123, 43, 20, 1, 4, 23, 3, 42, 123, 53, 57, 45, 234, 41, 31, 12, 8]; 5 | expect(new InsertSort(record).sort()).toEqual([...record].sort((a,b)=>a-b)) 6 | }) 7 | -------------------------------------------------------------------------------- /算法和数据结构/test/算法/分治法/归并排序.test.ts: -------------------------------------------------------------------------------- 1 | import {MergeSort} from "../../../src/算法/分治法/归并排序" 2 | 3 | test("merge", () => { 4 | let ms = new MergeSort([]), 5 | merge = ms.merge.bind(ms); 6 | 7 | expect(merge([3, 14, 22, 9, 11, 82], 3)).toEqual([3, 9, 11, 14, 22, 82]); 8 | }); 9 | 10 | test("merge-sort", () => { 11 | let mergeSort = new MergeSort([23, 123, 43, 20, 1, 4, 23, 3, 42, 123, 53, 57, 45, 234, 41, 31, 12, 8]) 12 | expect(mergeSort.sort()).toEqual([...mergeSort.record].sort((a, b) => a - b)) 13 | }) 14 | -------------------------------------------------------------------------------- /算法和数据结构/test/算法/分治法/快速排序.test.ts: -------------------------------------------------------------------------------- 1 | import {QuickSort} from "../../../src/算法/分治法/快速排序"; 2 | 3 | test("partition-0",()=>{ 4 | let qs = new QuickSort([23,13,35,6,19,50,28],0,7), 5 | partitionFn = qs.partition.bind(qs); 6 | 7 | expect(partitionFn(0,6)).toEqual(3); 8 | }) 9 | 10 | test("partition-1",()=>{ 11 | let qs = new QuickSort([12,13],0,2), 12 | partitionFn = qs.partition.bind(qs); 13 | 14 | expect(partitionFn(0,1)).toEqual(0); 15 | }) 16 | 17 | test("quick-sort", () => { 18 | let record = [23, 123, 43, 20, 1, 4, 23, 3, 42, 123, 53, 57, 45, 234, 41, 31, 12, 8]; 19 | expect(new QuickSort(record, 0, record.length-1).sort()).toEqual([...record].sort((a,b)=>a-b)); 20 | }) 21 | -------------------------------------------------------------------------------- /算法和数据结构/test/算法/蛮力法/KMP.test.ts: -------------------------------------------------------------------------------- 1 | import {KMP} from "../../../src/算法/蛮力法/KMP"; 2 | 3 | test("get-next",()=>{ 4 | expect(KMP.getNext("ababc")).toEqual([-1,0,0,1,2]); 5 | expect(KMP.getNext("adaddadd")).toEqual([-1,0,0,1,2,0,1,2]); 6 | }); 7 | 8 | test("kmp-compare-0",()=>{ 9 | expect(KMP.compare("ababaababcb","ababc")).toEqual(5); 10 | }); 11 | 12 | test("kmp-compare-1",()=>{ 13 | expect(KMP.compare("cdmamdmmaassdd","maass")).toEqual(7); 14 | }); 15 | -------------------------------------------------------------------------------- /算法和数据结构/test/算法/蛮力法/选择排序.test.ts: -------------------------------------------------------------------------------- 1 | import {SelectionSort} from "../../../src/算法/蛮力法/选择排序" 2 | 3 | 4 | test("selection-sort-0", () => { 5 | let list = new SelectionSort([5, 3, 2, 6, 2, 8]); 6 | expect(list.sort()).toEqual([2, 2, 3, 5, 6, 8]); 7 | }) 8 | 9 | test("selection-sort-1", () => { 10 | let randomArray = new Array(50).fill('').map(Math.random); 11 | let list = new SelectionSort(randomArray); 12 | expect(list.sort()).toEqual([...randomArray].sort(((a, b) => a - b))); 13 | console.log(list); 14 | }) 15 | -------------------------------------------------------------------------------- /算法练习/JS/20.有效的括号.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function isValid(s) { 3 | if (s.length % 2) { 4 | return false; 5 | } 6 | var dist = { 7 | "]": "[", 8 | "}": "{", 9 | ")": "(", 10 | }, stack = []; 11 | for (var i = 0; i < s.length; i++) { 12 | if (!(s[i] in dist)) 13 | stack.push(s[i]); 14 | else { 15 | if (stack[stack.length - 1] !== dist[s[i]]) 16 | return false; 17 | else 18 | stack.pop(); 19 | } 20 | } 21 | return stack.length === 0; 22 | } 23 | -------------------------------------------------------------------------------- /算法练习/TS/20.有效的括号.ts: -------------------------------------------------------------------------------- 1 | function isValid(s: string): boolean { 2 | if (s.length % 2) { 3 | return false; 4 | } 5 | let dist: any = { 6 | "]": "[", 7 | "}": "{", 8 | ")": "(", 9 | }, 10 | stack: string[] = []; 11 | for (let i = 0; i < s.length; i++) { 12 | if (!(s[i] in dist)) stack.push(s[i]); 13 | else { 14 | if (stack[stack.length - 1] !== dist[s[i]]) return false; 15 | else stack.pop(); 16 | } 17 | } 18 | return stack.length === 0; 19 | } 20 | -------------------------------------------------------------------------------- /算法练习/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "algorithm-practise", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "devDependencies": { 10 | "nodemon": "^1.19.2", 11 | "ts-node": "8.3.0", 12 | "ts-node-dev": "^1.0.0-pre.56" 13 | }, 14 | "author": "", 15 | "license": "ISC" 16 | } 17 | -------------------------------------------------------------------------------- /算法练习/types/15.三数之和.d.ts: -------------------------------------------------------------------------------- 1 | declare function threeSum(nums: number[]): number[][]; 2 | export default threeSum; 3 | -------------------------------------------------------------------------------- /算法练习/types/20.有效的括号.d.ts: -------------------------------------------------------------------------------- 1 | declare function isValid(s: string): boolean; 2 | -------------------------------------------------------------------------------- /编译原理/JS/docs/tokenizer.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var esprima = require('esprima'); 3 | var sourceCode = "

helloworld

"; 4 | var ast = esprima.parseModule(sourceCode, { jsx: true, tokens: true }); 5 | console.log(ast); 6 | -------------------------------------------------------------------------------- /编译原理/docs/tokenizer.ts: -------------------------------------------------------------------------------- 1 | let esprima = require('esprima'); 2 | let sourceCode = `

helloworld

`; 3 | let ast = esprima.parseModule(sourceCode, { jsx: true, tokens: true }); 4 | 5 | console.log(ast); 6 | -------------------------------------------------------------------------------- /编译原理/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CompilationPrinciples", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "run": "ts-node src/index.ts" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "esprima": "^4.0.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /编译原理/src/templates/ShareImage.dxml: -------------------------------------------------------------------------------- 1 | 5 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /编译原理/src/templates/auth.dxml: -------------------------------------------------------------------------------- 1 |
2 | __router-view__ 3 |
    4 |
  • 5 |
  • 6 |
  • 7 |
8 | 9 |
    10 |
  • 11 |
  • 12 |
  • 13 |
14 |
-------------------------------------------------------------------------------- /编译原理/src/templates/vform-item.dxml: -------------------------------------------------------------------------------- 1 |
2 | 5 | 15 |
{{errMsg.value}}
16 |
-------------------------------------------------------------------------------- /编译原理/types/docs/flexier.d.ts: -------------------------------------------------------------------------------- 1 | export interface ITokenizerConstructor { 2 | new (input: string): ITokenizer; 3 | } 4 | export interface ITokenizer { 5 | tokens: Token[]; 6 | currentToken: Token | null; 7 | start: IStateExcutor; 8 | number: IStateExcutor; 9 | emit: (token: Token) => void; 10 | } 11 | export declare type TokenizerParmas = string; 12 | export interface Token { 13 | type: Symbol; 14 | value: string; 15 | } 16 | export declare type IStateExcutor = (char: string) => IStateExcutor; 17 | -------------------------------------------------------------------------------- /编译原理/types/docs/tokenizer.d.ts: -------------------------------------------------------------------------------- 1 | declare let esprima: any; 2 | declare let sourceCode: string; 3 | declare let ast: any; 4 | -------------------------------------------------------------------------------- /编译原理/笔记.md: -------------------------------------------------------------------------------- 1 | # 编译原理 2 | 3 | 4 | 5 | ## 编译器工作流 6 | 7 | - 解析(Parsing): **解析**是将最初始的代码转换为一种更加抽象的表示(即AST) 8 | - 转换(Transformation): **转换**将对这个抽象的表示做一些处理, 让它能做到编译器期望它做到的事情 9 | - 代码生成(Code generation): 接收处理后的代码表示，然后把它转换成新的代码 10 | 11 | ### 解析(Parsing) 12 | 13 | 解析一般来说回分成两个阶段: 词法分析和语法分析 14 | 15 | - 测发分析接受原始代码，然后把它分割成一些称之为token的东西，这个过程是在词法分析器中完成的 16 | - Token是一个数组，由一些代码语句的碎片组成。他们可以是数字，标签，标点符号，远算符或者其他任何东西 17 | - 语法分析接收之前生成的Token，把他们转换成一种抽象的表示，这种抽象的表示描述了代码语句中的每一个片段以及他们之间的关系。这被称之为中间表示或抽象语法树 18 | - 抽象语法树是一个嵌套程度很深的对象，用一种更容易处理的方式表示了代码本身，也能给我们更多信息 19 | 20 | 21 | 22 | ## 有限状态机 23 | 24 | - 每一个状态都是一个机器,每个机器都可以接收输入和计算输出 25 | - 机器本身没有状态,每一个机器会根据输入决定下一个状态 26 | 27 | -------------------------------------------------------------------------------- /计算机网络/assets/ARQ&SlideWindow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/ARQ&SlideWindow.png -------------------------------------------------------------------------------- /计算机网络/assets/ARQ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/ARQ.png -------------------------------------------------------------------------------- /计算机网络/assets/ARQ2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/ARQ2.png -------------------------------------------------------------------------------- /计算机网络/assets/Reset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/Reset.png -------------------------------------------------------------------------------- /计算机网络/assets/TCP01_序号_确认号.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/TCP01_序号_确认号.png -------------------------------------------------------------------------------- /计算机网络/assets/TCP02_流量控制.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/TCP02_流量控制.png -------------------------------------------------------------------------------- /计算机网络/assets/image-20201124090935078.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/image-20201124090935078.png -------------------------------------------------------------------------------- /计算机网络/assets/image-20201124100153097.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/image-20201124100153097.png -------------------------------------------------------------------------------- /计算机网络/assets/image-20201124100153097_l72f2re26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/image-20201124100153097_l72f2re26.png -------------------------------------------------------------------------------- /计算机网络/assets/image-20201124100153097_l72f2re26_g49ef3rgy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/image-20201124100153097_l72f2re26_g49ef3rgy.png -------------------------------------------------------------------------------- /计算机网络/assets/ip-packet-header-protocol.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/ip-packet-header-protocol.png -------------------------------------------------------------------------------- /计算机网络/assets/netcard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/assets/netcard.png -------------------------------------------------------------------------------- /计算机网络/计算机网络.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/计算机网络/计算机网络.xmind -------------------------------------------------------------------------------- /设计模式/entity/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "start": "tsc && node JS/图片懒加载-代理模式/server.js", 4 | "watch-server": "nodemon --watch './图片懒加载-代理模式/*' -e ts,tsx --exec 'ts-node' ./图片懒加载-代理模式/server.ts" 5 | }, 6 | "dependencies": { 7 | "@types/koa": "^2.11.6", 8 | "@types/koa-router": "^7.4.1", 9 | "koa": "^2.13.0", 10 | "koa-router": "^10.0.0", 11 | "koa-static": "^5.0.0", 12 | "ts-node": "^9.0.0", 13 | "typescript": "^4.1.2" 14 | }, 15 | "devDependencies": { 16 | "@types/koa-static": "^4.0.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/src/命令模式.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/src/状态模式.d.ts: -------------------------------------------------------------------------------- 1 | interface IState { 2 | show(): void; 3 | } 4 | declare class Buttery implements IState { 5 | amount: string; 6 | state: IState; 7 | constructor(); 8 | show(): void; 9 | } 10 | declare class SuccessState implements IState { 11 | show(): void; 12 | } 13 | declare class WarnState implements IState { 14 | show(): void; 15 | } 16 | declare class ErrorState implements IState { 17 | show(): void; 18 | } 19 | declare class WorstState implements IState { 20 | show(): void; 21 | } 22 | declare let buttery: Buttery; 23 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/src/策略模式.d.ts: -------------------------------------------------------------------------------- 1 | interface IBuyable { 2 | buy: (...args: Array) => void; 3 | } 4 | declare class Customer { 5 | kind: IBuyable; 6 | constructor(kind: IBuyable); 7 | buy(money: number): void; 8 | } 9 | declare class Normal implements IBuyable { 10 | buy(money: number): void; 11 | } 12 | declare class Member implements IBuyable { 13 | buy(money: number): void; 14 | } 15 | declare class Vip implements IBuyable { 16 | buy(money: number): void; 17 | } 18 | declare let customer: Customer; 19 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/src/组合模式.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/src/装饰器模式.d.ts: -------------------------------------------------------------------------------- 1 | declare function before(beforeFn: Function, ...factoryArgs: Array): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => void; 2 | declare function takeMoney(money: string): void; 3 | declare namespace DecoratorPattern { 4 | class My { 5 | name: string; 6 | constructor(name: string); 7 | buy(money: string, goods: string): void; 8 | } 9 | } 10 | declare let dtwu: DecoratorPattern.My; 11 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/src/观察者模式.d.ts: -------------------------------------------------------------------------------- 1 | declare class Teacher { 2 | name: string; 3 | students: Student[]; 4 | private state; 5 | constructor(name: string); 6 | attach(student: Student): void; 7 | notify(): void; 8 | getState(): string; 9 | setState(val: string): void; 10 | } 11 | declare class Student { 12 | teacher: Teacher; 13 | constructor(teacher: Teacher); 14 | update(): void; 15 | } 16 | declare class Xueba extends Student { 17 | constructor(teacher: Teacher); 18 | update(): void; 19 | } 20 | declare class Xuezha extends Student { 21 | constructor(teacher: Teacher); 22 | update(): void; 23 | } 24 | declare let teacher: Teacher; 25 | declare let xueba: Xueba; 26 | declare let xuezha: Xuezha; 27 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/src/适配器模式.d.ts: -------------------------------------------------------------------------------- 1 | declare class Power { 2 | charge(): string; 3 | } 4 | declare class Adaptor { 5 | power: Power; 6 | charge(powerUsage: string): void; 7 | } 8 | declare class Laptop { 9 | power: Adaptor; 10 | use(): void; 11 | } 12 | declare let surface: Laptop; 13 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/src/门面模式.d.ts: -------------------------------------------------------------------------------- 1 | declare class Calculator { 2 | sum: Sum; 3 | minus: Minus; 4 | mutiply: Mutiply; 5 | divider: Divider; 6 | constructor(); 7 | } 8 | declare class Sum { 9 | execute(a: number, b: number): number; 10 | } 11 | declare class Minus { 12 | execute(a: number, b: number): number; 13 | } 14 | declare class Mutiply { 15 | execute(a: number, b: number): number; 16 | } 17 | declare class Divider { 18 | execute(a: number, b: number): number; 19 | } 20 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/src/面向对象.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace oop { 2 | class Person { 3 | private money; 4 | protected age: number; 5 | name: string; 6 | constructor(name: string, age: number, money: number); 7 | } 8 | export class Student extends Person { 9 | constructor(name: string, age: number, money: number); 10 | getName(): this; 11 | getMoney(): this; 12 | getAge(): this; 13 | } 14 | export {}; 15 | } 16 | declare let doctorwu: oop.Student; 17 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/图片懒加载-代理模式/server.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/状态模式.d.ts: -------------------------------------------------------------------------------- 1 | interface IState { 2 | show(): void; 3 | } 4 | declare class Buttery implements IState { 5 | amount: string; 6 | state: IState; 7 | constructor(); 8 | show(): void; 9 | } 10 | declare class SuccessState implements IState { 11 | show(): void; 12 | } 13 | declare class WarnState implements IState { 14 | show(): void; 15 | } 16 | declare class ErrorState implements IState { 17 | show(): void; 18 | } 19 | declare class WorstState implements IState { 20 | show(): void; 21 | } 22 | declare let buttery: Buttery; 23 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/策略模式.d.ts: -------------------------------------------------------------------------------- 1 | interface IBuyable { 2 | buy: (...args: Array) => void; 3 | } 4 | declare class Customer { 5 | kind: IBuyable; 6 | constructor(kind: IBuyable); 7 | buy(money: number): void; 8 | } 9 | declare class Normal implements IBuyable { 10 | buy(money: number): void; 11 | } 12 | declare class Member implements IBuyable { 13 | buy(money: number): void; 14 | } 15 | declare class Vip implements IBuyable { 16 | buy(money: number): void; 17 | } 18 | declare let customer: Customer; 19 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/组合模式.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/装饰器模式.d.ts: -------------------------------------------------------------------------------- 1 | declare function before(beforeFn: Function, ...factoryArgs: Array): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => void; 2 | declare function takeMoney(money: string): void; 3 | declare namespace DecoratorPattern { 4 | class My { 5 | name: string; 6 | constructor(name: string); 7 | buy(money: string, goods: string): void; 8 | } 9 | } 10 | declare let dtwu: DecoratorPattern.My; 11 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/观察者模式.d.ts: -------------------------------------------------------------------------------- 1 | declare class Teacher { 2 | name: string; 3 | students: Student[]; 4 | private state; 5 | constructor(name: string); 6 | attach(student: Student): void; 7 | notify(): void; 8 | getState(): string; 9 | setState(val: string): void; 10 | } 11 | declare class Student { 12 | teacher: Teacher; 13 | constructor(teacher: Teacher); 14 | update(): void; 15 | } 16 | declare class Xueba extends Student { 17 | constructor(teacher: Teacher); 18 | update(): void; 19 | } 20 | declare class Xuezha extends Student { 21 | constructor(teacher: Teacher); 22 | update(): void; 23 | } 24 | declare let teacher: Teacher; 25 | declare let xueba: Xueba; 26 | declare let xuezha: Xuezha; 27 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/适配器模式.d.ts: -------------------------------------------------------------------------------- 1 | declare class Power { 2 | charge(): string; 3 | } 4 | declare class Adaptor { 5 | power: Power; 6 | charge(powerUsage: string): void; 7 | } 8 | declare class Laptop { 9 | power: Adaptor; 10 | use(): void; 11 | } 12 | declare let surface: Laptop; 13 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/门面模式.d.ts: -------------------------------------------------------------------------------- 1 | declare class Calculator { 2 | sum: Sum; 3 | minus: Minus; 4 | mutiply: Mutiply; 5 | divider: Divider; 6 | constructor(); 7 | } 8 | declare class Sum { 9 | execute(a: number, b: number): number; 10 | } 11 | declare class Minus { 12 | execute(a: number, b: number): number; 13 | } 14 | declare class Mutiply { 15 | execute(a: number, b: number): number; 16 | } 17 | declare class Divider { 18 | execute(a: number, b: number): number; 19 | } 20 | -------------------------------------------------------------------------------- /设计模式/entity/src/types/面向对象.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace oop { 2 | class Person { 3 | private money; 4 | protected age: number; 5 | name: string; 6 | constructor(name: string, age: number, money: number); 7 | } 8 | export class Student extends Person { 9 | constructor(name: string, age: number, money: number); 10 | getName(): this; 11 | getMoney(): this; 12 | getAge(): this; 13 | } 14 | export {}; 15 | } 16 | declare let doctorwu: oop.Student; 17 | -------------------------------------------------------------------------------- /设计模式/entity/src/适配器模式.ts: -------------------------------------------------------------------------------- 1 | class Power { 2 | charge() { 3 | return "220V"; 4 | } 5 | } 6 | 7 | class Adaptor { 8 | public power: Power = new Power(); 9 | 10 | charge(powerUsage: string) { 11 | let v = this.power.charge(); 12 | console.log(`${v}=>${powerUsage}`); 13 | } 14 | } 15 | 16 | class Laptop { 17 | public power: Adaptor = new Adaptor(); 18 | 19 | use() { 20 | this.power.charge("20V"); 21 | } 22 | } 23 | 24 | let surface = new Laptop(); 25 | surface.use(); 26 | -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/1.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/10.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/11.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/12.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/13.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/14.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/15.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/16.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/17.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/18.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/19.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/2.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/20.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/3.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/4.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/5.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/6.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/7.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/8.jpg -------------------------------------------------------------------------------- /设计模式/entity/图片懒加载-代理模式/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Doctor-wu/frontendStudy/b325562da912a03d96d40e2afcb628cf534f46fd/设计模式/entity/图片懒加载-代理模式/images/9.jpg --------------------------------------------------------------------------------