├── .gitignore ├── Web Audio API ├── audioapi.html └── 晴天.mp3 ├── git ├── README.md ├── git仓储.png ├── git分支.png ├── git协作.png ├── git速查表.png ├── rebase │ ├── README.md │ └── rebase.jpg └── reset │ ├── QQ图片20200316215136.png │ └── reset.md ├── html+css ├── BFC │ ├── bfc解决浮动塌陷.html │ ├── 不会与float的元素重叠.html │ ├── 兄弟元素外边距重叠.html │ └── 父子外间距重叠.html ├── background │ └── background.md ├── css参考手册自制.md ├── css特效 │ ├── 1.scroll-snap-type x mandatory .html │ ├── 10.超强的苹果官网滚动文字特效实现 │ │ ├── background-clip text.html │ │ └── mix-blend-mode.html │ ├── 11.max-height实现hover展开.html │ ├── 12.css自适应大小文本.html │ ├── 13.backdrop-filter和mix-blend-mode实现首屏置灰.html │ ├── 14.css边框 │ │ └── 1.hover出现虚线滚动边框.html │ ├── 2.圆球融合 filter blur contrast.html │ ├── 3.文字镂空波浪效果.html │ ├── 4.雷达扫描.html │ ├── 5.scroll-snap-type 滚动贴合.html │ ├── 6.repeating-linear-gradient实现 发廊那种柱子.html │ ├── 7.4个球旋转后靠近中间 │ │ ├── svg 4个球旋转后靠近中间.css │ │ ├── svg 4个球旋转后靠近中间.tsx │ │ └── svg 4个球旋转后靠近中间css版本.html │ ├── 7.弧线底部 tab栏 svg 贝塞尔.html │ ├── 8.css实现头部固定 滚动才出现阴影.html │ ├── 9.has伪类实现轮播图 监听animationiteration事件.html │ ├── CSS.md │ ├── background 卡券效果制作.html │ ├── border-image │ │ ├── border-diamonds.png │ │ ├── border-image.html │ │ ├── border-image.md │ │ ├── demo.png │ │ └── index.html │ ├── column布局.html │ ├── focus-visible.html │ ├── repeating-linear-gradient实现虚线框.html │ ├── 前端三角形.html │ ├── 多行文本展开收起.html │ ├── 纯css实现导航栏下划线.html │ └── 自定义checkbox样式.html ├── fullpage │ ├── fullpage easing .md │ └── media │ │ ├── car.png │ │ ├── demo.png │ │ ├── ease.jpg │ │ ├── esse.png │ │ ├── full.png │ │ ├── html.jpg │ │ └── shicha.png ├── grid布局 │ ├── demo.html │ ├── grid-area.html │ ├── 固定最小宽度不足换行 模式填充auto-fit auto-fill.html │ └── 建议看这个.html ├── html手册.md ├── img │ ├── img srcset.md │ └── 图片丢失.md ├── linear-gradient实现多行省略 │ └── index.html ├── media │ ├── box.gif │ ├── di.png │ ├── dis.png │ ├── fu.jpg │ ├── gu.jpeg │ ├── guai.jpg │ ├── guding.png │ ├── ico.png │ ├── icotu.png │ ├── jd.png │ ├── kuihua.png │ ├── ma.png │ ├── pa.png │ ├── san.png │ ├── title.png │ ├── w.png │ ├── x.png │ ├── xia.jpg │ ├── xiong.jpeg │ └── you.png ├── rem适配究极版 │ ├── index.html │ ├── index.scss │ ├── rem.js │ └── 最基本的rem.js ├── sass scss less │ ├── _base.scss │ ├── index.html │ ├── style.css │ ├── style.css.map │ ├── style.less │ └── style.scss ├── script的crossorigin属性 - 简书.lnk ├── svg │ ├── svg │ │ └── demo1 │ │ │ ├── a.svg │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ └── style.css │ └── 贝塞尔曲线 │ │ └── README.md ├── 地理位置 │ └── index.html ├── 媒体查询 │ ├── index.css │ └── index.html ├── 滚动条 │ ├── scrollbar.html │ └── scrollbar.md ├── 经典页面布局 │ ├── flex 左右固定中间自适应.html │ ├── 双飞翼.html │ ├── 圣杯left center right 直接整.html │ ├── 圣杯直接左右定位放到两边.html │ ├── 左边固定右边自适应flex.html │ └── 左边固定右边自适应float.html └── 适配 │ ├── 1.适配iphoneX 底部横杠.html │ └── 2.H5软键盘适配 │ └── README.md ├── js ├── 1.属性描述符 数据描述符和存取描述符 数据属性 和 访问器属性 │ └── Readme.md ├── ES6 Reflect │ └── ES6之Reflect - 简书.url ├── ES6 class类 原型链 │ ├── class super指向.html │ ├── class.html │ ├── super.html │ ├── 原型链.md │ └── 原型链.png ├── JS如何设置盒模型的宽和高以及获取距离.md ├── README.md ├── Web Worker │ └── Shared Worker │ │ ├── shareWorker1.html │ │ ├── shareWorker2.html │ │ └── worker.js ├── drag event │ ├── drag.html │ └── drag.md ├── e.currentTarget.dataset.txt ├── e.target.txt ├── genetator │ └── generator.md ├── jsBridge │ ├── DSBridge.html │ ├── MainActivity.java │ ├── README.md │ ├── activity_main.xml │ ├── index.html │ └── jsBridge.js ├── json │ └── JSON.parse.txt ├── optional chaining │ └── optional chaining.html ├── promise │ ├── Promise.resolve().html │ ├── debug.log │ ├── demo.html │ ├── promise 源码(有错误) 第一版.html │ ├── promise.md │ ├── promise手写 class 蛋老师版本.js │ └── promise源码改正.md ├── websocket │ ├── socket.io │ │ ├── app.js │ │ ├── socket.io-3.1.2.js │ │ └── websocket.html │ └── websocket node wx │ │ ├── app.js │ │ ├── package.json │ │ └── websocket.html ├── window.pageYOffset │ └── index.html ├── 事件的异常处理 │ └── 事件的异常处理.md ├── 函数柯里化❀ │ ├── index.html │ ├── 经典面试题.html │ └── 面试题.html ├── 垃圾回收机制 │ └── 垃圾回收机制.md ├── 宏任务和微任务 浏览器渲染 │ ├── 1.html │ ├── async await promise.html │ ├── images │ │ ├── event loop.png │ │ └── webkit render.png │ └── 宏任务和微任务 浏览器渲染.md ├── 小技巧 各种工具代码 │ ├── 1.剪切板和复制粘贴 │ │ ├── clipboardApi chrome 66.html │ │ └── 复制文本input实现 兼容性好.html │ ├── 1.自制录音getUserMedia.html │ ├── 2.canvas截图.html │ ├── 2.file │ │ ├── file.md │ │ └── file.vue │ ├── 3.scrollIntoView 回到顶部.html │ ├── 4.flip动画 掘金.html │ ├── 5.前端录像.html │ ├── 6.监听shift control 实现选中功能.js │ ├── blob download.js │ ├── calender.js │ ├── my-util.ts │ ├── request.js │ ├── tree.ts │ ├── util.js │ ├── 复制功能.html │ ├── 小技巧.md │ ├── 张鑫旭的animation.js │ │ ├── animation.html │ │ ├── css │ │ │ ├── demo.css │ │ │ └── hl.css │ │ ├── demo.html │ │ └── js │ │ │ ├── animation.js │ │ │ ├── hl_all.js │ │ │ └── tween.js │ ├── 渲染几十万条数据 createDocumentFragment.html │ ├── 获取剪切板图片并上传.html │ └── 鼠标按下移动dom.js ├── 工厂模式 构造函数模式 │ └── 工厂模式 构造函数模式.html ├── 常见手写 │ ├── Array方法 包括自己手写 │ │ ├── sort.html │ │ └── 手写reduce.html │ ├── EventBus │ │ └── index.html │ ├── LRU │ │ └── Map实现.html │ ├── apply bind call │ │ ├── apply.html │ │ └── call.html │ ├── 实现instanceof │ │ └── index.html │ ├── 并发异步调度器Scheduler │ │ └── index.html │ ├── 手写一个new │ │ └── index.html │ ├── 数组扁平化处理 │ │ ├── reduce实现flat.html │ │ └── 数组扁平化处理使用.html │ ├── 简单实现const │ │ └── index.html │ └── 防抖 节流 │ │ ├── 节流2.html │ │ ├── 节流定时器.html │ │ ├── 节流时间戳.html │ │ ├── 防抖.html │ │ └── 防抖2.html ├── 执行栈 执行上下文 作用域链 │ └── 执行栈 执行上下文 作用域链.md ├── 数据类型 │ └── Symbol │ │ └── Symbol 创建私有属性 定义toString标签.html ├── 数组去重 │ ├── index.html │ └── 数组去重.md ├── 正则表达式.md ├── 深拷贝 │ ├── ES6 一层深拷贝.html │ ├── concat深拷贝.html │ ├── 展开运算符一层深拷贝.html │ ├── 数组slice深拷贝(只有一层).html │ └── 真的深拷贝❀❀❀❀❀❀.html ├── 算法 │ ├── 1.树型数据处理1.html │ ├── 1.树型数据处理2.html │ ├── 1.树型数据处理3.html │ ├── 2.最长递增子序列.html │ ├── README.md │ └── 排序 │ │ ├── 快速排序.html │ │ ├── 插入排序.html │ │ └── 自带sort排序.html ├── 继承 │ └── 继承.md ├── 进程和线程 │ └── 进程和线程.md ├── 闭包 作用域 作用域链 执行上下文 │ ├── index.html │ ├── node中的this.md │ ├── this历史遗留问题.html │ ├── 内存泄漏.html │ ├── 闭包 作用域 作用域链 执行上下文.md │ └── 闭包面试题.md ├── 隐式转换 │ └── 隐式转换.html └── 面试题 │ ├── Foo().demo().html │ ├── arguments[0] this指向.md │ ├── 类数组 push相关.md │ └── 输入一个整数N 输出所有和为N的连续正数序列.html ├── node ├── express 小服务器 │ ├── app.js │ └── demo.json ├── node学习 │ └── README.md ├── npm │ ├── README.md │ ├── outline.md │ └── preview │ │ ├── outline.html │ │ ├── toc │ │ ├── css │ │ │ ├── demo.css │ │ │ └── zTreeStyle │ │ │ │ ├── img │ │ │ │ ├── diy │ │ │ │ │ ├── 1_close.png │ │ │ │ │ ├── 1_open.png │ │ │ │ │ ├── 2.png │ │ │ │ │ ├── 3.png │ │ │ │ │ ├── 4.png │ │ │ │ │ ├── 5.png │ │ │ │ │ ├── 6.png │ │ │ │ │ ├── 7.png │ │ │ │ │ ├── 8.png │ │ │ │ │ └── 9.png │ │ │ │ ├── line_conn.gif │ │ │ │ ├── loading.gif │ │ │ │ ├── zTreeStandard.gif │ │ │ │ └── zTreeStandard.png │ │ │ │ └── zTreeStyle.css │ │ ├── js │ │ │ ├── jquery-1.4.4.min.js │ │ │ ├── jquery.ztree.all-3.5.min.js │ │ │ ├── ztree_toc.js │ │ │ └── ztree_toc.min.js │ │ └── style │ │ │ ├── Clearness Dark.css │ │ │ ├── Clearness.css │ │ │ ├── GitHub.css │ │ │ ├── GitHub2.css │ │ │ ├── github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css │ │ │ ├── github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css │ │ │ └── makedownpad.css │ │ └── toc_conf.js ├── nvm │ ├── img │ │ ├── 1.png │ │ └── 2.png │ └── outline.md ├── pnpm │ └── README.MD ├── webstorm 设置 添加Node代码提示 │ └── 1.png └── 不用框架.js ├── npm chrome插等件和工具.md ├── react ├── 1.React.createContext │ ├── 1-child.tsx │ ├── 1-index.tsx │ ├── 2-child.tsx │ └── AppState.tsx ├── 10.redux 和redux toolkit 简化版本 │ ├── redux-demo │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── redux │ │ │ │ ├── learnReducer │ │ │ │ │ ├── learnAction.ts │ │ │ │ │ └── learnReducer.ts │ │ │ │ └── store.ts │ │ │ ├── reportWebVitals.ts │ │ │ └── setupTests.ts │ │ └── tsconfig.json │ └── redux-toolkit │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── redux │ │ │ ├── hook.ts │ │ │ ├── learn │ │ │ │ └── slice.ts │ │ │ └── store.ts │ │ ├── reportWebVitals.ts │ │ └── setupTests.ts │ │ └── tsconfig.json ├── 2.HOC高阶组件 │ ├── AddToCart.tsx │ └── Robot.tsx ├── 3.withRouter 让子组件的props可以拿到router的东西 和hooks │ └── Header.tsx ├── 4.redux && react-redux │ ├── react-redux class版本 │ │ ├── Header.class.tsx │ │ ├── index.tsx │ │ ├── language │ │ │ ├── languageActions.ts │ │ │ └── languageReducer.ts │ │ └── store.ts │ ├── react-redux hook版本 │ │ ├── .eslintrc.js │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.module.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── components │ │ │ │ ├── Link │ │ │ │ │ └── Link.tsx │ │ │ │ ├── header │ │ │ │ │ ├── Header.class.tsx │ │ │ │ │ └── Header.tsx │ │ │ │ └── index.tsx │ │ │ ├── i18n │ │ │ │ ├── configs.ts │ │ │ │ ├── en.json │ │ │ │ └── zh.json │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── pages │ │ │ │ └── home │ │ │ │ │ ├── Home.tsx │ │ │ │ │ ├── a.module.css │ │ │ │ │ └── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── redux │ │ │ │ ├── hooks.ts │ │ │ │ ├── language │ │ │ │ │ ├── languageActions.ts │ │ │ │ │ └── languageReducer.ts │ │ │ │ └── store.ts │ │ │ ├── reportWebVitals.ts │ │ │ └── setupTests.ts │ │ └── tsconfig.json │ └── redux │ │ ├── Header.class.tsx │ │ ├── language │ │ ├── languageActions.ts │ │ └── languageReducer.ts │ │ ├── redux.png │ │ └── store.ts ├── 5.mobx && mobx-react │ ├── Readme.md │ ├── class和函数式的mobx mobx-react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.test.tsx │ │ │ ├── App.tsx │ │ │ ├── components │ │ │ │ ├── headerClass.tsx │ │ │ │ └── headerHook.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── logo.svg │ │ │ ├── react-app-env.d.ts │ │ │ ├── reportWebVitals.ts │ │ │ ├── setupTests.ts │ │ │ └── store │ │ │ │ ├── index.ts │ │ │ │ └── module │ │ │ │ └── TestStore.ts │ │ └── tsconfig.json │ └── hook && mobx-react-lite(现在包含在mobx-react里了) │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── components │ │ │ ├── headerClass.tsx │ │ │ └── headerHook.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── reportWebVitals.ts │ │ ├── setupTests.ts │ │ └── store │ │ │ ├── index.ts │ │ │ └── module │ │ │ └── TestStore.ts │ │ └── tsconfig.json ├── 6.combineReducers │ └── redux │ │ ├── Readme.md │ │ ├── hooks.ts │ │ ├── language │ │ ├── languageActions.ts │ │ └── languageReducer.ts │ │ ├── recommendReducer │ │ ├── recommendAction.ts │ │ └── recommendReducer.ts │ │ └── store.ts ├── 7.middleware中间件 │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.module.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Link │ │ │ │ └── Link.tsx │ │ │ ├── header │ │ │ │ ├── Header.class.tsx │ │ │ │ └── Header.tsx │ │ │ └── index.tsx │ │ ├── i18n │ │ │ ├── configs.ts │ │ │ ├── en.json │ │ │ └── zh.json │ │ ├── index.css │ │ ├── index.tsx │ │ ├── pages │ │ │ └── home │ │ │ │ ├── Home.tsx │ │ │ │ ├── a.module.css │ │ │ │ └── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── redux │ │ │ ├── hooks.ts │ │ │ ├── language │ │ │ │ ├── languageActions.ts │ │ │ │ └── languageReducer.ts │ │ │ ├── middlewares │ │ │ │ └── actionLog.ts │ │ │ ├── recommendReducer │ │ │ │ ├── recommendAction.ts │ │ │ │ └── recommendReducer.ts │ │ │ └── store.ts │ │ ├── reportWebVitals.ts │ │ └── setupTests.ts │ └── tsconfig.json ├── 8.redux toolkit │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.module.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Link │ │ │ │ └── Link.tsx │ │ │ ├── header │ │ │ │ ├── Header.class.tsx │ │ │ │ └── Header.tsx │ │ │ ├── index.tsx │ │ │ └── toolkit │ │ │ │ └── Toolkit.tsx │ │ ├── i18n │ │ │ ├── configs.ts │ │ │ ├── en.json │ │ │ └── zh.json │ │ ├── index.css │ │ ├── index.tsx │ │ ├── pages │ │ │ ├── detail │ │ │ │ └── DetailPage.tsx │ │ │ └── home │ │ │ │ ├── Home.tsx │ │ │ │ ├── a.module.css │ │ │ │ └── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── redux │ │ │ ├── hooks.ts │ │ │ ├── language │ │ │ │ ├── languageActions.ts │ │ │ │ └── languageReducer.ts │ │ │ ├── middlewares │ │ │ │ └── actionLog.ts │ │ │ ├── productDetail │ │ │ │ └── slice.ts │ │ │ ├── recommendReducer │ │ │ │ ├── recommendAction.ts │ │ │ │ └── recommendReducer.ts │ │ │ └── store.ts │ │ ├── reportWebVitals.ts │ │ └── setupTests.ts │ └── tsconfig.json ├── 9.redux toolkit 异步请求 createAsyncThunk │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.module.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Link │ │ │ │ └── Link.tsx │ │ │ ├── header │ │ │ │ ├── Header.class.tsx │ │ │ │ └── Header.tsx │ │ │ ├── index.tsx │ │ │ └── toolkit │ │ │ │ └── Toolkit.tsx │ │ ├── i18n │ │ │ ├── configs.ts │ │ │ ├── en.json │ │ │ └── zh.json │ │ ├── index.css │ │ ├── index.tsx │ │ ├── pages │ │ │ ├── detail │ │ │ │ └── DetailPage.tsx │ │ │ └── home │ │ │ │ ├── Home.tsx │ │ │ │ ├── a.module.css │ │ │ │ └── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── redux │ │ │ ├── hooks.ts │ │ │ ├── language │ │ │ │ ├── languageActions.ts │ │ │ │ └── languageReducer.ts │ │ │ ├── middlewares │ │ │ │ └── actionLog.ts │ │ │ ├── productDetail │ │ │ │ └── slice.ts │ │ │ ├── recommendReducer │ │ │ │ ├── recommendAction.ts │ │ │ │ └── recommendReducer.ts │ │ │ └── store.ts │ │ ├── reportWebVitals.ts │ │ └── setupTests.ts │ └── tsconfig.json ├── context │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── serviceWorker.js │ │ └── setupTests.js ├── hooks │ ├── useLatest │ │ └── index.js │ ├── useRafState │ │ └── index.js │ ├── useSize │ │ └── index.js │ ├── useVirtualList │ │ └── index.js │ └── utils │ │ ├── createEffectWithTarget.js │ │ ├── domTarget.js │ │ ├── index.js │ │ ├── isBrowser.js │ │ ├── useEffectWithTarget.js │ │ └── useIsomorphicLayoutEffectWithTarget.ts ├── react-redux │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── index.js │ │ └── store │ │ ├── index.js │ │ └── reducer.js ├── react.xmind ├── react18 react-router-dom 6 useRoutes │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── axios │ │ │ └── index.ts │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── reportWebVitals.ts │ │ ├── routers │ │ │ ├── RouterWaiter │ │ │ │ ├── fn.tsx │ │ │ │ ├── guard.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── type.ts │ │ │ ├── index.tsx │ │ │ └── module │ │ │ │ └── demo.tsx │ │ ├── setupTests.ts │ │ ├── types │ │ │ └── index.d.ts │ │ ├── utils │ │ │ └── utils.ts │ │ └── views │ │ │ ├── demo.tsx │ │ │ ├── home │ │ │ ├── components │ │ │ │ ├── ActionBar │ │ │ │ │ ├── ActionBar.tsx │ │ │ │ │ └── style.module.scss │ │ │ │ ├── SideBar │ │ │ │ │ ├── SideBar.tsx │ │ │ │ │ └── style.module.scss │ │ │ │ └── index.ts │ │ │ └── home.tsx │ │ │ └── login │ │ │ └── login.tsx │ └── tsconfig.json ├── react自制文档.md └── redux │ ├── README.md │ ├── redux-flow.png │ └── redux-middleware.png ├── typescript ├── react-ts │ └── 1.React.FC.tsx ├── tsconfig.json ├── typescipt学习过程.md ├── typescript参考手册.md └── typescript类型手册.md ├── uni-app 7端 ├── static │ └── web.config ├── uni-app坑与知识.md └── 图片头像裁剪收缩组件示例 │ ├── App.vue │ ├── components │ └── cropper.vue │ ├── main.js │ ├── manifest.json │ ├── pages.json │ ├── pages │ └── index │ │ └── index.vue │ ├── static │ └── logo.png │ ├── uni.scss │ └── unpackage │ └── dist │ └── dev │ ├── .sourcemap │ └── mp-weixin │ │ ├── common │ │ ├── main.js.map │ │ ├── runtime.js.map │ │ └── vendor.js.map │ │ ├── components │ │ └── cropper.js.map │ │ └── pages │ │ └── index │ │ └── index.js.map │ └── mp-weixin │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── common │ ├── main.js │ ├── main.wxss │ ├── runtime.js │ └── vendor.js │ ├── components │ ├── cropper.js │ ├── cropper.json │ ├── cropper.wxml │ └── cropper.wxss │ ├── pages │ └── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── project.config.json │ ├── sitemap.json │ ├── sitemap17.json │ └── static │ └── logo.png ├── vscode plugin.md ├── vue ├── .eslintrc.js ├── Readme.md ├── Vue set │ └── set.md ├── diff算法 │ ├── Vue diff.png │ ├── react diff.png │ ├── vue2 vue3 diff.md │ └── 时间复杂度 和React的比较.md ├── keep-alive │ ├── h5首页meta配合keepalive.vue │ ├── index.html │ └── 原理未完待续.md ├── model自定义 │ └── model.html ├── nextTick │ ├── next-tick.js │ └── nextTick.md ├── vue cli3 配置 │ └── vuecli3.xmind ├── vue computed原理 │ └── computed.md ├── vue-router │ ├── index vite.ts │ ├── index webpack .ts │ └── userOrder.ts ├── vue.config.js ├── vue2双向数据绑定原理 │ ├── Dep.js │ ├── demo │ │ ├── index.html │ │ └── mvvm.js │ ├── index.html │ ├── index.js │ ├── juejin │ │ ├── Dep.js │ │ ├── Observer.js │ │ ├── Watcher.js │ │ └── index.html │ ├── mvvm.js │ └── 双向数据绑定.md ├── vue2面试 │ ├── images │ │ └── 异步渲染.png │ └── 面试.md ├── vue3 │ ├── 1.自定义事件 v-model参数.html │ ├── 10.composition watch watchEffect.html │ ├── 11.composition 生命周期.html │ ├── 12.composition provide inject ref获取dom.html │ ├── 13.vue3 store.js │ ├── 14.Suspense │ │ ├── App.vue │ │ └── AsyncShow.vue │ ├── 2.自定义事件 emit['changeMsg'].html │ ├── 3.异步组件.html │ ├── 4.teleport 传送门.html │ ├── 5.plugin.html │ ├── 6.数据校验正常.html │ ├── 6.数据校验正常plugin.html │ ├── 7.ref reactive.html │ ├── 7.toRef toRefs.html │ ├── 8.setup 参数 attrs slots emit.html │ ├── 9.composition computed.html │ └── README.md ├── vue3双向数据绑定原理 │ ├── Object.defineProperty缺点 proxy优点.md │ ├── proxy Reflect.html │ └── proxy普通.html ├── vuex严格模式实现原理 │ └── vuex严格模式实现原理.md ├── vue小技巧、组件 │ ├── 1.MyTable ElementUI table封装.vue │ ├── CssCircle.vue │ ├── checkbox v-model 数组.html │ ├── inputLimit.vue │ ├── upload上传 │ │ ├── common.js │ │ ├── hdUpload.vue │ │ └── taskComponent.vue │ ├── 动态属性.html │ ├── 折线图 │ │ ├── 使用.md │ │ └── 折线图.vue │ └── 饼图 │ │ ├── 使用.md │ │ └── 饼图.vue ├── vue组件是如何渲染和更新的 │ └── vue组件是如何渲染和更新的.md ├── 书籍学习 │ └── Vue.js设计与实现 │ │ └── README.MD ├── 创建组件方式 代码提示的template.html ├── 插槽 │ ├── index.html │ └── jsx插槽.md └── 组件通信 │ ├── $props $attrs $listeners │ ├── index.html │ └── 介绍.md │ ├── .sync修饰符 子改父.md │ ├── 03.组件-父组件向子组件传值.html │ ├── 04.组件-父组件把方法传递给子组件.html │ ├── attrs listeners │ └── index.html │ ├── vue中8种组件通信方式, 值得收藏! - 掘金.url │ ├── 中央数据总线.html │ └── 缩略版.html ├── webpack ├── mui │ ├── dist │ │ ├── bundle.js │ │ └── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── index.html │ │ ├── lib │ │ │ └── mui │ │ │ │ ├── css │ │ │ │ ├── mui.css │ │ │ │ └── mui.min.css │ │ │ │ ├── fonts │ │ │ │ └── mui.ttf │ │ │ │ └── js │ │ │ │ ├── mui.js │ │ │ │ └── mui.min.js │ │ ├── main.js │ │ └── router.js │ └── webpack.config.js ├── package.json ├── scripts --open --port 3000.txt ├── webpack-study │ ├── .gitignore │ ├── LICENSE │ ├── dist │ │ ├── bundle.js │ │ └── index.html │ ├── package.json │ ├── src │ │ ├── css │ │ │ ├── index.css │ │ │ ├── index.less │ │ │ └── index.scss │ │ ├── index.html │ │ └── main.js │ └── webpack.config.js └── webpack.xmind ├── 前端调试 ├── chrome DevTools.md └── 调试.md ├── 单元测试 └── README.md ├── 原生小程序 微信h5 ├── Login.vue ├── PayComponent.vue ├── images │ ├── weapp-architecture.png │ └── wechat-framework.png ├── 微信h5登录授权.md ├── 微信webview原理.md ├── 微信云开发 │ └── README.MD ├── 微信支付.md ├── 微信文档.md ├── 微信网页开发 js-sdk.md └── 支付总结.md ├── 小知识 ├── 1.github_action │ ├── .github │ │ └── workflows │ │ │ └── ci.yml │ ├── githubAction.md │ ├── package.json │ └── vue.config.js ├── 2.音视频自动播放 │ └── README.md ├── shell │ ├── README.MD │ ├── deploy.sh │ └── 使用.txt ├── window 指令.md ├── 可访问性 │ ├── image │ │ ├── 0603a19d8ba7452ba4a3ce30e741dc0c~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── 1.image │ │ ├── 2fb99dc2cac14bd2956fa2b15282152a~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── 323ff57ad325409cb02ae208550c5a6b~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── 4266363a7d454e13aac72610e44d07ec~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── 481fd7dad34a4cb1a02b4d7a0a7e4763~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── 65fb74a9dc334bf4953a22e7a0855d0e~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── 6e312c94dde642aaa2f2bf341a1a4bb4~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── 71861c823f874294bb4bd76500652b84~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── 7a7b1f9ed4524c4796a5d14ed88c1b26~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── b20e7bfa0f9c466b8ab3df0b9e6008f0~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── b8a7754968564e0fa157ed2f0dae7207~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── ca5170bb70934d729533f64b5e5db13d~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── db126d25715344aebeebb36f458a117d~tplv-k3u1fbpfcp-zoom-1.image │ │ ├── e6a93f5cfc294a6d9316eda9c33762f7~tplv-k3u1fbpfcp-zoom-1.image │ │ └── e9e7a8e882ee4fbdbedeb23b80a36dfd~tplv-k3u1fbpfcp-zoom-1.image │ └── 可访问性.md ├── 无障碍 │ └── 无障碍.md └── 跨域 │ └── 跨域.md ├── 快捷键 设置 ├── .webstorm.ide.js ├── HBuilder快捷键.txt ├── chrome.txt ├── copilot快捷键.txt ├── jetbrain快捷键.txt ├── jetbrain设置.txt ├── mac vscode.txt ├── typora.txt ├── vscode快捷键 设置.txt └── window 快捷键和tip.txt ├── 性能优化 ├── workspace │ ├── css、js的加载与执行.pptx │ ├── 图片相关的优化.pptx │ ├── 懒加载与预加载.pptx │ ├── 浏览器存储.pptx │ ├── 资源合并与压缩.pptx │ └── 重绘与回流.pptx ├── 性能优化.xmind ├── 懒加载 │ └── index.html └── 面试必考.md ├── 数据库 └── Mongodb.md ├── 新建文本文档.txt ├── 浏览器插件 └── chrome-extension │ ├── back.html │ ├── css │ └── juliang.css │ ├── demo.html │ ├── js │ ├── axios.js │ ├── background.js │ ├── juliang.js │ ├── juliangAuthor.js │ ├── popup.js │ ├── utils.js │ └── vue.min.js │ ├── manifest.json │ └── popup.html ├── 特效、工具 ├── 1.vue3 input带校验 │ ├── App.vue │ ├── ValidateForm.vue │ └── ValidateInput.vue ├── 10.TabsAnchor │ ├── README.md │ └── TabsAnchor.vue ├── 11.VtransferSimple 穿梭框 获取增加删除列表 │ └── Vtransfer.vue ├── 12.ant design && ant design vue │ ├── VTree.vue │ ├── tree.ts │ └── uesTree.ts ├── 13.word excel pdf ppt 预览 │ ├── README.MD │ ├── excel 获取excel数据 还没有展示.vue │ ├── file-view-master 别人的预览项目 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── example │ │ │ ├── README.md │ │ │ └── embedded.html │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ ├── Embedded.vue │ │ │ │ ├── HelloWorld.vue │ │ │ │ ├── renders.js │ │ │ │ └── util.js │ │ │ ├── main.js │ │ │ └── vendors │ │ │ │ ├── colz │ │ │ │ └── index.js │ │ │ │ ├── image │ │ │ │ ├── ImageViewer.vue │ │ │ │ └── index.js │ │ │ │ ├── mp4 │ │ │ │ └── index.js │ │ │ │ ├── pdf │ │ │ │ ├── PdfView.vue │ │ │ │ └── index.js │ │ │ │ ├── pptx │ │ │ │ ├── index.js │ │ │ │ ├── pptx_css.js │ │ │ │ ├── process_pptx.js │ │ │ │ ├── t_xml.js │ │ │ │ └── worker.js │ │ │ │ ├── text │ │ │ │ ├── CodeViewer.vue │ │ │ │ └── index.js │ │ │ │ └── xlsx │ │ │ │ ├── Table.vue │ │ │ │ ├── color.js │ │ │ │ ├── index.js │ │ │ │ └── util.js │ │ └── vue.config.js │ ├── pdf.vue │ └── word.vue ├── 14.前端主题切换 │ ├── readme.md │ └── 主题切换.html ├── 15.vue WOperate │ └── WOperate.vue ├── 16.vue jsx转真实dom组件 │ └── Node.vue ├── 17.DateRangePicker │ ├── DateRangePicker.vue │ ├── QuarterPicker.vue │ └── map.js ├── 18.css 实现table固定列 │ └── index.html ├── 19.elementui tooltip内容过长才显示 │ └── readme.md ├── 2.vue3 message封装 函数方式调用 │ ├── Message.vue │ └── createMessage.ts ├── 20.docxjs │ └── docxjs.vue ├── 21.antv s2 │ ├── vue2 s2.vue │ └── vue3 s2.vue ├── 22.页面布局组件 header body footer │ ├── PageBody │ │ └── PageBody.vue │ ├── PageFooter │ │ └── PageFooter.vue │ ├── PageHeader │ │ └── PageHeader.vue │ └── PageWrapper │ │ └── PageWrapper.vue ├── 23.sortablejs │ └── el-table.vue ├── 24.el-table简单版 │ └── el-table简单版.vue ├── 25.IntersectionObserver实现滚动时元素渐显动画效果 │ └── index.html ├── 26.一个支持@的输入框 │ └── index.html ├── 27.uniapp app nfc │ └── nfc.js ├── 3.video audio 媒体处理 │ ├── audio录音 │ │ ├── audio录音.vue │ │ └── set.js │ ├── audio音频播放.vue │ ├── videoJS播放视频.vue │ └── video视频播放.vue ├── 4.iosImage旋转 │ └── 4.iosImage旋转.vue ├── 5.网络波动 断网提示组件 │ └── offline-handle.vue ├── 6.右下角可拖拽的标签 │ └── order-button.vue ├── 7.xlsx pdf打印 word │ ├── xlsx导入excell拿到json │ │ ├── README.md │ │ └── index.vue │ └── 打印页面特定元素成pdf │ │ └── 打印.html ├── 8.双指放大 │ ├── index.js │ └── 双指放大.html ├── 9.限制高度 │ └── useLimitHeight.ts ├── CssCircle.vue ├── Javascript Web Animaition API.html ├── animation steps.html ├── loading │ ├── animation loading.html │ └── svg loading.html ├── ripple波纹按钮 │ ├── directives.js │ ├── ripple.html │ └── ripple.scss ├── vue-awesome-swiper demo │ └── index.vue ├── vue自定义指令 │ ├── 1.只能输入数字.md │ └── 2.drag │ │ ├── index.js │ │ └── src │ │ └── directive.js ├── 图表 │ ├── 折线图 │ │ ├── 使用.md │ │ └── 折线图.vue │ ├── 柏拉图 │ │ └── PlatoChart.vue │ └── 饼图 │ │ ├── 使用.md │ │ └── 饼图.vue ├── 百度地图 │ ├── Map.vue │ └── 百度地图.html └── 自制特效 │ ├── jquery │ ├── 08案例好友面板切换.html │ ├── jquery-1.12.1.min.js │ ├── 递归从后开始让图片一张张消失动画的相关方法 │ │ ├── 1.png │ │ ├── 19 递归从后开始让图片一张张消失动画的相关方法.html │ │ └── jquery-1.12.1.min.js │ └── 鼠标放上去高亮显示 │ │ ├── 06.html │ │ ├── 1.png │ │ └── jquery-1.12.1.min.js │ ├── js │ ├── 1-案例拖拽登录框.html │ ├── 2-滚动条.html │ ├── 3-表格隔行变色.html │ ├── 开机动画 │ │ ├── 0-1.png │ │ ├── 0-2.png │ │ ├── 13开机动画.html │ │ └── common.js │ ├── 手风琴 │ │ ├── 1.png │ │ ├── 12手风琴.html │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ └── common.js │ ├── 旋转木马 │ │ ├── 1.png │ │ ├── 15旋转木马.html │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ └── common.js │ ├── 点名 │ │ ├── 点名.html │ │ └── 点名自己做.html │ ├── 筋斗云 │ │ ├── 06筋斗云.html │ │ └── common.js │ └── 轮播图 │ │ └── 轮播图 │ │ ├── 00.jpg │ │ ├── 01.jpg │ │ ├── common.js │ │ ├── index.html │ │ └── psb.jpg │ ├── 不南奖励一个一个飞下来.html │ ├── 字自己慢慢出来 │ └── index.html │ ├── 旋转123456.html │ ├── 旋转字体.html │ └── 无限滚动tab │ ├── index.css │ ├── index.html │ └── index.scss ├── 移动端H5 ├── 1.滚动穿透解决.html ├── 2.适配iphoneX 底部横杠.html ├── 3.移动端坑网易3年总结.md └── 4.h5软键盘.md ├── 绘制图形和动画canvas webgl ├── WebGL │ ├── README.md │ ├── three │ │ ├── README.md │ │ └── 案例 │ │ │ ├── 1.三维图形渲染 立方体旋转.html │ │ │ ├── 2.灯光.html │ │ │ ├── 3.雾化.html │ │ │ ├── 3d项目实战 │ │ │ ├── 01-坐标辅助器与轨道控制器.vue │ │ │ ├── 02-物体位移与父子元素.vue │ │ │ ├── 03-物体的缩放与旋转.vue │ │ │ ├── 04-设置响应式画布与全屏控制.vue │ │ │ ├── 05-lil-GUI调试开发.vue │ │ │ ├── 06-几何体_顶点_索引_面之BufferGeometry.vue │ │ │ ├── 07-几何体划分顶点组设置不同材质.vue │ │ │ ├── 08-贴图的加载与环境遮蔽贴图强度设置.vue │ │ │ ├── 09-透明度贴图_环境贴图加载与高光贴图配合使用.vue │ │ │ ├── 10-纹理的颜色空间.vue │ │ │ ├── 11-场景的线性雾和指数雾.vue │ │ │ ├── 12-加载gltf模型和加载压缩过的模型.vue │ │ │ ├── 13-光线投射实现3d场景交互事件.vue │ │ │ ├── 14-补间动画Tween.vue │ │ │ ├── 15-UV.vue │ │ │ ├── 16-法向量属性应用与法向量辅助器.vue │ │ │ ├── 17-几何体顶点转换_顶点位移.vue │ │ │ ├── 18-包围盒使用与世界矩阵转换.vue │ │ │ ├── 19-几何体居中与获取几何体中心.vue │ │ │ └── README.md │ │ │ ├── 4.正射投影..html │ │ │ ├── controls │ │ │ └── index.js │ │ │ ├── three动画与相机 │ │ │ ├── three骨骼动画 │ │ │ │ └── three骨骼动画.vue │ │ │ ├── 加载外部文件 │ │ │ │ └── 加载外部文件.vue │ │ │ └── 点击选取 │ │ │ │ └── 点击选取.vue │ │ │ ├── 光源 │ │ │ ├── 1.灯光.html │ │ │ ├── 2.聚光灯.html │ │ │ ├── 3.环境光.html │ │ │ ├── 4.点光源.html │ │ │ ├── 5.平行光.html │ │ │ └── 6.半球光.html │ │ │ ├── 几何体 │ │ │ ├── 1.二维平面.vue │ │ │ ├── 10.文字.vue │ │ │ ├── 2.二维圆.vue │ │ │ ├── 3.自定义二维图形.vue │ │ │ ├── 4.立方体.vue │ │ │ ├── 5.球体.vue │ │ │ ├── 6.圆柱体.vue │ │ │ ├── 7.圆环.vue │ │ │ ├── 8.扭结.vue │ │ │ └── 9.多面体.vue │ │ │ ├── 动画 │ │ │ └── 1.tweenjs实现立方体旋转.vue │ │ │ ├── 材质 │ │ │ ├── 1.基础材质.html │ │ │ ├── 2.深度材质.html │ │ │ ├── 3.法向材质.html │ │ │ ├── 4.朗伯材质.html │ │ │ ├── 5.phong材质.html │ │ │ ├── 6.着色器材质.html │ │ │ └── 联合材质.vue │ │ │ ├── 粒子 │ │ │ └── 1.three粒子与粒子系统兼容r152新版本.vue │ │ │ └── 纹理 │ │ │ ├── 1.基础纹理.vue │ │ │ ├── 2.凹凸贴图.vue │ │ │ ├── 3.法向贴图.vue │ │ │ ├── 4.环境贴图.vue │ │ │ ├── 5.canvas贴图.vue │ │ │ └── 6.three辉光效果.vue │ └── 案例 │ │ └── 多图形绘制和动画 │ │ ├── 1.通过鼠标控制绘制 │ │ └── index.html │ │ ├── 10.图形复合变换 .html │ │ ├── 11.通过纹理给图形添加背景图.html │ │ ├── 12.多重纹理添加多张背景图.html │ │ ├── 2.多缓冲区数据偏移.html │ │ ├── 3.绘制三角形.html │ │ ├── 4.图形平移.html │ │ ├── 5.图形缩放.html │ │ ├── 6.图形旋转.html │ │ ├── 7.图形平移-平移矩阵.html │ │ ├── 8.图形缩放-缩放矩阵.html │ │ ├── 9.图形旋转-旋转矩阵.html │ │ └── utils │ │ └── index.js ├── canvas │ ├── 1.canvas录制视频 │ │ └── 录制视频.md │ ├── canvas 倒计时.html │ ├── canvas 小球.html │ └── canvas.md └── pixi │ ├── 基础图形.vue │ ├── 常见样式配置.vue │ └── 文本、图片.vue ├── 网络安全 ├── CSRF.md └── XSS.md ├── 计算机网络等后端知识 ├── XSS CSRF.md ├── cookie.md ├── http https协议.md ├── https.md ├── url编码.md ├── 优化.md ├── 分布式与集群 │ ├── 1.jpg │ └── 分布式与集群.md ├── 常见状态码.md └── 网络请求.md ├── 面试 ├── 1.vue和react区别.md ├── react │ └── 事件机制.md ├── 算法 │ └── 算法复杂度.md ├── 面试题(学习版本).md ├── 面试题(面试别人).md ├── 面试题抽离 │ └── 虚拟DOM │ │ └── readme.md └── 项目难点.md ├── 项目思路 ├── 位运算符权限管理.md ├── 支付 │ └── PayComponent.vue ├── 权限控制 │ └── README.MD └── 购物车.md └── 项目构建 ├── husky.md ├── vite ├── README.md └── vue3 │ ├── .env.development │ ├── .env.production │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ ├── App.vue │ ├── common │ │ └── js │ │ │ ├── common.js │ │ │ └── useUrlHandle.js │ ├── components │ │ ├── business │ │ │ ├── DateRangePicker │ │ │ │ ├── DateRangePicker.vue │ │ │ │ └── map.js │ │ │ ├── FormBlock │ │ │ │ └── FormBlock.vue │ │ │ ├── PageBody │ │ │ │ └── PageBody.vue │ │ │ ├── PageFooter │ │ │ │ └── PageFooter.vue │ │ │ ├── PageHeader │ │ │ │ └── PageHeader.vue │ │ │ ├── PageWrapper │ │ │ │ └── PageWrapper.vue │ │ │ └── QuarterPicker │ │ │ │ └── QuarterPicker.vue │ │ └── control │ │ │ ├── CircleFilled │ │ │ └── CirCleFilled.vue │ │ │ └── MyTable │ │ │ └── MyTable.vue │ ├── main.js │ ├── router │ │ └── index.js │ ├── stores │ │ └── user.js │ ├── style.css │ ├── utils │ │ └── util.js │ └── views │ │ └── folder1 │ │ └── page │ │ └── page.vue │ └── vite.config.js └── webpack ├── README.md ├── package.json ├── src ├── index.css ├── index.html ├── index.js ├── log.js ├── test.css ├── test.js └── test_sc.scss └── webpack.dev.js /.gitignore: -------------------------------------------------------------------------------- 1 | .history 2 | .idea -------------------------------------------------------------------------------- /Web Audio API/晴天.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/Web Audio API/晴天.mp3 -------------------------------------------------------------------------------- /git/git仓储.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/git/git仓储.png -------------------------------------------------------------------------------- /git/git分支.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/git/git分支.png -------------------------------------------------------------------------------- /git/git协作.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/git/git协作.png -------------------------------------------------------------------------------- /git/git速查表.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/git/git速查表.png -------------------------------------------------------------------------------- /git/rebase/README.md: -------------------------------------------------------------------------------- 1 | #### 不同分支 2 | 3 | ![rebase](rebase.jpg) 4 | 5 | 首先在bc分支上输入git rebase master 会产生冲突 3和5 冲突 之后可以选择3解决冲突 6 | 7 | 输入git add 将变更加入到暂存区 再执行git rebase --continue 8 | 9 | 10 | 11 | #### [想要通过git rebase 合并提交](https://www.cnblogs.com/amou/p/9465880.html) 12 | 13 | 在终端输入: `git rebase -i HEAD~2` 这里的 `HEAD~2` 表示合并最近两次的提交, 如果想合并最近三次的提交修改为: `git rebase -i HEAD~3`![ 14 | 15 | -------------------------------------------------------------------------------- /git/rebase/rebase.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/git/rebase/rebase.jpg -------------------------------------------------------------------------------- /git/reset/QQ图片20200316215136.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/git/reset/QQ图片20200316215136.png -------------------------------------------------------------------------------- /html+css/BFC/bfc解决浮动塌陷.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 17 | 18 | 19 |
20 |
11
21 |
22 | 23 | -------------------------------------------------------------------------------- /html+css/css特效/7.4个球旋转后靠近中间/svg 4个球旋转后靠近中间.css: -------------------------------------------------------------------------------- 1 | .w-screen-loading-content { 2 | animation: ball-wrapper-rotate 1.95s cubic-bezier(0.23, 0.33, 0.81, 1.45) infinite; 3 | } 4 | 5 | @keyframes ball-wrapper-rotate { 6 | 0% { 7 | transform: rotate(70deg); 8 | } 9 | 10 | 100% { 11 | transform: rotate(-290deg); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /html+css/css特效/border-image/border-diamonds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/css特效/border-image/border-diamonds.png -------------------------------------------------------------------------------- /html+css/css特效/border-image/border-image.md: -------------------------------------------------------------------------------- 1 | #### 解决图片拉伸问题 2 | 3 | #### [border-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image) 4 | 5 | CSS属性允许在元素的边框上绘制图像 6 | 7 | ```css 8 | border-image-source: url('./demo.png'); 9 | border-image-slice: 30 30 30 30 fill; 10 | border-image-width: auto 11 | ``` 12 | 13 | **`border-image-slice`**属性会将图片分割为9个区域 14 | 15 | 区域 9 为中心区域（ middle region）。它在默认情况下会被丢弃，但如果设置了关键字`fill`，则会将其用作背景图像 16 | 17 | 18 | ![111](https://developer.mozilla.org/files/3814/border-image-slice.png) 19 | 20 | -------------------------------------------------------------------------------- /html+css/css特效/border-image/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/css特效/border-image/demo.png -------------------------------------------------------------------------------- /html+css/css特效/border-image/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /html+css/fullpage/media/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/fullpage/media/car.png -------------------------------------------------------------------------------- /html+css/fullpage/media/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/fullpage/media/demo.png -------------------------------------------------------------------------------- /html+css/fullpage/media/ease.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/fullpage/media/ease.jpg -------------------------------------------------------------------------------- /html+css/fullpage/media/esse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/fullpage/media/esse.png -------------------------------------------------------------------------------- /html+css/fullpage/media/full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/fullpage/media/full.png -------------------------------------------------------------------------------- /html+css/fullpage/media/html.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/fullpage/media/html.jpg -------------------------------------------------------------------------------- /html+css/fullpage/media/shicha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/fullpage/media/shicha.png -------------------------------------------------------------------------------- /html+css/html手册.md: -------------------------------------------------------------------------------- 1 | ## script 2 | 3 | ### [\ 17 | 21 | 22 | 23 | 24 | 25 | 26 | ``` 27 | 28 | -------------------------------------------------------------------------------- /html+css/media/box.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/box.gif -------------------------------------------------------------------------------- /html+css/media/di.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/di.png -------------------------------------------------------------------------------- /html+css/media/dis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/dis.png -------------------------------------------------------------------------------- /html+css/media/fu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/fu.jpg -------------------------------------------------------------------------------- /html+css/media/gu.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/gu.jpeg -------------------------------------------------------------------------------- /html+css/media/guai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/guai.jpg -------------------------------------------------------------------------------- /html+css/media/guding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/guding.png -------------------------------------------------------------------------------- /html+css/media/ico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/ico.png -------------------------------------------------------------------------------- /html+css/media/icotu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/icotu.png -------------------------------------------------------------------------------- /html+css/media/jd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/jd.png -------------------------------------------------------------------------------- /html+css/media/kuihua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/kuihua.png -------------------------------------------------------------------------------- /html+css/media/ma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/ma.png -------------------------------------------------------------------------------- /html+css/media/pa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/pa.png -------------------------------------------------------------------------------- /html+css/media/san.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/san.png -------------------------------------------------------------------------------- /html+css/media/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/title.png -------------------------------------------------------------------------------- /html+css/media/w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/w.png -------------------------------------------------------------------------------- /html+css/media/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/x.png -------------------------------------------------------------------------------- /html+css/media/xia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/xia.jpg -------------------------------------------------------------------------------- /html+css/media/xiong.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/xiong.jpeg -------------------------------------------------------------------------------- /html+css/media/you.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/media/you.png -------------------------------------------------------------------------------- /html+css/rem适配究极版/index.scss: -------------------------------------------------------------------------------- 1 | @function rem($value){ 2 | @return 0.02rem*$value 3 | } -------------------------------------------------------------------------------- /html+css/rem适配究极版/最基本的rem.js: -------------------------------------------------------------------------------- 1 | // 设置 rem 函数 2 | function setRem () { 3 | // 4 | const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth 5 | // 得到html的Dom元素 6 | const htmlDom = document.getElementsByTagName('html')[0] 7 | // 设置根元素字体大小 8 | htmlDom.style.fontSize = htmlWidth / 10 + 'px' 9 | } 10 | // 初始化 11 | setRem() 12 | // 改变窗口大小时重新设置 rem 13 | window.onresize = function () { 14 | setRem() 15 | } -------------------------------------------------------------------------------- /html+css/sass scss less/_base.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | } -------------------------------------------------------------------------------- /html+css/sass scss less/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /html+css/sass scss less/style.less: -------------------------------------------------------------------------------- 1 | .flex-center { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | } 6 | 7 | // extend 继承 8 | .demo { 9 | &:extend(.flex-center) 10 | } -------------------------------------------------------------------------------- /html+css/script的crossorigin属性 - 简书.lnk: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/script的crossorigin属性 - 简书.lnk -------------------------------------------------------------------------------- /html+css/svg/svg/demo1/a.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/html+css/svg/svg/demo1/a.svg -------------------------------------------------------------------------------- /html+css/svg/svg/demo1/index.js: -------------------------------------------------------------------------------- 1 | var button=document.querySelector('.upload-button') 2 | 3 | button.addEventListener('click',()=>{ 4 | 5 | button.classList.replace('uploaded','uploading') 6 | setTimeout(() => { 7 | 8 | button.classList.replace('uploading','uploaded') 9 | }, 5000); 10 | }) -------------------------------------------------------------------------------- /html+css/svg/贝塞尔曲线/README.md: -------------------------------------------------------------------------------- 1 | [svg中path贝塞尔曲线和圆弧图文详解](https://blog.csdn.net/chenjiebin/article/details/120775166) 2 | 3 | [深入理解贝塞尔曲线](https://juejin.cn/post/6844903666361565191#heading-6) 4 | 5 | [贝塞尔曲线手动调整](https://cubic-bezier.com/#.42,0,.58,1) -------------------------------------------------------------------------------- /html+css/媒体查询/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: greenyellow; 3 | } 4 | -------------------------------------------------------------------------------- /html+css/媒体查询/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 13 | 14 | 15 | 16 | 17 | 啊啊啊你好啊 18 | 19 | 20 | -------------------------------------------------------------------------------- /html+css/滚动条/scrollbar.md: -------------------------------------------------------------------------------- 1 | # [修改滚动条样式](https://www.cnblogs.com/kugeliu/p/7196656.html) 2 | 3 | -------------------------------------------------------------------------------- /html+css/适配/1.适配iphoneX 底部横杠.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /html+css/适配/2.H5软键盘适配/README.md: -------------------------------------------------------------------------------- 1 | 安卓fixed到底部 ios dom.scroll到底部 2 | 3 | https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll 4 | 5 | ```javascript 6 | window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight)); 7 | ``` 8 | 9 | 等ios 兼容性起来了可以用这个 10 | https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport 11 | 获取ios键盘弹起后的可视界面的高度 12 | 13 | ### [可能这些是你想要的H5软键盘兼容方案](https://segmentfault.com/a/1190000018959389) -------------------------------------------------------------------------------- /js/ES6 Reflect/ES6之Reflect - 简书.url: -------------------------------------------------------------------------------- 1 | [InternetShortcut] 2 | URL=https://www.jianshu.com/p/4a5eca0536c3 3 | -------------------------------------------------------------------------------- /js/ES6 class类 原型链/原型链.md: -------------------------------------------------------------------------------- 1 | ```javascript 2 | class Test{ 3 | age=2 //这也是给构造函数拿去实例化对象了，和原型一点关系没有 4 | constructor(){ 5 | this.name='dd'// 这是给实例初始化的 6 | } 7 | // 这是给了原型 8 | getName(){ 9 | console.log(this.name) 10 | } 11 | } 12 | 13 | let test=new Test() 14 | console.log(test) //{age:2,} 15 | ``` 16 | 17 | 18 | 19 | class的constructor里的东西只是为了实例化对象而存在，属性是不会给到原型的，class里的非静态方法是会的 20 | 21 | class对应的构造函数Test的prototype指向原型，原型的constructor指向这个构造函数Test,Test的constructor是native code 也就是指向自己。 22 | 23 | Test的实例化对象test的constructor就是指向Test（用于记录实例是由哪个构造函数创建），也就是原型的constructor -------------------------------------------------------------------------------- /js/ES6 class类 原型链/原型链.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/js/ES6 class类 原型链/原型链.png -------------------------------------------------------------------------------- /js/JS如何设置盒模型的宽和高以及获取距离.md: -------------------------------------------------------------------------------- 1 | //只能获取内联样式设置的宽高 2 | dom.style.width/height 3 | 4 | //获取渲染后即时运行的宽高，值是准确的。但只支持 IE 5 | dom.currentStyle.width/height 6 | 7 | //获取渲染后即时运行的宽高，值是准确的。兼容性更好 8 | window.getComputedStyle(dom).width/height; 9 | 10 | //获取渲染后即时运行的宽高，值是准确的。兼容性也很好，一般用来获取元素的绝对位置，getBoundingClientRect()会得到4个值：left, top, width, height 11 | dom.getBoundingClientRect().width/height; 12 | 13 | 14 | 15 | ![](https://raw.githubusercontent.com/zhang874010534/tuchuan/main/js/dom%E8%B7%9D%E7%A6%BB.png) -------------------------------------------------------------------------------- /js/Web Worker/Shared Worker/worker.js: -------------------------------------------------------------------------------- 1 | 2 | const connections = [] 3 | console.log(123) 4 | self.addEventListener('connect' , (event) => { 5 | const port = event.ports[0]; 6 | connections.push(port); 7 | 8 | port.addEventListener('message', event => { 9 | const message = event.data; 10 | // 处理消息 11 | // 将响应发送回窗口 12 | connections.forEach(connection => { 13 | connection.postMessage('Hello from the SharedWorker!'); 14 | }); 15 | }); 16 | port.postMessage('连接成功') 17 | 18 | port.start(); 19 | }) 20 | -------------------------------------------------------------------------------- /js/drag event/drag.md: -------------------------------------------------------------------------------- 1 | ### [drag event](https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event) （英文 用法） [drag event](https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent)（中文） 2 | 3 | -------------------------------------------------------------------------------- /js/e.currentTarget.dataset.txt: -------------------------------------------------------------------------------- 1 | data-xxx -------------------------------------------------------------------------------- /js/e.target.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/js/e.target.txt -------------------------------------------------------------------------------- /js/json/JSON.parse.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/js/json/JSON.parse.txt -------------------------------------------------------------------------------- /js/optional chaining/optional chaining.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /js/promise/Promise.resolve().html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /js/promise/debug.log: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/js/promise/debug.log -------------------------------------------------------------------------------- /js/promise/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /js/websocket/socket.io/app.js: -------------------------------------------------------------------------------- 1 | // 创建一个http的server 2 | let app = require('http').createServer(); 3 | 4 | // 支持跨域 5 | let io =require('socket.io')(app,{ cors: true}); 6 | 7 | let PORT = 8848; 8 | app.listen(PORT); 9 | 10 | let clientCount = 0; 11 | 12 | 13 | console.log('port',PORT); 14 | io.on('connection',function(socket){ 15 | clientCount ++; 16 | socket.nickname = 'user' + clientCount; 17 | // 这是进行了广播 18 | io.emit('enter',socket.nickname + 'comes in'); 19 | socket.on('message',function(str){ 20 | io.emit('message', socket.nickname + 'says' + str); 21 | }) 22 | socket.on('disconnect',function(){ 23 | io.emit('leave', socket.nickname + 'left'); 24 | }) 25 | }) -------------------------------------------------------------------------------- /js/websocket/websocket node wx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "websocket", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "ws": "^7.4.4" 8 | }, 9 | "devDependencies": {}, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "author": "", 14 | "license": "ISC" 15 | } 16 | -------------------------------------------------------------------------------- /js/函数柯里化❀/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /js/宏任务和微任务 浏览器渲染/async await promise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 11 | 12 | 13 | 14 |
15 | {{demo}} 16 | 17 |
18 | 19 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /js/宏任务和微任务 浏览器渲染/images/event loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/js/宏任务和微任务 浏览器渲染/images/event loop.png -------------------------------------------------------------------------------- /js/宏任务和微任务 浏览器渲染/images/webkit render.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/js/宏任务和微任务 浏览器渲染/images/webkit render.png -------------------------------------------------------------------------------- /js/小技巧 各种工具代码/1.剪切板和复制粘贴/复制文本input实现 兼容性好.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 10 | 11 | 12 | 13 | 14 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /js/小技巧 各种工具代码/5.前端录像.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /js/小技巧 各种工具代码/复制功能.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 10 | 11 | 12 | 13 | 14 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /js/小技巧 各种工具代码/小技巧.md: -------------------------------------------------------------------------------- 1 | ### [!!通常用来做类型判断，就是双重否定等于肯定的意思](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators) 2 | 3 | ```javascript 4 | let a ; 5 | // if (a !== undefined && a !== null && a !== '') { 6 | // console.log(1); 7 | // } 8 | if (!!a) { 9 | console.log(1); 10 | } 11 | ``` 12 | 13 | -------------------------------------------------------------------------------- /js/小技巧 各种工具代码/鼠标按下移动dom.js: -------------------------------------------------------------------------------- 1 | export function move(e){ 2 | let dom=e.target 3 | //阻止默认事件的方法,如果不阻止默认事件onmouseup会无法触发 4 | e.preventDefault(); 5 | let disX = e.clientX - dom.offsetLeft; 6 | let disY = e.clientY - dom.offsetTop; 7 | document.onmousemove=function (e) { 8 | //因为img居中对齐，所以还要减去目标元素距离body的偏移量 9 | let left = e.clientX - disX ; 10 | let top = e.clientY - disY; 11 | //移动当前元素 12 | dom.style.left = left + 'px'; 13 | dom.style.top = top + 'px'; 14 | } 15 | document.onmouseup = (e) => { 16 | document.onmousemove = null; 17 | document.onmouseup = null; 18 | } -------------------------------------------------------------------------------- /js/常见手写/数组扁平化处理/reduce实现flat.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 10 | 11 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /js/常见手写/简单实现const/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /js/正则表达式.md: -------------------------------------------------------------------------------- 1 | #### 限制4位整数2位小数正则 2 | 3 | ```js 4 | number(newVal, oldval) { 5 | const regexp = /^\d{0,4}(\.\d{0,2})?$/ 6 | // const regexp = /^\d+(\.\d{0,2})?$/ 7 | if((regexp.test(newVal) || newVal === '') && newVal !== '0'){ 8 | this.number = newVal 9 | } 10 | } 11 | ``` 12 | 13 | -------------------------------------------------------------------------------- /js/深拷贝/concat深拷贝.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 18 | 19 | -------------------------------------------------------------------------------- /js/深拷贝/展开运算符一层深拷贝.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 16 | 17 | -------------------------------------------------------------------------------- /js/深拷贝/数组slice深拷贝(只有一层).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /js/算法/README.md: -------------------------------------------------------------------------------- 1 | ### 算法的时间与空间复杂度 2 | 3 | > https://zhuanlan.zhihu.com/p/50479555 4 | 5 | -------------------------------------------------------------------------------- /js/算法/排序/插入排序.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | f 11 | 12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /js/进程和线程/进程和线程.md: -------------------------------------------------------------------------------- 1 | https://juejin.im/post/6876623829574090760#heading-87 2 | 3 | ### 进程和线程的区别： 4 | 5 | - 进程是资源分配的最小单位，线程是CPU调度的最小单位 6 | - 线程在进程下行进（单纯的车厢无法运行） 7 | - 一个进程可以包含多个线程（一辆火车可以有多个车厢） 8 | - 不同进程间数据很难共享（一辆火车上的乘客很难换到另外一辆火车，比如站点换乘） 9 | - 同一进程下不同线程间数据很易共享（A车厢换到B车厢很容易） 10 | - 进程要比线程消耗更多的计算机资源（采用多列火车相比多个车厢更耗资源） 11 | - 进程间不会相互影响，一个线程挂掉将导致整个进程挂掉（一列火车不会影响到另外一列火车，但是如果一列火车上中间的一节车厢着火了，将影响到所有车厢）进程可以拓展到多机，进程最多适合多核（不同火车可以开在多个轨道上，同一火车的车厢不能在行进的不同的轨道上） 进程使用的内存地址可以上锁，即一个线程使用某些共享内存时，其他线程必须等它结束，才能使用这一块内存。（比如火车上的洗手间）－"互斥锁" 12 | - 进程使用的内存地址可以限定使用量（比如火车上的餐厅，最多只允许多少人进入，如果满了需要在门口等，等有人出来了才能进去）－“信号量” -------------------------------------------------------------------------------- /js/闭包 作用域 作用域链 执行上下文/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 29 | 30 | -------------------------------------------------------------------------------- /js/闭包 作用域 作用域链 执行上下文/this历史遗留问题.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /js/闭包 作用域 作用域链 执行上下文/内存泄漏.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
你好啊
10 | 19 | 20 | -------------------------------------------------------------------------------- /js/闭包 作用域 作用域链 执行上下文/闭包面试题.md: -------------------------------------------------------------------------------- 1 | ```js 2 | function fun(n, o) { 3 | console.log(n, o); 4 | return { 5 | fun: function (m) { 6 | return fun(m, n); 7 | } 8 | }; 9 | } 10 | // return和后面的没啥关系所以o都是一开始的0 11 | var a = fun(0); //0,undefined 12 | a.fun(1); //1,0 13 | a.fun(2); //2,0 14 | 15 | // a.fun(3); //undefined,?,?,? 16 | // var b = fun(0).fun(1).fun(2).fun(3); //undefined,?,?,? 17 | // var c = fun(0).fun(1); 18 | // c.fun(2); 19 | // c.fun(3); //undefined,?,?,? 20 | ``` 21 | 22 | -------------------------------------------------------------------------------- /node/express 小服务器/demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello" 3 | } -------------------------------------------------------------------------------- /node/node学习/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/node学习/README.md -------------------------------------------------------------------------------- /node/npm/README.md: -------------------------------------------------------------------------------- 1 | ## npm root -g 查看全局目录 2 | 3 | ## npm view vue versions 查看vue可以下载的所有版本 -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/1_close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/1_close.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/1_open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/1_open.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/2.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/3.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/4.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/5.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/6.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/7.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/8.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/diy/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/diy/9.png -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/line_conn.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/line_conn.gif -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/loading.gif -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/zTreeStandard.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/zTreeStandard.gif -------------------------------------------------------------------------------- /node/npm/preview/toc/css/zTreeStyle/img/zTreeStandard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/npm/preview/toc/css/zTreeStyle/img/zTreeStandard.png -------------------------------------------------------------------------------- /node/npm/preview/toc_conf.js: -------------------------------------------------------------------------------- 1 | var jquery_ztree_toc_opts = { 2 | debug:false, 3 | is_auto_number:true, 4 | documment_selector:'.markdown-body', 5 | ztreeStyle: { 6 | width:'326px', 7 | overflow: 'auto', 8 | position: 'fixed', 9 | 'z-index': 2147483647, 10 | border: '0px none', 11 | left: '0px', 12 | top: '0px', 13 | // 'overflow-x': 'hidden', 14 | 'height': $(window).height() + 'px' 15 | } 16 | } 17 | var markdown_panel_style = { 18 | 'width':'70%', 19 | 'margin-left':'25%' 20 | }; -------------------------------------------------------------------------------- /node/nvm/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/nvm/img/1.png -------------------------------------------------------------------------------- /node/nvm/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/nvm/img/2.png -------------------------------------------------------------------------------- /node/pnpm/README.MD: -------------------------------------------------------------------------------- 1 | ### Command 2 | 3 | #### [pnpm store prune](https://pnpm.io/cli/store#prune) 4 | 5 | > 清理缓存 6 | -------------------------------------------------------------------------------- /node/webstorm 设置 添加Node代码提示/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/node/webstorm 设置 添加Node代码提示/1.png -------------------------------------------------------------------------------- /react/1.React.createContext/1-child.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {appContext} from './index' 3 | interface IRobot { 4 | } 5 | const Robot : React.FC = ({}) => { 6 | return ( 7 | 8 | {(value) => { 9 | return
  • 10 |

    {value.username}

    11 |
    • 12 | }} 13 |     14 | ) 15 | 16 | } 17 | // function Robot():React.FC { 18 | // return <> 19 | // } 20 | export default Robot -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/.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/10.redux 和redux toolkit 简化版本/redux-demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/10.redux 和redux toolkit 简化版本/redux-demo/public/favicon.ico -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/10.redux 和redux toolkit 简化版本/redux-demo/public/logo192.png -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/10.redux 和redux toolkit 简化版本/redux-demo/public/logo512.png -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/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/10.redux 和redux toolkit 简化版本/redux-demo/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/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/10.redux 和redux toolkit 简化版本/redux-demo/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/10.redux 和redux toolkit 简化版本/redux-demo/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 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/src/redux/learnReducer/learnAction.ts: -------------------------------------------------------------------------------- 1 | interface IAction { 2 | type: 'add', 3 | payload: number 4 | } 5 | export type IActionType = IAction 6 | export const createLearnAction = (payload: number): IAction => { 7 | return { 8 | type: 'add', 9 | payload 10 | } 11 | } -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/src/redux/learnReducer/learnReducer.ts: -------------------------------------------------------------------------------- 1 | import { IActionType } from './learnAction' 2 | 3 | const defaultState = 0; 4 | const reducer = (state = defaultState, action: IActionType) => { 5 | switch (action.type) { 6 | case 'add': 7 | return state + action.payload 8 | default: 9 | return state 10 | break; 11 | } 12 | }; 13 | 14 | export default reducer; 15 | -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | import { createStore,combineReducers } from "redux"; 2 | import learnReducer from './learnReducer/learnReducer' 3 | const rootReducer = combineReducers({ 4 | learnReducer 5 | }) 6 | const store = createStore(rootReducer) 7 | 8 | export default store 9 | -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-demo/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/10.redux 和redux toolkit 简化版本/redux-demo/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/10.redux 和redux toolkit 简化版本/redux-demo/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-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-toolkit/.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/10.redux 和redux toolkit 简化版本/redux-toolkit/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/10.redux 和redux toolkit 简化版本/redux-toolkit/public/favicon.ico -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-toolkit/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/10.redux 和redux toolkit 简化版本/redux-toolkit/public/logo192.png -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-toolkit/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/10.redux 和redux toolkit 简化版本/redux-toolkit/public/logo512.png -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-toolkit/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/10.redux 和redux toolkit 简化版本/redux-toolkit/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-toolkit/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/10.redux 和redux toolkit 简化版本/redux-toolkit/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/10.redux 和redux toolkit 简化版本/redux-toolkit/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-toolkit/src/redux/hook.ts: -------------------------------------------------------------------------------- 1 | import { useSelector as useReduxSelector, TypedUseSelectorHook } from "react-redux"; 2 | import { RootState } from "./store"; 3 | 4 | export const useSelector: TypedUseSelectorHook = useReduxSelector -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-toolkit/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers,configureStore } from '@reduxjs/toolkit' 2 | import { learnSlice } from "./learn/slice"; 3 | const rootReducer = combineReducers({ 4 | learnReducer: learnSlice.reducer 5 | }) 6 | const store = configureStore({ 7 | reducer: rootReducer 8 | }) 9 | export type RootState = ReturnType 10 | export default store -------------------------------------------------------------------------------- /react/10.redux 和redux toolkit 简化版本/redux-toolkit/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/10.redux 和redux toolkit 简化版本/redux-toolkit/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/10.redux 和redux toolkit 简化版本/redux-toolkit/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-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /react/2.HOC高阶组件/Robot.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useState } from 'react' 2 | import {withAddToCart} from "./AddToCart"; 3 | export interface IRobot { 4 | name: string, 5 | addToCart: (id:number, name: string) => void 6 | } 7 | const Robot : React.FC = ({addToCart}) => { 8 | return ( 9 |
  • 10 | 11 |
    • 12 | ) 13 | 14 | } 15 | // function Robot():React.FC { 16 | // return <> 17 | // } 18 | export default withAddToCart(Robot) -------------------------------------------------------------------------------- /react/3.withRouter 让子组件的props可以拿到router的东西 和hooks/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withRouter, RouteComponentProps, useHistory, useLocation, useParams, useRouteMatch } from "react-router-dom"; 3 | 4 | interface PropsType extends RouteComponentProps{ 5 | name: string 6 | } 7 | const HeaderComponent:React.FC = (props) => { 8 | let { history } = props 9 | const location = useLocation() 10 | console.log(location) 11 | return
    { 12 | history.push('/signIn') 13 | }}>header
    14 | } 15 | export const Header = withRouter(HeaderComponent) 16 | -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux class版本/store.ts: -------------------------------------------------------------------------------- 1 | import { createStore } from "redux"; 2 | import languageReducer from "./language/languageReducer"; 3 | 4 | const store = createStore(languageReducer); 5 | 6 | export type RootState = ReturnType 7 | 8 | export default store; -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | "no-unused-vars": "off", 4 | "@typescript-eslint/no-unused-vars": "off", 5 | } 6 | } -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/.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/4.redux && react-redux/react-redux hook版本/README.md: -------------------------------------------------------------------------------- 1 | ## 主要看header 组件 2 | 3 | ### src\redux\hooks.ts 4 | 5 | 通过TypedUseSelectorHook处理 react-redux 里的useSelector 6 | 7 | 给他添加类型并返回 8 | 9 | ### useSelector可以拿到store里的数据 10 | 11 | const language = useSelector((*state*) => *state*.language) 12 | 13 | ### import { useDispatch } from "react-redux"; 14 | 15 | const dispatch = useDispatch() 16 | 17 | 分发 18 | 19 | let action = changeLanguageActionCreator('en') 20 | 21 | dispatch(action) 22 | 23 | -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/4.redux && react-redux/react-redux hook版本/public/favicon.ico -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/4.redux && react-redux/react-redux hook版本/public/logo192.png -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/4.redux && react-redux/react-redux hook版本/public/logo512.png -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/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/4.redux && react-redux/react-redux hook版本/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/src/App.module.css: -------------------------------------------------------------------------------- 1 | .demo { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/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/4.redux && react-redux/react-redux hook版本/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter, Route, Switch } from "react-router-dom"; 3 | import Home from "./pages/home/Home"; 4 | const App:React.FC = () => { 5 | return
    6 | 7 | 8 | 9 |
    signIn
    }>     10 |
    404
    }>     11 |     12 | 13 |     14 |
    15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/src/components/Link/Link.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RouteComponentProps } from "react-router-dom"; 3 | interface PropsType extends RouteComponentProps{ 4 | to: string 5 | } 6 | const Link:React.FC = ({ to, history, children}) => { 7 | return {history.push('')}}> 8 | {children} 9 | 10 | } 11 | export default Link -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './header/Header' 2 | // export * from './header/Header.class' -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/src/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": { 3 | "name": "i am name of header" 4 | } 5 | } -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/src/i18n/zh.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": { 3 | "name": "我是头的名字" 4 | } 5 | } -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/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/4.redux && react-redux/react-redux hook版本/src/pages/home/a.module.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | width: 30px; 3 | height: 30px; 4 | } 5 | .title{ 6 | display: inline-block; 7 | color: white !important; 8 | } -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/src/redux/hooks.ts: -------------------------------------------------------------------------------- 1 | import { useSelector as useReduxSelector, TypedUseSelectorHook } from "react-redux"; 2 | import { RootState } from "../redux/store"; 3 | 4 | export const useSelector: TypedUseSelectorHook = useReduxSelector -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | import { createStore } from "redux"; 2 | import languageReducer from "./language/languageReducer"; 3 | 4 | const store = createStore(languageReducer); 5 | 6 | console.log(typeof store.getState) 7 | export type RootState = ReturnType 8 | 9 | export default store; -------------------------------------------------------------------------------- /react/4.redux && react-redux/react-redux hook版本/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/4.redux && react-redux/react-redux hook版本/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/4.redux && react-redux/redux/redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/4.redux && react-redux/redux/redux.png -------------------------------------------------------------------------------- /react/4.redux && react-redux/redux/store.ts: -------------------------------------------------------------------------------- 1 | import { createStore } from "redux"; 2 | import languageReducer from "./language/languageReducer"; 3 | 4 | const store = createStore(languageReducer); 5 | 6 | export default store; -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/Readme.md: -------------------------------------------------------------------------------- 1 | #### Provider一个store 修饰符@observer修饰class props里拿store 2 | 3 | #### Provider一个store inject observer 高阶函数处理函数式组件 prop里拿store 4 | 5 | 6 | 7 | #### React.createContext 写一个函数 useStore return React.useContext 8 | 9 | #### 执行 useStore() 就拿到store了 可以随便用 10 | 11 | #### import { useObserver} from "mobx-react"; 12 | 13 | #### 组件返回 return useObserver(() => {}) 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/class和函数式的mobx mobx-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/5.mobx && mobx-react/class和函数式的mobx mobx-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/5.mobx && mobx-react/class和函数式的mobx mobx-react/public/favicon.ico -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/class和函数式的mobx mobx-react/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/5.mobx && mobx-react/class和函数式的mobx mobx-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/class和函数式的mobx mobx-react/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/5.mobx && mobx-react/class和函数式的mobx mobx-react/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import stores from './store' 4 | import { Provider } from "mobx-react"; 5 | import { HashRouter, Switch, Route } from "react-router-dom"; 6 | // import Header from "./components/headerClass"; 7 | import Header from "./components/headerHook"; 8 | function App() { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/class和函数式的mobx mobx-react/src/components/headerClass.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer,ProviderProps, inject} from "mobx-react"; 3 | 4 | @inject('TestStore') 5 | @observer 6 | class Header extends React.Component { 7 | render(){ 8 | return
    9 |
    {this.props.TestStore.Count}
    10 | 14 |
    15 | } 16 | } 17 | export default Header -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/class和函数式的mobx mobx-react/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/5.mobx && mobx-react/class和函数式的mobx mobx-react/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 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/class和函数式的mobx mobx-react/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/class和函数式的mobx mobx-react/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/5.mobx && mobx-react/class和函数式的mobx mobx-react/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/5.mobx && mobx-react/class和函数式的mobx mobx-react/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import TestStore from './module/TestStore' 2 | 3 | const stores = { 4 | TestStore 5 | } 6 | export default stores -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/class和函数式的mobx mobx-react/src/store/module/TestStore.ts: -------------------------------------------------------------------------------- 1 | import { observable, action, makeAutoObservable } from "mobx"; 2 | 3 | // 6.0语法 4 | class TestStore { 5 | Count = 0; 6 | constructor(){ 7 | makeAutoObservable(this) 8 | } 9 | @action changeCount = () => { 10 | this.Count = this.Count + 1; 11 | } 12 | } 13 | // 5.0语法 14 | // class TestStore { 15 | // @observable Count = 0; 16 | // @action changeCount = () => { 17 | // this.Count = this.Count + 1; 18 | // } 19 | // } 20 | export default new TestStore() -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-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/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/public/favicon.ico -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/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/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/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/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/src/components/headerClass.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { observer,ProviderProps, inject} from "mobx-react"; 3 | 4 | @inject('TestStore') 5 | @observer 6 | class Header extends React.Component { 7 | render(){ 8 | return
    9 |
    {this.props.TestStore.Count}
    10 | 14 |
    15 | } 16 | } 17 | export default Header -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/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/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/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 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/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/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/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/5.mobx && mobx-react/hook && mobx-react-lite(现在包含在mobx-react里了)/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import TestStore from './module/TestStore' 3 | 4 | export const stores = { 5 | TestStore 6 | } 7 | const StoreContext = React.createContext({ 8 | TestStore 9 | }) 10 | export const useStore = () => React.useContext(StoreContext) -------------------------------------------------------------------------------- /react/6.combineReducers/redux/Readme.md: -------------------------------------------------------------------------------- 1 | 看store.ts combineReducers -------------------------------------------------------------------------------- /react/6.combineReducers/redux/hooks.ts: -------------------------------------------------------------------------------- 1 | import { useSelector as useReduxSelector, TypedUseSelectorHook } from "react-redux"; 2 | import { RootState } from "../redux/store"; 3 | 4 | export const useSelector: TypedUseSelectorHook = useReduxSelector -------------------------------------------------------------------------------- /react/6.combineReducers/redux/recommendReducer/recommendAction.ts: -------------------------------------------------------------------------------- 1 | export const ADD_LIST = 'add_list' 2 | interface IAddList { 3 | type: typeof ADD_LIST, 4 | payload: { 5 | name: string 6 | } 7 | } 8 | export type recommendAction = IAddList; 9 | export const createAddListAction = (name: string):IAddList => { 10 | return { 11 | type: ADD_LIST, 12 | payload: { 13 | name: name 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /react/6.combineReducers/redux/recommendReducer/recommendReducer.ts: -------------------------------------------------------------------------------- 1 | import { recommendAction, ADD_LIST } from "./recommendAction"; 2 | interface IRecommendState { 3 | productionList: any[] 4 | } 5 | 6 | const defaultState: IRecommendState = { 7 | productionList: [] 8 | } 9 | export default (state = defaultState, action: recommendAction) => { 10 | switch (action.type) { 11 | case ADD_LIST: 12 | return { 13 | ...state, 14 | productionList: state.productionList.push(action.payload) 15 | } 16 | default: 17 | break; 18 | } 19 | return state 20 | } -------------------------------------------------------------------------------- /react/6.combineReducers/redux/store.ts: -------------------------------------------------------------------------------- 1 | import { createStore, combineReducers } from "redux"; 2 | import languageReducer from "./language/languageReducer"; 3 | import recommendReducer from "./recommendReducer/recommendReducer"; 4 | 5 | const rootReducer = combineReducers({ 6 | languageReducer, 7 | recommendReducer 8 | }) 9 | const store = createStore(rootReducer); 10 | 11 | console.log(typeof store.getState) 12 | export type RootState = ReturnType 13 | 14 | export default store; -------------------------------------------------------------------------------- /react/7.middleware中间件/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | "no-unused-vars": "off", 4 | "@typescript-eslint/no-unused-vars": "off", 5 | } 6 | } -------------------------------------------------------------------------------- /react/7.middleware中间件/.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/7.middleware中间件/README.md: -------------------------------------------------------------------------------- 1 | ### 去看redux/store.ts 和redux/middlewares/actionLog.ts 2 | 3 | ```typescript 4 | // applyMiddleware 简单源码 5 | const applyMiddleware = function(middleware: any) { 6 | let next = store.dispatch 7 | store.dispatch = middleware(store)(next) 8 | } 9 | 10 | ``` 11 | 12 | ### 异步方法giveMeDataCreator 13 | 14 | 在 src\redux\recommendReducer\recommendAction.ts 15 | 16 | -------------------------------------------------------------------------------- /react/7.middleware中间件/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/7.middleware中间件/public/favicon.ico -------------------------------------------------------------------------------- /react/7.middleware中间件/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/7.middleware中间件/public/logo192.png -------------------------------------------------------------------------------- /react/7.middleware中间件/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/7.middleware中间件/public/logo512.png -------------------------------------------------------------------------------- /react/7.middleware中间件/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/7.middleware中间件/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/7.middleware中间件/src/App.module.css: -------------------------------------------------------------------------------- 1 | .demo { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /react/7.middleware中间件/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/7.middleware中间件/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter, Route, Switch } from "react-router-dom"; 3 | import Home from "./pages/home/Home"; 4 | const App:React.FC = () => { 5 | return
    6 | 7 | 8 | 9 |
    signIn
    }>     10 |
    404
    }>     11 |     12 | 13 |     14 |
    15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /react/7.middleware中间件/src/components/Link/Link.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RouteComponentProps } from "react-router-dom"; 3 | interface PropsType extends RouteComponentProps{ 4 | to: string 5 | } 6 | const Link:React.FC = ({ to, history, children}) => { 7 | return {history.push('')}}> 8 | {children} 9 | 10 | } 11 | export default Link -------------------------------------------------------------------------------- /react/7.middleware中间件/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | // export * from './header/Header' 2 | export * from './header/Header.class' -------------------------------------------------------------------------------- /react/7.middleware中间件/src/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": { 3 | "name": "i am name of header" 4 | } 5 | } -------------------------------------------------------------------------------- /react/7.middleware中间件/src/i18n/zh.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": { 3 | "name": "我是头的名字" 4 | } 5 | } -------------------------------------------------------------------------------- /react/7.middleware中间件/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/7.middleware中间件/src/pages/home/a.module.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | width: 30px; 3 | height: 30px; 4 | } 5 | .title{ 6 | display: inline-block; 7 | color: white !important; 8 | } -------------------------------------------------------------------------------- /react/7.middleware中间件/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/7.middleware中间件/src/redux/hooks.ts: -------------------------------------------------------------------------------- 1 | import { useSelector as useReduxSelector, TypedUseSelectorHook } from "react-redux"; 2 | import { RootState } from "../redux/store"; 3 | 4 | export const useSelector: TypedUseSelectorHook = useReduxSelector -------------------------------------------------------------------------------- /react/7.middleware中间件/src/redux/middlewares/actionLog.ts: -------------------------------------------------------------------------------- 1 | import { Middleware } from "redux"; 2 | 3 | export const actionLog: Middleware = (store) => (next) => (action) => { 4 | console.log('state old', store.getState()) 5 | // next 其实就是dispatch 6 | next(action) 7 | console.log('state new', store.getState()) 8 | } -------------------------------------------------------------------------------- /react/7.middleware中间件/src/redux/recommendReducer/recommendReducer.ts: -------------------------------------------------------------------------------- 1 | import { recommendAction, ADD_LIST } from "./recommendAction"; 2 | interface IRecommendState { 3 | productionList: any[] 4 | } 5 | 6 | const defaultState: IRecommendState = { 7 | productionList: [] 8 | } 9 | export default (state = defaultState, action: recommendAction) => { 10 | switch (action.type) { 11 | case ADD_LIST: 12 | return { 13 | ...state, 14 | productionList: state.productionList.push(action.payload) 15 | } 16 | default: 17 | break; 18 | } 19 | return state 20 | } -------------------------------------------------------------------------------- /react/7.middleware中间件/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/7.middleware中间件/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/8.redux toolkit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | "no-unused-vars": "off", 4 | "@typescript-eslint/no-unused-vars": "off", 5 | } 6 | } -------------------------------------------------------------------------------- /react/8.redux toolkit/.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/8.redux toolkit/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/8.redux toolkit/public/favicon.ico -------------------------------------------------------------------------------- /react/8.redux toolkit/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/8.redux toolkit/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/8.redux toolkit/src/App.module.css: -------------------------------------------------------------------------------- 1 | .demo { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /react/8.redux toolkit/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/8.redux toolkit/src/components/Link/Link.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RouteComponentProps } from "react-router-dom"; 3 | interface PropsType extends RouteComponentProps{ 4 | to: string 5 | } 6 | const Link:React.FC = ({ to, history, children}) => { 7 | return {history.push('')}}> 8 | {children} 9 | 10 | } 11 | export default Link -------------------------------------------------------------------------------- /react/8.redux toolkit/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | // export * from './header/Header' 2 | export * from './header/Header.class' -------------------------------------------------------------------------------- /react/8.redux toolkit/src/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": { 3 | "name": "i am name of header" 4 | } 5 | } -------------------------------------------------------------------------------- /react/8.redux toolkit/src/i18n/zh.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": { 3 | "name": "我是头的名字" 4 | } 5 | } -------------------------------------------------------------------------------- /react/8.redux toolkit/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/8.redux toolkit/src/pages/detail/DetailPage.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { RouteComponentProps, useParams } from "react-router-dom"; 3 | 4 | interface PropsType { 5 | touristId: string 6 | } 7 | const DetailPage:React.FC> = (props) => { 8 | let { touristId } = useParams() 9 | const [loading, setLoading] = useState(true) 10 | const [product, setProduct] = useState(null) 11 | useEffect(() => { 12 | 13 | }, []) 14 | return
    detail
    15 | } 16 | export default DetailPage -------------------------------------------------------------------------------- /react/8.redux toolkit/src/pages/home/a.module.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | width: 30px; 3 | height: 30px; 4 | } 5 | .title{ 6 | display: inline-block; 7 | color: white !important; 8 | } -------------------------------------------------------------------------------- /react/8.redux toolkit/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/8.redux toolkit/src/redux/hooks.ts: -------------------------------------------------------------------------------- 1 | import { useSelector as useReduxSelector, TypedUseSelectorHook } from "react-redux"; 2 | import { RootState } from "../redux/store"; 3 | 4 | export const useSelector: TypedUseSelectorHook = useReduxSelector -------------------------------------------------------------------------------- /react/8.redux toolkit/src/redux/middlewares/actionLog.ts: -------------------------------------------------------------------------------- 1 | import { Middleware } from "redux"; 2 | 3 | export const actionLog: Middleware = (store) => (next) => (action) => { 4 | // console.log('state old', store.getState()) 5 | // next 其实就是dispatch 6 | next(action) 7 | // console.log('state new', store.getState()) 8 | } -------------------------------------------------------------------------------- /react/8.redux toolkit/src/redux/recommendReducer/recommendReducer.ts: -------------------------------------------------------------------------------- 1 | import { recommendAction, ADD_LIST } from "./recommendAction"; 2 | interface IRecommendState { 3 | productionList: any[] 4 | } 5 | 6 | const defaultState: IRecommendState = { 7 | productionList: [] 8 | } 9 | export default (state = defaultState, action: recommendAction) => { 10 | switch (action.type) { 11 | case ADD_LIST: 12 | return { 13 | ...state, 14 | productionList: state.productionList.push(action.payload) 15 | } 16 | default: 17 | break; 18 | } 19 | return state 20 | } -------------------------------------------------------------------------------- /react/8.redux toolkit/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/8.redux toolkit/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/9.redux toolkit 异步请求 createAsyncThunk/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rules: { 3 | "no-unused-vars": "off", 4 | "@typescript-eslint/no-unused-vars": "off", 5 | } 6 | } -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/.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/9.redux toolkit 异步请求 createAsyncThunk/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/9.redux toolkit 异步请求 createAsyncThunk/public/favicon.ico -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/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/9.redux toolkit 异步请求 createAsyncThunk/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/src/App.module.css: -------------------------------------------------------------------------------- 1 | .demo { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/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/9.redux toolkit 异步请求 createAsyncThunk/src/components/Link/Link.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { RouteComponentProps } from "react-router-dom"; 3 | interface PropsType extends RouteComponentProps{ 4 | to: string 5 | } 6 | const Link:React.FC = ({ to, history, children}) => { 7 | return {history.push('')}}> 8 | {children} 9 | 10 | } 11 | export default Link -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | // export * from './header/Header' 2 | export * from './header/Header.class' -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/src/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": { 3 | "name": "i am name of header" 4 | } 5 | } -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/src/i18n/zh.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": { 3 | "name": "我是头的名字" 4 | } 5 | } -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/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/9.redux toolkit 异步请求 createAsyncThunk/src/pages/detail/DetailPage.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { RouteComponentProps, useParams } from "react-router-dom"; 3 | 4 | interface PropsType { 5 | touristId: string 6 | } 7 | const DetailPage:React.FC> = (props) => { 8 | let { touristId } = useParams() 9 | const [loading, setLoading] = useState(true) 10 | const [product, setProduct] = useState(null) 11 | useEffect(() => { 12 | 13 | }, []) 14 | return
    detail
    15 | } 16 | export default DetailPage -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/src/pages/home/a.module.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | width: 30px; 3 | height: 30px; 4 | } 5 | .title{ 6 | display: inline-block; 7 | color: white !important; 8 | } -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/src/redux/hooks.ts: -------------------------------------------------------------------------------- 1 | import { useSelector as useReduxSelector, TypedUseSelectorHook } from "react-redux"; 2 | import { RootState } from "../redux/store"; 3 | 4 | export const useSelector: TypedUseSelectorHook = useReduxSelector -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/src/redux/middlewares/actionLog.ts: -------------------------------------------------------------------------------- 1 | import { Middleware } from "redux"; 2 | 3 | export const actionLog: Middleware = (store) => (next) => (action) => { 4 | // console.log('state old', store.getState()) 5 | // next 其实就是dispatch 6 | next(action) 7 | // console.log('state new', store.getState()) 8 | } -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/src/redux/recommendReducer/recommendReducer.ts: -------------------------------------------------------------------------------- 1 | import { recommendAction, ADD_LIST } from "./recommendAction"; 2 | interface IRecommendState { 3 | productionList: any[] 4 | } 5 | 6 | const defaultState: IRecommendState = { 7 | productionList: [] 8 | } 9 | export default (state = defaultState, action: recommendAction) => { 10 | switch (action.type) { 11 | case ADD_LIST: 12 | return { 13 | ...state, 14 | productionList: state.productionList.push(action.payload) 15 | } 16 | default: 17 | break; 18 | } 19 | return state 20 | } -------------------------------------------------------------------------------- /react/9.redux toolkit 异步请求 createAsyncThunk/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/9.redux toolkit 异步请求 createAsyncThunk/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/context/.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/context/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/context/public/favicon.ico -------------------------------------------------------------------------------- /react/context/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/context/public/logo192.png -------------------------------------------------------------------------------- /react/context/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/context/public/logo512.png -------------------------------------------------------------------------------- /react/context/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/context/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /react/context/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /react/context/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/context/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /react/context/src/setupTests.js: -------------------------------------------------------------------------------- 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/extend-expect'; 6 | -------------------------------------------------------------------------------- /react/hooks/useLatest/index.js: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | 3 | function useLatest(value) { 4 | const ref = useRef(value); 5 | ref.current = value; 6 | 7 | return ref; 8 | } 9 | 10 | export default useLatest; 11 | -------------------------------------------------------------------------------- /react/hooks/useRafState/index.js: -------------------------------------------------------------------------------- 1 | import {useCallback, useRef, useState} from "react"; 2 | import {useUnmount} from "ahooks"; 3 | 4 | function useRafState(initialState) { 5 | const ref = useRef(0) 6 | const [state, setState] = useState(initialState) 7 | 8 | const setRafState = useCallback((value) => { 9 | cancelAnimationFrame(ref.current) 10 | ref.current = requestAnimationFrame(() => { 11 | setState(value) 12 | }) 13 | }, []) 14 | 15 | useUnmount(() => { 16 | cancelAnimationFrame(ref.current) 17 | }) 18 | return [state, setRafState] 19 | } 20 | export default useRafState 21 | -------------------------------------------------------------------------------- /react/hooks/useSize/index.js: -------------------------------------------------------------------------------- 1 | import useRafState from "../useRafState"; 2 | const useSize = () => { 3 | const [state, setState] = useRafState(); 4 | return 1 5 | } 6 | export default useSize 7 | -------------------------------------------------------------------------------- /react/hooks/utils/createEffectWithTarget.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/hooks/utils/createEffectWithTarget.js -------------------------------------------------------------------------------- /react/hooks/utils/domTarget.js: -------------------------------------------------------------------------------- 1 | import {isFunction} from "./index.js"; 2 | import isBrowser from "./isBrowser"; 3 | export function getTargetElement (target, defaultElement) { 4 | if(!isBrowser) { 5 | return undefined 6 | } 7 | 8 | if(!target) { 9 | return defaultElement 10 | } 11 | 12 | let targetElement 13 | 14 | if(isFunction(target)) { 15 | targetElement = target() 16 | }else if('current' in target) { 17 | targetElement = target.current 18 | } else { 19 | targetElement = target 20 | } 21 | return targetElement 22 | } 23 | -------------------------------------------------------------------------------- /react/hooks/utils/index.js: -------------------------------------------------------------------------------- 1 | export const isObject = value => value !== null && typeof value === 'object'; 2 | export const isFunction = value => typeof value === 'function'; 3 | 4 | export const isString = value => typeof value === 'string'; 5 | export const isBoolean = value => typeof value === 'boolean'; 6 | export const isNumber = value => typeof value === 'number'; 7 | export const isUndef = value => typeof value === 'undefined'; 8 | -------------------------------------------------------------------------------- /react/hooks/utils/isBrowser.js: -------------------------------------------------------------------------------- 1 | const isBrowser = !!( 2 | typeof window !== 'undefined' && 3 | window.document && 4 | window.document.createElement 5 | ); 6 | 7 | export default isBrowser; 8 | -------------------------------------------------------------------------------- /react/hooks/utils/useEffectWithTarget.js: -------------------------------------------------------------------------------- 1 | import {useLayoutEffect} from "react"; 2 | import createEffectWithTarget from './createEffectWithTarget'; 3 | // const useEffectWithTarget = 4 | -------------------------------------------------------------------------------- /react/hooks/utils/useIsomorphicLayoutEffectWithTarget.ts: -------------------------------------------------------------------------------- 1 | import isBrowser from './isBrowser' 2 | 3 | const useIsomorphicLayoutEffectWithTarget = isBrowser ? 1 : 2 4 | -------------------------------------------------------------------------------- /react/react-redux/.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-redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/react-redux/public/favicon.ico -------------------------------------------------------------------------------- /react/react-redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/react-redux/public/logo192.png -------------------------------------------------------------------------------- /react/react-redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/react-redux/public/logo512.png -------------------------------------------------------------------------------- /react/react-redux/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-redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/react-redux/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import store from './store/index'; 5 | import { Provider } from 'react-redux'; 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /react/react-redux/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux'; 2 | import reducer from './reducer'; 3 | const store = createStore(reducer); 4 | export default store; 5 | -------------------------------------------------------------------------------- /react/react-redux/src/store/reducer.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | inputValue: '', 3 | list: ['123'] 4 | }; 5 | export default (state = initialState, action) => { 6 | if (action.type === 'change_input') { 7 | let newState = { ...initialState }; 8 | newState.inputValue = action.value; 9 | return newState; 10 | } 11 | if (action.type === 'add_item') { 12 | let newState = { ...initialState }; 13 | newState.list.push(newState.inputValue); 14 | newState.inputValue = ''; 15 | return newState; 16 | } 17 | return state; 18 | }; 19 | -------------------------------------------------------------------------------- /react/react.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/react.xmind -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/.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/react18 react-router-dom 6 useRoutes/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/react18 react-router-dom 6 useRoutes/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/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/react18 react-router-dom 6 useRoutes/src/axios/index.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | const instance = axios.create({ 4 | baseURL: '', 5 | timeout: 1000, 6 | headers: {'X-Custom-Header': 'foobar'} 7 | }); 8 | 9 | // instance.interceptors.request.use((config) => { 10 | // // console.log(1) 11 | // }) 12 | instance.interceptors.response.use((response) => { 13 | return response.data.data 14 | },error => { 15 | 16 | }) 17 | 18 | export default instance 19 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/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/react18 react-router-dom 6 useRoutes/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/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/react18 react-router-dom 6 useRoutes/src/routers/RouterWaiter/index.tsx: -------------------------------------------------------------------------------- 1 | import { useRoutes } from 'react-router-dom' 2 | import { RouterWaiterPropsType } from './type' 3 | import Fn from "./fn"; 4 | 5 | function RouterWaiter ( 6 | { 7 | routes, 8 | onRouteBefore, 9 | loading, 10 | } : RouterWaiterPropsType 11 | ) { 12 | const fn = new Fn({ 13 | routes, 14 | onRouteBefore, 15 | loading, 16 | }) 17 | const reactRoutes = fn.transformRoutes() 18 | 19 | return useRoutes(reactRoutes) 20 | } 21 | 22 | export default RouterWaiter 23 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/src/routers/module/demo.tsx: -------------------------------------------------------------------------------- 1 | import {RoutesType} from "@/routers/RouterWaiter/type"; 2 | 3 | const routes: RoutesType = [ 4 | { 5 | path: "newUserList", 6 | component: () => import(/* webpackChunkName: "newUser" */ '@/views/monitor/newUser/newUserList'), 7 | }, 8 | ]; 9 | export default routes 10 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/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/react18 react-router-dom 6 useRoutes/src/types/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'axios' { 2 | interface AxiosInstance { 3 | (config: AxiosRequestConfig): Promise 4 | } 5 | } 6 | 7 | export {} 8 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/src/utils/utils.ts: -------------------------------------------------------------------------------- 1 | // 获取数据类型 2 | export function getDataType (data: any): string { 3 | return (Object.prototype.toString.call(data).match(/\s(\w+)\]/) as string[])[1] 4 | } 5 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/src/views/demo.tsx: -------------------------------------------------------------------------------- 1 | import {useNavigate} from "react-router-dom"; 2 | import {Button} from "antd"; 3 | 4 | 5 | function Demo() { 6 | const navigate = useNavigate() 7 | 8 | 9 | const go = () => { 10 | navigate("/home/newUserList") 11 | } 12 | return
    13 | demo 14 | 15 |
    16 | } 17 | export default Demo 18 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/src/views/home/components/ActionBar/ActionBar.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./style.module.scss" 2 | import {Select} from "antd"; 3 | const { Option } = Select; 4 | export default function ActionBar() { 5 | return
    6 |
    7 | 分析 8 |
    9 | 21 |
    22 | } 23 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/src/views/home/components/ActionBar/style.module.scss: -------------------------------------------------------------------------------- 1 | .action-bar { 2 | display: flex; 3 | align-items: center; 4 | height: 43px; 5 | border-bottom: 1px solid #e6e8eb; 6 | } 7 | .bar-title { 8 | padding: 0 0 0 20px; 9 | font-weight: bold; 10 | font-size: 15px; 11 | width: 150px; 12 | } 13 | 14 | 15 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/src/views/home/components/SideBar/style.module.scss: -------------------------------------------------------------------------------- 1 | .side { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: flex-start; 5 | transition: all 0.3s ease-in-out; 6 | .collapse { 7 | width: 100%; 8 | border-right: 1px solid #f0f0f0; 9 | } 10 | .menu { 11 | flex: 1; 12 | :global { 13 | .ant-menu-inline-collapsed-noicon { 14 | text-align: left !important; 15 | } 16 | } 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /react/react18 react-router-dom 6 useRoutes/src/views/login/login.tsx: -------------------------------------------------------------------------------- 1 | 2 | function Login (props: any) { 3 | console.log(props) 4 | return
    5 | login 6 |
    7 | } 8 | export default Login 9 | -------------------------------------------------------------------------------- /react/redux/README.md: -------------------------------------------------------------------------------- 1 | ![redux flow](redux-flow.png) 2 | 3 | ![redux middleware](redux-middleware.png) 4 | 5 | -------------------------------------------------------------------------------- /react/redux/redux-flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/redux/redux-flow.png -------------------------------------------------------------------------------- /react/redux/redux-middleware.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/react/redux/redux-middleware.png -------------------------------------------------------------------------------- /typescript/react-ts/1.React.FC.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { RouteComponentProps } from "react-router-dom"; 3 | 4 | interface IMatchParams { 5 | touristId: string 6 | } 7 | interface IRobot extends RouteComponentProps{ 8 | id: number, 9 | name: string, 10 | email: string 11 | } 12 | const Robot : React.FC = (props) => { 13 | console.log(props.match.params.touristId) 14 | return
  • 15 | 16 |
    • 17 | } 18 | // function Robot():React.FC { 19 | // return <> 20 | // } 21 | export default Robot -------------------------------------------------------------------------------- /typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.web.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "compilerOptions": { 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["./src/*"] 8 | } 9 | }, 10 | 11 | "references": [ 12 | { 13 | "path": "./tsconfig.config.json" 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /typescript/typescript类型手册.md: -------------------------------------------------------------------------------- 1 | ### Vue 2 | 3 | ### React 4 | 5 | #### React.CSSProperties 6 | 7 | > React内置的css类型 8 | -------------------------------------------------------------------------------- /uni-app 7端/static/web.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | Vue.config.productionTip = false 5 | 6 | App.mpType = 'app' 7 | 8 | const app = new Vue({ 9 | ...App 10 | }) 11 | app.$mount() 12 | -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/pages.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages 3 | { 4 | "path": "pages/index/index", 5 | "style": { 6 | "navigationBarTitleText": "uni-app" 7 | } 8 | } 9 | ], 10 | "globalStyle": { 11 | "navigationBarTextStyle": "black", 12 | "navigationBarTitleText": "uni-app", 13 | "navigationBarBackgroundColor": "#F8F8F8", 14 | "backgroundColor": "#F8F8F8" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/uni-app 7端/图片头像裁剪收缩组件示例/static/logo.png -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/app.js: -------------------------------------------------------------------------------- 1 | 2 | require('./common/runtime.js') 3 | require('./common/vendor.js') 4 | require('./common/main.js') -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index" 4 | ], 5 | "subPackages": [], 6 | "window": { 7 | "navigationBarTextStyle": "black", 8 | "navigationBarTitleText": "uni-app", 9 | "navigationBarBackgroundColor": "#F8F8F8", 10 | "backgroundColor": "#F8F8F8" 11 | }, 12 | "usingComponents": {}, 13 | "sitemapLocation": "sitemap17.json" 14 | } -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/app.wxss: -------------------------------------------------------------------------------- 1 | @import './common/main.wxss'; 2 | -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/common/main.wxss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | /*每个页面公共css */ 17 | 18 | -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/components/cropper.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "uni-app", 3 | "usingComponents": { 4 | "cropper": "/components/cropper" 5 | } 6 | } -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 点击更换头像 -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | 2 | .content { 3 | display: -webkit-box; 4 | display: -webkit-flex; 5 | display: flex; 6 | -webkit-box-orient: vertical; 7 | -webkit-box-direction: normal; 8 | -webkit-flex-direction: column; 9 | flex-direction: column; 10 | -webkit-box-align: center; 11 | -webkit-align-items: center; 12 | align-items: center; 13 | -webkit-box-pack: center; 14 | -webkit-justify-content: center; 15 | justify-content: center; 16 | } 17 | 18 | -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/sitemap17.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/uni-app 7端/图片头像裁剪收缩组件示例/unpackage/dist/dev/mp-weixin/static/logo.png -------------------------------------------------------------------------------- /vue/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "rules": { 3 | "no-undef":0, 4 | 'no-console': 'off', 5 | "parser": "vue-eslint-parser" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /vue/diff算法/Vue diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/vue/diff算法/Vue diff.png -------------------------------------------------------------------------------- /vue/diff算法/react diff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/vue/diff算法/react diff.png -------------------------------------------------------------------------------- /vue/diff算法/vue2 vue3 diff.md: -------------------------------------------------------------------------------- 1 | https://co2-2020.github.io/blog/soundcode/vue/dom-diff.html#vue3-x-diff%E7%AE%97%E6%B3%95 2 | 3 | -------------------------------------------------------------------------------- /vue/vue cli3 配置/vuecli3.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/vue/vue cli3 配置/vuecli3.xmind -------------------------------------------------------------------------------- /vue/vue-router/userOrder.ts: -------------------------------------------------------------------------------- 1 | import { RouteRecordRaw } from 'vue-router' 2 | /* 3 | * 为了保持path和name的唯一性，尽量遵循以下命名规则： 4 | * path:'应用名/子页面' 5 | * name:'应用名-子页面' 6 | */ 7 | const routes: Array = [ 8 | // 业主管工单调度 9 | { 10 | path: '/userOrder/report', 11 | name: 'userOrder-report', 12 | component: () => import('views/userOrder/userProcess/userReport.vue'), 13 | meta: { 14 | title: '工单报事', 15 | }, 16 | }, 17 | ] 18 | 19 | export default routes 20 | -------------------------------------------------------------------------------- /vue/vue2双向数据绑定原理/Dep.js: -------------------------------------------------------------------------------- 1 | //发布订阅模式 2 | 3 | //绑定的方法都有一个update方法 4 | function Dep(){ 5 | this.subs=[] 6 | } 7 | Dep.prototype.addSub=function(sub){ 8 | this.subs.push(sub); 9 | } 10 | 11 | Dep.prototype.notify=function(){ 12 | this.subs.forEach(sub=>{ 13 | sub.update() 14 | }) 15 | } 16 | 17 | function Watcher(fn){ 18 | this.fn=fn; 19 | } 20 | Watcher.prototype.update=function(){ 21 | this.fn() 22 | } 23 | let watcher=new Watcher(function(){//监听函数 24 | console.log(1); 25 | }) 26 | let dep=new Dep(); 27 | //订阅 28 | dep.addSub(watcher); 29 | dep.addSub(watcher); 30 | //发布 31 | dep.notify() 32 | -------------------------------------------------------------------------------- /vue/vue2双向数据绑定原理/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /vue/vue2双向数据绑定原理/demo/mvvm.js: -------------------------------------------------------------------------------- 1 | let nameEle=document.querySelector("#name") 2 | let textEle=document.querySelector("#text") 3 | 4 | let obj={} 5 | Object.defineProperty(obj,'name',{ 6 | get(){ 7 | 8 | }, 9 | set(newName){ 10 | textEle.innerText=newName 11 | } 12 | }) 13 | 14 | nameEle.addEventListener('keyup',()=>{ 15 | obj.name=event.target.value 16 | }) -------------------------------------------------------------------------------- /vue/vue2双向数据绑定原理/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 |

    {{a.a}}

    10 |
    {{b}}
    11 | 12 |
    13 | 14 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /vue/vue2面试/images/异步渲染.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/vue/vue2面试/images/异步渲染.png -------------------------------------------------------------------------------- /vue/vue2面试/面试.md: -------------------------------------------------------------------------------- 1 | #### Vue为什么采用异步渲染 2 | 3 | > 因为如果不采取异步更新，那么每次更新数据都会对当前组件进行重新渲染 4 | 5 | ![异步渲染](images\异步渲染.png) 6 | 7 | #### 啊 -------------------------------------------------------------------------------- /vue/vue3/13.vue3 store.js: -------------------------------------------------------------------------------- 1 | import { useStore } from 'vuex' 2 | 3 | export default { 4 | setup () { 5 | const store = useStore() 6 | } 7 | } -------------------------------------------------------------------------------- /vue/vue3/14.Suspense/App.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /vue/vue3/14.Suspense/AsyncShow.vue: -------------------------------------------------------------------------------- 1 | 6 | 21 | -------------------------------------------------------------------------------- /vue/vue3双向数据绑定原理/Object.defineProperty缺点 proxy优点.md: -------------------------------------------------------------------------------- 1 | ### Object.defineProperty缺点 2 | 3 | 1. 深度监听，需要递归到底，一次性计算量大 4 | 2. 无法监听新增属性/删除属性(需要Vue.set Vue.delete) 5 | 3. 无法原生监听监听数组，需要特殊处理（也就是用原生的Array.prototype通过Object.create()创建一个新的对象 也就是一个原型在这个基础上进行修改） 6 | 7 | ### Proxy优点 8 | 9 | 1. 深度监听，性能更好(只有在用到的时候,才会把那个属性变成proxy实例对象) 10 | 2. 可以监听 新增/删除属性 11 | 3. 可以监听数组变化 12 | 13 | -------------------------------------------------------------------------------- /vue/vue小技巧、组件/饼图/使用.md: -------------------------------------------------------------------------------- 1 | ​ -------------------------------------------------------------------------------- /vue/vue组件是如何渲染和更新的/vue组件是如何渲染和更新的.md: -------------------------------------------------------------------------------- 1 | ### 初次渲染过程 2 | 3 | - 解析模板为render函数(或在开发环境已经完成,vue-loader) 4 | - 触发响应式，监听data属性getter,setter 5 | - 执行render函数(这个时候会触发getter获取数据)，生成vnode，patch(elem,vnode) 6 | 7 | ### 更新过程 8 | 9 | - 修改data,触发setter(此前在getter中已被监听) 10 | - 重新执行render函数,生成newVnode 11 | - patch(vnode,nodeVnode) diff算法会计算出新旧虚拟dom的差异，再来更新真实的dom 12 | 13 | -------------------------------------------------------------------------------- /vue/组件通信/$props $attrs $listeners/介绍.md: -------------------------------------------------------------------------------- 1 | $props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。 2 | 3 | $attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。**也就是props没有接受的** 4 | 5 | $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 6 | 7 | ```js 8 | 9 | ``` 10 | 11 | ```vue 12 | 19 | 20 | export default{ 21 | props: ['name','age'] 22 | } 23 | ``` 24 | 25 | -------------------------------------------------------------------------------- /vue/组件通信/vue中8种组件通信方式, 值得收藏! - 掘金.url: -------------------------------------------------------------------------------- 1 | [InternetShortcut] 2 | URL=https://juejin.im/post/5d267dcdf265da1b957081a3 3 | -------------------------------------------------------------------------------- /webpack/mui/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
      11 |
    • 1
      • 12 |
    • 2
      • 13 |
    • 3
      • 14 |
    • 4
      • 15 |
    • 5
      • 16 |
    • 6
      • 17 |
    • 7
      • 18 |
    • 8
      • 19 |
    • 9
      • 20 |
    • 10
      • 21 |
    22 | 23 | 24 | -------------------------------------------------------------------------------- /webpack/mui/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /webpack/mui/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
    11 | 12 |
    13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /webpack/mui/src/lib/mui/fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/webpack/mui/src/lib/mui/fonts/mui.ttf -------------------------------------------------------------------------------- /webpack/mui/src/main.js: -------------------------------------------------------------------------------- 1 | console.log('ok'); -------------------------------------------------------------------------------- /webpack/mui/src/router.js: -------------------------------------------------------------------------------- 1 | import VueRouter from 'vue-router' 2 | 3 | var router = new VueRouter({ 4 | routes: [ 5 | 6 | ] 7 | }) 8 | 9 | export default route 10 | -------------------------------------------------------------------------------- /webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-study", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "jquery": "^3.4.1" 8 | }, 9 | "devDependencies": { 10 | "webpack": "^4.41.2", 11 | "webpack-cli": "^3.3.10", 12 | "webpack-dev-server": "^3.9.0" 13 | }, 14 | "scripts": { 15 | "test": "echo \"Error: no test specified\" && exit 1", 16 | "dev": "webpack-dev-server --open --port 3000" 17 | }, 18 | "keywords": [], 19 | "author": "", 20 | "license": "ISC" 21 | } 22 | -------------------------------------------------------------------------------- /webpack/scripts --open --port 3000.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/webpack/scripts --open --port 3000.txt -------------------------------------------------------------------------------- /webpack/webpack-study/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | .vscode 4 | .git -------------------------------------------------------------------------------- /webpack/webpack-study/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
      11 |
    • 1
      • 12 |
    • 2
      • 13 |
    • 3
      • 14 |
    • 4
      • 15 |
    • 5
      • 16 |
    • 6
      • 17 |
    • 7
      • 18 |
    • 8
      • 19 |
    • 9
      • 20 |
    • 10
      • 21 |
    22 | 23 | 24 | -------------------------------------------------------------------------------- /webpack/webpack-study/src/css/index.css: -------------------------------------------------------------------------------- 1 | li{ 2 | list-style: none; 3 | } -------------------------------------------------------------------------------- /webpack/webpack-study/src/css/index.less: -------------------------------------------------------------------------------- 1 | ul{ 2 | padding:0; 3 | margin: 0; 4 | } -------------------------------------------------------------------------------- /webpack/webpack-study/src/css/index.scss: -------------------------------------------------------------------------------- 1 | html,body{ 2 | margin: 0; 3 | padding: 0; 4 | line-height: 30px; 5 | } -------------------------------------------------------------------------------- /webpack/webpack-study/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /webpack/webpack-study/src/main.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery' 2 | 3 | import './css/index.css' 4 | import './css/index.less' 5 | import './css/index.scss' 6 | $(()=>{ 7 | $('li:odd').css('backgroundColor','lightgreen'); 8 | }) 9 | 10 | class Person{ 11 | static info={ name:'shepi',age:20} 12 | } -------------------------------------------------------------------------------- /webpack/webpack.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/webpack/webpack.xmind -------------------------------------------------------------------------------- /原生小程序 微信h5/images/weapp-architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/原生小程序 微信h5/images/weapp-architecture.png -------------------------------------------------------------------------------- /原生小程序 微信h5/images/wechat-framework.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/原生小程序 微信h5/images/wechat-framework.png -------------------------------------------------------------------------------- /原生小程序 微信h5/微信文档.md: -------------------------------------------------------------------------------- 1 | #### [getCurrentPages](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html)() 函数获取当前页面栈。 2 | 3 | 1. 可以通过这个获取options -------------------------------------------------------------------------------- /小知识/1.github_action/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | }, 11 | "devDependencies": { 12 | }, 13 | "homepage": "https://zhang874010534.github.io/githubAction" 14 | } 15 | -------------------------------------------------------------------------------- /小知识/1.github_action/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' ? '/githubAction' : '/', 3 | productionSourceMap: false, 4 | }; 5 | -------------------------------------------------------------------------------- /小知识/shell/README.MD: -------------------------------------------------------------------------------- 1 | ### 跳转到脚本所在目录 2 | cd $(dirname "$0") || exit 1 3 | 4 | ### 对上面的脚本的解释 5 | $0 当前Shell程序的文件名 6 | dirname $0 获取当前Shell程序的路径 7 | cd $(dirname $0) 进入当前Shell程序的目录 8 | exit 1 如果获取不到则退出脚本 9 | -------------------------------------------------------------------------------- /小知识/shell/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | echo 'build 生成生产环境代码' 4 | 5 | rm -rf dist && npm run build 6 | 7 | echo '上传代码到云主机' 8 | 9 | cd dist 8 scp -i ~/.ssh/vikingship.pem -r * root@121.199.70.72:/var/www -------------------------------------------------------------------------------- /小知识/shell/使用.txt: -------------------------------------------------------------------------------- 1 | sh ./deploy.sh -------------------------------------------------------------------------------- /小知识/window 指令.md: -------------------------------------------------------------------------------- 1 | 可能是romove directory 2 | 3 | rd /? 查看帮助 4 | 5 | rd /s/q node_modules 删除 -------------------------------------------------------------------------------- /小知识/可访问性/image/0603a19d8ba7452ba4a3ce30e741dc0c~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/0603a19d8ba7452ba4a3ce30e741dc0c~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/2fb99dc2cac14bd2956fa2b15282152a~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/2fb99dc2cac14bd2956fa2b15282152a~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/323ff57ad325409cb02ae208550c5a6b~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/323ff57ad325409cb02ae208550c5a6b~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/4266363a7d454e13aac72610e44d07ec~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/4266363a7d454e13aac72610e44d07ec~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/481fd7dad34a4cb1a02b4d7a0a7e4763~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/481fd7dad34a4cb1a02b4d7a0a7e4763~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/65fb74a9dc334bf4953a22e7a0855d0e~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/65fb74a9dc334bf4953a22e7a0855d0e~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/6e312c94dde642aaa2f2bf341a1a4bb4~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/6e312c94dde642aaa2f2bf341a1a4bb4~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/71861c823f874294bb4bd76500652b84~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/71861c823f874294bb4bd76500652b84~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/7a7b1f9ed4524c4796a5d14ed88c1b26~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/7a7b1f9ed4524c4796a5d14ed88c1b26~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/b20e7bfa0f9c466b8ab3df0b9e6008f0~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/b20e7bfa0f9c466b8ab3df0b9e6008f0~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/b8a7754968564e0fa157ed2f0dae7207~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/b8a7754968564e0fa157ed2f0dae7207~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/ca5170bb70934d729533f64b5e5db13d~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/ca5170bb70934d729533f64b5e5db13d~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/db126d25715344aebeebb36f458a117d~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/db126d25715344aebeebb36f458a117d~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/e6a93f5cfc294a6d9316eda9c33762f7~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/e6a93f5cfc294a6d9316eda9c33762f7~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/可访问性/image/e9e7a8e882ee4fbdbedeb23b80a36dfd~tplv-k3u1fbpfcp-zoom-1.image: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/小知识/可访问性/image/e9e7a8e882ee4fbdbedeb23b80a36dfd~tplv-k3u1fbpfcp-zoom-1.image -------------------------------------------------------------------------------- /小知识/跨域/跨域.md: -------------------------------------------------------------------------------- 1 | #### CORS跨域 - 服务端设置，前端直接调用 2 | 3 | > 说明：后端允许前端某个站点进行访问 4 | 5 | #### JSONP跨域 - 前端适配，后端配合 6 | 7 | > 说明：前后台同时改造 8 | 9 | #### 接口代理 - 通过修改nginx服务器配置来实现 10 | 11 | > 说明：前端修改，后台不动 后端是没有跨域限制的所以让后端帮忙 12 | 13 | 请求url '/api/activity' 故意加一个api 然后把它代理成空 14 | 15 | 16 | ``` 17 | derServer:{ 18 | proxy:{ 19 | '/api':{ 20 | target:'https://www.taobao.com', 21 | changeOrigin:true,//修改源 22 | pathRewrite:{ 23 | '/api':'' 24 | } 25 | } 26 | } 27 | } 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /快捷键 设置/.webstorm.ide.js: -------------------------------------------------------------------------------- 1 | const resolve = dir => require('path').join(__dirname, dir) 2 | 3 | module.exports = { 4 | resolve: { 5 | alias: { 6 | '@': resolve('/src') 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /快捷键 设置/HBuilder快捷键.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/快捷键 设置/HBuilder快捷键.txt -------------------------------------------------------------------------------- /快捷键 设置/chrome.txt: -------------------------------------------------------------------------------- 1 | ctrl+pgup 浏览器选项卡上一个 2 | shift+enter 在新的浏览器打开并搜索 3 | ctrl+tab 浏览器选项卡切换 4 | ctrl+t 浏览器创建新的选项卡 5 | ctrl k 或者 ctrl e 用google 搜索 6 | ctrl h 历史记录 7 | ctrl j 下载记录 8 | ctrl l 在地址栏进行搜索 -------------------------------------------------------------------------------- /快捷键 设置/copilot快捷键.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/快捷键 设置/copilot快捷键.txt -------------------------------------------------------------------------------- /快捷键 设置/jetbrain快捷键.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/快捷键 设置/jetbrain快捷键.txt -------------------------------------------------------------------------------- /快捷键 设置/jetbrain设置.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/快捷键 设置/jetbrain设置.txt -------------------------------------------------------------------------------- /快捷键 设置/mac vscode.txt: -------------------------------------------------------------------------------- 1 | command i 触发建议 2 | shift+option(i)+下 往下复制 3 | ctrl + - 回到上一次编辑的地方 4 | command + p go to file 5 | options + command + 左 Terminal focus previous pane 左右切换上面的窗格 6 | command shift l 全选 commond d 单选一个增强版 -------------------------------------------------------------------------------- /快捷键 设置/typora.txt: -------------------------------------------------------------------------------- 1 | 表格 |aa|aa| 之后按ctrl+enter可以快速生成表格 -------------------------------------------------------------------------------- /快捷键 设置/vscode快捷键 设置.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/快捷键 设置/vscode快捷键 设置.txt -------------------------------------------------------------------------------- /快捷键 设置/window 快捷键和tip.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/快捷键 设置/window 快捷键和tip.txt -------------------------------------------------------------------------------- /性能优化/workspace/css、js的加载与执行.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/性能优化/workspace/css、js的加载与执行.pptx -------------------------------------------------------------------------------- /性能优化/workspace/图片相关的优化.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/性能优化/workspace/图片相关的优化.pptx -------------------------------------------------------------------------------- /性能优化/workspace/懒加载与预加载.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/性能优化/workspace/懒加载与预加载.pptx -------------------------------------------------------------------------------- /性能优化/workspace/浏览器存储.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/性能优化/workspace/浏览器存储.pptx -------------------------------------------------------------------------------- /性能优化/workspace/资源合并与压缩.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/性能优化/workspace/资源合并与压缩.pptx -------------------------------------------------------------------------------- /性能优化/workspace/重绘与回流.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/性能优化/workspace/重绘与回流.pptx -------------------------------------------------------------------------------- /性能优化/性能优化.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/性能优化/性能优化.xmind -------------------------------------------------------------------------------- /性能优化/懒加载/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /数据库/Mongodb.md: -------------------------------------------------------------------------------- 1 | ### [安装](https://www.runoob.com/mongodb/mongodb-window-install.html) 2 | 3 | ##### 命令行下运行 MongoDB 服务器 4 | 5 | 为了从命令提示符下运行 MongoDB 服务器，你必须从 MongoDB 目录的 bin 目录中执行 mongod.exe 文件。 6 | 7 | ``` 8 | C:\mongodb\bin\mongod --dbpath c:\data\db 9 | ``` 10 | 11 | 直接mongod 会执行c盘下面的data\db 12 | 13 | ### 基本指令 14 | 15 | - mongo 连接数据库 16 | - exit 退出 17 | - db 查看当前数据库 18 | - show dbs 查看全部数据库 19 | - use xxx 使用某数据库 20 | - show collections 查看集合 21 | -------------------------------------------------------------------------------- /新建文本文档.txt: -------------------------------------------------------------------------------- 1 | chrome、edge 浏览器 记录 2 | 删除自己的文件(小飞机、笔记) 3 | vscode 插件远程同步 4 | webStorm translation alisdk 5 | webStorm 6 | copilot 7 | 有道笔记 8 | 钉钉 9 | 微信 10 | qq 11 | 向日葵 12 | ToDesk -------------------------------------------------------------------------------- /浏览器插件/chrome-extension/back.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 1234 12 | 13 | -------------------------------------------------------------------------------- /浏览器插件/chrome-extension/js/popup.js: -------------------------------------------------------------------------------- 1 | let dom = document.querySelector('#getAnormousData').onclick=function(){ 2 | window.open(chrome.extension.getURL('back.html')); 3 | // var kw = document.querySelectorAll('.task-overview-item .item-value')[2]; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /浏览器插件/chrome-extension/js/utils.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | const year = date.getFullYear() 3 | const month = (date.getMonth() + 1).toString().padStart(2, '0') 4 | const day = date.getDate().toString().padStart(2, '0') 5 | const hour = date.getHours().toString().padStart(2, '0') 6 | const minutes = date.getMinutes().toString().padStart(2, '0') 7 | const seconds = date.getSeconds().toString().padStart(2, '0') 8 | 9 | return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}` 10 | } -------------------------------------------------------------------------------- /浏览器插件/chrome-extension/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 19 | 20 | 21 |

    不南插件首页

    22 |
    23 | 24 |
    25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /特效、工具/10.TabsAnchor/README.md: -------------------------------------------------------------------------------- 1 | 上面tabs 2 | 3 | 页面滚动到对应的tab 上面的tabs也会变 类似锚点 4 | 5 | ![](https://raw.githubusercontent.com/zhang874010534/tuchuan/main/effectAndTool/TabsAnchor.png) -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | example/pdf.pdf 3 | example/video.mp4 4 | example/word.docx 5 | example/ppt.pptx 6 | example/excel.xlsx 7 | example/pic.png -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/README.md: -------------------------------------------------------------------------------- 1 | https://github.com/zhuye1993/file-view 2 | 3 | # file-viewer 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | 20 | ### Lints and fixes files 21 | ``` 22 | npm run lint 23 | ``` 24 | 25 | ### Customize configuration 26 | See [Configuration Reference](https://cli.vuejs.org/config/). 27 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset', 4 | ], 5 | } 6 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/example/README.md: -------------------------------------------------------------------------------- 1 | # 当前页面请使用web server 代理访问 2 | 3 | 请同时启动file-viewer主工程查看效果，或者查看在线demo 4 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/public/favicon.ico -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 29 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/assets/logo.png -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import VueViewer from 'v-viewer'; 4 | import 'viewerjs/dist/viewer.css' 5 | 6 | Vue.config.productionTip = false 7 | 8 | Vue.use(VueViewer) 9 | 10 | new Vue({ 11 | render: h => h(App), 12 | }).$mount('#app') 13 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/vendors/image/ImageViewer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 29 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/vendors/image/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import ImageViewer from './ImageViewer'; 3 | import { readDataURL } from '@/components/util'; 4 | 5 | /** 6 | * 图片渲染 7 | */ 8 | export default async function renderImage(buffer, target) { 9 | const url = await readDataURL(buffer); 10 | return new Vue({ 11 | render: h => h(ImageViewer, { props: { image: url } }), 12 | }).$mount(target) 13 | } 14 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/vendors/mp4/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 渲染mp4 3 | */ 4 | export default function (buffer, target) { 5 | const mp4 = document.createElement('video'); 6 | mp4.width = 840; 7 | mp4.height = 480; 8 | mp4.controls = true; 9 | const source = document.createElement('source'); 10 | source.src = URL.createObjectURL(new Blob([buffer])); 11 | mp4.appendChild(source); 12 | target.appendChild(mp4) 13 | } 14 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/vendors/pdf/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import PdfView from './PdfView'; 3 | 4 | export default async function renderPdf(buffer, target) { 5 | return new Vue({ 6 | render: h => h(PdfView, { props: { data: buffer } }), 7 | }).$mount(target) 8 | } 9 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/vendors/pptx/worker.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import processPptx from './process_pptx' 4 | 5 | processPptx( 6 | func => { self.onmessage = e => func(e.data) }, 7 | msg => self.postMessage(msg) 8 | ) 9 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/vendors/text/CodeViewer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 32 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/vendors/text/index.js: -------------------------------------------------------------------------------- 1 | import { readText } from '@/components/util'; 2 | import Vue from 'vue'; 3 | import CodeViewer from './CodeViewer'; 4 | 5 | /** 6 | * 渲染文本 7 | * @param buffer 文本二进制内容 8 | * @param target 目标 9 | */ 10 | export default async function renderText(buffer, target) { 11 | const text = await readText(buffer); 12 | return new Vue({ 13 | render: h => h(CodeViewer, { props: { value: text } }), 14 | }).$mount(target) 15 | } 16 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/src/vendors/xlsx/index.js: -------------------------------------------------------------------------------- 1 | import ExcelJS from "exceljs"; 2 | import Vue from "vue"; 3 | import Table from "./Table"; 4 | import "handsontable/dist/handsontable.full.min.css"; 5 | 6 | /** 7 | * 渲染excel 8 | */ 9 | export default async function render(buffer, target) { 10 | const workbook = await new ExcelJS.Workbook().xlsx.load(buffer); 11 | console.log(workbook, "workbook"); 12 | return new Vue({ 13 | render: (h) => 14 | h(Table, { 15 | props: { 16 | workbook, 17 | }, 18 | }), 19 | }).$mount(target); 20 | } 21 | -------------------------------------------------------------------------------- /特效、工具/13.word excel pdf ppt 预览/file-view-master 别人的预览项目/vue.config.js: -------------------------------------------------------------------------------- 1 | const IS_PROD = [ 'production', 'prod' ].includes(process.env.NODE_ENV); 2 | 3 | module.exports = { 4 | publicPath: './', 5 | indexPath: 'index.html', 6 | outputDir: process.env.outputDir || 'dist', 7 | assetsDir: 'static', 8 | lintOnSave: false, 9 | runtimeCompiler: true, 10 | productionSourceMap: !IS_PROD, 11 | parallel: require('os').cpus().length > 1, 12 | pwa: {}, 13 | configureWebpack: { 14 | plugins: [] 15 | }, 16 | devServer: { 17 | port: 8900, // 端口 18 | }, 19 | } 20 | -------------------------------------------------------------------------------- /特效、工具/14.前端主题切换/readme.md: -------------------------------------------------------------------------------- 1 | https://juejin.cn/post/7134594122391748615#heading-19 2 | 3 | -------------------------------------------------------------------------------- /特效、工具/16.vue jsx转真实dom组件/Node.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /特效、工具/17.DateRangePicker/map.js: -------------------------------------------------------------------------------- 1 | export const rangePickerOptions = [{ 2 | value: 1, 3 | label: '按月', 4 | type: 'month' 5 | },{ 6 | value: 2, 7 | label: '按季', 8 | type: 'quarter' 9 | },{ 10 | value: 3, 11 | label: '按年', 12 | type: 'year' 13 | },{ 14 | value: 4, 15 | label: '自定义时间', 16 | type: 'custom' 17 | }] 18 | -------------------------------------------------------------------------------- /特效、工具/2.vue3 message封装 函数方式调用/createMessage.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import Message from './Message.vue' 3 | export type MessageType = 'success' | 'error' | 'default' 4 | 5 | const createMessage = (message: string, type: MessageType, timeout = 2000) => { 6 | const messageInstance = createApp(Message, { 7 | message, 8 | type 9 | }) 10 | const mountNode = document.createElement('div') 11 | document.body.appendChild(mountNode) 12 | messageInstance.mount(mountNode) 13 | setTimeout(() => { 14 | messageInstance.unmount(mountNode) 15 | document.body.removeChild(mountNode) 16 | }, timeout) 17 | } 18 | 19 | export default createMessage 20 | -------------------------------------------------------------------------------- /特效、工具/22.页面布局组件 header body footer/PageBody/PageBody.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 14 | -------------------------------------------------------------------------------- /特效、工具/22.页面布局组件 header body footer/PageFooter/PageFooter.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 14 | -------------------------------------------------------------------------------- /特效、工具/22.页面布局组件 header body footer/PageHeader/PageHeader.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 19 | -------------------------------------------------------------------------------- /特效、工具/22.页面布局组件 header body footer/PageWrapper/PageWrapper.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 16 | -------------------------------------------------------------------------------- /特效、工具/ripple波纹按钮/ripple.scss: -------------------------------------------------------------------------------- 1 | .my-ripple{ 2 | position: relative; 3 | overflow: hidden; 4 | .ripple-span{ 5 | position: absolute; 6 | transform: translate(-50%,-50%); 7 | border-radius: 50%; 8 | background-color: #fff; 9 | animation: ripple 0.6s linear; 10 | } 11 | } 12 | @keyframes ripple { 13 | 0%{ 14 | width: 0px; 15 | height: 0px; 16 | opacity: 0.5; 17 | } 18 | 100%{ 19 | width: 500px; 20 | height: 500px; 21 | opacity: 0; 22 | } 23 | } -------------------------------------------------------------------------------- /特效、工具/vue自定义指令/1.只能输入数字.md: -------------------------------------------------------------------------------- 1 | 还未使用过应该能用 2 | 3 | ```js 4 | directives: { 5 | // v-number-only 6 | numberOnly: { 7 | bind: function(el) { 8 | el.handler = function() { 9 | el.value = el.value.replace(/\D+/, ‘‘) 10 | } 11 | el.addEventListener(‘input‘, el.handler) 12 | }, 13 | unbind: function(el) { 14 | el.removeEventListener(‘input‘, el.handler) 15 | } 16 | } 17 | }, 18 | ``` 19 | 20 | -------------------------------------------------------------------------------- /特效、工具/vue自定义指令/2.drag/index.js: -------------------------------------------------------------------------------- 1 | import directive from './src/directive'; 2 | // import service from './src/index'; 3 | 4 | export default { 5 | install(Vue) { 6 | Vue.use(directive); 7 | // Vue.prototype.$loading = service; 8 | }, 9 | directive, 10 | // service 11 | }; 12 | -------------------------------------------------------------------------------- /特效、工具/图表/饼图/使用.md: -------------------------------------------------------------------------------- 1 | ​ -------------------------------------------------------------------------------- /特效、工具/自制特效/jquery/递归从后开始让图片一张张消失动画的相关方法/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/jquery/递归从后开始让图片一张张消失动画的相关方法/1.png -------------------------------------------------------------------------------- /特效、工具/自制特效/jquery/鼠标放上去高亮显示/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/jquery/鼠标放上去高亮显示/1.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/开机动画/0-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/开机动画/0-1.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/开机动画/0-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/开机动画/0-2.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/手风琴/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/手风琴/1.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/手风琴/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/手风琴/2.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/手风琴/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/手风琴/3.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/手风琴/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/手风琴/4.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/手风琴/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/手风琴/5.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/旋转木马/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/旋转木马/1.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/旋转木马/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/旋转木马/2.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/旋转木马/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/旋转木马/3.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/旋转木马/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/旋转木马/4.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/旋转木马/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/旋转木马/5.png -------------------------------------------------------------------------------- /特效、工具/自制特效/js/轮播图/轮播图/00.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/轮播图/轮播图/00.jpg -------------------------------------------------------------------------------- /特效、工具/自制特效/js/轮播图/轮播图/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/轮播图/轮播图/01.jpg -------------------------------------------------------------------------------- /特效、工具/自制特效/js/轮播图/轮播图/psb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/特效、工具/自制特效/js/轮播图/轮播图/psb.jpg -------------------------------------------------------------------------------- /特效、工具/自制特效/无限滚动tab/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | .carousel { 7 | width: 100%; 8 | height: 50px; 9 | overflow: hidden; 10 | } 11 | 12 | .carousel ul { 13 | display: flex; 14 | list-style: none; 15 | } 16 | 17 | .carousel li { 18 | width: 33.3%; 19 | text-align: center; 20 | flex-shrink: 0; 21 | } 22 | -------------------------------------------------------------------------------- /特效、工具/自制特效/无限滚动tab/index.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | .carousel { 6 | width: 100%; 7 | height: 50px; 8 | overflow: hidden; 9 | ul { 10 | display: flex; 11 | list-style: none; 12 | // transition: all .1s linear; 13 | } 14 | li { 15 | width: 33.3%; 16 | text-align: center; 17 | flex-shrink: 0; 18 | } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /移动端H5/2.适配iphoneX 底部横杠.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /移动端H5/4.h5软键盘.md: -------------------------------------------------------------------------------- 1 | https://juejin.cn/post/6859545317378490376#heading-3 -------------------------------------------------------------------------------- /绘制图形和动画canvas webgl/WebGL/three/案例/3d项目实战/README.md: -------------------------------------------------------------------------------- 1 | ### uv 2 | 3 | ![](https://github.com/zhang874010534/tuchuan/blob/main/webgl/uv.png?raw=true) 4 | -------------------------------------------------------------------------------- /网络安全/XSS.md: -------------------------------------------------------------------------------- 1 | ### XSS 了解吗？如何进行一次 XSS 攻击？ 2 | 3 | - XSS（跨站脚本攻击）：在未经转译的 `url` 或是用户输入域中输入攻击脚本，实现执行脚本获取 cookie、打开危险攻击网页等功能进行攻击。 4 | - 预防：所有的用户输入都是不可信的， `url` 和用户输入的文本内容必须经过转译，防止其中的内容成为 html 中的一部分被浏览器解析。cookie 也可以通过**设置 HttpOnly** 禁止 JavaScript 读取和写入 cookie。 5 | 6 | ### 防护 7 | 8 | - XSS攻击: 注入恶意代码 9 | - cookie 设置 httpOnly 10 | - 转义页面上的输入内容和输出内容 11 | 12 | -------------------------------------------------------------------------------- /计算机网络等后端知识/cookie.md: -------------------------------------------------------------------------------- 1 | ### cookie 知道吗？有哪些字段？ 2 | 3 | - 由于 HTTP 是无状态的，为了在服务端与客户端之间做状态保持，cookie 应运而生。cookie 本质是一份在服务端与客户端之间传输的文本片段，其中保存了一些客户端的状态信息，方便服务端读取并进行其他操作。 4 | - **Name**：键名。 5 | - **Value**：键值。 6 | - **Domain**：能够携带该键值对的域名，开头为 `.` 则表示其子域名也可携带。 7 | - Path：能够携带该键值对的文件路径。 8 | - **Expires/Max-Age**：cookie 过期时间的时间戳，超时则自动删除。 9 | - Size：cookie 大小。 10 | - **HttpOnly**：禁止 JavaScript 对 cookie 进行读取和修改。 11 | - **Secure**：仅允许在 HTTPS 中传输。 12 | - SameSite：禁止某些请求中携带 cookie，值为 `None` `Lax` `Strict` 。值为 `None` 时，任何请求都可以携带该 cookie；值为 `Lax` 时，部分跨站请求无法发送该 cookie（仅 `a` `link` `GET` 请求可以携带）；值为 `Strict` 时，所有跨站请求都无法发送该 cookie，仅同站请求允许。（Chrome 80 版本前默认值都为 `None` ，80 版本后默认值变成了 `Lax` ，WWDC 2020 上 Safari 的新版本也由 `None` 改为了 `Lax` ） -------------------------------------------------------------------------------- /计算机网络等后端知识/url编码.md: -------------------------------------------------------------------------------- 1 | [阮一峰的url编码](http://www.ruanyifeng.com/blog/2010/02/url_encoding.html) 2 | 3 | -------------------------------------------------------------------------------- /计算机网络等后端知识/优化.md: -------------------------------------------------------------------------------- 1 | DNS 预解析 2 | 3 | ``` 4 | 5 | 6 | 复制代码 7 | ``` 8 | 9 | 10 | HTTP预连接 11 | 12 | ``` 13 | 14 | 15 | ``` -------------------------------------------------------------------------------- /计算机网络等后端知识/分布式与集群/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhang874010534/Study-Notes/bf6b2fe1960ac24ba0d48b75afc70522c2538be4/计算机网络等后端知识/分布式与集群/1.jpg -------------------------------------------------------------------------------- /计算机网络等后端知识/常见状态码.md: -------------------------------------------------------------------------------- 1 | 1xx: 接受，继续处理 2 | 3 | 200: 成功，并返回数据 4 | 5 | 201: 已创建 6 | 7 | 202: 已接受 8 | 9 | 203: 成为，但未授权 10 | 11 | 204: 成功，无内容 12 | 13 | 205: 成功，重置内容 14 | 15 | 206: 成功，部分内容 16 | 17 | 301: 永久移动，重定向 18 | 19 | 302: 临时移动，可使用原有URI 20 | 21 | 304: 资源未修改，可使用缓存 22 | 23 | 305: 需代理访问 24 | 25 | 400: 请求语法错误 26 | 27 | 401: 要求身份认证 28 | 29 | 403: 拒绝请求 30 | 31 | 404: 资源不存在 32 | 33 | 500: 服务器错误 -------------------------------------------------------------------------------- /计算机网络等后端知识/网络请求.md: -------------------------------------------------------------------------------- 1 | ### [Content-type](https://www.cnblogs.com/h-c-g/p/11002380.html) 2 | 3 | ### [Form-data 与 Request Payload](https://segmentfault.com/a/1190000018774494) 4 | 5 | -------------------------------------------------------------------------------- /面试/1.vue和react区别.md: -------------------------------------------------------------------------------- 1 | 1. vue是响应式框架，现在普遍说vue是mvvm框架，准确的说应该是vue1是mvvm，vue2开始最能体现mvvm就是v-model,其他都体现不出来 2 | 2. react是单项数据流，我们修改数据要去setState，vue是直接赋值就行， 3 | 4 | 5 | 6 | 1. vue是主要是template模板，更贴近前端人员的使用习惯，也是支持jsx的,elementui的picker组件就有，那时候公司让我在picker里面加上天干地支，没办法就得去看源码，拷下来放项目发现不能运行才发现用到了jsx，得再下一些额外的babel. 7 | 2. react是jsx 8 | 9 | 10 | 11 | 1. react有一个hook，vue3加了一个composition api 12 | 13 | 14 | 15 | 1. vue1是没有dom 的diff的， 是数据响应式的，哪里用到了这个数据就去dom上进行修改。vue2支持了虚拟dom和diff，因为比如一个div 显示的条件是a >1 现在a从2 变成了3 这个dom需要重新渲染吗？，答案是否定的。然后真正的dom在node.js里是不支持的，所以虚拟dom就可以支持ssr。 16 | 17 | 18 | 19 | 1. 我最喜欢的特新，vue的scoped， 20 | 21 | -------------------------------------------------------------------------------- /面试/算法/算法复杂度.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### 什么是复杂度 4 | 5 | 程序执行时需要的计算量和内存空间(和代码是否简洁无关) 6 | 7 | ### 时间复杂度 8 | 9 | #### [时间复杂度b站视频](https://www.bilibili.com/video/BV1DY4y1H7DG/?spm_id_from=333.999.0.0&vd_source=ed70916a17ada2e523cbec3537c362e2) 10 | 11 | #### O(1) 12 | 13 | 一次就可以 14 | 15 | #### O(n) 16 | 17 | 和传输的数据量一样，比如我要和班级所有同学打招呼，每多一个同学我就要多打招呼一次。 18 | 19 | #### O(n^2) 20 | 21 | 数据量的平方，比如冒泡排序、数组循环2层 22 | 23 | #### O(log n) 24 | 25 | 数据量的对数，log2的2 = 1 log2的1024 = 10，n不断变大，结果的值变化不大,比如二分法 26 | 27 | #### O(n * log n) 28 | -------------------------------------------------------------------------------- /项目思路/购物车.md: -------------------------------------------------------------------------------- 1 | 点击单选按钮 将页面渲染时候的数组里的每一项的checked 取反 2 | 3 | 再执行一个方法 4 | 5 | 方法里 循环遍历数组 判断是否有checked===false 有就让 全选checkbox的checked 为false(这个值可以放data) 6 | 7 | 还要根据checked===true的项 来计算总价格和总数量 8 | 9 | 10 | 11 | 改变数组的操作都放在checkbox的点击事件下面 12 | 13 | 之后再执行一下使用数组的方法 -------------------------------------------------------------------------------- /项目构建/vite/vue3/.env.development: -------------------------------------------------------------------------------- 1 | BASE_URL = '/' 2 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/.env.production: -------------------------------------------------------------------------------- 1 | BASE_URL = '/base-url/' 2 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/extensions.json 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Vite 2 | 3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/common/js/useUrlHandle.js: -------------------------------------------------------------------------------- 1 | import {useLocalStorage, useUrlSearchParams} from '@vueuse/core' 2 | 3 | const params = useUrlSearchParams('hash') 4 | export const useUrlHandle = () => { 5 | const setLocalStorage = () => { 6 | for (const paramsKey in params) { 7 | const storage = useLocalStorage(paramsKey) 8 | storage.value = params[paramsKey] 9 | } 10 | } 11 | return { 12 | setLocalStorage 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/components/business/DateRangePicker/map.js: -------------------------------------------------------------------------------- 1 | export const rangePickerOptions = [{ 2 | value: 1, 3 | label: '按月', 4 | type: 'month' 5 | },{ 6 | value: 2, 7 | label: '按季', 8 | type: 'quarter' 9 | },{ 10 | value: 3, 11 | label: '按年', 12 | type: 'year' 13 | },{ 14 | value: 4, 15 | label: '自定义时间', 16 | type: 'custom' 17 | }] 18 | 19 | export const dateTypeMap = {} 20 | rangePickerOptions.forEach(item => { 21 | dateTypeMap[item.type] = item.value 22 | }) 23 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/components/business/FormBlock/FormBlock.vue: -------------------------------------------------------------------------------- 1 | 10 | 23 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/components/business/PageBody/PageBody.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 14 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/components/business/PageFooter/PageFooter.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 14 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/components/business/PageHeader/PageHeader.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 19 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/components/business/PageWrapper/PageWrapper.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 16 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/components/control/MyTable/MyTable.vue: -------------------------------------------------------------------------------- 1 | 12 | 17 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | import router from './router/index.js' 5 | import { createPinia } from "pinia" 6 | import ElementPlus from 'element-plus' 7 | import 'element-plus/dist/index.css' 8 | import "@antv/s2-vue/dist/style.min.css"; 9 | import zhCn from 'element-plus/dist/locale/zh-cn.mjs' 10 | 11 | const app = createApp(App) 12 | app.use(ElementPlus, { 13 | locale: zhCn, 14 | }) 15 | app.use(router) 16 | app.use(createPinia()) 17 | app.mount('#app') 18 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory } from 'vue-router' 2 | 3 | const modules = import.meta.glob('@/views/**/**/**.vue') 4 | const moduleKey = Object.keys(modules) 5 | const moduleRoutes = moduleKey.map(key => { 6 | const arr = key.replace(/.vue/g, '').split('/') 7 | // const item = arr.at(-1) 8 | const item = arr[arr.length - 1] 9 | return { 10 | path: `/${item}`, 11 | name: item, 12 | component: modules[key] 13 | } 14 | }) 15 | const routes = [ 16 | ...moduleRoutes 17 | ] 18 | const router = createRouter({ 19 | history: createWebHashHistory(import.meta.env.BASE_URL), 20 | routes, 21 | }) 22 | 23 | export default router 24 | -------------------------------------------------------------------------------- /项目构建/vite/vue3/src/stores/user.js: -------------------------------------------------------------------------------- 1 | import { defineStore } from 'pinia'; 2 | 3 | export const useUserStore = defineStore('user', { 4 | state: () => { 5 | return { 6 | userInfo: {}, 7 | }; 8 | }, 9 | // 也可以这样定义 10 | // state: () => ({ count: 0 }) 11 | actions: { 12 | 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /项目构建/webpack/README.md: -------------------------------------------------------------------------------- 1 | ## 产物源码分析 - sourcemap 2 | 3 | ```js 4 | { 5 | "version": 3, // 文件版本 6 | "file": "app.js", // 对应文件的名称 7 | "mappings": ";;AAAA", 8 | "sources": [ // 源文件列表 9 | "webpack://webpack-project/./src/test.js" 10 | ], 11 | "names": [], // 源文件变量名和属性名 12 | "sourceRoot": "" // 源文件根目录 13 | } 14 | ``` 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /项目构建/webpack/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | background-color: paleturquoise; 4 | } 5 | -------------------------------------------------------------------------------- /项目构建/webpack/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | <%= htmlWebpackPlugin.options.title%> 11 | 12 | 13 | 14 |
    demo1
    15 | 16 | 17 | -------------------------------------------------------------------------------- /项目构建/webpack/src/index.js: -------------------------------------------------------------------------------- 1 | import './index.css' 2 | import './test_sc.scss' 3 | console.log('hello') 4 | import React from 'react' 5 | import('./log').then(({ default: log }) => { 6 | log('Code Splitting') 7 | }) 8 | export default function log_a() { 9 | console.log('hello') 10 | } 11 | throw new Error('error') 12 | React.createElement('div', null, 'hello') 13 | -------------------------------------------------------------------------------- /项目构建/webpack/src/log.js: -------------------------------------------------------------------------------- 1 | import './test.css' 2 | export default function log(message) { 3 | console.log(message) 4 | } 5 | -------------------------------------------------------------------------------- /项目构建/webpack/src/test.css: -------------------------------------------------------------------------------- 1 | .div { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /项目构建/webpack/src/test.js: -------------------------------------------------------------------------------- 1 | console.log('test') 2 | -------------------------------------------------------------------------------- /项目构建/webpack/src/test_sc.scss: -------------------------------------------------------------------------------- 1 | .div { 2 | color: red; 3 | span { 4 | color: green; 5 | } 6 | } 7 | --------------------------------------------------------------------------------