├── .gitignore ├── README.md ├── code ├── bundleBuild │ ├── build │ │ └── chunk1-86c6208b.js │ ├── buildAnalysis.js │ ├── exportBundle.js │ ├── exportCode.js │ ├── exportDependencies.js │ ├── exportGraph.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── info.js │ │ └── name.js │ ├── testExport.js │ └── webpack.config.js ├── clone │ └── index.js ├── component.json ├── memory.html ├── page.json ├── temp │ └── index.js ├── test.html ├── test │ ├── demo1.js │ ├── demo2.js │ ├── demo3.js │ └── package.json ├── testNode.js └── uploadToServerPlugin │ ├── index.js │ └── package.json ├── images ├── 1571395642.png ├── 23572f515b977ba0.jpeg ├── 30x30.jpg ├── algorithm │ ├── 3723793cc5c810e9d5b06bc95325bf0a.jpg │ └── 913e0ababe43a2d57267df5c5f0832a7.jpg ├── broswer │ ├── 1.png │ ├── 1571395642.png │ ├── 1580211468409.jpg │ ├── 1580211632986.jpg │ ├── 1580212193324.jpg │ ├── 1580212595666.jpg │ ├── 1580300339022.jpg │ ├── 1580308797964.jpg │ ├── 1580310912169.jpg │ ├── 1580311229864.jpg │ ├── 1580314848819.jpg │ ├── 1580314997230.jpg │ ├── 1580315140503.jpg │ ├── 1580315271559.jpg │ ├── 1580315408178.jpg │ ├── 1580315642763.jpg │ ├── 1580316042086.jpg │ ├── 1580353230161.jpg │ ├── 1580571096637.jpg │ ├── 1580573233619.jpg │ ├── 1580573491676.jpg │ ├── 1580574039525.jpg │ ├── 1580574106040.jpg │ ├── 1580575305733.jpg │ ├── 1580623950553.jpg │ ├── 16dbf073d38fd016.png │ ├── 2.png │ ├── 3.gif │ ├── 4.gif │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── WechatIMG24189.png │ ├── WechatIMG25438.png │ ├── tree.png │ └── url.png ├── cache │ ├── 1570865010586.jpg │ ├── WechatIMG111.png │ └── WechatIMG113.png ├── chromePlugin │ ├── 640.png │ ├── CrxMouse Intro.mp4 │ ├── WechatIMG18971.jpeg │ ├── ad-kill.png │ ├── crx-back.png │ ├── crxMouse-openLinkInNewTab.png │ ├── fe-helper-0.png │ ├── fe-helper-1.png │ ├── fe-helper-2.png │ ├── fe-helper-3.png │ ├── fe-helper-4.png │ ├── full-screen-1.png │ ├── full-screen-2.png │ ├── infinity-home.png │ ├── momentum-home.png │ ├── octotree(1).jpg │ ├── octotree.gif │ ├── react-developer-tools-0.png │ ├── redux-0.png │ ├── redux-1.mp4 │ ├── saladict-comment1.png │ ├── saladict-comment2.png │ ├── saladict-intro.png │ ├── saladict.gif │ ├── simpleext.png │ ├── switchyomega-0.png │ ├── vimium-f.png │ ├── vimium-shortcut.png │ ├── vue-0.png │ ├── window-resizer.png │ └── 企业微信截图_15742688997369.png ├── css │ ├── 09BF9EAB-8D67-4448-A7E5-75155D6A2BE1.png │ ├── 7354F2E5-9ECD-45D5-8B03-FC87E70BA52A.png │ ├── 88577E60-A07E-407B-BDAB-47B7A542CA33.png │ ├── 8B4E491B-2B82-4777-B94E-C14F702669F2.png │ ├── A1CDFCA0-0F5F-42DB-94B0-CB9A386C8362.png │ ├── WechatIMG128.png │ ├── WechatIMG129.png │ ├── WechatIMG130.png │ ├── WechatIMG131.png │ ├── WechatIMG132.png │ └── WechatIMG135.png ├── demo.gif ├── docker │ ├── docker_bash.png │ ├── docker_icon.png │ ├── docker_nginx.png │ └── imgge.png ├── error │ ├── error1.png │ ├── error2.png │ └── promise.png ├── feel │ ├── 1622123187322.jpg │ ├── awards.jpeg │ ├── happy.jpeg │ └── sad.jpeg ├── fit │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 640.gif │ ├── 640.webp │ ├── 7.png │ ├── 8.png │ ├── 9.png │ ├── WechatIMG22281.jpeg │ ├── tui.gif │ └── 前端进阶金典.png ├── gzh │ ├── 1571395642.png │ ├── 1577011118347.jpg │ ├── WechatIMG12041.png │ ├── WechatIMG21001.jpeg │ ├── awards.png │ ├── count.png │ ├── logo.png │ ├── qrcode_for_gh_f9d37093c0ed_860.jpg │ ├── 二维码美化 (1).png │ ├── 二维码美化 (2).png │ ├── 二维码美化 2.png │ ├── 二维码美化.png │ └── 默认标题_横版二维码_2019.10.19.png ├── interview.png ├── manifest.png ├── memory │ ├── WechatIMG123.png │ ├── WechatIMG124.png │ ├── WechatIMG125.png │ ├── WechatIMG126.png │ └── WechatIMG127.png ├── microApp │ └── 1558301321-33fada839bec0ff4_fix732.png ├── mobile-debug-method │ ├── 1570592657689.jpg │ ├── 16daf5003347b473 │ ├── 16daf5003347b473.png │ ├── 911587-20171217144346796-1858776039.png │ ├── 911587-20171217164744030-248895045.png │ ├── 911587-20171217172448171-458034262.png │ ├── 911587-20171217173006218-1235538422.png │ └── WechatIMG97.png ├── module.png ├── network │ └── 1591547440557.jpg ├── network_img.jpg ├── node │ ├── 1582789651797.jpg │ ├── 1582793720876.jpg │ ├── 20210923_192550.gif │ └── WechatIMG25869.png ├── npm │ ├── 1_uuG2qo4JwOM1cL4Q0HTN4g.png │ ├── WechatIMG117.png │ └── WechatIMG119.png ├── observePattern │ ├── 911587-20160822161854433-98837207.png │ ├── 911587-20160822162618901-1368751202.png │ └── WechatIMG100.png ├── official_account.png ├── perf │ ├── 1.png │ ├── 10.jpg │ ├── 11.jpg │ ├── 1578912852644.jpg │ ├── 1578925952330.jpg │ ├── 1588150857789.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.png │ ├── 8.jpg │ ├── 9.jpg │ ├── WechatIMG21363.png │ ├── WechatIMG57.png │ ├── WechatIMG58.png │ ├── perf.png │ └── 性能指标监控:上报.png ├── qrcode │ ├── 1571395642.png │ ├── WechatIMG8142.jpeg │ ├── logo.png │ ├── qrcode_for_gh_f9d37093c0ed_860.jpg │ ├── 二维码美化 (1).png │ ├── 二维码美化 (2).png │ ├── 二维码美化 2.png │ └── 二维码美化.png ├── qrcode_for_gh_f9d37093c0ed_1280.jpg ├── regexp │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ └── 9.png ├── rpc │ └── 1528342678252-8cdab943-2583-4b5c-9f7e-559d05bcff61.png ├── serverless │ ├── faas.jpg │ ├── functioncall.png │ └── k8s │ │ └── faas&paas.png ├── setTimeout │ ├── WechatIMG140.png │ ├── WechatIMG141.jpeg │ └── WechatIMG142.png ├── tapable_hook ├── tool │ ├── ocli_run.png │ └── oclif.png ├── vscode │ ├── 1592591748259.jpg │ ├── cai.gif │ ├── chaoyue.png │ ├── miku.png │ └── yanzi.jpg ├── wasm │ ├── WechatIMG22663.png │ ├── js_wasm.jpg │ ├── wasm.jpeg │ └── webp_support.jpg ├── webpack │ ├── 1574780330785.jpg │ ├── 1574780831775.jpg │ ├── 1574780871934.jpg │ ├── 1576568168894.jpg │ ├── 911587-20190620182944300-1662095128.png │ ├── 911587-20190620183511619-418859981.png │ ├── 911587-20190620184524148-27732924.png │ ├── 911587-20190620184711917-777951217.png │ ├── 911587-20190620184840702-576904530.png │ ├── MF1.png │ ├── MF2.png │ ├── MF3.png │ └── MF4.png ├── websocket.jpg └── whistle │ ├── 640 (1).webp │ ├── 640 (2).webp │ ├── 640 (3).webp │ ├── 640.gif │ ├── 640.webp │ └── install.webp ├── markdown ├── designPatterns │ ├── 从大厂面试题看观察者模式.md │ ├── 插件系统设计.md │ └── 设计模式基础知识.md ├── JavaScript │ ├── 911587-20160905112633676-1649202219.png │ ├── 911587-20160905165315535-979900998.png │ ├── 911587-20160905170024066-1676271321.png │ ├── 911587-20160905171954254-954754097.png │ ├── JavaScript 原型 - 原型与原型链.md │ ├── JavaScript 原型 - 原型继承.md │ ├── Shape-Triangle-irrelevant.png │ ├── Shape-Triangle-relevant.png │ ├── downloader-extends.png │ ├── foo-prototype-__proto__.png │ ├── foo-prototype.png │ ├── new-foo.png │ ├── new-triangle.png │ ├── prototype-chain.png │ ├── spread.png │ ├── 一文完全吃透 JavaScript 继承.md │ ├── 原型继承.pptx │ └── 扩展运算符.md ├── Promise │ ├── Promise链式调用原理.md │ ├── async-await原理解析.md │ └── test.js ├── PromisePolyfill.js ├── Q&A │ ├── Chrome 浏览器垃圾回收机制与内存泄漏分析.md │ ├── Chrome 浏览器相关原理与性能优化.md │ ├── Chrome浏览器setTimeout实现原理和使用注意.md │ ├── lazyMan.js │ ├── preTest.md │ ├── test.html │ ├── 事件循环机制满分答案.md │ ├── 前端面试题答案整理.md │ ├── 手写代码.js │ ├── 有必要知道的.md │ ├── 浏览器相关原理详细总结一(面试题).md │ ├── 浏览器相关原理详细总结二(面试题).md │ ├── 深拷贝的实现.md │ ├── 现代浏览器架构漫谈.md │ ├── 细说浏览器输入URL后发生了什么.md │ ├── 试题自检.md │ └── 面试题整理一波.md ├── RegExp │ └── 正则入门手册.md ├── Tree-shaking之模块输出.md ├── ad │ └── 吐血教程：搭建Flutter开发环境.md ├── algorithm │ ├── code │ │ ├── LRU.js │ │ ├── 其他.js │ │ ├── 动态规划.md │ │ ├── 排序.js │ │ ├── 栈操作.md │ │ ├── 树.js │ │ ├── 递归.js │ │ └── 阶乘.js │ ├── 算法与数据结构的一些基础概念.md │ ├── 递归.md │ └── 链表操作.md ├── cloudnative │ ├── docker │ │ ├── docker-logs-id.png │ │ ├── docker-ps-a.png │ │ ├── docker.md │ │ ├── k8s学习.md │ │ └── 简介.md │ ├── k8s.md │ ├── 云原生可观测性.md │ └── 概念.md ├── css │ └── 10个让你受益匪浅的css使用技巧.md ├── feel │ ├── 专心工作和只想搞钱的女前端开发.md │ ├── 分享几个有感触的故事.md │ ├── 如何保持学习的动力.md │ ├── 工作几年后，我乱了.md │ ├── 工作这么久才第一次拿全年年终奖.md │ ├── 工作迷茫的学习办法.md │ ├── 晋升笔记.md │ └── 浪到飞起的前端女程序员的2019.md ├── interview │ ├── 前端知识体系准备.md │ ├── 复习路线.md │ ├── 头条-开发者生态-面经.md │ ├── 微信-小程序交易平台-面经.md │ ├── 每周N题10月汇总.md │ ├── 每周N题12月汇总.md │ ├── 每周N题3月汇总.md │ ├── 腾讯要求.md │ ├── 阿里-业务平台事业部-面经.md │ └── 面试复盘.md ├── microApp │ ├── serviceMesh.md │ ├── 从0手写SingleSpa方案.md │ ├── 微前端基本原理.md │ └── 微前端架构设计方案大PK.md ├── midway │ ├── faas.md │ ├── loc.md │ └── 疑问整理.md ├── miniprogram │ └── 基本原理.md ├── network │ ├── http2&http3总结.md │ ├── 你应该知道的https知识.md │ ├── 你应该知道的options请求.md │ ├── 原生JS封装Ajax插件(同域&&jsonp跨域).md │ └── 网络协议.md ├── node │ ├── Nodejs之RPC协议简介.md │ ├── nestjs学习.md │ ├── node.js模块机制.md │ ├── nodejs新版本13.2.0正式支持ES modules特性.md │ ├── node事件循环机制.md │ ├── node命令行参数.md │ ├── 可观测和可控制.md │ └── 问题记录.md ├── other │ ├── JS模块化总结.md │ ├── vscode插件.md │ ├── web安全总结.md │ ├── 你不知道的works.md │ ├── 前端Q的小小小里程碑.md │ ├── 前端Q线下活动精彩回顾.md │ ├── 前端中的接口聚合.md │ ├── 前端学习图谱与新奇趣玩(直播回顾).md │ ├── 前端效能提升之不可忽略的 Chrome 插件.md │ ├── 博客推荐.md │ ├── 如何优雅处理前端异常.md │ ├── 招聘.md │ ├── 用户行为帧记录.md │ ├── 离线缓存之manifest.md │ ├── 移动端真机调试方法总结.md │ ├── 程序员佛系减肥指南.md │ ├── 给自己搭个脚手架.md │ └── 走进安卓的重灾区---video.md ├── perf │ ├── 一文学会利用Chrome Dev Tools 进行页面性能分析.md │ ├── 前端性能优化之自定义性能指标及上报方法详解.md │ ├── 前端性能优化之通用性能指标定义及上报策略详解.md │ ├── 图片性能优化的那些事.md │ ├── 最新chrome性能指标累计布局位移解读.md │ └── 高性能javascript书写方法.md ├── practice │ ├── JS图片上传预览插件制作.md │ └── 小程序依赖分析.md ├── react │ ├── ReactFiber.md │ ├── hooks学习.md │ ├── react学习.md │ └── react的一些最佳实践.md ├── recommend │ └── 2019.9.23.md ├── record │ ├── 回顾.md │ ├── 每周学习&成果输出记录.md │ └── 随便写写.md ├── serverless │ ├── blog-capture.png │ ├── blog-sequence.png │ ├── local-debug.jpeg │ ├── mysql-buy.png │ ├── mysql-ip.png │ ├── new-env-nat.png │ ├── new-env-review.png │ ├── new-scf.png │ ├── new-select-template.png │ ├── serverless-code.png │ ├── serverless-trigger.png │ ├── serverless-url.png │ ├── serverless-vscode-plugin.png │ ├── tcloud-cns-apigateway.png │ ├── tcloud-cns-detail.png │ ├── tcloud-cns.png │ ├── tcloud-serverless-entry.png │ ├── tcloud-serverless-main.png │ └── 万字长文之 Serverless 实战指南.md ├── summary │ ├── JS实现页面进入、返回定位到具体位置总结.md │ └── serviceWorker介绍.md ├── test │ └── 前端测试框架对比与选择.md ├── tool │ ├── Git常见场景解决方法总结.md │ ├── js开发技巧总结.md │ ├── whistle实用功能使用介绍.md │ ├── 使用oclif框架快速创建命令行工具教程.md │ └── 工作流梳理.md ├── translate │ ├── NPM命令使用技巧.md │ ├── 你应该知道的13个有用的JavaScript数组技巧.md │ └── 你应该避免的3个javascript性能错误.md ├── tweb │ ├── 2019 TWeb 腾讯前端技术大会精彩回顾.md │ ├── 2021 TWeb 腾讯前端技术大会精彩回顾 │ │ ├── BFF.png │ │ ├── DSL案例.png │ │ ├── DSL案例2.png │ │ ├── N+1问题解释.png │ │ ├── TDE.png │ │ ├── TDE云端配置.png │ │ ├── flutter sdk 的挑战.png │ │ ├── index.md │ │ ├── nocalhost.mp4 │ │ ├── nocalhost.png │ │ ├── peg.js │ │ ├── 从K8s生态打造弹性环境体系.png │ │ ├── 失控的接口调用.png │ │ ├── 河南暴雨汛情的救援文档.png │ │ ├── 腾讯问卷 DSL.png │ │ ├── 腾讯问卷定制开发1.png │ │ ├── 腾讯问卷定制开发2.png │ │ ├── 解析器生成器 PEGjs.png │ │ └── 跨端框架趋势.png │ ├── WechatIMG18470.png │ ├── ali-console-demo-0.gif │ ├── ali-console-flow.png │ ├── ali-console.png │ ├── headless-cms.png │ ├── omi-code.png │ ├── omi-rotate.gif │ ├── qiebeidanci.png │ ├── serverless-0.png │ ├── serverless-1.png │ ├── serverless-code.png │ ├── serverless-start.png │ ├── serverless-trigger.png │ ├── serverless.png │ ├── strapi.mp4 │ ├── tencent-beidanci.png │ ├── tencent-course-new.png │ └── tencent-scf-devops.png ├── vue │ ├── vue2原理探索--响应式系统.md │ ├── vue3响应式方案.md │ └── vue事件机制实现.md ├── wasm │ └── 调研.md ├── webpack │ ├── HMR原理.md │ ├── MF的思考.md │ ├── Webpack 深入浅出之公司级分享总结(内附完整ppt).md │ ├── Webpack4打包机制原理解析.md │ └── Webpack性能优化.md ├── webpack插件机制.md ├── webpack深入浅出.md └── 项目常用配置.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /code/uploadToServerPlugin/node_modules 6 | /code/bundleBuild/node_modules 7 | 8 | # production 9 | /build 10 | /dist 11 | /out 12 | /code/bundleBuild/dist 13 | /code/bundleBuild/build 14 | 15 | # misc 16 | .DS_Store 17 | .env 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | package-lock.json 22 | .cache 23 | 24 | # IDE 25 | /.idea 26 | /.vscode -------------------------------------------------------------------------------- /code/bundleBuild/buildAnalysis.js: -------------------------------------------------------------------------------- 1 | var modulesData = { 2 | "./src/index.js":(function(module, __webpack_exports__, __webpack_require__) { 3 | __webpack_require__.r(__webpack_exports__); 4 | var _info_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/info.js"); 5 | console.log(_info_js__WEBPACK_IMPORTED_MODULE_0__["default"]) 6 | }), 7 | "./src/name.js": 8 | (function(module, __webpack_exports__, __webpack_require__) { 9 | __webpack_require__.r(__webpack_exports__); 10 | __webpack_require__.d(__webpack_exports__, "name", function() { return name; }); 11 | const name = 'winty' 12 | }) 13 | }; 14 | 15 | (function (modules) { 16 | function __webpack_require__(moduleId) {...} 17 | return __webpack_require__("./src/index.js"); 18 | })(modulesData); 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | // 每个模块的缓存 29 | var installedModules = {}; 30 | 31 | function __webpack_require__(moduleId) { 32 | 33 | // 查看是否已缓存，有则直接返回exports对象 34 | if (installedModules[moduleId]) { 35 | return installedModules[moduleId].exports; 36 | } 37 | // 无缓存，则新建一个module对象 38 | var module = installedModules[moduleId] = { 39 | i: moduleId, 40 | l: false, 41 | exports: {} 42 | }; 43 | 44 | // 执行模块文件代码 45 | modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 46 | 47 | // 标识为已加载 48 | module.l = true; 49 | 50 | // 返回module.exports对象 51 | return module.exports; 52 | } -------------------------------------------------------------------------------- /code/bundleBuild/exportBundle.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | 4 | const exportBundle = (data)=>{ 5 | const directoryPath = path.resolve(__dirname,'dist') 6 | if (!fs.existsSync(directoryPath)) { 7 | fs.mkdirSync(directoryPath) 8 | } 9 | const filePath = path.resolve(__dirname, 'dist/bundle.js') 10 | fs.writeFileSync(filePath, `${data}\n`) 11 | } 12 | const access = async filePath => new Promise((resolve, reject) => { 13 | fs.access(filePath, (err) => { 14 | if (err) { 15 | if (err.code === 'EXIST') { 16 | resolve(true) 17 | } 18 | resolve(false) 19 | } 20 | resolve(true) 21 | }) 22 | }) 23 | module.exports = exportBundle -------------------------------------------------------------------------------- /code/bundleBuild/exportCode.js: -------------------------------------------------------------------------------- 1 | const exportGraph = require('./exportGraph') 2 | const exportBundle = require('./exportBundle') 3 | 4 | //下面是生成代码字符串的操作 5 | const exportCode = (entry)=>{ 6 | //要先把对象转换为字符串，不然在下面的模板字符串中会默认调取对象的toString方法，参数变成[Object object] 7 | const graph = JSON.stringify(exportGraph(entry)) 8 | exportBundle(` 9 | (function(graph) { 10 | //require函数的本质是执行一个模块的代码，然后将相应变量挂载到exports对象上 11 | function require(module) { 12 | //localRequire的本质是拿到依赖包的exports变量 13 | function localRequire(relativePath) { 14 | return require(graph[module].dependencies[relativePath]); 15 | } 16 | var exports = {}; 17 | (function(require, exports, code) { 18 | eval(code); 19 | })(localRequire, exports, graph[module].code); 20 | return exports;//函数返回指向局部变量，形成闭包，exports变量在函数执行后不会被摧毁 21 | } 22 | require('${entry}') 23 | })(${graph})`) 24 | } 25 | module.exports = exportCode 26 | -------------------------------------------------------------------------------- /code/bundleBuild/exportDependencies.js: -------------------------------------------------------------------------------- 1 | //导入包 2 | const fs = require('fs') 3 | const path = require('path') 4 | const parser = require('@babel/parser') 5 | const traverse = require('@babel/traverse').default 6 | const babel = require('@babel/core') 7 | 8 | const exportDependencies = (filename)=>{ 9 | const content = fs.readFileSync(filename,'utf-8') 10 | const ast = parser.parse(content, { 11 | sourceType : 'module' //babel官方规定必须加这个参数，不然无法识别ES Module 12 | }) 13 | 14 | const dependencies = {} 15 | //遍历AST抽象语法树 16 | traverse(ast, { 17 | //获取通过import引入的模块 18 | ImportDeclaration({node}){ 19 | const dirname = path.dirname(filename) 20 | const newFile = './' + path.join(dirname, node.source.value) 21 | //保存所依赖的模块 22 | dependencies[node.source.value] = newFile 23 | } 24 | }) 25 | //通过@babel/core和@babel/preset-env进行代码的转换 26 | const {code} = babel.transformFromAst(ast, null, { 27 | presets: ["@babel/preset-env"] 28 | }) 29 | return{ 30 | filename,//该文件名 31 | dependencies,//该文件所依赖的模块集合(键值对存储) 32 | code//转换后的代码 33 | } 34 | } 35 | module.exports = exportDependencies -------------------------------------------------------------------------------- /code/bundleBuild/exportGraph.js: -------------------------------------------------------------------------------- 1 | const exportDependencies = require('./exportDependencies') 2 | 3 | //entry为入口文件 4 | const exportGraph = (entry)=>{ 5 | const entryModule = exportDependencies(entry) 6 | const graphArray = [entryModule] 7 | for(let i = 0; i < graphArray.length; i++){ 8 | const item = graphArray[i]; 9 | const {dependencies} = item;//拿到文件所依赖的模块集合(键值对存储) 10 | for(let j in dependencies){ 11 | graphArray.push( 12 | exportDependencies(dependencies[j]) 13 | )//关键代码，目的是将入口模块及其所有相关的模块放入数组 14 | } 15 | } 16 | //接下来生成图谱 17 | const graph = {} 18 | graphArray.forEach(item => { 19 | graph[item.filename] = { 20 | dependencies: item.dependencies, 21 | code: item.code 22 | } 23 | }) 24 | return graph 25 | } 26 | module.exports = exportGraph 27 | 28 | 29 | // //获取用户为 Loader 传入的 options 30 | // const loaderUtils =require ('loader-utils'); 31 | // module.exports = (source) => { 32 | // const options= loaderUtils.getOptions(this); 33 | // return source; 34 | // } 35 | // //返回sourceMap 36 | // module.exports = (source)=> { 37 | // this.callback(null, source, sourceMaps); 38 | // //当我们使用 this.callback 返回内容时 ，该 Loader 必须返回 undefined, 39 | // //以让 Webpack 知道该 Loader 返回的结果在 this.callback 中，而不是 return中 40 | // return; 41 | // } 42 | // // 异步 43 | // module.exports = (source) => { 44 | // const callback = this.async() 45 | // someAsyncOperation(source, (err, result, sourceMaps, ast) => { 46 | // // 通过 callback 返回异步执行后的结果 47 | // callback(err, result, sourceMaps, ast) 48 | // }) 49 | // } 50 | // //缓存加速 51 | // module.exports = (source) => { 52 | // //关闭该 Loader 的缓存功能 53 | // this.cacheable(false) 54 | // return source 55 | // } 56 | -------------------------------------------------------------------------------- /code/bundleBuild/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bundlebuild", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "exportDependencies.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack --webpack.config" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@babel/core": "^7.4.5", 14 | "@babel/parser": "^7.4.5", 15 | "@babel/preset-env": "^7.4.5", 16 | "@babel/traverse": "^7.4.5", 17 | "webpack": "^4.39.1", 18 | "webpack-cli": "^3.3.6" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /code/bundleBuild/src/index.js: -------------------------------------------------------------------------------- 1 | import info from './info.js' 2 | console.log(info) 3 | -------------------------------------------------------------------------------- /code/bundleBuild/src/info.js: -------------------------------------------------------------------------------- 1 | import {name} from './name.js'; 2 | const info = `${name} is beautiful` 3 | export default info; 4 | -------------------------------------------------------------------------------- /code/bundleBuild/src/name.js: -------------------------------------------------------------------------------- 1 | export const name = 'winty' 2 | -------------------------------------------------------------------------------- /code/bundleBuild/testExport.js: -------------------------------------------------------------------------------- 1 | const exportCode = require('./exportCode') 2 | const code = exportCode('./src/index.js') 3 | 4 | 5 | // const exportGraph = require('./exportGraph') 6 | // console.log(exportGraph('./src/index.js')) 7 | 8 | const exportDependencies = require('./exportDependencies') 9 | console.log(exportDependencies('./src/index.js')) 10 | -------------------------------------------------------------------------------- /code/bundleBuild/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'development', // 不压缩 5 | entry: { 6 | chunk1: './src/index.js' 7 | }, 8 | output: { 9 | path: path.resolve(__dirname, './build'), 10 | filename: '[name]-[chunkhash:8].js' // 为了后面的多入口 11 | }, 12 | devtool: '' // 去掉sourcemap，模块不会被eval包裹，更直观 13 | }; -------------------------------------------------------------------------------- /code/component.json: -------------------------------------------------------------------------------- 1 | { 2 | "type":"input", 3 | "properties":{ 4 | "defaultValue": 2, 5 | "type": "number" 6 | }, 7 | "directives":['v-checkNum'], 8 | "validRules":[()=>{}], 9 | "effects":[{ 10 | "onChange":()=>{}, 11 | "blur":{}=>{} 12 | }], 13 | "id":"test" 14 | } -------------------------------------------------------------------------------- /code/memory.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /code/page.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/code/page.json -------------------------------------------------------------------------------- /code/temp/index.js: -------------------------------------------------------------------------------- 1 | function rawMethod(a){ 2 | console.log(0) 3 | return a+1; 4 | } 5 | function middleWare1(next){ 6 | console.log(1) 7 | return function(a){ 8 | return next(a)+1 9 | } 10 | } 11 | function middleWare2(next){ 12 | console.log(2) 13 | return function(a){ 14 | return next(a)+1 15 | } 16 | } 17 | function middleWare3(next){ 18 | console.log(3) 19 | return function(a){ 20 | return next(a)+1 21 | } 22 | } 23 | const applyMiddleWare=(...args)=>{ 24 | //补充代码 25 | const fn = [...args] 26 | return fn.reduce((prev,cur,curIndex,array)=>{ 27 | return cur(prev) 28 | }) 29 | } 30 | //test 31 | const newFunc = applyMiddleWare(rawMethod,middleWare2,middleWare1) 32 | console.log(newFunc(1)) 33 | //执行顺序，middleWare2->middleWare1->rawMethod 34 | const newFunc2 = applyMiddleWare(newFunc,middleWare3) 35 | console.log(newFunc2(1)) 36 | //执行顺序，middleWare3->middleWare2->middleWare1->rawMethod -------------------------------------------------------------------------------- /code/test/demo1.js: -------------------------------------------------------------------------------- 1 | console.log('start demo1'); 2 | 3 | setTimeout(() => { 4 | console.log('end demo1'); 5 | }, 5000); -------------------------------------------------------------------------------- /code/test/demo2.js: -------------------------------------------------------------------------------- 1 | console.log('start demo2'); 2 | 3 | setTimeout(() => { 4 | console.log('end demo2'); 5 | }, 2000); -------------------------------------------------------------------------------- /code/test/demo3.js: -------------------------------------------------------------------------------- 1 | console.log('start demo3'); 2 | 3 | setTimeout(() => { 4 | console.log('end demo3'); 5 | }, 1000); -------------------------------------------------------------------------------- /code/test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "main": "demo.js", 5 | "scripts": { 6 | "test":"node demo1.js & node demo2.js && node demo3.js" 7 | } 8 | } -------------------------------------------------------------------------------- /code/testNode.js: -------------------------------------------------------------------------------- 1 | // setImmediate(() => console.log('timeout1')); 2 | // setImmediate(() => { 3 | // console.log('timeout1') 4 | // Promise.resolve().then(() => console.log('promise resolve')) 5 | // process.nextTick(() => console.log('next tick1')) 6 | // }); 7 | // setImmediate(() => { 8 | // console.log('timeout2') 9 | // process.nextTick(() => console.log('next tick2')) 10 | // }); 11 | // setImmediate(() => console.log('timeout3')); 12 | // setImmediate(() => console.log('timeout4')); 13 | 14 | // async function async1(){ 15 | // console.log('async1 start') 16 | // await async2() 17 | // console.log('async1 end') 18 | // } 19 | // async function async2(){ 20 | // console.log('async2') 21 | // } 22 | // console.log('script start') 23 | // setTimeout(function(){ 24 | // console.log('setTimeout0') 25 | // },0) 26 | // setTimeout(function(){ 27 | // console.log('setTimeout3') 28 | // },3) 29 | // setImmediate(() => console.log('setImmediate')); 30 | // process.nextTick(() => console.log('nextTick')); 31 | // async1(); 32 | // new Promise(function(resolve){ 33 | // console.log('promise1') 34 | // resolve(); 35 | // console.log('promise2') 36 | // }).then(function(){ 37 | // console.log('promise3') 38 | // }) 39 | // console.log('script end') 40 | 41 | //script start=>async1 start=>async2=>promise1=>promise2 42 | // =>script end=>nextTick=>async1 end=>promise3=>setTimeout0 43 | // =>setImmediate=>setTimeout3 44 | 45 | // setInterval(() => { 46 | // console.log('setInterval') 47 | // }, 100) 48 | 49 | // process.nextTick(function tick () { 50 | // process.nextTick(tick) 51 | // }) 52 | 53 | // const promise = Promise.resolve() 54 | // .then(() => { 55 | // return promise 56 | // }) 57 | // promise.catch(console.error) 58 | setImmediate(() => { 59 | console.log(1) 60 | setTimeout(() => { 61 | console.log(2) 62 | }, 100) 63 | setImmediate(() => { 64 | console.log(3) 65 | }) 66 | process.nextTick(() => { 67 | console.log(4) 68 | }) 69 | }) 70 | process.nextTick(() => { 71 | console.log(5) 72 | setTimeout(() => { 73 | console.log(6) 74 | }, 100) 75 | setImmediate(() => { 76 | console.log(7) 77 | }) 78 | process.nextTick(() => { 79 | console.log(8) 80 | }) 81 | }) 82 | console.log(9) -------------------------------------------------------------------------------- /code/uploadToServerPlugin/index.js: -------------------------------------------------------------------------------- 1 | const client = require('scp2') 2 | 3 | class UploadToServerPlugin{ 4 | constructor(pluginOptions){ 5 | this.options = pluginOptions 6 | } 7 | apply(compiler){ 8 | compiler.plugin('emit', function (compilation, callback) { 9 | console.log('compilation',compilation); 10 | }); 11 | compiler.plugin('done',(stats)=>{ 12 | // console.log('stats:',stats) 13 | this.doneCallback(stats) 14 | }) 15 | compiler.plugin('failed',(err)=>{ 16 | this.failCallback(err) 17 | }) 18 | } 19 | doneCallback(stats){ 20 | const output_path = stats.compiler.Compiler.outputPath 21 | client.scp(this.options.local_path||output_path, { 22 | host: this.options.host, 23 | username: this.options.username, 24 | password: this.options.password, 25 | path: this.options.server_path 26 | }, function (err) { 27 | console.error("upload fail",err) 28 | }) 29 | } 30 | } 31 | module.exports = UploadToServerPlugin -------------------------------------------------------------------------------- /code/uploadToServerPlugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uploadtoserverplugin", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "scp2": "^0.5.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /images/1571395642.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/1571395642.png -------------------------------------------------------------------------------- /images/23572f515b977ba0.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/23572f515b977ba0.jpeg -------------------------------------------------------------------------------- /images/30x30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/30x30.jpg -------------------------------------------------------------------------------- /images/algorithm/3723793cc5c810e9d5b06bc95325bf0a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/algorithm/3723793cc5c810e9d5b06bc95325bf0a.jpg -------------------------------------------------------------------------------- /images/algorithm/913e0ababe43a2d57267df5c5f0832a7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/algorithm/913e0ababe43a2d57267df5c5f0832a7.jpg -------------------------------------------------------------------------------- /images/broswer/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1.png -------------------------------------------------------------------------------- /images/broswer/1571395642.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1571395642.png -------------------------------------------------------------------------------- /images/broswer/1580211468409.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580211468409.jpg -------------------------------------------------------------------------------- /images/broswer/1580211632986.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580211632986.jpg -------------------------------------------------------------------------------- /images/broswer/1580212193324.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580212193324.jpg -------------------------------------------------------------------------------- /images/broswer/1580212595666.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580212595666.jpg -------------------------------------------------------------------------------- /images/broswer/1580300339022.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580300339022.jpg -------------------------------------------------------------------------------- /images/broswer/1580308797964.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580308797964.jpg -------------------------------------------------------------------------------- /images/broswer/1580310912169.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580310912169.jpg -------------------------------------------------------------------------------- /images/broswer/1580311229864.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580311229864.jpg -------------------------------------------------------------------------------- /images/broswer/1580314848819.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580314848819.jpg -------------------------------------------------------------------------------- /images/broswer/1580314997230.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580314997230.jpg -------------------------------------------------------------------------------- /images/broswer/1580315140503.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580315140503.jpg -------------------------------------------------------------------------------- /images/broswer/1580315271559.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580315271559.jpg -------------------------------------------------------------------------------- /images/broswer/1580315408178.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580315408178.jpg -------------------------------------------------------------------------------- /images/broswer/1580315642763.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580315642763.jpg -------------------------------------------------------------------------------- /images/broswer/1580316042086.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580316042086.jpg -------------------------------------------------------------------------------- /images/broswer/1580353230161.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580353230161.jpg -------------------------------------------------------------------------------- /images/broswer/1580571096637.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580571096637.jpg -------------------------------------------------------------------------------- /images/broswer/1580573233619.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580573233619.jpg -------------------------------------------------------------------------------- /images/broswer/1580573491676.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580573491676.jpg -------------------------------------------------------------------------------- /images/broswer/1580574039525.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580574039525.jpg -------------------------------------------------------------------------------- /images/broswer/1580574106040.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580574106040.jpg -------------------------------------------------------------------------------- /images/broswer/1580575305733.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580575305733.jpg -------------------------------------------------------------------------------- /images/broswer/1580623950553.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/1580623950553.jpg -------------------------------------------------------------------------------- /images/broswer/16dbf073d38fd016.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/16dbf073d38fd016.png -------------------------------------------------------------------------------- /images/broswer/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/2.png -------------------------------------------------------------------------------- /images/broswer/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/3.gif -------------------------------------------------------------------------------- /images/broswer/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/4.gif -------------------------------------------------------------------------------- /images/broswer/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/5.png -------------------------------------------------------------------------------- /images/broswer/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/6.png -------------------------------------------------------------------------------- /images/broswer/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/7.png -------------------------------------------------------------------------------- /images/broswer/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/8.png -------------------------------------------------------------------------------- /images/broswer/WechatIMG24189.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/WechatIMG24189.png -------------------------------------------------------------------------------- /images/broswer/WechatIMG25438.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/WechatIMG25438.png -------------------------------------------------------------------------------- /images/broswer/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/tree.png -------------------------------------------------------------------------------- /images/broswer/url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/broswer/url.png -------------------------------------------------------------------------------- /images/cache/1570865010586.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/cache/1570865010586.jpg -------------------------------------------------------------------------------- /images/cache/WechatIMG111.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/cache/WechatIMG111.png -------------------------------------------------------------------------------- /images/cache/WechatIMG113.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/cache/WechatIMG113.png -------------------------------------------------------------------------------- /images/chromePlugin/640.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/640.png -------------------------------------------------------------------------------- /images/chromePlugin/CrxMouse Intro.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/CrxMouse Intro.mp4 -------------------------------------------------------------------------------- /images/chromePlugin/WechatIMG18971.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/WechatIMG18971.jpeg -------------------------------------------------------------------------------- /images/chromePlugin/ad-kill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/ad-kill.png -------------------------------------------------------------------------------- /images/chromePlugin/crx-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/crx-back.png -------------------------------------------------------------------------------- /images/chromePlugin/crxMouse-openLinkInNewTab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/crxMouse-openLinkInNewTab.png -------------------------------------------------------------------------------- /images/chromePlugin/fe-helper-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/fe-helper-0.png -------------------------------------------------------------------------------- /images/chromePlugin/fe-helper-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/fe-helper-1.png -------------------------------------------------------------------------------- /images/chromePlugin/fe-helper-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/fe-helper-2.png -------------------------------------------------------------------------------- /images/chromePlugin/fe-helper-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/fe-helper-3.png -------------------------------------------------------------------------------- /images/chromePlugin/fe-helper-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/fe-helper-4.png -------------------------------------------------------------------------------- /images/chromePlugin/full-screen-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/full-screen-1.png -------------------------------------------------------------------------------- /images/chromePlugin/full-screen-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/full-screen-2.png -------------------------------------------------------------------------------- /images/chromePlugin/infinity-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/infinity-home.png -------------------------------------------------------------------------------- /images/chromePlugin/momentum-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/momentum-home.png -------------------------------------------------------------------------------- /images/chromePlugin/octotree(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/octotree(1).jpg -------------------------------------------------------------------------------- /images/chromePlugin/octotree.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/octotree.gif -------------------------------------------------------------------------------- /images/chromePlugin/react-developer-tools-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/react-developer-tools-0.png -------------------------------------------------------------------------------- /images/chromePlugin/redux-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/redux-0.png -------------------------------------------------------------------------------- /images/chromePlugin/redux-1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/redux-1.mp4 -------------------------------------------------------------------------------- /images/chromePlugin/saladict-comment1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/saladict-comment1.png -------------------------------------------------------------------------------- /images/chromePlugin/saladict-comment2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/saladict-comment2.png -------------------------------------------------------------------------------- /images/chromePlugin/saladict-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/saladict-intro.png -------------------------------------------------------------------------------- /images/chromePlugin/saladict.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/saladict.gif -------------------------------------------------------------------------------- /images/chromePlugin/simpleext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/simpleext.png -------------------------------------------------------------------------------- /images/chromePlugin/switchyomega-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/switchyomega-0.png -------------------------------------------------------------------------------- /images/chromePlugin/vimium-f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/vimium-f.png -------------------------------------------------------------------------------- /images/chromePlugin/vimium-shortcut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/vimium-shortcut.png -------------------------------------------------------------------------------- /images/chromePlugin/vue-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/vue-0.png -------------------------------------------------------------------------------- /images/chromePlugin/window-resizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/window-resizer.png -------------------------------------------------------------------------------- /images/chromePlugin/企业微信截图_15742688997369.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/chromePlugin/企业微信截图_15742688997369.png -------------------------------------------------------------------------------- /images/css/09BF9EAB-8D67-4448-A7E5-75155D6A2BE1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/09BF9EAB-8D67-4448-A7E5-75155D6A2BE1.png -------------------------------------------------------------------------------- /images/css/7354F2E5-9ECD-45D5-8B03-FC87E70BA52A.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/7354F2E5-9ECD-45D5-8B03-FC87E70BA52A.png -------------------------------------------------------------------------------- /images/css/88577E60-A07E-407B-BDAB-47B7A542CA33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/88577E60-A07E-407B-BDAB-47B7A542CA33.png -------------------------------------------------------------------------------- /images/css/8B4E491B-2B82-4777-B94E-C14F702669F2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/8B4E491B-2B82-4777-B94E-C14F702669F2.png -------------------------------------------------------------------------------- /images/css/A1CDFCA0-0F5F-42DB-94B0-CB9A386C8362.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/A1CDFCA0-0F5F-42DB-94B0-CB9A386C8362.png -------------------------------------------------------------------------------- /images/css/WechatIMG128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/WechatIMG128.png -------------------------------------------------------------------------------- /images/css/WechatIMG129.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/WechatIMG129.png -------------------------------------------------------------------------------- /images/css/WechatIMG130.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/WechatIMG130.png -------------------------------------------------------------------------------- /images/css/WechatIMG131.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/WechatIMG131.png -------------------------------------------------------------------------------- /images/css/WechatIMG132.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/WechatIMG132.png -------------------------------------------------------------------------------- /images/css/WechatIMG135.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/css/WechatIMG135.png -------------------------------------------------------------------------------- /images/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/demo.gif -------------------------------------------------------------------------------- /images/docker/docker_bash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/docker/docker_bash.png -------------------------------------------------------------------------------- /images/docker/docker_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/docker/docker_icon.png -------------------------------------------------------------------------------- /images/docker/docker_nginx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/docker/docker_nginx.png -------------------------------------------------------------------------------- /images/docker/imgge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/docker/imgge.png -------------------------------------------------------------------------------- /images/error/error1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/error/error1.png -------------------------------------------------------------------------------- /images/error/error2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/error/error2.png -------------------------------------------------------------------------------- /images/error/promise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/error/promise.png -------------------------------------------------------------------------------- /images/feel/1622123187322.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/feel/1622123187322.jpg -------------------------------------------------------------------------------- /images/feel/awards.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/feel/awards.jpeg -------------------------------------------------------------------------------- /images/feel/happy.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/feel/happy.jpeg -------------------------------------------------------------------------------- /images/feel/sad.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/feel/sad.jpeg -------------------------------------------------------------------------------- /images/fit/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/1.png -------------------------------------------------------------------------------- /images/fit/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/10.png -------------------------------------------------------------------------------- /images/fit/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/11.png -------------------------------------------------------------------------------- /images/fit/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/2.png -------------------------------------------------------------------------------- /images/fit/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/3.png -------------------------------------------------------------------------------- /images/fit/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/4.png -------------------------------------------------------------------------------- /images/fit/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/5.png -------------------------------------------------------------------------------- /images/fit/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/6.png -------------------------------------------------------------------------------- /images/fit/640.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/640.gif -------------------------------------------------------------------------------- /images/fit/640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/640.webp -------------------------------------------------------------------------------- /images/fit/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/7.png -------------------------------------------------------------------------------- /images/fit/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/8.png -------------------------------------------------------------------------------- /images/fit/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/9.png -------------------------------------------------------------------------------- /images/fit/WechatIMG22281.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/WechatIMG22281.jpeg -------------------------------------------------------------------------------- /images/fit/tui.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/tui.gif -------------------------------------------------------------------------------- /images/fit/前端进阶金典.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/fit/前端进阶金典.png -------------------------------------------------------------------------------- /images/gzh/1571395642.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/1571395642.png -------------------------------------------------------------------------------- /images/gzh/1577011118347.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/1577011118347.jpg -------------------------------------------------------------------------------- /images/gzh/WechatIMG12041.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/WechatIMG12041.png -------------------------------------------------------------------------------- /images/gzh/WechatIMG21001.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/WechatIMG21001.jpeg -------------------------------------------------------------------------------- /images/gzh/awards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/awards.png -------------------------------------------------------------------------------- /images/gzh/count.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/count.png -------------------------------------------------------------------------------- /images/gzh/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/logo.png -------------------------------------------------------------------------------- /images/gzh/qrcode_for_gh_f9d37093c0ed_860.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/qrcode_for_gh_f9d37093c0ed_860.jpg -------------------------------------------------------------------------------- /images/gzh/二维码美化 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/二维码美化 (1).png -------------------------------------------------------------------------------- /images/gzh/二维码美化 (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/二维码美化 (2).png -------------------------------------------------------------------------------- /images/gzh/二维码美化 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/二维码美化 2.png -------------------------------------------------------------------------------- /images/gzh/二维码美化.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/二维码美化.png -------------------------------------------------------------------------------- /images/gzh/默认标题_横版二维码_2019.10.19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/gzh/默认标题_横版二维码_2019.10.19.png -------------------------------------------------------------------------------- /images/interview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/interview.png -------------------------------------------------------------------------------- /images/manifest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/manifest.png -------------------------------------------------------------------------------- /images/memory/WechatIMG123.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/memory/WechatIMG123.png -------------------------------------------------------------------------------- /images/memory/WechatIMG124.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/memory/WechatIMG124.png -------------------------------------------------------------------------------- /images/memory/WechatIMG125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/memory/WechatIMG125.png -------------------------------------------------------------------------------- /images/memory/WechatIMG126.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/memory/WechatIMG126.png -------------------------------------------------------------------------------- /images/memory/WechatIMG127.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/memory/WechatIMG127.png -------------------------------------------------------------------------------- /images/microApp/1558301321-33fada839bec0ff4_fix732.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/microApp/1558301321-33fada839bec0ff4_fix732.png -------------------------------------------------------------------------------- /images/mobile-debug-method/1570592657689.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/mobile-debug-method/1570592657689.jpg -------------------------------------------------------------------------------- /images/mobile-debug-method/16daf5003347b473: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/mobile-debug-method/16daf5003347b473 -------------------------------------------------------------------------------- /images/mobile-debug-method/16daf5003347b473.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/mobile-debug-method/16daf5003347b473.png -------------------------------------------------------------------------------- /images/mobile-debug-method/911587-20171217144346796-1858776039.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/mobile-debug-method/911587-20171217144346796-1858776039.png -------------------------------------------------------------------------------- /images/mobile-debug-method/911587-20171217164744030-248895045.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/mobile-debug-method/911587-20171217164744030-248895045.png -------------------------------------------------------------------------------- /images/mobile-debug-method/911587-20171217172448171-458034262.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/mobile-debug-method/911587-20171217172448171-458034262.png -------------------------------------------------------------------------------- /images/mobile-debug-method/911587-20171217173006218-1235538422.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/mobile-debug-method/911587-20171217173006218-1235538422.png -------------------------------------------------------------------------------- /images/mobile-debug-method/WechatIMG97.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/mobile-debug-method/WechatIMG97.png -------------------------------------------------------------------------------- /images/module.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/module.png -------------------------------------------------------------------------------- /images/network/1591547440557.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/network/1591547440557.jpg -------------------------------------------------------------------------------- /images/network_img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/network_img.jpg -------------------------------------------------------------------------------- /images/node/1582789651797.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/node/1582789651797.jpg -------------------------------------------------------------------------------- /images/node/1582793720876.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/node/1582793720876.jpg -------------------------------------------------------------------------------- /images/node/20210923_192550.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/node/20210923_192550.gif -------------------------------------------------------------------------------- /images/node/WechatIMG25869.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/node/WechatIMG25869.png -------------------------------------------------------------------------------- /images/npm/1_uuG2qo4JwOM1cL4Q0HTN4g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/npm/1_uuG2qo4JwOM1cL4Q0HTN4g.png -------------------------------------------------------------------------------- /images/npm/WechatIMG117.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/npm/WechatIMG117.png -------------------------------------------------------------------------------- /images/npm/WechatIMG119.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/npm/WechatIMG119.png -------------------------------------------------------------------------------- /images/observePattern/911587-20160822161854433-98837207.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/observePattern/911587-20160822161854433-98837207.png -------------------------------------------------------------------------------- /images/observePattern/911587-20160822162618901-1368751202.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/observePattern/911587-20160822162618901-1368751202.png -------------------------------------------------------------------------------- /images/observePattern/WechatIMG100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/observePattern/WechatIMG100.png -------------------------------------------------------------------------------- /images/official_account.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/official_account.png -------------------------------------------------------------------------------- /images/perf/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/1.png -------------------------------------------------------------------------------- /images/perf/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/10.jpg -------------------------------------------------------------------------------- /images/perf/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/11.jpg -------------------------------------------------------------------------------- /images/perf/1578912852644.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/1578912852644.jpg -------------------------------------------------------------------------------- /images/perf/1578925952330.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/1578925952330.jpg -------------------------------------------------------------------------------- /images/perf/1588150857789.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/1588150857789.jpg -------------------------------------------------------------------------------- /images/perf/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/2.jpg -------------------------------------------------------------------------------- /images/perf/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/3.jpg -------------------------------------------------------------------------------- /images/perf/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/4.jpg -------------------------------------------------------------------------------- /images/perf/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/5.jpg -------------------------------------------------------------------------------- /images/perf/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/6.jpg -------------------------------------------------------------------------------- /images/perf/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/7.png -------------------------------------------------------------------------------- /images/perf/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/8.jpg -------------------------------------------------------------------------------- /images/perf/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/9.jpg -------------------------------------------------------------------------------- /images/perf/WechatIMG21363.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/WechatIMG21363.png -------------------------------------------------------------------------------- /images/perf/WechatIMG57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/WechatIMG57.png -------------------------------------------------------------------------------- /images/perf/WechatIMG58.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/WechatIMG58.png -------------------------------------------------------------------------------- /images/perf/perf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/perf.png -------------------------------------------------------------------------------- /images/perf/性能指标监控:上报.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/perf/性能指标监控:上报.png -------------------------------------------------------------------------------- /images/qrcode/1571395642.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/qrcode/1571395642.png -------------------------------------------------------------------------------- /images/qrcode/WechatIMG8142.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/qrcode/WechatIMG8142.jpeg -------------------------------------------------------------------------------- /images/qrcode/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/qrcode/logo.png -------------------------------------------------------------------------------- /images/qrcode/qrcode_for_gh_f9d37093c0ed_860.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/qrcode/qrcode_for_gh_f9d37093c0ed_860.jpg -------------------------------------------------------------------------------- /images/qrcode/二维码美化 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/qrcode/二维码美化 (1).png -------------------------------------------------------------------------------- /images/qrcode/二维码美化 (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/qrcode/二维码美化 (2).png -------------------------------------------------------------------------------- /images/qrcode/二维码美化 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/qrcode/二维码美化 2.png -------------------------------------------------------------------------------- /images/qrcode/二维码美化.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/qrcode/二维码美化.png -------------------------------------------------------------------------------- /images/qrcode_for_gh_f9d37093c0ed_1280.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/qrcode_for_gh_f9d37093c0ed_1280.jpg -------------------------------------------------------------------------------- /images/regexp/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/1.png -------------------------------------------------------------------------------- /images/regexp/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/10.png -------------------------------------------------------------------------------- /images/regexp/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/11.png -------------------------------------------------------------------------------- /images/regexp/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/12.png -------------------------------------------------------------------------------- /images/regexp/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/13.png -------------------------------------------------------------------------------- /images/regexp/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/14.png -------------------------------------------------------------------------------- /images/regexp/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/15.png -------------------------------------------------------------------------------- /images/regexp/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/2.png -------------------------------------------------------------------------------- /images/regexp/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/3.png -------------------------------------------------------------------------------- /images/regexp/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/4.png -------------------------------------------------------------------------------- /images/regexp/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/5.png -------------------------------------------------------------------------------- /images/regexp/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/6.png -------------------------------------------------------------------------------- /images/regexp/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/7.png -------------------------------------------------------------------------------- /images/regexp/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/8.png -------------------------------------------------------------------------------- /images/regexp/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/regexp/9.png -------------------------------------------------------------------------------- /images/rpc/1528342678252-8cdab943-2583-4b5c-9f7e-559d05bcff61.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/rpc/1528342678252-8cdab943-2583-4b5c-9f7e-559d05bcff61.png -------------------------------------------------------------------------------- /images/serverless/faas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/serverless/faas.jpg -------------------------------------------------------------------------------- /images/serverless/functioncall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/serverless/functioncall.png -------------------------------------------------------------------------------- /images/serverless/k8s/faas&paas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/serverless/k8s/faas&paas.png -------------------------------------------------------------------------------- /images/setTimeout/WechatIMG140.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/setTimeout/WechatIMG140.png -------------------------------------------------------------------------------- /images/setTimeout/WechatIMG141.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/setTimeout/WechatIMG141.jpeg -------------------------------------------------------------------------------- /images/setTimeout/WechatIMG142.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/setTimeout/WechatIMG142.png -------------------------------------------------------------------------------- /images/tapable_hook: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/tapable_hook -------------------------------------------------------------------------------- /images/tool/ocli_run.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/tool/ocli_run.png -------------------------------------------------------------------------------- /images/tool/oclif.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/tool/oclif.png -------------------------------------------------------------------------------- /images/vscode/1592591748259.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/vscode/1592591748259.jpg -------------------------------------------------------------------------------- /images/vscode/cai.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/vscode/cai.gif -------------------------------------------------------------------------------- /images/vscode/chaoyue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/vscode/chaoyue.png -------------------------------------------------------------------------------- /images/vscode/miku.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/vscode/miku.png -------------------------------------------------------------------------------- /images/vscode/yanzi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/vscode/yanzi.jpg -------------------------------------------------------------------------------- /images/wasm/WechatIMG22663.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/wasm/WechatIMG22663.png -------------------------------------------------------------------------------- /images/wasm/js_wasm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/wasm/js_wasm.jpg -------------------------------------------------------------------------------- /images/wasm/wasm.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/wasm/wasm.jpeg -------------------------------------------------------------------------------- /images/wasm/webp_support.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/wasm/webp_support.jpg -------------------------------------------------------------------------------- /images/webpack/1574780330785.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/1574780330785.jpg -------------------------------------------------------------------------------- /images/webpack/1574780831775.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/1574780831775.jpg -------------------------------------------------------------------------------- /images/webpack/1574780871934.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/1574780871934.jpg -------------------------------------------------------------------------------- /images/webpack/1576568168894.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/1576568168894.jpg -------------------------------------------------------------------------------- /images/webpack/911587-20190620182944300-1662095128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/911587-20190620182944300-1662095128.png -------------------------------------------------------------------------------- /images/webpack/911587-20190620183511619-418859981.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/911587-20190620183511619-418859981.png -------------------------------------------------------------------------------- /images/webpack/911587-20190620184524148-27732924.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/911587-20190620184524148-27732924.png -------------------------------------------------------------------------------- /images/webpack/911587-20190620184711917-777951217.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/911587-20190620184711917-777951217.png -------------------------------------------------------------------------------- /images/webpack/911587-20190620184840702-576904530.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/911587-20190620184840702-576904530.png -------------------------------------------------------------------------------- /images/webpack/MF1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/MF1.png -------------------------------------------------------------------------------- /images/webpack/MF2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/MF2.png -------------------------------------------------------------------------------- /images/webpack/MF3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/MF3.png -------------------------------------------------------------------------------- /images/webpack/MF4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/webpack/MF4.png -------------------------------------------------------------------------------- /images/websocket.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/websocket.jpg -------------------------------------------------------------------------------- /images/whistle/640 (1).webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/whistle/640 (1).webp -------------------------------------------------------------------------------- /images/whistle/640 (2).webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/whistle/640 (2).webp -------------------------------------------------------------------------------- /images/whistle/640 (3).webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/whistle/640 (3).webp -------------------------------------------------------------------------------- /images/whistle/640.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/whistle/640.gif -------------------------------------------------------------------------------- /images/whistle/640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/whistle/640.webp -------------------------------------------------------------------------------- /images/whistle/install.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/images/whistle/install.webp -------------------------------------------------------------------------------- /markdown/ designPatterns/插件系统设计.md: -------------------------------------------------------------------------------- 1 | # 插件设计笔记 2 | 我们创造插件主要是帮助我们解决以下两种类型的问题： 3 | + 为系统提供全新的能力 4 | + 对系统现有能力进行定制 5 | 6 | 同时，在解决上面这类问题的时候做到： 7 | + 插件代码与系统代码在工程上解耦，可以独立开发，并对开发者隔离框架内部逻辑的复杂度 8 | + 可动态化引入与配置 9 | 10 | 并且进一步地可以实现： 11 | + 通过对多个单一职责的插件进行组合，可以实现多种复杂逻辑，实现逻辑在复杂场景中的复用 12 | 13 | 这里提到的不管是提供新能力，还是进行能力定制，都既可以针对系统开发者本身，也可以针对三方开发者。 -------------------------------------------------------------------------------- /markdown/JavaScript/911587-20160905112633676-1649202219.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/911587-20160905112633676-1649202219.png -------------------------------------------------------------------------------- /markdown/JavaScript/911587-20160905165315535-979900998.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/911587-20160905165315535-979900998.png -------------------------------------------------------------------------------- /markdown/JavaScript/911587-20160905170024066-1676271321.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/911587-20160905170024066-1676271321.png -------------------------------------------------------------------------------- /markdown/JavaScript/911587-20160905171954254-954754097.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/911587-20160905171954254-954754097.png -------------------------------------------------------------------------------- /markdown/JavaScript/JavaScript 原型 - 原型与原型链.md: -------------------------------------------------------------------------------- 1 | 原型在平时工作中用得比较少, 但原型是 JavaScript 中的基础, 是构建大型应用, 框架不可或缺的一环, 是你在写代码时, 不知不觉就应用上了的一个最基础的知识. 2 | 3 | 比如, React 和 Vue 的 git 仓库中, `prototype` 被使用到的次数分别为 `370` 次和 `1043` 次. 又比如你在使用下面这些代码的时候： 4 | ```js 5 | //class 6 | class Foo extends React.Component; 7 | 8 | //访问原型方法 9 | const bar = {}; 10 | bar.hasOwnProperty('xxx'); 11 | bar.toString(); 12 | ``` 13 | 这些代码都不知不觉间用到了原型的知识 14 | 15 | 如果你还对原型一知半解, 是时候静下心把它弄懂了. 16 | 17 | 本文是一个系列, 该篇会介绍以下两个知识点 18 | 19 | * 原型 20 | * 原型链 21 | 22 | 让我们开始吧~ 23 | 24 | ## 原型 25 | 26 | 任何一个函数, 都拥有一个 prototype 属性, 它指向这个函数的原型对象, 如 27 | 28 | ```js 29 | function Foo () {} 30 | console.log(Foo.prototype) // { constructor: f Foo(), __proto__: Object } 31 | ``` 32 | 33 | 画图表示如下: 34 | 35 | ![Foo 的原型](./foo-prototype.png) 36 | 37 | 上图左边代表 `Foo` 函数, 它有一个 `prototype` 属性, 指向右侧这个原型对象, 每声明一个函数, 都会有这样的一个原型对象, 原型对象有一个 `constructor` 属性, 指向 `Foo` 函数本身, 也有个 `__proto__` 属性, 这里我们暂且不讲. 38 | 39 | 我们来看 `Foo` 函数的实例化: 40 | 41 | ```js 42 | const foo = new Foo(); 43 | ``` 44 | 45 | 这里通过我们 `new` 操作符实例化了一个 `foo` 对象, 我们来看此时的图解: 46 | 47 | ![new Foo](./new-foo.png) 48 | 49 | `foo` 默认会有个 `__proto__` 属性, 它也指向构造函数 `Foo` 的原型, 这就是 `__proto__` 的作用, 即**指向构造函数的原型**, 那让我们回到 `Foo.prototype.__proto__`, 来看看他的指向吧: 50 | 51 | ![Foo 原型的 __proto__](./foo-prototype-__proto__.png) 52 | 53 | 上图的 `Foo.prototype.__proto__` 指向 `Object.prototype`, 也就是说, 每个函数的原型, 都是 Object 的实例. 就好像每个函数的原型, 是由 `new Object()` 产生一样 54 | 55 | 以上就是关于原型的阐述, 如果看到这里似懂非懂, 建议反复看几遍, 注意文字与图片对应, 线条的指向, 看懂了再接着往下看. 56 | 57 | ## 原型链 58 | 59 | 原型链是 JavaScript 作者为了继承而设计的, 由上边的分析, `const foo = new Foo()` 语句, 其实是产生了一个链条的, 如下: 60 | 61 | ![原型链](./prototype-chain.png) 62 | 63 | 我们在 new 出 `foo` 对象后, 并没有给 `foo` 对象添加任何方法, 但我们依然能从 `foo` 对象中调用 `toString()`, `hasOwnProperty()` 等方法. 这是为什么呢? 64 | 65 | ```js 66 | console.log(typeof foo.toString); // function 67 | console.log(typeof foo.hasOwnProperty); // function 68 | ``` 69 | 70 | 原因是, JavaScript 在设计之初, `__proto__` 就是用来查找属性和方法的, 从上图的链条来看, 我们在 `foo` 这个对象中, 查找 toString 方法, 没找到, 就循着 `foo.__proto__` 查找, `foo.__proto__` 里也没有找到, 就循着 `foo.__proto__.__proto__` 找, 诶这个时候找到了, 则调用, 如果还找不到, 就再往上找, 即 `foo.__proto__._proto__._proto__`, 这个时候值为 `null`, 查找结束. 71 | 72 | 这就是原型链, 我们也可以说, `Foo` 继承了 `Object`, 所以 `foo` 中能访问到 Object 的原型属性. 73 | 74 | 原型链的内容就到这里, 更多关于继承的内容, 会在下一篇讲解. 75 | -------------------------------------------------------------------------------- /markdown/JavaScript/Shape-Triangle-irrelevant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/Shape-Triangle-irrelevant.png -------------------------------------------------------------------------------- /markdown/JavaScript/Shape-Triangle-relevant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/Shape-Triangle-relevant.png -------------------------------------------------------------------------------- /markdown/JavaScript/downloader-extends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/downloader-extends.png -------------------------------------------------------------------------------- /markdown/JavaScript/foo-prototype-__proto__.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/foo-prototype-__proto__.png -------------------------------------------------------------------------------- /markdown/JavaScript/foo-prototype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/foo-prototype.png -------------------------------------------------------------------------------- /markdown/JavaScript/new-foo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/new-foo.png -------------------------------------------------------------------------------- /markdown/JavaScript/new-triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/new-triangle.png -------------------------------------------------------------------------------- /markdown/JavaScript/prototype-chain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/prototype-chain.png -------------------------------------------------------------------------------- /markdown/JavaScript/spread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/spread.png -------------------------------------------------------------------------------- /markdown/JavaScript/原型继承.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/JavaScript/原型继承.pptx -------------------------------------------------------------------------------- /markdown/Promise/test.js: -------------------------------------------------------------------------------- 1 | let p1 = new Promise((res,rej)=>{ 2 | setTimeout(()=>{ 3 | console.log(1) 4 | rej(1) 5 | },100) 6 | }).then((res)=>{ 7 | console.log('--test',res) 8 | }) 9 | let p2 = new Promise((res,rej)=>{ 10 | setTimeout(()=>{ 11 | console.log(2) 12 | res(2) 13 | },200) 14 | }) 15 | Promise.all([p1,p2]).then((data)=>{ 16 | console.log(data) 17 | }) -------------------------------------------------------------------------------- /markdown/Q&A/lazyMan.js: -------------------------------------------------------------------------------- 1 | // 实现一个LazyMan，可以按照以下方式调用: 2 | // LazyMan('Hank')输出: 3 | // Hi! This is Hank! 4 | // LazyMan('Hank').sleep(10).eat('dinner')输出 5 | // Hi! This is Hank! 6 | // //等待10秒.. 7 | // Wake up after 10 8 | // Eat dinner~ 9 | // LazyMan('Hank').sleep(10).eat('dinner').eat('supper')输出 10 | // Hi This is Hank! 11 | // Eat dinner~ 12 | // Eat supper~ 13 | // LazyMan('Hank').sleepFirst(5).eat('supper')输出 14 | // //等待5秒 15 | // Wake up after 5 16 | // Hi This is Hank! 17 | // Eat supper~ 18 | // 以此类推。 19 | 20 | function LazyMan(name) { 21 | if(!(this instanceof LazyMan)){ 22 | return new LazyMan(name) 23 | } 24 | const cb = (next)=>{ 25 | console.log(`Hi This is ${name}!`) 26 | next() 27 | } 28 | this.cbs = [cb]; 29 | setTimeout(()=>{ 30 | this.next() 31 | },0) 32 | } 33 | LazyMan.prototype.eat = function (food){ 34 | const cb = (next)=>{ 35 | console.log(`Eat ${food}~`) 36 | next() 37 | } 38 | this.cbs.push(cb); 39 | return this 40 | } 41 | LazyMan.prototype.sleepFirst = function (time){ 42 | const cb = (next)=>{ 43 | setTimeout(()=>{ 44 | next() 45 | },time*1000) 46 | } 47 | this.cbs.unshift(cb); 48 | return this 49 | } 50 | LazyMan.prototype.sleep = function(time){ 51 | const cb = (next)=>{ 52 | setTimeout(()=>{ 53 | next() 54 | },time*1000) 55 | } 56 | this.cbs.push(cb); 57 | return this 58 | } 59 | LazyMan.prototype.next = function(){ 60 | if(this.cbs.length <= 0)return 61 | const first = this.cbs.shift() 62 | first(this.next.bind(this)) 63 | } 64 | 65 | 66 | -------------------------------------------------------------------------------- /markdown/Q&A/preTest.md: -------------------------------------------------------------------------------- 1 | ## 前端错误上报原理 2 | 3 | ### 基本原理 4 | 一般来说，前端错误上报指的是 前端收集各种在页面运行过程中出现的错误，通过一定的方式，上报到服务器中，通过一定方式存储错误信息，再归类分析，找出错误点，然后改正错误的过程。 5 | 6 | 那么在前端这块，主要做的是收集错误和上报错误，下面分别来说说。 7 | 8 | ### 收集错误类型 9 | #### 错误分类 10 | + 语法错误、代码执行错误 11 | + 资源加载错误 12 | + Promise 出错时未捕获的错误 13 | + 跨域错误 Script Error 14 | + 请求错误 15 | + 卡顿与奔溃 16 | 17 | #### 收集方法 -------------------------------------------------------------------------------- /markdown/Q&A/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 30 | 31 | -------------------------------------------------------------------------------- /markdown/Q&A/前端面试题答案整理.md: -------------------------------------------------------------------------------- 1 | **1. 数组去重的方法有哪些？** 2 | 3 | + [...new Set(arr)] 4 | + map遍历 5 | 6 | **2.如何判断左右小括号是否全部匹配。如 ( ( ))()((((()))))** 7 | 用栈来做。遇左括号，进栈。遇右括号，出栈。最后看栈是否为空即可。 8 | ```js 9 | var isValid = function(s) { 10 | const map = { 11 | '(':')', 12 | '{':'}', 13 | '[':']' 14 | }; 15 | const stack = []; 16 | let validFlag = true; 17 | 18 | for(let i = 0; i < s.length; i++) { 19 | if(map[s[i]]){ 20 | stack.push(s[i]); 21 | continue; 22 | } 23 | if(!stack.length || s[i] !== map[stack.pop()]){ 24 | validFlag= false 25 | break; 26 | } 27 | } 28 | if(validFlag && stack.length){ 29 | validFlag= false 30 | } 31 | return validFlag; 32 | } 33 | ``` 34 | **3.JS 的事件机制** 35 | https://github.com/LuckyWinty/subjectBook/blob/master/chapter1/jsyin-qing-shi-jian-xun-huan-ji-zhi.md 36 | 37 | **4.如何劫持 XMLHttpRequest 的 send() 方法，调用他的时候，把参数输出到控制台。** 38 | **5.git 和svn 的区别，git 的本地仓库有什么用呢？** 39 | 1. Git是分布式的，SVN是集中式的 40 | 这是 Git 和 SVN 最大的区别。因为 Git 是分布式的，所以 Git 支持离线工作，在本地可以进行很多操作，包括分支功能。而 SVN 必须联网才能正常工作. -------------------------------------------------------------------------------- /markdown/Q&A/手写代码.js: -------------------------------------------------------------------------------- 1 | // 函数防抖 2 | function throttle(fn, duration=200,context){ 3 | let timer =null ; 4 | let startTime=0 ; 5 | 6 | return function(...args){ 7 | clearTimeout(timer); 8 | let now = Date.now(); 9 | if(now - startTime > duration){ 10 | fn.apply(context, args); 11 | startTime = now; 12 | }else{ 13 | timer = setTimeout(fn,duration); 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /markdown/Q&A/有必要知道的.md: -------------------------------------------------------------------------------- 1 | + koa中间件，compose的原理 2 | + websocket 3 | + serverless 4 | 5 | ### 新问题 6 | + es 静态分析原理(https://zhuanlan.zhihu.com/p/33843378) 7 | + node 里面poll阶段在check阶段之前，那么首次进入时，怎么知道check阶段有没有回调函数 8 | + https加密原理，中间人攻击知道吗 9 | + 大量错误日志涌进时node如何处理 10 | + ng 负载均衡的方式有哪些 11 | + Object.prototype,Function.prototype,Array.prototype 12 | + CDN 有什么作用 13 | + 不可变数据里面，immutable，删除数组里面的列表 14 | + 垃圾回收中，内部函数返给上层的对象是如何管理的 15 | + react 全家桶 16 | + 观察者模式和发布订阅者模式的区别 17 | + diff 算法 18 | + Ast 19 | + ImmutableJS 学习（https://juejin.im/post/5b9b30a35188255c6418e67c） 20 | https://juejin.im/post/5e6a14b1f265da572978a1d3 21 | + react fiber 22 | + react Redux(https://juejin.im/post/5af00705f265da0ba60fb844) 23 | + vue 事件机制 24 | + vue 双向绑定 25 | + 如何通过vue, vue-router, vuex进行权限控制 26 | 27 | ### 复习问题 28 | + 安全 29 | + 模块化 30 | + 继承 31 | + this 指向 32 | + Promise 33 | + 排序算法+复杂度 34 | 35 | ### 动手 36 | + 深拷贝(https://juejin.im/post/5d6aa4f96fb9a06b112ad5b1#heading-9) 37 | + 38 | 39 | ### 算法一类题(给思路) 40 | + 有一个很大很大的文件，如何统计文件里面重复最多的行是哪行 41 | 42 | -------------------------------------------------------------------------------- /markdown/Q&A/深拷贝的实现.md: -------------------------------------------------------------------------------- 1 | # 深拷贝的实现 2 | 3 | ### 最简单的实现 4 | ```js 5 | JSON.parse(JSON.stringify(obj)) 6 | ``` 7 | 缺点： 8 | + 对象的属性值是函数时，无法拷贝。 9 | + 原型链上的属性无法拷贝 10 | + 不能正确的处理 Date 类型的数据 11 | + 不能处理 RegExp 12 | + 会忽略 symbol 13 | + 会忽略 undefined 14 | 15 | ### 递归实现 16 | ```js 17 | // 思路 18 | // 1.用WeakMap，防止死循环和性能优化(变量的垃圾回收) 19 | const mapTag = '[object Map]'; 20 | const setTag = '[object Set]'; 21 | const arrayTag = '[object Array]'; 22 | const objectTag = '[object Object]'; 23 | const argsTag = '[object Arguments]'; 24 | 25 | const boolTag = '[object Boolean]'; 26 | const dateTag = '[object Date]'; 27 | const numberTag = '[object Number]'; 28 | const stringTag = '[object String]'; 29 | const symbolTag = '[object Symbol]'; 30 | const errorTag = '[object Error]'; 31 | const regexpTag = '[object RegExp]'; 32 | const funcTag = '[object Function]'; 33 | const deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag]; 34 | 35 | function deepClone(obj,map=new WeakMap()){ 36 | if(!isObject(obj)){ 37 | return obj 38 | } 39 | const targetType = getTargetType(obj) 40 | let cloneTarget; 41 | if(deepTag.includes(targetType)){ 42 | cloneTarget = getInit(obj) 43 | }else{ 44 | return getCloneTarget(obj) 45 | } 46 | if(map.get(obj)){ 47 | return map.get(obj) 48 | } 49 | map.set(obj,cloneTarget) 50 | 51 | 52 | for(let target in obj){ 53 | 54 | } 55 | } 56 | 57 | function getInit(target) { 58 | const Ctor = target.constructor; 59 | return new Ctor(); 60 | } 61 | function getTargetType(target){ 62 | return Object.prototype.toString.call(target) 63 | } 64 | function getCloneTarget(target){ 65 | const constructor = target.constructor 66 | switch(constructor){ 67 | case 'Function':return cloneFunction(target) 68 | case 'RegExp':return cloneRegExp(target) 69 | case 'Symbol':return cloneSymbol(target) 70 | default : return new constructor(target) 71 | } 72 | } 73 | function cloneSymbol(target) { 74 | return Object(Symbol.prototype.valueOf.call(target)); 75 | } 76 | function cloneRegExp(target) { 77 | const reFlags = /\w*$/; 78 | const result = new target.constructor(target.source, reFlags.exec(target)); 79 | result.lastIndex = target.lastIndex; 80 | return result; 81 | } 82 | function cloneFunction(target){ 83 | const funcSting = target.toString() 84 | if(targe.prototype){ 85 | const bodyReg = /(?<={)(.|\n)*(?=})/ 86 | const paramsReg = /(?<=\().+(?=\)\s*{)/ 87 | 88 | const body = bodyReg.exec(funcSting) 89 | const params = paramsReg.exec(funcSting) 90 | 91 | if(body){ 92 | if(params){ 93 | return new Function(...params[0].split(','),body[0]) 94 | } 95 | return new Function(body[0]) 96 | }else{ 97 | return new Function('') //返回空函数 98 | } 99 | return 100 | } 101 | return eval(funcSting) 102 | } 103 | 104 | function isObject(target){ 105 | return target !== null && (typeof target === 'object' || typeof target === 'function') 106 | } 107 | } 108 | ``` -------------------------------------------------------------------------------- /markdown/Q&A/面试题整理一波.md: -------------------------------------------------------------------------------- 1 | ### 笔试题 2 | 一面： 3 | 1. 执行代码求输出，并说明为什么，严格模式下输出有变化吗，为什么 4 | ```js 5 | var a = function () {this.b = 3;} 6 | var c = new a(); 7 | a.prototype.b = 9; 8 | var b = 7; 9 | a(); 10 | 11 | console.log(b); 12 | console.log(c.b); 13 | ``` 14 | 2. 给定一个升序整型数组[0,1,2,4,5,7,13,15,16],找出其中连续出现的数字区间，输出为["0->2","4->5","7","13","15->16"] 15 | ```js 16 | function summaryRanges(arr){ 17 | //TODO 18 | } 19 | ``` 20 | 3. 请实现以下的函数，可以批量请求数据，所有的URL地址在urls参数中，同时可以通过 max 参数控制请求的并发度，当所有请求结束之后，需要执行 callback 回调函数。发请求的函数可以直接使用 fetch 即可 21 | ```js 22 | function sendRequest(urls: sring[],max:number,callback:()=>void){ 23 | //TODO 24 | } 25 | ``` 26 | 二面： 27 | 28 | 1. 实现一个字符串反转： 29 | 输入：www.toutiao.com.cn 30 | 输出：cn.com.toutiao.www 31 | 32 | 要求： 33 | 1.不使用字符串处理函数 34 | 2.空间复杂度尽可能小 35 | 36 | 2. 不借助变量，交换两个数。 37 | ```js 38 | function swap(a, b) { 39 | //TODO 40 | } 41 | ``` 42 | 3. 观察者模式与发布订阅者区别，并写出其模型 43 | 44 | ### 与项目无关的问答题 45 | 1. vue 事件机制是如何实现的 46 | 2. vue 的组件通信方式有哪些 47 | 3. react fiber 的实现原理 48 | 4. vue 响应式数据原理(vue2/vue3/依赖收集/发布订阅/watcher消息队列控制/Vue.set实现) 49 | 5. vue 转小程序怎么实现(ast/生命周期对齐/跨平台模块兼容/兼容细节点实现过程) 50 | 6. 性能指标，如何理解TTI，如何统计，与FID有什么区别，如何实现统计，还聊了很多性能的东西 51 | 7. 说说你所了解的安全问题及防护方法() 52 | 8. 说说你知道的设计模式，并举个对应的模式例子 53 | 9. 未来规划及学习方法 54 | 10. 你觉得你是怎样拿到京东校招的sp的 55 | 11. 遇到的最大挑战/过去的最大收获分别是什么 56 | 57 | 与项目相关的问题，问了很多很多，基本上着重看我个人在项目中的角色，做过哪些项目设计/性能优化/项目规模/细节点实现/数据对比等等。 58 | 另外，我本人的博客，面试官都看过，似乎都知道我学过什么，知道什么，所以很多我博客上有的东西都没问，甚至我引申到过去，都不让说，有种没机会表现的感觉，哈哈 59 | 60 | 61 | 一面： 62 | 笔试： 63 | 1. n阶楼梯问题(尾递归的优化[函数最后调用自身可以减少中间变量|化递归为循环去优化]/备忘录优化) 64 | 2. 节流防抖的实现(分析笔试答案时问到，总结差别，说出应用场景) 65 | 3. 深拷贝(类型考虑/Symbol/Date等的构造/循环优化/共用引用优化等) 66 | 4. 封装一个只能输入数字的React组件 67 | 68 | 与项目无关的问题： 69 | 1. 输入URL后发生了什么 70 | 2. 事件循环说一下 71 | 3. JS有几种基本类型，分别是什么，与对象的区别 72 | 4. JS 执行过程中是如何保存上下文的 73 | 5. 你认为什么是前端 74 | 6. 为什么想来阿里 75 | 7. 最近在看什么书 76 | 8. 微前端了解吗 77 | 9. 你想成为什么样的人(个人成长规划) 78 | 79 | 二面： 80 | 与项目无关的问题： 81 | 1. 一点都不考虑杭州吗 82 | 2. 项目中遇到的最大挑战是什么，如何解决的 83 | 3. node 大量日志怎么处理的(我答了缓冲队列) 84 | 4. http2 的特点 85 | 5. node 与其他语言有什么区别，其优劣势是什么 86 | 6. csrf 的核心原理(https://juejin.im/post/5bc009996fb9a05d0a055192) 87 | 7. node 事件循环 88 | 8. FCP/FMP/FP 分别是怎样定义，如何统计 89 | 9. MySQL 题目，id 唯一，name 可以重复，求 name 有重复的所有数据 90 | 10. 有没有推动过什么东西 91 | 11. 未来的一个发展是否是全栈，如何规划 92 | 93 | 三面： 94 | 95 | 1. 链路录屏的原理 96 | 2. 链路录屏法务问题如何解决 97 | 3. FMP 定义及统计，w3c的草案你知道吗 98 | 4. react 项目的可持续维护性如何体现 99 | 5. react hooks用过吗，为什么要用 100 | 6. h5 和小程序有什么区别 101 | 7. 多久写一篇博客 102 | 103 | 104 | 1. 算法4道 105 | 2. 106 | ```js 107 | 问题1： 108 | for (var i = 0; i < 4; i++) { 109 | setTimeout(function() { 110 | console.log(i); 111 | }, 300); 112 | } 113 | 114 | 请问打印结果是？ 115 | 4 4 4 4 116 | 117 | 问题2： 118 | 一只青蛙一次可以跳上1级台阶，也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法 119 | 120 | (function(){ 121 | const cache = {} 122 | function step(n){ 123 | if(n === 1)return 1 124 | if(n === 2)return 2 125 | const res1 = cache[n-1]?cache[n-1]:step(n-1); 126 | const res2 = cache[n-2]?cache[n-2]:step(n-2); 127 | cache[n-1] = step(n-1) 128 | cache[n-2] = step(n-2) 129 | return res1+res2; 130 | } 131 | })() 132 | 133 | 134 | 问题3： 135 | function test(a,b) { 136 | console.log(b) 137 | return { 138 | test:function(c){ 139 | return test(c,a); 140 | } 141 | }; 142 | } 143 | 144 | var retA = test(0); 145 | retA.test(2); 146 | retA.test(4); 147 | retA.test(8); 148 | var retB = test(0).test(2).test(4).test(8); 149 | var retC = test('good').test('bad'); retC.test('good'); retC.test('bad'); 150 | 151 | 请问打印结果是？ 152 | undefined 0 0 0 153 | undefined 0 2 4 154 | undefined 'good' 'bad' 'good' 155 | ``` -------------------------------------------------------------------------------- /markdown/Tree-shaking之模块输出.md: -------------------------------------------------------------------------------- 1 | # Tree-shaking之模块输出 2 | Tree-Shaking，它代表的大意就是删除没用到的代码。这样的功能对于构建大型应用时是非常好的，因为日常开发经常需要引用各种库。但大多时候仅仅使用了这些库的某些部分，并非需要全部，此时Tree-Shaking如果能帮助我们删除掉没有使用的代码，将会大大缩减打包后的代码量。 3 | 4 | Tree-Shaking的原理，通过静态分析，找出未被引用、未被执行、无法到达的代码进行消除，也就是DCE(dead code elimination)。要做到这一点，就必须保证模块依赖关系是确定的，和运行时的状态无关，而现在前端环境下，能做到这样的，就是ES6 modules 。 5 | 6 | ##### ES6 module 特点： 7 | + 只能作为模块顶层的语句出现 8 | + import 的模块名只能是字符串常量 9 | + import binding 是 immutable的 10 | 11 | 再看现有的打包工具，webpack似乎占领了"江湖"。于是自然想到，首先webpack作为打包工具，但是在定义模块输出的时候，webpack确不支持ESM。webpack目前支持的格式如下：out.libraryTarget属性取值分别为： 12 | 13 | 1. var - 默认值 14 | 2. assign 15 | 3. this 16 | 4. window 17 | 5. global 18 | 6. commonjs 19 | 7. commonjs2 20 | 8. amd 21 | 9. umd 22 | 10. jsonp 23 | 24 | 这就很鸡肋了...所以写类库的时候，要导出esm的话，无法用webpack编译。webpack插件系统庞大，确实有支持模块级的Tree-Shacking的插件，如webpack-deep-scope-analysis-plugin。但是粒度更细化的，一个模块里面的某个方法，本来如果没有被引用的话也可以去掉的，就不行了....这个时候，就要上rollup了。 25 | 明显的2大特性： 26 | 1. 它支持导出ES模块的包。 27 | 2. 它支持程序流分析，能更加正确的判断项目本身的代码是否有副作用。 28 | 29 | #### 结论： 30 | rollup 采用 es6 原生的模块机制进行模块的打包构建，rollup 更着眼于未来，对 commonjs 模块机制不提供内置的支持，是一款更轻量的打包工具。rollup 比较适合打包 js 的 sdk 或者封装的框架等，例如，vue 源码就是 rollup 打包的。而 webpack 比较适合打包一些应用，例如 SPA 或者同构项目等等。 -------------------------------------------------------------------------------- /markdown/ad/吐血教程：搭建Flutter开发环境.md: -------------------------------------------------------------------------------- 1 | # 学好Flutter，试试跳槽到阿里、爱奇艺、美团 2 | 3 | ### 背景 4 | 2019年9月11日，谷歌在上海举办的开发者大会上正式发布Flutter 1.9 稳定版。 5 | 在国内互联网大厂中，阿里旗下的闲鱼平台作为Flutter的狂热粉丝一直走在前列，爱奇艺、美团也都在尝试中。 6 | Flutter是否会成为移动技术未来的发展趋势？ 7 | 跨平台技术是否将统治移动平台的发展？ 8 | 前端就是这样五花八门，就算不会Flutter,也要与时俱进了解一下前沿技术。 9 | 10 | ### Flutter现在发展到什么地步了？ 11 | 现在，主流的移动开发平台是Android和iOS，每个平台上的开发技术不太一样，针对每个平台开发应用需要特定的人员，但这样一来开发效率会变得低下，因而需要进行跨平台开发。跨平台技术从最开始的Hybrid混合开发技术，到React Native的桥接技术，一直在演进。 12 | Hybrid开发主要依赖于WebView，但WebView是一个重量级的控件，很容易产生内存问题，而且复杂的UI在WebView上显示的性能不好。React Native技术抛开了WebView，利用JavaScript Core来做桥接，将JavaScript调用转为Native调用。React Native最终会生成对应的自定义原生控件。这种策略将框架本身和App开发者捆绑在系统的控件上，不仅框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API的变化，开发者可能也需要处理不同平台间的差异，甚至有些特性只能在部分平台上实现，这使得跨平台特性大打折扣。 13 | Flutter是最新的跨平台开发技术，可以横跨Android、iOS、MacOS、Windows、Linux等多个系统，还可以打包成Web程序运行在浏览器上。Flutter采用了更为彻底的跨平台方案，即自己实现了一套UI框架，然后直接在GPU上渲染UI页面。 14 | 15 | ### 为什么要用Flutter？ 16 | 作者最早接触的跨平台技术是Adobe Air，写一套Action Script代码可以运行在PC、Android及iOS三大平台上。作者与朋友在开发视频会议产品时，需要最大化地减少前端的开发及维护工作量，所以先后考察过Cordova、React Native及Flutter等技术，觉得Flutter方案更加先进，效率更高，后来就尝试用Flutter开发了开源的WebRTC插件（可在GitHub上搜索Flutter WebRTC）。 17 | 写作本书的目的是传播Flutter知识（因为Flutter确实优秀），想在为Flutter社区做贡献的同时也为他们的产品打下坚实的技术基础。在写作本书的过程中，作者查阅了大量的资料，使得知识体系扩大了不少，收获良多。 18 | 19 | ### 福利时间 20 | 21 | 今天给大家推荐一本新书《Flutter技术入门与实战》第2版，从实战的角度出发，手把手教会Flutter(真的是手把手教，几乎每一步都有截图指示)，从基础组件的讲解到综合案例，从工具使用到插件开发，包含大量精选案例和详细实操步骤，还有配套的视频课程可帮助读者快速入门。 22 | 23 | // 插入商品 24 | **本次联合【机械工业出版社华章公司】为大家带来3本正版新书《Flutter技术入门与实战》第2版。留言谈谈你对Flutter的理解/开发经历/坑点等，留言点赞前3名读者将可获赠正版图书1本！** 25 | 26 | ### 作者介绍 27 | 亢少军 28 | 资深开发者，创业者。专注于视频通讯技术领域。国内首本Flutter著作《Flutter技术入门与实战》作者。多年从事视频会议、远程教育等技术研发，对于Android、iOS以及跨平台开发技术有比较深入的研究和应用，作为主要程序员开发了多个应用项目，涉及医疗、交通、银行等领域。 29 | 30 | ### 本书内容有哪些？ 31 | 本书详细讲解Flutter的基本概念和使用技巧。既有基础知识，又有丰富示例，并包括详细案例的操作步骤，实操性强。还有配套网站提供了完整案例代码和视频课程,可帮助读者轻松掌握基础知识，快速进入实战。 32 | 33 | 本书主要内容共16章： 34 | + 第1~2章介绍Flutter的基本概念和重要知识点。 35 | + 第3章简单介绍了Flutter SDK指定的Dart语言。 36 | + 第4~7章介绍Flutter常用组件，以及Material Design风格的组件、Cupertino风格的组件，还介绍了页面布局基础知识和技巧。 37 | + 第8~12章介绍Flutter的高级用法，包括如何处理手势，如何加载、处理、展示资源和图片，路由及导航是如何处理的，装饰和动画的处理等。 38 | + 第13章介绍Flutter插件开发。 39 | + 第14~16章介绍开发工具的使用技巧、测试与发布应用，以及综合案例。 40 | 41 | ### 来自作者的阅读建议 42 | 本书是一本基础入门加实战的书籍，既有基础知识，又有丰富的示例，包括详细的操作步骤，实操性强。由于Flutter大量使用组件，所以本书对组件的讲解很详细，包括基本概念、属性及代码示例。每个组件都配有小例子，力求精简，还提供了配套网站以提供完整代码，复制完整代码就可以看到效果，这样会增强读者的信心，在轻松掌握基础知识的同时快速进入实战。 43 | 如果你正在使用类似React Native等跨平台技术，那么学习Flutter会轻松很多。使用Flutter构建应用时，需要用到Android和iOS的相关知识，因为Flutter依赖移动操作系统提供众多功能和配置。Flutter是一种为移动设备构建用户界面的新方式，但它有一个插件机制可与Android和iOS进行数据及任务通信。本书第13章专门讲解Flutter的插件开发技术，可以作为进一步学习的起点。 44 | 45 | Flutter引用了大量Web开发的知识，比如FlexBox布局方式、盒模型等，这些都引用了CSS中的一些思想。所以从UI界面的实现角度来说，只需要熟悉Dart语言就能轻松上手Flutter。本书第3章专门介绍Dart语言的基础知识。 46 | 47 | ### 总结 48 | 如果你想立刻学习本书，你可以点击下面的链接，或者点击阅读原文，进行购买哦～ -------------------------------------------------------------------------------- /markdown/algorithm/code/LRU.js: -------------------------------------------------------------------------------- 1 | // 实现一个LRU过期算法的KV cache, 所有KV过期间隔相同, 满足如下性质: 2 | // 1. 最多存储n对KV; 3 | // 2. 如果大于n个, 则随意剔除一个已经过期的KV; 4 | // 3. 如果没有过期的KV, 则按照LRU的规则剔除一个KV; 5 | // 4. 查询时如果已经过期, 则返回空; 6 | 7 | /** 8 | * @param {number} capacity 9 | */ 10 | class LRUCache { 11 | constructor(capacity,intervalTime){ 12 | this.cache = new Map(); 13 | this.capacity = capacity; 14 | this.intervalTime = intervalTime; 15 | } 16 | get(key){ 17 | if(!this.cache.has(key)){ 18 | return null 19 | } 20 | const tempValue = this.cache.get(key) 21 | this.cache.delete(key); 22 | this.cache.set(key,tempValue) 23 | if(Date.now() - tempValue.time > this.intervalTime){ 24 | return null 25 | } 26 | return tempValue.value 27 | } 28 | put(key, value){ 29 | if(this.cache.has(key)){ 30 | this.cache.delete(key) 31 | } 32 | if(this.cache.size >= capacity){ //满了 33 | const keys = this.cache.keys() 34 | this.cache.delete(keys.next().value) 35 | } 36 | this.cache.set(key, {value,time:Date.now()}) 37 | } 38 | } -------------------------------------------------------------------------------- /markdown/algorithm/code/动态规划.md: -------------------------------------------------------------------------------- 1 | ### 概念 2 | > `动态规划`是一种通过把原问题分解为相对简单的子问题的方式求解复杂问题的方法。 3 | #### 特点 4 | 1. 无后效性，如果给定某一阶段的状态，则在这一阶段以后过程的发展不受这阶段以前各段状态的影响。 5 | 2. 最优子结构，如果一个问题的最优解包含其子问题的最优解，我们就称此问题具有最优子结构。 6 | 3. 寻找状态方程 7 | 因此动态规划比较适合用来求解最优问题，比如求最短路径、最大值、最小值等等。 8 | -------------------------------------------------------------------------------- /markdown/algorithm/code/树.js: -------------------------------------------------------------------------------- 1 | // 递归前序遍历 2 | var inorderTraversal = function (root, array = []) { 3 | if(root){ 4 | array.push(root) 5 | inorderTraversal(root.left) 6 | inorderTraversal(root.right) 7 | } 8 | return array 9 | } 10 | // 非递归前序遍历 11 | var inorderTraversal = function (root, array = []) { 12 | let stack = [] 13 | let current = root 14 | 15 | while(current || stack.length){ 16 | if(current){ 17 | 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /markdown/algorithm/code/递归.js: -------------------------------------------------------------------------------- 1 | function tailCallOptimize(f) { 2 | let value; 3 | let active = false; 4 | const accumulated = []; 5 | return function accumulator() { 6 | accumulated.push(arguments); 7 | if (!active) { 8 | active = true; 9 | while (accumulated.length) { 10 | value = f.apply(this, accumulated.shift()); 11 | } 12 | active = false; 13 | return value; 14 | } 15 | }; 16 | } 17 | const fib = tailCallOptimize(function (n, x = 1, y = 1) { 18 | if (n <= 2) { 19 | return y; 20 | } else { 21 | return fib(n - 1, y, x + y); 22 | } 23 | }); 24 | console.log(fib(10000)); 25 | //https://juejin.im/post/5dc6b1a9e51d45475f29c76a -------------------------------------------------------------------------------- /markdown/algorithm/code/阶乘.js: -------------------------------------------------------------------------------- 1 | // 任何大于 1 等于 1 的自然数阶乘公式为：n! = 1 * 2 * 3 * (n -1)n 2 | 3 | // function f(n){ 4 | // if(n === 1){ 5 | // return 1; 6 | // } 7 | // return n*f(n-1) 8 | // } 9 | 10 | // function f(n,total = 1){ 11 | // if(n === 1){ 12 | // return total; 13 | // } 14 | // // debugger; 15 | // return f(n-1,total*n) 16 | // } 17 | // const t = Date.now() 18 | // console.log(f(50)); 19 | // console.log('--cost--',Date.now() - t) 20 | 21 | function tailCallOptimize(f) { 22 | let value; 23 | let active = false; 24 | const accumulated = []; 25 | return function accumulator() { 26 | // debugger; 27 | accumulated.push(arguments); 28 | if (!active) { 29 | active = true; 30 | while (accumulated.length) { 31 | value = f.apply(this, accumulated.shift()); 32 | console.log('---value', value); 33 | } 34 | active = false; 35 | return value; 36 | } 37 | }; 38 | } 39 | 40 | const fn = tailCallOptimize(function (n,total = 1){ 41 | if(n === 1){ 42 | return total; 43 | } 44 | return fn(n-1,total*n) 45 | }); 46 | console.log(fn(10)); -------------------------------------------------------------------------------- /markdown/algorithm/递归.md: -------------------------------------------------------------------------------- 1 | # 递归基本知识 2 | 3 | 递归需要满足的三个条件： 4 | 1. 一个问题的解可以分解为几个子问题的解 5 | 2. 这个问题与分解之后的子问题，除了数据规模不同，求解思路完全一样 6 | 3. 存在递归终止条件 -------------------------------------------------------------------------------- /markdown/algorithm/链表操作.md: -------------------------------------------------------------------------------- 1 | ### 链表操作 2 | 最近在重新学算法，本文为链表基本操作复习总结文，会讲解常见的链表题目实现思路及附上答案，这些题目在leetcode上对应的提号也有给出，好好学习算法吧～ 3 | + 单链表反转 4 | + 链表中环的检测 5 | + 两个有序的链表合并 6 | + 删除链表倒数第 n 个结点 7 | + 求链表的中间结点 8 | 9 | leetcode 对应题号：206，141，21，19，876 10 | 11 | ### 单链表反转 12 | 思路：设置2个变量，分别记录其前驱pre和后继next，然后不断 cur.next = pre 就可以了 13 | ```js 14 | /** 15 | * @param {ListNode} head 16 | * @return {ListNode} 17 | */ 18 | var reverseList = function(head) { 19 | if(!head || !head.next) return head 20 | 21 | let cur = head; 22 | let pre = null; 23 | 24 | while(cur){ 25 | let next = cur.next; 26 | cur.next = pre; 27 | pre = cur; 28 | cur = next; 29 | } 30 | return pre 31 | }; 32 | ``` 33 | ### 链表中环的检测 34 | 思路一：变量标记法，遍历链表且每个遍历项都加上一个唯一标志，若有重复的则链表有环 35 | ```js 36 | /** 37 | * @param {ListNode} head 38 | * @return {boolean} 39 | */ 40 | var hasCycle = function(head) { 41 | let cur = head 42 | while(cur){ 43 | if(cur.val === 'cycleFlag'){ 44 | return true 45 | } 46 | cur.val = 'cycleFlag' 47 | cur = cur.next 48 | } 49 | return false 50 | }; 51 | ``` 52 | 思路二：快慢指针法，定义快慢2个指针，快的每次走2步，慢的每次走1步，当快慢指针相遇时，则有环 53 | ```js 54 | var hasCycle = function(head) { 55 | if(!head || !head.next)return false 56 | let slow = head 57 | let fast = head.next 58 | while(fast !== slow){ 59 | if(!fast || !fast.next)return false 60 | fast = fast.next.next 61 | slow = slow.next 62 | } 63 | return true 64 | }; 65 | ``` 66 | 思路三：奇技淫巧法，利用JSON.stringify()不能字符串化含有循环引用的结构。 67 | ```js 68 | var hasCycle = function(head) { 69 | try{ 70 | JSON.stringify(head); 71 | return false; 72 | } 73 | catch(err){ 74 | return true; 75 | } 76 | }; 77 | ``` 78 | ### 两个有序的链表合并 79 | 80 | ```js 81 | // 普通方法，遍历合并 82 | var mergeTwoLists = function(l1,l2) { 83 | if(l1 === null)return l2 84 | if(l2 === null)return l1 85 | let head = new ListNode(-1) 86 | let node = head 87 | while(l1 && l2){ 88 | if(l1.val <= l2.val){ 89 | node.next = l1 90 | l1 = l1.next 91 | }else{ 92 | node.next = l2 93 | l2 = l2.next 94 | } 95 | node = node.next 96 | } 97 | node.next = l1?l1:l2 98 | return head.next 99 | }; 100 | 101 | // 递归合并 102 | var mergeTwoLists = function(l1,l2) { 103 | if(l1 === null)return l2 104 | if(l2 === null)return l1 105 | 106 | if(l1.val <= l2.val){ 107 | l1.next = mergeTwoLists(l1.next,l2) 108 | return l1 109 | } 110 | l2.next = mergeTwoLists(l1,l2.next) 111 | return l2 112 | } 113 | ``` 114 | ### 删除链表倒数第 n 个结点 115 | 思路：定义2个指针a,b，新建一个空队头，b先走n步，然后a,b再一起走，此时a,b的间隔是n，当b到达队尾时，a刚好在n的前一个节点(因为开始时多建了一个节点)，然后让a.next 等于a.next.next即可。 116 | ```js 117 | var removeNthFromEnd = function(head, n) { 118 | if(n === 0) return head 119 | let p = new ListNode(-1) 120 | p.next = head 121 | let a = p 122 | let b = p 123 | while(n > 0){ 124 | b = b.next 125 | n--; 126 | } 127 | 128 | while(b.next !== null){ 129 | a = a.next 130 | b = b.next 131 | } 132 | 133 | a.next = a.next.next 134 | return p.next 135 | }; 136 | ``` 137 | ### 求链表的中间结点 138 | 思路：2个指针，一个每次走一步，一个每次走2步即可，当走2步的指针到达队尾则，走一步的指针刚好到队中间 139 | ```js 140 | var middleNode = function(head) { 141 | let a = head; 142 | let b = head; 143 | 144 | while(b != null && b.next != null){ 145 | a = a.next 146 | b = b.next.next 147 | } 148 | return a 149 | }; 150 | ``` -------------------------------------------------------------------------------- /markdown/cloudnative/docker/docker-logs-id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/cloudnative/docker/docker-logs-id.png -------------------------------------------------------------------------------- /markdown/cloudnative/docker/docker-ps-a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/cloudnative/docker/docker-ps-a.png -------------------------------------------------------------------------------- /markdown/cloudnative/docker/k8s学习.md: -------------------------------------------------------------------------------- 1 | # 容器技术生态的发展 2 | 3 | ### FaaS 和 IaaS、PaaS 的区别 4 | 首先，我们看一下云函数，或者说 FaaS 和 IaaS、PaaS 的区别。如下图所示，FaaS 不仅给用户提供了标准的 Runtime，同时在应用层，也帮用户管理了请求的调度。开发者只用聚焦在核心业务逻辑开发上，按照函数的粒度去编写代码。而底层硬件相关的资源维护，则交给更加专业的云厂商来搞定。因此，对于用户来讲，则可以把更多的精力和时间放在业务上。而 IaaS 和 PasS，则均需要用户去运维云主机或者容器集群、搭建业务所需的运行环境。 5 | // TODO 图 6 | 7 | #### PaaS 8 | 2013 年左右，普遍认为 `PaaS` 的时代就要来了。PaaS 项目被大家接纳的一个主要原因，就是它提供了一种名叫`"应用托管"`的能力。当时的云计算服务，比的就是谁能更好地模拟本地服务器环境，能带来更好的“上云”体验。而 PaaS 开源项目的出现，就是当时解决这个问题的一个最佳方案。 9 | 10 | PaaS 项目，最核心的组件就是一套应用的打包和分发机制。举个例子，运维人员只需要在这些机器上部署一个 Cloud Foundry 的 Paas 项目，然后开发者只要执行一条命令就能把本地的应用部署到云上，这条命令就是： 11 | ```js 12 | $ cf push "我的应用" 13 | ``` 14 | 事实上，像 Cloud Foundry 这样的 PaaS 项目，最核心的组件就是`一套应用的打包和分发机制`。 Cloud Foundry 为每种主流编程语言都定义了一种打包格式，而`cf push`的作用，基本上等同于用户把应用的可执行文件和启动脚本打进一个压缩包内，上传到云上 Cloud Foundry 的存储中。接着，Cloud Foundry 会通过调度器选择一个可以运行这个应用的虚拟机，然后通知这个机器上的 Agent 把应用压缩包下载下来启动。 15 | 16 | 然后，由于需要在一个虚拟机上启动很多个来自不同用户的应用，Cloud Foundry 会调用操作系统的 Cgroups 和 Namespace 机制为每一个应用单独创建一个称作“沙盒”的隔离环境，然后在“沙盒”中启动这些应用进程。这样，就实现了把多个用户的应用互不干涉地在虚拟机里批量地、自动地运行起来的目的。 17 | 18 | 这，正是 PaaS 项目最核心的能力。 而这些 Cloud Foundry 用来运行应用的隔离环境，或者说“沙盒”，就是所谓的“容器”。 19 | 20 | 但是一旦用上了 PaaS，用户就必须为每种语言、每种框架，甚至每个版本的应用维护一个打好的包。这个打包过程，没有任何章法可循，更麻烦的是，明明在本地运行得好好的应用，却需要做很多修改和配置工作才能在 PaaS 里运行起来。而这些修改和配置，并没有什么经验可以借鉴，基本上得靠不断试错，直到你摸清楚了本地应用和远端 PaaS 匹配的“脾气”才能够搞定。 21 | 最后结局就是，“cf push”确实是能一键部署了，但是为了实现这个一键部署，用户为每个应用打包的工作可谓一波三折，费尽心机。而Docker 项目的出现，则为这个根本性的问题提供了一个近乎完美的解决方案。 22 | 23 | ### 参考资料 24 | + https://www.infoq.cn/article/kki1vyk62uoclw23ikyk -------------------------------------------------------------------------------- /markdown/cloudnative/docker/简介.md: -------------------------------------------------------------------------------- 1 | # docker 概述 2 | 3 | ### 概念 4 | 5 | ### 容器 6 | 7 | ### compose 8 | Compose 项目是 Docker 官方的开源项目，负责实现对 Docker 容器集群的快速编排。Compose 定位是 「定义和运行多个 Docker 容器的应用（Defining and running multi-container Docker applications）」 9 | 10 | Compose 中有两个重要的概念： 11 | 1. 服务 (service)：一个应用的容器，实际上可以包括若干运行相同镜像的容器实例。 12 | 2. 项目 (project)：由一组关联的应用容器组成的一个完整业务单元，在 docker-compose.yml 文件中定义。 -------------------------------------------------------------------------------- /markdown/cloudnative/k8s.md: -------------------------------------------------------------------------------- 1 | ### Kubernetes 实现原地升级 2 | 3 | #### Deployment 部署 4 | 升级过程中 Deployment 会触发新版本 ReplicaSet 创建 Pod，并删除旧版本 Pod。原 Pod 对象被删除，一个新 Pod 对象被创建。新 Pod 被调度到另一个 Node 上，分配到一个新的 IP，并把对应的容器在这个 Node 上重新拉取镜像、启动容器。 5 | 6 | #### StatefulSet 部署 7 | 升级过程中 StatefulSet 会先删除旧 Pod 对象，等删除完成后用同样的名字在创建一个新的 Pod 对象。 8 | 值得注意的是，尽管新旧两个 Pod 名字都叫 pod-0，但其实是两个完全不同的 Pod 对象（uid也变了）。StatefulSet 等到原先的 pod-0 对象完全从 Kubernetes 集群中被删除后，才会提交创建一个新的 pod-0 对象。而这个新的 Pod 也会被重新调度、分配IP、拉镜像、启动容器。 9 | 10 | #### 原地升级 11 | 在应用升级过程中避免将整个 Pod 对象删除、新建，而是基于原有的 Pod 对象升级其中某一个或多个容器的镜像版本。 12 | 13 | ### 原地升级优势 14 | 1. 节省了调度的耗时，Pod 的位置、资源都不发生变化； 15 | 2. 节省了分配网络的耗时，Pod 还使用原有的 IP； 16 | 3. 节省了分配、挂载远程盘的耗时，Pod 还使用原有的 PV（且都是已经在 Node 上挂载好的）； 17 | 4. 节省了大部分拉取镜像的耗时，因为 Node 上已经存在了应用的旧镜像，当拉取新版本镜像时只需要下载很少的几层 layer。 18 | 19 | 其次，当我们升级 Pod 中一些 sidecar 容器（如采集日志、监控等）时，其实并不希望干扰到业务容器的运行。但面对这种场景，Deployment 或 StatefulSet 的升级都会将整个 Pod 重建，势必会对业务造成一定的影响。而容器级别的原地升级变动的范围非常可控，只会将需要升级的容器做重建，其余容器包括网络、挂载盘都不会受到影响。 20 | 21 | 最后，原地升级也为我们带来了集群的稳定性和确定性。当一个 Kubernetes 集群中大量应用触发重建 Pod 升级时，可能造成大规模的 Pod 飘移，以及对 Node 上一些低优先级的任务 Pod 造成反复的抢占迁移。这些大规模的 Pod 重建，本身会对 apiserver、scheduler、网络/磁盘分配等中心组件造成较大的压力，而这些组件的延迟也会给 Pod 重建带来恶性循环。而采用原地升级后，整个升级过程只会涉及到 controller 对 Pod 对象的更新操作和 kubelet 重建对应的容器。 22 | ### 最后 23 | 更多：https://developer.aliyun.com/article/765919 -------------------------------------------------------------------------------- /markdown/cloudnative/云原生可观测性.md: -------------------------------------------------------------------------------- 1 | ### 概念 2 | 随着分布式架构渐成主流，`可观测性（Observability）`一词也日益频繁地被人提起。一般会将可观测性分解为三个更具体方向进行研究，分别是：事件日志、链路追踪和聚合度量。 3 | 4 | + **日志（Logging）**：日志的职责是记录离散事件，通过这些记录事后分析出程序的行为，譬如曾经调用过什么方法，曾经操作过哪些数据，等等。输出日志很容易，但收集和分析日志却可能会很复杂，面对成千上万的集群节点，面对迅速滚动的事件信息，面对数以 TB 计算的文本，传输与归集都并不简单。 5 | 6 | + **追踪（Tracing）**：单体系统时代追踪的范畴基本只局限于栈追踪（Stack Tracing），调试程序时，在 IDE 打个断点，看到的 Call Stack 视图上的内容便是追踪；编写代码时，处理异常调用了 Exception::printStackTrace()方法，它输出的堆栈信息也是追踪。微服务时代，追踪就不只局限于调用栈了，一个外部请求需要内部若干服务的联动响应，这时候完整的调用轨迹将跨越多个服务，同时包括服务间的网络传输信息与各个服务内部的调用堆栈信息，因此，分布式系统中的追踪在国内常被称为"全链路追踪",追踪的主要目的是排查故障，如分析调用链的哪一部分、哪个方法出现错误或阻塞，输入输出是否符合预期等等。 7 | 8 | + **度量（Metrics）**：度量是指具有统计意义上的指标。譬如，Java 天生自带有一种基本的度量，就是由虚拟机直接提供的度量，诸如内存大小、各分代的用量、峰值的线程数、垃圾收集的吞吐量、频率，等等都可以从 JMX 中获得。度量的主要目的是监控（Monitoring）和预警（Alert），如某些度量指标达到风险阈值时触发事件，以便自动处理或者提醒管理员介入。 9 | 10 | 三者结合起来：根据 Metrics 告警发现系统异常 -> 找到异常Traces，从而定位到具体的服务/方法 -> 通过Logs找到具体错误根源并修正。 11 | 12 | 因此，标准化的云原生可观测性基础设施应该是：统一用户接入标准，支持为 前端，终端，后端，中间件，存储 等各环节引入可观测性， 实现跟踪，监控，日志数据互联互通 ，形成全链路的可观测性大数据生态系统. -------------------------------------------------------------------------------- /markdown/cloudnative/概念.md: -------------------------------------------------------------------------------- 1 | # 云原生相关概念 2 | 3 | ### 什么是云原生 4 | 技术的变革，一定是思想先行，云原生是一种构建和运行应用程序的方法，是一套技术体系和方法论。云原生（CloudNative）是一个组合词，Cloud+Native。Cloud表示应用程序位于云中，而不是传统的数据中心；Native表示应用程序从设计之初即考虑到云的环境，原生为云而设计，在云上以最佳姿势运行，充分利用和发挥云平台的弹性+分布式优势。 5 | 6 | 符合云原生架构的应用程序应该是：容器化，基于微服务架构提高灵活性和可维护性，借助敏捷方法、DevOps支持持续迭代和运维自动化，利用云平台设施实现弹性伸缩、动态调度、优化资源利用率的。 7 | 8 | ### 几个概念 9 | 1.Mesh 化的服务体系 10 | 2.基于云全闭环 11 | 3.全无服务器方式运行 12 | 4.用户体验持续优化 13 | 5.秒级切流、业务无感 14 | 6.基于AI的自动化 15 | 16 | 1. 为什么可以做到秒级切流 17 | 2. 云原生和上云的区别 18 | 19 | + 腾讯云SCF跟wxg的服务体系不互通，哪些体系，为何不通，为何不能推动打通 20 | + 暂时没有途径可以主调svrkit服务 21 | + 如果是模块级别的托管或者有上下游依赖的情况，SCF并不适合做这件事，为什么 22 | + 小程序云开发跟小程序和公众号绑定，开放性和通用性上不能满足诉求。如何绑定了 23 | + mesh的转发是怎样转发，有什么用，有什么好处 24 | + p6n提供通用网关是什么，域名到模块直接打通是什么意思。应用层转发如何实现 25 | + 函数级别或模块级别的服务治理，服务治理指的是什么，如何治理 26 | + k8s，servicemesh，envoy这些是什么，有什么用，用了有什么好处 27 | 28 | + L5 是什么，CLB是什么 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /markdown/feel/专心工作和只想搞钱的女前端开发.md: -------------------------------------------------------------------------------- 1 | ### 前言 2 | 去年写了一篇 浪到飞起的前端女程序的2019，对比之下，今年是浪不起来了。不过，整体来说，今年也是挺满意的一年了。就简单写一下吧。 3 | ### 工作-跳槽 4 | 没错，我今年又跳槽了。原来的公司固然是好，但是比较深圳还是一个比较容易让人焦虑的城市，我内心一直都有个到广州定居的想法，只是没有合适的机会过去，就想着试一试而已。 5 | 6 | 然后3月份开始投简历，历时一个月左右吧，拿到了头条、阿里、微信的offer，想看面经的看这里---，最后就去了广州微信。 7 | 8 | 这里回答一些我这一年里被问到很多次的问题吧～ 9 | 1. 为什么去微信而不是去头条阿里，是因为薪资高吗？ 10 | 11 | 说实话，不是。薪资这东西，其实不好对比，得看自己看重什么。对我当时来说，三家给的薪资都是符合预期的，横竖也差不了多少。选择微信最主要的原因就是想过来广州定居(因为在深圳实在买不起房，我在深圳有去看过房，能买得起的只能是偏远的老破小，心累)。也希望去一个有双休、精神压力小点的地方。最后，在2020年的年底，我也上车啦，在广州买房了。 12 | 13 | 2. 为什么你频繁跳槽，不怕简历花掉吗？ 14 | 15 | 我也不想跳槽，跳槽的过程也是挺累的，不过我有自己的规划吧，而且，频繁跳槽，只要你能找得到满意的下家又有什么所谓呢(这里还是建议，实在要跳，在大厂之间跳)。跳不跳槽是从自身的一个情况去看的，绝不仅仅是看薪资。比如我，会看自己当前阶段的人生规划，自己想要的是什么，当前团队是否很糟糕，薪资是否过于低等等。 16 | 17 | 3. 你在微信啊，能不能帮我看下我账号为啥被封了，能不能...? 18 | 19 | 这半年里，很多人直接把我当微信客服了，问啥的都有。你跟我说个微信xxx业务xxx情况下有bug还好，我可以去反馈一下。我只是在微信这个BG下的其中一个部门的一个小组的一个干饭人，主要做微信小商店相关的业务。大哥哥们，什么微信/qq账号被封了，什么介绍微信网络安全部的白客，什么谁谁谁在微信被忽悠了多少钱，什么xxx功能怎么用，xxx功能难用，这些我真的真的爱莫能助，不要再来问我了。心情好我可能礼貌回复你一下，心情不好我直接不说话了，甚至想拉黑！还遇到过说给我多少多少钱，让我介绍xxx人的，真是好笑又无语！ 20 | 21 | ### 全年回顾 22 | 说来惭愧，今年重心确实不在开源社区了，对外输出少了很多，但是整体来说，我自己今年还是有进步的。简单写个流水账： 23 | + 公众号几乎每天推送高质量文章，大部分原创整理如下：https://mp.weixin.qq.com/mp/homepage?__biz=MzI0MzIyMDM5Ng==&hid=1&sn=38cb04a47fa6de4e62ba39721117df1f 24 | + 公众号,粉丝破万，然而今年公众号推送机制改了，很多粉丝可能都收不到推送了，粉丝打开率也不高，就不说了。 25 | + 跨团队、跨地域合作，完成一个小程序母体框架，是在新团队做的第一个东西，印象比较深刻。 26 | + 实践了自动化构建、机器人协作、见识了各种五花八门的内部轮子。 27 | + 见证了微信电商的发展，接触过多方面的业务，如资金、导购、商品、售后、客服等。目前主要负责商品模块。 28 | + 看了一些书，白嫖学习了一些课程，技术的， 非技术的都有。 29 | + 初入股市，新手韭菜，获得了工资之外的一点收入，对理财也有了一点新的感悟认识。 30 | 31 | ### 生活回顾 32 | 这里没什么逻辑，想到啥写啥吧～ 33 | 1. 身体管理 34 | 35 | 减肥成功之后，体重控制得还行，不过随着逐渐变忙，体重又开始渐渐上去了。5月份办的舞蹈室次卡，到现在来说，也就去了10次左右吧。忙各种事情，希望后面自己的事情都安顿好之后，再重新出发吧。 36 | 37 | 2. 关于赚钱 38 | 39 | 今年里，我的资产都变成了不动产。买了车，买了房。很多人问我怎么做到的，当然是各种攒钱(工资)、赚钱(炒股+公众号的一点小收入)加上借钱(跟朋友也借了几40w)啊，反正靠自己买房都是苦逼的，但是还是有可能的。最基本的工资收入，前期多积累，当作自己的第一桶金，当积累到一定程度的时候就要好好利用，寻找财富增长或者说保值的方法。就今年来说，我选择了股市，开始学习一些简单的股票知识，或者说，经常看新闻，看现在的发展重点是什么这样。反正我不会技术分析，就走最简单的路线，买龙头，跟风口。今年行情好，像我这样的新手小韭菜都赚钱了，通过股市实现财富自由的大有人在。 40 | 41 | 看过一个财富锚的概念，财富总会有机会重新洗牌，需要一些载体，而股市就是最常见的载体，你看那些富豪排行榜，哪个不是股票加持的。而现在中国首富都换人了，也是因为农夫山泉股票涨了很多。反正啊，我现在深刻地认识到，靠工资只能满足温饱，其他的还是得自己多尝试找找出路。跳槽虽然可以涨薪，但是你也不能总跳槽，而且，跳槽了也不一定能追上应届生的工资呢，与其总盯着那口饭叹气，不如在主业稳定上升的情况下，开拓其他收入来源。 42 | 43 | 我知道你们最想知道的是我赚了多少，但是数字我真不好说。我个人大概统计了一下，收益率大概是25%(赚的金额是2位数，单位 w )吧，主要原因有2个吧，一是我今年刚开始尝试，韭菜心理，都是赚了一点就跑路了，那些好股票我都没有长久持有，比如特斯拉、拼多多、SE等，反正很多都是超级好的股票。二是年底的时候，我要买房了，所以就变卖了股票，暂时离场了。今年我不着急用钱了，炒股都走长线，就放着不动也不看了，希望年底的时候收益满意吧，哈哈。 44 | 45 | 3. 公众号 46 | 47 | 公众号是我自己从0开始搞的，巅峰时期，粉丝粘性挺高的，打开率有百分之十几。现在不行了，主要有3个原因吧，一是我自己确实也没有那么多时间和精力去运营了，对比一些新做的号，少了些许热情和更多的高质量原创干货；二是微信的公众号推送机制改了，对头部的号利好，对我的小号就利空，一言难尽；新的号层出不穷，粉丝就那些多，大家都在争抢粉丝，内卷严重了。像我这种，自然就少了人气。我希望我今年，能做到无愧于心吧，尽量多输出，或者出一些直播课程之类的多和大家互动一下。 48 | 49 | 这里还是有一些老粉特让我感动的，坚持不懈地看我的公众号，留言之类的。我们已经有了一个小群，几个特别活跃的还搞过云聚会、云喝酒，真有意思，哈哈。你们的不离不弃是我坚持下去的动力，后面我搞个前端Q线上年会玩玩，哈哈。希望后面能继续见到大家，一起玩！不对，是一起学习提升，奋斗～ 50 | 51 | ### 最后 52 | 反正，我没有很浪，2020年大部分的精力都在工作和搞钱上面。当然，也有放松的时候，毕竟身体是革命的本钱，好的身体才是真正的赢。我出去玩过3、4次吧，比如去长沙喝茶颜悦色，去文和友吃小龙虾、去御温泉泡温泉，去吃各种美食大餐等。总的来说，我还是很满足的，算是小小的上岸了一下下吧。继续努力咯，相信2021年会更好的，加油吧～ 53 | 54 | ### 交流 55 | + 欢迎加我微信(winty230)，拉你进技术群，长期交流学习... 56 | + 欢迎关注「前端Q」,认真学前端，做个专业的技术人... 57 | 58 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/qrcode/%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%BE%8E%E5%8C%96%202.png) -------------------------------------------------------------------------------- /markdown/feel/分享几个有感触的故事.md: -------------------------------------------------------------------------------- 1 | ### 背景 2 | 最近听到的一些事情，感触颇深，聊聊～ 3 | -------------------------------------------------------------------------------- /markdown/feel/如何保持学习的动力.md: -------------------------------------------------------------------------------- 1 | # 结合我的大学经历谈谈如何保持学习的动力 2 | 3 | ### 按需调整目标 4 | 5 | 人活着就不能没有目标，也不可能没有目标。比如活着就是个目标，或者说做人，也是个目标。但是我们更应该关注一些可以量化的具体的目标，比如我今天要刷一道算法题这种。那么如何找到让自己动力十足，充满干劲的目标呢。下面我说说自己是如何确立学习前端的目标，并最终走上前端这条路的故事，希望对你有所启发～ 6 | 7 | #### 兼职 8 | 9 | 说起来惭愧，我不是一个学霸，甚至是个学渣。大一的时候基本以玩为主，其实没有怎么认真学习。大一的时候，有很多同学做兼职，比如家教之类的，很多人甚至挣到了自己的学费，不再依赖家里。我因此也受人启发，当时的一个想法是，我有没有可能挣到自己的学费，不再依赖家里呢，或者说，我当时就定了一个目标，一个学期内做兼职且收入大于我的学费。然后，我就开始了我的兼职之旅。 10 | 11 | 最开始，在学校图书馆做管理员，搞笑的是，第一个月发工资的时候，发了三百多块，当时觉得自己能赚钱了很开心，于是请舍友出去吃了一顿萨莉亚。结果，花了一百多，所剩无几。当时我就思考，单靠这个不行的，钱太少了，甚至都不够吃一顿。`于是，开始思考时薪更高的兼职，也就是基于“钱太少”这个点，我开始调整我的目标。` 12 | 13 | 然后我就从时薪十几块的派传单，到时薪几十块的马奶酒推销员，再到时薪一百多块的礼仪模特都做过。又要说我无图无真相了，还是放几张年少无知的图吧～ 14 | 15 | 然而，收入虽然相对之前高了一点，但是我发现花的也更多了。比如需要化妆，就要买各种各样的化妆品。简言之就是一边赚钱一边花钱，赚的钱还是无法达到我的目标。 16 | 17 | 于是我又开始了新一轮的思考，先是观察一波周围的人在干啥，比如有的加了工作室做研究，有的在考各种证书，有的加入了前端大军。然后我就做了一个表，去统计我可以有的选择。具体内容忘记了，反正大致就是各种情况下，我的收益能达到目标的情况中最优的选择。最后的结论是，加入工作室学习前端，争取 1 个月内开始找外包挣钱(这里是指静态页面，那时候有按移动端页面算的，比如 100 块一个静态页面这样),认真学习和积极参与活动，一个是提高绩效，另一个是提高综合测评的分数，这样就可以争取拿到奖学金。 18 | 19 | 于是，在大二第二个学期的暑假，我就加入了工作室，开始了我的前端学习之路。这里面其实我的目标有 2 个，第一我要拿到奖学金，第二我要学习前端并且能带给我收益(个人以后的发展及 💰)。 20 | 21 | #### 学习之路 22 | 23 | 因为我 2 个目标并行，且 2 个目标其实主要做的事情就是学习。所以我退了所有的协会，少逃课，多学习，这里我的主要娱乐来源于看剧和参加各种能拿综合测评分的活动，比如啦啦队跳舞、会议主持、校园清洁等，反正能拿分，有点意思的我都参加了，也挺好玩，嘿嘿。 24 | 25 | 总的来说，我前端的一个入门历程为： 26 | 27 | 1. w3school 教程，1 天 28 | 2. CSS，CSS+DIV 从入门到精通/CSS 权威指南/精通 CSS 高级 web 标准解决方案，例子都跟着做一遍，10 天 29 | 3. 实践，做微博首页，3 天时间，样式尽量做到 100%还原(个人感觉自己做到了 95%) 30 | 4. 学习《JavaScript 高级程序设计》(公众号回复 ebook 有资源)，断断续续地看的，看了 2、3 遍，特别是后来校招，有些内容背得很熟 31 | 5. 开始做第一个正式前后端分离的有交互的实践项目，用的是 boostrap+jq 一个文档管理网站，大概做了 2 周，具体时间忘记了 32 | 6. 开始做第一个有报酬的项目，我们学院的院网,用的 jq 33 | 7. 大三第一学期开始第一份实习，去一个老师的工作室 34 | 8. 开始第一份校外实习，用的 react，当时对大公司什么的什么概念都没有。拉勾上随便投了一个，然后去了。2 周后，发现一个朋友去了一个听过名字的公司，然后意识到“听过名字”的重要，起码你跟别人说的时候，不需要解释这公司是干啥的。于是默默重新投简历。 35 | 9. 然后去了唯品会，第一份长时间的实习，历时差不多 4 个月，做了 angular 的项目。 36 | 10. 参加秋招，加入京东，然后就毕业咯。 37 | 38 | 在每个过程中，我都有自我提升的时候，那时候看得最多的是慕课网、极客学院，很多视频教程。看了就跟着手把手做，做笔记，自己消化之类的，也会刷 js 基础题目+造小轮子，如原生 js 实现图片轮播/原生 Ajax 插件等，总之，学习是一个积累的过程。 39 | 40 | 而课程上的学习过程就不说了，大学的课程嘛，只要你认真准备，成绩自然是不错的。结果就是我绩点不错，综合测评也攒了很多分，然后拿到了奖学金。在我大三的这一年，我终于实现了自己当时的目标，并且超额完成了，因为我选择了前端，一个我喜欢的领域，一个能获得报酬的工作。 41 | 42 | #### 小结 43 | 44 | 这里我的一个习惯就是，要常常思考自己想要的是什么，只有你有目标了，才有动力去实现它，才会花心思去思考如何才能达到目标。 45 | 46 | ### 制定计划，状态学习法 47 | 48 | 说了一通，再说说我是如何制定计划去实现目标的吧。我个人，确实是一个经常做计划的人，但是我绝对不是一个能完成计划的人，说起来惭愧。可以说我做的学习计划，从来没有完整完成过。 49 | 50 | 以前，我都是排得满满的，几点到几点学什么这样，这样的计划，计划完就泡汤了。后来，我自己的一个计划就是，不做具体计划，实时看自己的状态来决定学什么。大致有如下几点： 51 | 52 | 1. 我这个阶段要学什么，怎么衡量我的学习成果。比如我一个月内要学习完 webpack，并输出文章/PPT 53 | 2. 我要学哪些内容，一般我会看极客时间有没有系列课程/小册子有没有/电子书有没有，有就找出来，没有就算了。然后搜博客/知乎专栏/面试题等与 webpack 相关的东西，然后保存链接(我个人更习惯开着很多很多的 tab，直到学习完了再关闭) 54 | 3. 分时段调整，比如我现在只有 5 分钟或者状态不太好，那么我就去刷面试题，直接看答案，不用思考。直接吸收。比如有 1 个小时以上的时间，那么就去看博客/看源码/看视频等，反正就是看自己的学习状态决定学习什么资料 55 | 4. 适当给自己压力，比如我直接和 leader 说我要在 x 日分享 webpack 的内容，先把结论甩出去，这样自己自然就有压力了 56 | 5. 寻找动力点，人都是有惰性的，没有动力很难去认真搞一个事情。这个时候可以给自己寻找动力点，比如看完 xxx 就去吃顿海底捞，理解了 xxx 就买个 switch 等。又或者在社区输出文章，如果有人给你点赞/关注你，这种时候也是挺开心的，动力十足 57 | 6. 积极心理学，不要逼迫自己学习。如果你是那种无忧无虑的人，其实也没必要学这学那的，就怎么随意怎么来。当你焦虑了的时候，你自然就会去学习了 58 | 7. 关键节点记录，某个阶段学了什么，输出的东西形成一个记录，当你回头看的时候，会感觉成就感爆棚 59 | 8. 加学习群，比如加入前端 Q 技术交流群。加群也是一个不错的选择。我自己没搞公众号那会，我也加了别人的群，大家会提问，讨论面试题/工资/工作之类的，也会有一定的涨见识和社会认知提升 60 | 61 | 话都说到这里了，想加前端 Q 技术交流群的来呗，扫下面的二维码，按提示操作： 62 | 63 | ### 慢慢坚持 64 | 65 | 切忌急进，眼高手低。踏实一点，每天坚持一点点，日日复月月，月月复年年，年年复此生，无妨爱前端淡泊，但求爱前端长久。 66 | -------------------------------------------------------------------------------- /markdown/feel/工作几年后，我乱了.md: -------------------------------------------------------------------------------- 1 | ### 背景 2 | 怎么说呢，最近状态不是很好，也没怎么输出技术文章，内心凌乱得很，所以来磕唠一下，本文是走心的状态流，如果觉得矫情，可以关闭了。 3 | 最近思考很多，主要有几方面： 4 | 5 | 1. 我状态不好的原因及如何调节 6 | 2. 听朋友说3年薪资不涨反降后的感想 7 | 3. 我让我亲友去读前端培训班的考量 8 | 4. 自己的一些"重新出发" 9 | 10 | ### 我状态不好的原因及如何调节 11 | 我目前处于一个符合晋升时间要求的阶段，但是我目前的状态还是比较迷茫，因为大厂晋升 TMD `太难了`... 12 | 13 | 首先，我非常认同这三条晋升原则： 14 | 15 | + 第一条原则是主动原则，主动做事的人，比等着别人安排的人更容易晋升。所以你应该定期或者不定期地主动找主管沟通，交流关于工作任务的想法和意愿，寻求机会；同时，你也要主动找同事沟通，了解更多工作相关信息。 16 | + 第二条原则是成长原则，一边做事一边挖掘成长点、提升自己能力的人，比光顾着做事的人更容易晋升。所以如果你已经能得心应手地完成现在的任务，就应该主动跳出舒适区，尝试更高难度和更高复杂度的事情；同时，不管事情做好了还是没做好，你都应该多做复盘总结，找到可以提升优化的点。 17 | + 第三条原则是价值原则，让能力为公司产出价值的人，比空有一身能力的人更容易晋升。所以，如果你的时间很宝贵，就应该优先学能为公司产出价值的技能。 18 | 19 | 我自认为这三条我其实都基本做到了。 20 | 首先，我想过很多的答辩方向，也梳理过不少东西。由于涉及公司信息，这里就简单截个思维导图吧： 21 | 22 | 但是我和主管沟通的时候，往往都是说深度不够或者亮点不够或者已经有类似的实现了，再或者方向太大/太小等。 23 | 24 | 一个想法不行我就再想，再不行就再想，继续想，180度垂直站着想，180度躺平想，360度选择跳跃想，直到，我累了... 25 | 26 | 第一次觉得好累好累，第一次觉得自己彻底理解了内卷，第一次感觉自己菜得一P... 27 | 28 | 然后，我意识到，我太焦虑了，太急了。于是我决定去调整一下。 29 | 30 | ### 调整大法 31 | 首先，休假，去浪一把，体验花钱的快感，让自己感受一下花钱的快乐。我喜欢海，无边的大海看着可以让我思想放空，会觉得自己很渺小，但是我钱也不多，加上疫情也去不了国外，去太远可能也就享受不起了(真实)。最后去了惠州双月湾，看海、吃海鲜、拍美照～所以无图无真相，先来一波： 32 | 33 | 然后，就放松了。我就尝试不以晋升为目的思考问题，因为我不得不承认，现在的我思考方案还是不够全面、不够深度，强行给自己压力实属没必要，要想成功，先练内功～ 34 | 35 | 再然后，就`梳理自己的技能树`，没错，我就爱画脑图。技能树就不放出来了，毕竟我现在公众号也是粉丝破万的人了，不能让你们发现我菜啊，掉粉的痛我可承受不起~ 36 | 梳理过程其实很简单，就是看看自己哪方面的知识是感兴趣的，哪方面的知识是对现在的工作非常有利的而我还不够深入的，就标注一下大纲和细分的点。 37 | 如果你不知道如何梳理或者觉得无从下手，可以直接把公众号前端Q的所有文章看一遍，然后归类、整理、标注自己的感兴趣程度/掌握程度。(麻烦梳理好之后发我一份，有赏，嘿嘿) 38 | 39 | 再然后，就是制定计划了。因为我还算是比较关注时事，始终持续学习的(起码天天看自己的公众号啊)，所以知识点基本都知道，大概原理基本也知道。主要问题是不够深入(毕竟大部分的时间都要搬砖啊，惨死鸡)，在应用上了解不够全面。所以，我后面就侧重深入就可以了。至于时间安排嘛，挤一下应该... 40 | 41 | 这里推荐一些适合碎片时间学习的东西吧～ 42 | 43 | 1. 前端Q等公众号，其实关注了一个就会关注一堆，你懂的(多个铁粉通过好好看前端Q找到了非常满意的工作哟) 44 | 2. 知乎(建议关注 尤雨溪、HcySunYang、justjavac、太狼等等人，太多了列不过来，反正关注前端领域问题，看谁回答好就关注就是了)，知乎就不用关注我了，我东西都首发公众号 45 | 3. 面经/面试题集，这个来源很多，比如公众号、各大培训班总结的题集等 46 | 4. 一些非技术的东西，比如搞笑视频、抖音探店、视频号怀旧大会主题集、韭菜的自我修养、欢乐斗地主等 47 | 48 | ### 刹车 49 | 写着写着发现主题太多了，写不完了。剩下的直接直播吧，直播聊。直播时间本周六晚，本次直播有点敏感，仅限前端Q粉丝收听，所以具体咱们技术群说吧，你懂的～ -------------------------------------------------------------------------------- /markdown/feel/工作迷茫的学习办法.md: -------------------------------------------------------------------------------- 1 | # 工作很忙，如何破局 2 | 3 | ### 背景 4 | 5 | 这个问题，很多人问过我。我都没有具体回答过，问得多了，我觉得我有必要一次性，将想说的都写出来。这样以后谁要是问我，我就给他甩这篇文章，完美。 6 | 7 | ### 迷茫 8 | 9 | 工作很迷茫，我觉得大部分的原因如下： 10 | 11 | 1. 业务需求多，加班也做不完的程度 12 | 2. 业务简单，感觉技术含量低 13 | 3. 背景一般，不知道如何提升自己 14 | 4. 其他 15 | 16 | 不管什么原因都好，反正迷茫了。其实这些问题，我感觉人人都会遇到，只能可能是在不同的技术阶段遇到罢了，包括我自己，也确确实实都遇到了。虽然我不觉得自己破局成功了，但是我可以分享一下我目前的应对方法，你可以参考一下看看对你是否有帮助。 17 | 18 | ### 破局 19 | 20 | #### 业务需求多，加班也做不完的程度 21 | 22 | 1. 以我的认知，业务需求就不会有做完的时候。这个问题，我觉得如果你刚入职新公司，对业务不熟悉，那么你只能好好加班，慢慢总结，尽可能地加快熟悉项目的速度。这里的总结，可以总结这些内容： 23 | 24 | - 记录开发流程。通常都有好多步骤，不同的系统，甚至需要各种权限和账号。都好好走一遍流程，以图文的形式记录下这个开发流程的过程，形成自己的笔记，争取做到，只问一遍同事，就学会了，熟悉理解了。如果你们没有什么文档或者文档过旧，刚好你可以沉淀一个新人文档了，多棒！ 25 | 26 | - 记录通用业务代码片段。一个团队的业务方向通常是固定的。也就是说肯定是很多东西可以复用，或者说你写了之后可以被复用的。这种情况下，如果是大的功能模块或者逻辑，可以形成一个 npm 包，抽离出来以供复用。小的片段可以放 util 中，甚至，直接 copy 到自己的笔记本中，方便自己查找使用即可。虽然搬运代码确实没什么含量，但是在你理解的前提下搬运却是省时快捷的最佳方法，学会站在历史的肩膀上。 27 | 28 | - 梳理痛点，逐个攻破。开发中遇到痛点，或者灵机一动的点，一定一定要及时记录下来，比如我，始终会有一个叫`价值过亿的想法`的笔记目录。你可以只写一句话，记录一下这个痛点，痛点就是你觉得很耗时，或者很不合理，浪费你时间的地方。先记录下来，然后找个时间逐一梳理应对。站在问题的角度上，如果我觉得这东西很难用，那么我期望是什么，怎么样才能让我自己觉得好用呢。对于想法就是，我想做一个什么东西，解决什么问题的东西。这些灵光一现如果没有及时记录，通常过了也就忘了。 29 | 30 | - 提高自己的抽象能力，封装能力。当然，这个说得有点抽象，需要靠自己感悟了。如何感悟，那就是多阅读优秀的大神的代码，看看别人在写代码的时候，都怎么写的，怎么设计的，这种跟自己的对比，优劣如何。这东西，看多了，总能学到点皮毛的。 31 | 32 | 2. 向上反馈，抛出风险点。这怎么说呢，加班虽然不可避免，但是也不用走 007 的节奏，自己根据自己的实际情况，定一个自己可以接受的加班范围。我自己的话，目前能接受的最大加班时间是 10115，如果项目赶着上线周末也可以加班，但是不能长期连续周末加班。如果你尽力了，还是无法按时交付，那么就直接跟上级反映。有人说，老板才不管你，做不完就要走人了，那么如果是我遇到这种老板，我会自己走人。 33 | 34 | 3. 强行安排自由时间。自己在评估需求的时候，可以每天留个半小时到 1 小时作为自由时间，那么你就利用这点小时间去做自己特别想做的事情，这里我的一个建议是优先做工作相关的一些基建/轮子的调研或者代码编写。毕竟提高生产力才是工作中最需要的，而且基于业务的技术更有意义也更有挑战。 35 | 36 | #### 业务简单，感觉技术含量低 37 | 38 | 1. 如果你业务简单，没啥技术含量，你还疯狂加班，我觉得这是矛盾的。首先，如果没啥技术含量的简单需求，通常都是有对应的工具或者系统去改进，进而提高生产力。或者你欠缺的是这样的系统，那么你可以调研一下，相关背景下，一些开源项目/大公司的分享实践。比如我老是在切图，做页面，那么你是否想过可视化搭建？是否想过有根据设计稿输出页面代码的项目？是否想过物料沉淀，重复提取利用？都是有什么可以挖掘的点的，或者是自己的认知和水平，尚不知道罢了。 39 | 40 | 2. 多参与一下大公司的技术分享大会，这种通常都是基于具体的业务做了一些提升工作的，可以增长自己的见识和思考广度。 41 | 42 | 3. 如果你的公司或者团队，实在是什么都没有，那么你只能靠自己，打造自己的社区影响力，比如写博客，参与开源项目。你可以像我一样，写文章，发掘金，搞公众号等。这些都是可以尝试的方向。 43 | 44 | 4. 加群交流，关注前端 Q，学习文章，关注前端动向，阅读各种源码，思考这些框架或轮子的设计亮点，反正就是多思考，融会贯通，感悟出自己的东西。 45 | 46 | 5. 跳槽。如果你觉得在一个公司，原地踏步好久了，换个环境重新开始其实不失为一个选择。 47 | 48 | #### 背景一般，不知道如何提升自己 49 | 50 | 首先，背景一般，绝对是相对的。闪闪发光的人是大，但不是满大街都是，我们大多数都只是个普通人。既然大家都是普通人，又何必在意什么背景不背景的呢。默默学习就是了。我总结几个我自己的方法分享给大家： 51 | 52 | 1. 总结工作中/公司中自己能接触到的项目，去了解这个项目，可以从背景，0 到 1 做什么，1 到 2 做了什么去了解。最重要的是数据，这些变化直接的数据是如何体现的。总结出来。 53 | 54 | 2. 设立假想敌，比如同是前端方向的，自己要达到他的多少，或者说高于他多少(最直接的体现是 💰)，时刻鞭策自己努力。 55 | 56 | 3. 替换框架中的思想/轮子/方法，最简单的，假设你的项目用了 jq，你能否用原生 js 实现，进而替换项目中的方法呢。不要老是说项目简单，没亮点没挑战。再简单的项目，都可以自己挖掘难点的，就看你有没有勇气和耐心去做罢了。再比如小程序不支持 store，你能否实现一个呢？其实都是自己为自己找的借口罢了，或者说你觉得这种拿不出去装逼，不想动手。但是，如果没有前期的积累，又有几个人可以一步登天呢？前端人，踏实点吧。 57 | 58 | 4. 多接触一些前端进阶必须的东西。原理源码/自动化（性能/测试/部署发布）/效能方案(持续集成/微前端/node 中间层)等等 59 | 60 | ### 最后 61 | 62 | 不积跬步无以至千里。当你觉得自己原地踏步的时候，不妨好好反思一下；当你想去实践一些大项目的时候，不妨拿小项目练练手，慢慢沉淀；当你加班很多的时候，从项目找切入点去学习提升。 63 | 64 | 没有那么多的手把手教，前端都是靠自己悟的，奋斗吧，骚年！ 65 | 66 | ### 交流 67 | + 欢迎加我微信(winty230)，拉你进技术群，长期交流学习... 68 | + 欢迎关注「前端Q」,认真学前端，做个专业的技术人... 69 | 70 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/qrcode/%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%BE%8E%E5%8C%96%202.png) -------------------------------------------------------------------------------- /markdown/feel/晋升笔记.md: -------------------------------------------------------------------------------- 1 | 现在我们做个总结，这一讲我为你介绍了三条晋升的核心原则： 2 | 3 | + 第一条原则是主动原则，主动做事的人，比等着别人安排的人更容易晋升。所以你应该定期或者不定期地主动找主管沟通，交流关于工作任务的想法和意愿，寻求机会；同时，你也要主动找同事沟通，了解更多工作相关信息。 4 | + 第二条原则是成长原则，一边做事一边挖掘成长点、提升自己能力的人，比光顾着做事的人更容易晋升。所以如果你已经能得心应手地完成现在的任务，就应该主动跳出舒适区，尝试更高难度和更高复杂度的事情；同时，不管事情做好了还是没做好，你都应该多做复盘总结，找到可以提升优化的点。 5 | + 第三条原则是价值原则，让能力为公司产出价值的人，比空有一身能力的人更容易晋升。所以，如果你的时间很宝贵，就应该优先学能为公司产出价值的技能。 -------------------------------------------------------------------------------- /markdown/feel/浪到飞起的前端女程序员的2019.md: -------------------------------------------------------------------------------- 1 | # 浪到飞起的前端女程序员的2019 2 | 3 | ### 前言 4 | 转眼又到一年年末，我是一个时间上总慢半拍的人。比如，其实毕业两年多了，才渐渐意识到，原来我现在再回学校的话，真的再没有我的专属床位了～ 5 | 6 | 所以，要不是掘金有这个年度征文，我都没意识到原来到年末了。我回想了一下，我一年，真的发生了好多事，我也很努力地过着这一年，最终也都取得了自己还挺满意的结果，下面我就挑几个我最满意的事，记录一下～ 7 | 8 | ### 工作-跳槽 9 | 年初的时候，跳槽了。主要原因是我想有多点自己的时间(多点¥¥)，经营一下自己。毕业一年多，感觉自己老了十岁，工作日就是打代码，处理bug，周末就是躺尸。没啥技术提升的欲望，每天都觉得，好累哦，好累哦... 10 | 11 | 我是一个前端，一个程序员，一个年轻貌美的女孩子，我不想自己成为只会闷头打代码的人，年轻就要动起来，发光发热。我要改变，我要有自己的兴趣爱好，我要热爱生活，我要做一个有趣的人！ 12 | 13 | 于是，3月初成功换坑，换到了一个不怎么加班的公司。福利待遇等其他各方面条件都很好，直至现在，还比较满意。刚来的时候，激动得很，因为原来真的有不加班的公司！公司有各种协会(各种球类、桌游等)，天天下班后就奔这奔那的，锻炼身体，哈哈。 14 | 15 | 慢慢适应了节奏之后，开始做起了自己的发展规划(当然也是因为和leader聊过，他给我很多建议和指导)。主要规划了技术提升计划、重拾爱好计划、重回颜值巅峰计划、新领域尝试计划... 16 | 17 | ### 技术-掘金Lv4 18 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/gzh/1577011118347.jpg) 19 | 我在2017年01月10日就注册了掘金，但是我的第一篇文章却在2019年07月02日发表的，真是惭愧啊，一直偷偷吸取社区的知识，却没有回馈，哈哈。 20 | 21 | 我觉得掘金上的文章，质量都挺高的(主要是质量低的好像会被喷)，所以我犹犹豫豫之后，才在今年写了第一篇文章。记得第一篇发完之后，就很激动，不断刷新，看看阅读量啊，看点赞啊，看有没有人喷我啊(渣渣的孱弱心理)... 22 | 23 | 刚看了一眼，第一篇，2k+阅读，30个赞，很满意了。因为新号，很多时候发的文章都没人看的呢。后面继续写啊写啊的，截止至目前，已经完成了25篇专栏的创作。对自己，还是比较满意的。 24 | 25 | ### 技术-技术上的部分成果 26 | + 公司级技术分享 2 次，团队技术分享 3 次，后续有时间会整理分享出来 27 | + 25 篇掘金专栏，https://juejin.im/user/5874526761ff4b006d4fd9a4/posts 28 | + Github上580+次commit,https://github.com/LuckyWinty/blog 29 | + 每周N题，https://github.com/LuckyWinty/fe-weekly-questions 30 | + 简单项目脚手架，https://github.com/LuckyWinty/create-repo-cli 31 | + serverless初探，https://github.com/LuckyWinty/serverless 32 | + 个人博客，https://github.com/LuckyWinty/blog 33 | + 前端技术书籍看完 3 本，看完《三体》三部 34 | + 公众号原创 43 篇 35 | 一些精品文章，已经分类整理好了，想要查看的可以看这里: https://mp.weixin.qq.com/mp/homepage?__biz=MzI0MzIyMDM5Ng==&hid=1&sn=38cb04a47fa6de4e62ba39721117df1f 36 | + 拿了个公司认证的讲师，学到很多技术分享的技巧和知识 37 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/gzh/WechatIMG21001.jpeg) 38 | 39 | ### 生活-减肥成功&重拾爱好(jazz/画画/狼人杀/王者...) 40 | 毕业之后，人变得很忙，渐渐地，过劳肥。胖了十几斤，人都变圆了，幸好我165cm的身高撑着，不然就胖成球了。减肥前后对比，大概是这样： 41 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/640.webp) 42 | 43 | 我是佛系减肥，4个月，减了 18 斤左右，如果你想看减肥方法，可以看这里：https://mp.weixin.qq.com/s/C9MABhvQ6JUtnFSXBem5Yg 44 | 45 | 对于 jazz 舞 ,刚开始学习，是高中毕业之后。自己报了一个课程跟着学，学了一点基本功。大学之后，忙于各种社团等，又荒废了。今年跳槽之后，终于有时间重新学习了，然后就一周学2次课程，每次一个半小时，欢乐多多，人都精神了。最近年会，还在公司参加了节目表演，连跳2支 jazz 舞蹈，感触挺深的，终于有机会发光发热了，哈哈哈～ 46 | 47 | 对于画画，也是跳槽后开始搞的，目前水平，麻麻地，哈哈。能画些简单素描～ 48 | 49 | 对于狼人杀，在玩吧app上过千场的记录，会玩不是浪得虚名滴。线下场景中玩过的，可以说是没遇到过比我更会玩的程序员了，不服来战～ 50 | 51 | 对于王者，今年玩过的总场数，估计也破千了。目前比较会玩法师位，最高级别去到星耀。别人是这样评价我的，你玩中路，还觉得挺会玩的，一玩其他路，跟个智障似的... 52 | 53 | 还有，旅行，今年去浪了2次，一次去西安4天，一次去三亚5天，都挺好玩的。看剧，保守估计，看了20部连续剧，数不清的综艺和电影... 54 | 55 | 其他就不说了，似乎已经跑题了，与技术都没啥关系.哈哈，真是浪到飞起的一年，当我写总结的时候，发现有这么多好玩的东西，真棒～ 56 | 57 | ### 新尝试-公众号 58 | 2019年09月04日，我突然想起我申请过一个公众号，于是登陆了一下，去找回，但是原来的名字由于已经被回收，就必须新起一个名字了。然后我想啊想啊想啊想... 59 | 60 | 于是，就叫「前端Q」，前端Q的意思就是，一个有着有趣的灵魂的很Q的主营前端的前端号。 61 | 62 | 感概挺多的，自从搞了公众号，跟996差不多了。写文章，各个平台发，加好友，拉群，写新的文章...周而复始。累，真的累，不过累并快乐着，看着阅读数一点点上去，粉丝数一点点上去，只会觉得自己还不够努力，还可以写更好的文章出来... 63 | 64 | 目前，发展得还行吧，比我意想中的情况要好，就不啰嗦了，低调发展，嘿嘿～ 65 | ### 最后 66 | + 欢迎加我微信(winty230)，拉你进技术群，长期交流学习... 67 | + 欢迎关注「前端Q」,认真学前端，做个有专业的技术人... 68 | 69 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/qrcode/%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%BE%8E%E5%8C%96%202.png) 70 | -------------------------------------------------------------------------------- /markdown/interview/复习路线.md: -------------------------------------------------------------------------------- 1 | # 复习路线 2 | 3 | ### 基础 4 | 5 | 6 | 7 | ### 算法 8 | 9 | 10 | 11 | ### 项目 12 | 13 | ### 简历 14 | 15 | 16 | 17 | ### 投递 18 | 19 | ### 面试 20 | 21 | ### 谈薪 22 | 23 | ### offer 选择 24 | 25 | ### Q&A 26 | -------------------------------------------------------------------------------- /markdown/interview/头条-开发者生态-面经.md: -------------------------------------------------------------------------------- 1 | ### 背景 2 | 具体什么原因去面的头条，说不清吧，反正就是已拿offer，来分享一下面经。 3 | 4 | 问题比较多, 而且很多面试题都是跟个人项目相关的,不知道是不是我的错觉，我感觉很重视项目经历，问得很细。项目相关的问题借鉴意义不大，所以这里总结一些与项目无绝对关系的问题，欢迎围观～ 5 | 6 | 另外，我目前还在阿里/腾讯等的流程中，等结束之后，也会做些记录和输出，欢迎大家持续关注～ 7 | 8 | ### 笔试题 9 | 一面： 10 | 1. 执行代码求输出，并说明为什么，严格模式下输出有变化吗，为什么 11 | ```js 12 | var a = function () {this.b = 3;} 13 | var c = new a(); 14 | a.prototype.b = 9; 15 | var b = 7; 16 | a(); 17 | 18 | console.log(b); 19 | console.log(c.b); 20 | ``` 21 | 2. 给定一个升序整型数组[0,1,2,4,5,7,13,15,16],找出其中连续出现的数字区间，输出为["0->2","4->5","7","13","15->16"] 22 | ```js 23 | function summaryRanges(arr){ 24 | //TODO 25 | } 26 | ``` 27 | 3. 请实现以下的函数，可以批量请求数据，所有的URL地址在urls参数中，同时可以通过 max 参数控制请求的并发度，当所有请求结束之后，需要执行 callback 回调函数。发请求的函数可以直接使用 fetch 即可 28 | ```js 29 | function sendRequest(urls: sring[],max:number,callback:()=>void){ 30 | //TODO 31 | } 32 | ``` 33 | 二面： 34 | 35 | 1. 实现一个字符串反转： 36 | 输入：www.toutiao.com.cn 37 | 输出：cn.com.toutiao.www 38 | 39 | 要求： 40 | 1.不使用字符串处理函数 41 | 2.空间复杂度尽可能小 42 | 43 | 2. 不借助变量，交换两个数。 44 | ```js 45 | function swap(a, b) { 46 | //TODO 47 | } 48 | ``` 49 | 3. 观察者模式与发布订阅者区别，并写出其模型 50 | 51 | ### 与项目无绝对相关的问答题 52 | 1. vue 事件机制是如何实现的 (https://juejin.im/post/59ca5e975188257a8908959b) 53 | 2. vue 的组件通信方式有哪些 54 | 3. react fiber 的实现原理 (https://juejin.im/post/5dadc6045188255a270a0f85#comment) 55 | 4. vue 响应式数据原理(vue2/vue3/依赖收集/发布订阅/watcher消息队列控制/Vue.set实现) 56 | 5. vue 转小程序怎么实现(ast/生命周期对齐/跨平台模块兼容/兼容细节点实现过程) 57 | 6. 性能指标，如何理解TTI，如何统计，与FID有什么区别，如何实现统计，还聊了很多性能的东西 58 | 7. 说说你所了解的安全问题及防护方法 59 | 8. 说说你知道的设计模式，并举个对应的模式例子 60 | 9. 未来规划及学习方法 61 | 10. 你觉得你是怎样拿到京东校招的sp的 62 | 11. 遇到的最大挑战/过去的最大收获分别是什么 63 | 64 | ### 感受 65 | 头条的面试官很专业，你不会的或者要思考的，会引导你去思考，也不是一棒子打死,有些问题答得不够好直接挂掉那样，会全面地去看待一个人，挺好的。 66 | 67 | 与项目相关的问题，问了很多很多，基本上着重看我个人在项目中的角色，做过哪些项目设计/性能优化/项目规模/细节点实现/数据对比等等。 68 | 69 | 另外，我本人的博客，面试官都看过，似乎都知道我学过什么，知道什么，所以很多我博客上有的东西都没问，甚至我引申到过去，都不让说，有种没机会表现的感觉，哈哈 70 | 71 | ### 持续学习 72 | 最大的一个感受就是，在刚毕业的时候，问的基本都是基础，这种刷题就很好使。目前处于一个近3年经验的阶段，项目问得很多很多，项目真的非常非常重要，有亮点的项目太重要了，能体现你的深度及阅历。建议大家在做项目的时候要好好总结有挑战的点，很好使～ 73 | 74 | 这部分的题目，我会同步到我的每周N题上，欢迎大家来交流答案啊。想刷题的也可以来，嘿嘿，地址如下： 75 | https://github.com/LuckyWinty/fe-weekly-questions/issues 76 | 77 | PS：点击阅读原文可以直达刷题地址哦～ 78 | -------------------------------------------------------------------------------- /markdown/interview/微信-小程序交易平台-面经.md: -------------------------------------------------------------------------------- 1 | ### 背景 2 | 最近面试了微信，已拿offer，来分享一下面经。 3 | 4 | 问题比较多，而且很多面试题都是跟个人项目相关的，项目相关的问题借鉴意义不大，所以这里总结一些与项目无绝对关系的问题，欢迎围观～ 5 | 6 | PS:这次跳槽的复习路线/方法等，后面会整理出来，欢迎持续关注哦～ 7 | 8 | ### 笔试 9 | 1. 数组交集，编写一个函数，输入两个数组，输出它们的交集。输出数组中不含重复的元素，元素排列顺序可随意。 10 | 2. 二叉树的搜索，输入一个普通二叉树的根节点，实现一个调度器，调用调度器的next()方法，将返回二叉树中下一个最小的数；调用迭代器的hasNext()方法，将返回是否存在下一个数。二叉树节点是整数，无序。 11 | 3. 三角形个数，输入一个非负整数的数组，如果将数组元素选作三角形的边长，编写一个函数，输出这个数组可构成的三角形数量。 12 | 4. 数组切分问题，输入一个正序排列的整型数组，如果它可以被切分为1个或多个子序列，输出True，反之False。子序列需为连续的整型数组，并且长度至少为3。 13 | ```js 14 | 例1： 15 | 输入： [1,2,3,3,4,5] 16 | 输出： True 17 | 解释：可以切分为2个各自连续的子序列： 18 | 1, 2, 3 19 | 3, 4, 5 20 | 例2： 21 | 输入： [1,2,3,3,4,4,5,5] 22 | 输出： True 23 | 解释：可以切分为2个各自连续的子序列： 24 | 1, 2, 3, 4, 5 25 | 3, 4, 5 26 | 例3： 27 | 输入： [1,2,3,4,4,5] 28 | 输出： False 29 | 解释：无法切分出长度至少为3的子序列。 30 | ``` 31 | 5. 一只青蛙一次可以跳上1级台阶，也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法. 32 | 6. 求下面代码的输出 33 | ```js 34 | function test(a,b) { 35 | console.log(b) 36 | return { 37 | test:function(c){ 38 | return test(c,a); 39 | } 40 | }; 41 | } 42 | 43 | var retA = test(0); 44 | retA.test(2); 45 | retA.test(4); 46 | retA.test(8); 47 | var retB = test(0).test(2).test(4).test(8); 48 | var retC = test('good').test('bad'); 49 | retC.test('good'); 50 | retC.test('bad'); 51 | ``` 52 | 7. top k 53 | 8. 闭包问题及优化 54 | ```js 55 | for (var i = 0; i < 4; i++) { 56 | setTimeout(function() { 57 | console.log(i); 58 | }, 300); 59 | } 60 | ``` 61 | PS：一面笔试要求是30分钟，前4道算法题，二面笔试题是15分钟 62 | 63 | ### 与项目关系不大的问答题 64 | 1. 节流防抖(实现/场景/源码，如lodash实现原理) 65 | 2. 事件循环(浏览器/node/版本差异) 66 | 3. setTimeout 实现原理 67 | 4. react 和 vue 的区别 68 | 5. Promise 原理 69 | 6. 前端错误监控及容灾 70 | 7. 性能优化 71 | 8. 谈谈 node 的内存泄漏 72 | 9. 开发过程中遇到的最大挑战是什么 73 | 10. 学习的动力怎么来的，如何维持 74 | 11. 浏览器的渲染机制是怎样的 75 | 12. SSR 作用及优缺点 76 | 13. 如何进行状态管理 77 | 14. webpack 及浏览器的技术分享目的是什么，分享了什么，怎么做的分享 78 | 15. 如何进行项目重构 79 | 16. 进程与线程的区别 80 | 17. 说说知道的设计模式 81 | 82 | PS：由于面试全过程历时比较长，一些题目已经忘记了。大概记得这么点，然后很看项目，每一轮都详细问了项目～ 83 | 84 | ### 可能感兴趣的问答 85 | 1. 面试一共几轮 86 | 87 | 我本人一共 4 轮技术面 + 1 轮HR面。目前微信职级为9级以下的技术岗不用经过面委，9级以下的一般4轮技术面，内部转岗可3轮技术面，9级及以上的需要走面委面试，大概形式是做份ppt去讲自己的项目经历及其他技术项。9级及以上的就5-10轮技术面不等。 88 | 89 | 2. 历时多长 90 | 91 | 我本人总历时一个多月(相对来说算很快了),所以如果你要面腾讯，千万不要裸辞，不对，面什么都不要裸辞，这年头不好混，怂一点。 92 | 93 | 3. 整体面试流程是怎样的 94 | 95 | 内推->一面->二面->三面->四面->HR面->口头offer->正式offer->背调->入职 96 | 97 | 每个阶段耗时一到两周的时间 98 | 99 | 4. 微信工作地点 100 | 101 | 目前微信总部在广州，大部分的组都在广州，其中微信支付在深圳。 102 | 103 | 5. 微信考算法多吗 104 | 105 | 多，基本上就是算法+项目 106 | -------------------------------------------------------------------------------- /markdown/interview/腾讯要求.md: -------------------------------------------------------------------------------- 1 | # 腾讯面试 2 | 3 | 本人在腾讯微信事业部，有想来腾讯的欢迎砸简历给我，我可以帮忙内推哦。在有空的时候，会在技术交流群中答疑哈～ 4 | 5 | PS：BATTMD 等大厂均可帮忙内推及答疑，如有需求可以联系我～ 6 | 7 | ### 直播数据 8 | 9 | ### 梳理知识体系工具 10 | 11 | - Xmind 12 | - Lighten 13 | - Gitbook 14 | - markdown 15 | 16 | ### 梳理方法 17 | 18 | - 由大到小， 列出自己认为前端包含的大方向的内容 19 | - 凭空想象，在自己的认知范围下拓展知识点 20 | - 参考他人，搜别人的总结 21 | - 书籍/课程，留意书籍/课程大纲 22 | -------------------------------------------------------------------------------- /markdown/interview/阿里-业务平台事业部-面经.md: -------------------------------------------------------------------------------- 1 | ### 背景 2 | 最近面试了阿里，已拿offer，来分享一下面经。 3 | 4 | 问题比较多，而且很多面试题都是跟个人项目相关的，项目相关的问题借鉴意义不大，所以这里总结一些与项目无绝对关系的问题，欢迎围观～ 5 | 6 | PS:这次跳槽的复习路线/方法等，后面会整理出来，欢迎持续关注哦～ 7 | 8 | ### 笔试 9 | 1. n阶楼梯问题(尾递归的优化[函数最后调用自身可以减少中间变量|化递归为循环去优化]/备忘录优化) 10 | 2. 节流防抖的实现(分析笔试答案时问到，总结差别，说出应用场景) 11 | 3. 深拷贝(类型考虑/Symbol/Date等的构造/循环优化/共用引用优化等),这里贴2篇文章给大家参考,https://juejin.im/post/5d6aa4f96fb9a06b112ad5b1,https://mp.weixin.qq.com/s/M7KBX3w2KqlWhZFHJSYP6Q) 12 | 4. 封装一个只能输入数字的React组件 13 | 14 | ### 问答题 15 | 1. 输入URL后发生了什么 16 | 2. 事件循环说一下 17 | 3. JS有几种基本类型，分别是什么，与对象的区别 18 | 4. JS 执行过程中是如何保存上下文的 19 | 5. 你认为什么是前端 20 | 6. 为什么想来阿里 21 | 7. 最近在看什么书 22 | 8. 微前端了解吗 23 | 9. 你想成为什么样的人(个人成长规划) 24 | 10. 项目中遇到的最大挑战是什么，如何解决的 25 | 11. node 大量日志怎么处理的 26 | 12. http2 的特点 27 | 13. node 与其他语言有什么区别，其优劣势是什么 28 | 14. csrf 的核心原理(https://juejin.im/post/5bc009996fb9a05d0a055192) 29 | 15. node 事件循环 30 | 16. FCP/FMP/FP 分别是怎样定义，如何统计 31 | 17. MySQL 题目，id 唯一，name 可以重复，求 name 有重复的所有数据 32 | 18. 有没有推动过什么东西 33 | 19. 未来的一个发展是否是全栈，如何规划 34 | 20. 链路录屏的原理 35 | 21. 链路录屏法务问题如何解决 36 | 22. FMP 定义及统计，w3c的草案你知道吗 37 | 23. react 项目的可持续维护性如何体现 38 | 24. react hooks用过吗，为什么要用 39 | 25. h5 和小程序有什么区别 40 | 26. https加密原理，中间人攻击知道吗 41 | 27. ng 负载均衡的方式有哪些 42 | 28. CDN 有什么作用 43 | 29. 不可变数据里面，immutable，删除数组里面的列表(https://juejin.im/post/5b9b30a35188255c6418e67c, 44 | https://juejin.im/post/5e6a14b1f265da572978a1d3) 45 | 30. 垃圾回收中，内部函数返给上层的对象是如何管理的 46 | 31. es 静态分析原理(https://zhuanlan.zhihu.com/p/33843378) 47 | 32. 有一个很大很大的文件，如何统计文件里面重复最多的行是哪行(参考git的记录存储) 48 | 49 | ### 更多 50 | 其实单看问题，参考性还是比较小的，毕竟面试官主要会根据简历去发问。这里的一个感受就是，项目中遇到的最大挑战，这个问题真不好答，我当时答得也不够好，后面又回去总结了一波项目，建议大家都好好总结一下自己平时遇到的问题，寻根究底。 51 | 52 | 这部分的题目，我会同步到我的每周N题上，欢迎大家来交流答案啊。想刷题的也可以来，地址如下： 53 | https://github.com/LuckyWinty/fe-weekly-questions/issues 54 | 55 | PS：点击阅读原文可以直达刷题地址哦～ -------------------------------------------------------------------------------- /markdown/microApp/serviceMesh.md: -------------------------------------------------------------------------------- 1 | ### 概述 2 | Service Mesh 是微服务时代的 TCP/IP 协议。 -------------------------------------------------------------------------------- /markdown/microApp/从0手写SingleSpa方案.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/microApp/从0手写SingleSpa方案.md -------------------------------------------------------------------------------- /markdown/microApp/微前端基本原理.md: -------------------------------------------------------------------------------- 1 | # 微前端基本知识 2 | 3 | ### 记录目录 4 | + 微前端架构设计方案大PK 5 | + SystemJS模块化解决方案实践 6 | + 从0实现SystemJS模块加载原理及依赖分析 7 | + 从0手写Single-spa框架 8 | + 深入解读剖析Qiankun源码 9 | + webpack5 模块联播实现微前端 10 | + EMP 微前端实践 11 | ### 概念 12 | 微前端的概念是由ThoughtWorks在2016年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更简单。 13 | 14 | 它主要解决了两个问题： 15 | 16 | 1、随着项目迭代应用越来越庞大，历史包袱越来越重，既难以维护也很难升级使用一些新特性。 17 | 2、多人协作、跨团队或跨部门协作开发项目导致效率低下。 18 | 19 | ### 核心价值 20 | + 技术栈无关 21 | 主框架不限制接入应用的技术栈，微应用具备完全自主权 22 | 23 | + 独立开发、独立部署 24 | 微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新 25 | 26 | + 增量升级 27 | 在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略 28 | 29 | + 独立运行时 30 | 每个微应用之间状态隔离，运行时状态不共享 31 | 32 | ### 基本原理 -------------------------------------------------------------------------------- /markdown/microApp/微前端架构设计方案大PK.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/microApp/微前端架构设计方案大PK.md -------------------------------------------------------------------------------- /markdown/midway/faas.md: -------------------------------------------------------------------------------- 1 | # 怎样才算是serverless 2 | 3 | ### serverless 的概念 4 | 我们先用一张图看一下各种概念： 5 | 6 | 如图，纵观云计算的发展史，从物理机到虚拟机，从 IaaS、PaaS 到 FaaS，从容器到 Serverless，都是一个去服务器的一个过程。有了 IaaS，我们不需要关注物理机；有了 PaaS，我们不需要关注操作系统和运行环境；有了 Faas,我们连应用都不需要了，可以直接写一个函数就部署上线。总的来说 Serverless 技术的出现，能够让我们不再关心传统的运维工作，让我们更专注于业务的实现，把时间精力花在更有意义的事情上，让我们以更快的速度、更低的成本完成应用的开发迭代，进而创造出更大的价值。 7 | 8 | 因此，Serverless，就是一种让开发者专注业务开发而不用关心服务部署运维等服务器端操作的架构思想，进而提高业务的迭代效率，使用的云服务等资源能做到按需使用，按量付费，从而节省服务器资源成本。 9 | + `广义上来讲`， Serverless 是一种架构思想，即软件构建和运行时不需要关心服务器。 10 | 11 | 例如下面的都不需要关心： 12 | 1. 备份容灾： 要实现服务器、数据库的备份容灾机制，使一台服务器出故障不影响整个系统。 13 | 2. 弹性伸缩： 系统能根据业务流量大 小等指标，响应式地调整服务规模，实现自动弹性伸缩。 14 | 3. 日志监控： 需要记录详细的日志，方便排查问题和观察系统运行情况，并且实现实时的系统监控和业务监控。 15 | 16 | + `狭义上来讲`， Serverless 是 FaaS(函数即服务) 和 BaaS(后端即服务) 的组合，是当前主流的技术实现。 17 | 18 | #### Faas 19 | Function as a Server, 函数即服务。FaaS 提供了运行函数代码的运行环境，并且具有自动弹性伸缩。基于 FaaS，我们应用的组成就不再是集众多功能于一身的集合体，而是一个个独立的函数。每个函数实现各自的业务逻辑，由这些函数组成复杂的应用。 20 | 21 | #### Baas 22 | BaaS 是将后端能力封装成了服务，并以接口的形式提供服务。比如数据库、文件存储等。通过 BaaS 平台的接口，我们运行在 FaaS 中的函数就能调用各种后端服务，进而以更低开发成本实现复杂的业务逻辑。 23 | 24 | ### FaaS 函数运行原理 25 | Serverless 应用本质上是由一个个 FaaS 函数组成的，Serverless 应用的每一次运行，其实是单个或多个函数的运行，所以 Serverelss 的运行原理，本质上就是函数的运行原理。 26 | 27 | 平常开发时，我们写一个函数，要运行起来。至少需要几个条件： 28 | 1. 函数被触发 29 | 2. 有函数的运行环境(浏览器打开的控制台、跑起来的应用、node环境等) 30 | 3. 函数依赖和函数要打包在一起 31 | 32 | 例如，一个node服务中的 controller 函数，其被执行的过程可能是，node服务及其依赖被构建好部署上线->外部流量经nginx层做转发->api请求到达服务器入口->经router后指向到对应的controller函数并返回对应的内容。 33 | 34 | 在 Faas 中， 35 | 在 Faas 中，就是 serverless 平台，根据我们的函数定义，构造我们需要的硬件环境、容器和函数运行环境，然后加载我们上传的业务代码，然后暴露对应的函数触发方式。常见的触发方式有：HTTP 触发器、API 网关触发器、定时触发器、消息触发器等。 36 | 37 | 举个例子，比如有以下代码,从 onlineLog 中查询一分钟内的调用次数，然后存入数据库： 38 | ```js 39 | const now = Date.now(); 40 | // 取前一分钟的整点时间作为开始时间，例如 2021-10-15 16:00:00 41 | const startTime = getStartTime(now); 42 | // 取当前分钟的整点时间作为开始时间，例如 2021-10-15 16:01:00 43 | const endTime = getEndTime(now); 44 | // 查询服务 45 | const onlineLog = new OnlineLog(); 46 | // 数据库实例 47 | const db = new DB(); 48 | 49 | async function getPV() { 50 | return await onlineLog.queryPv(startTime,endTime); 51 | } 52 | // 将 PV 信息存入数据库 53 | async function saveToDB() { 54 | const pv = await getPV(); 55 | const sql = 'INSERT INTO user( pv) values(?, ?)'; 56 | await db.query(sql, [pv]); 57 | } 58 | 59 | // 入口函数 60 | exports.handler = (event, callback) => { 61 | saveToDB() 62 | .then((data) => callback(data)) 63 | .catch(callback(error)); 64 | } 65 | ``` 66 | 这个代码上传到serverless平台后，经用户触发，会经历以下流程： 67 | 68 | + 下载代码： FaaS 平台本身不会存储代码，而是将代码放在对象存储中，需要执行函数的时候，再从对象存储中将函数代码下载下来并解压，因此 FaaS 平台一般都会对代码包的大小进行限制，通常代码包不能超过 50MB。 69 | + 启动容器： 代码下载完成后，FaaS 会根据函数的配置，启动对应容器，FaaS 使用容器进行资源隔离。 70 | + 初始化运行环境： 分析代码依赖、执行用户初始化逻辑、初始化入口函数之外的代码等。 71 | + 运行代码： 调用入口函数执行代码。 72 | 73 | 当函数第一次执行时，会经过完整的四个步骤，前三个过程统称为`冷启动`，最后一步称为`热启动`。 74 | 75 | 76 | ### 参考资料 77 | + https://tw93.github.io/2020-03-30/serverless-two.html 78 | + https://www.codenong.com/cs111039530/ 79 | + https://www.infoq.cn/article/kki1vyk62uoclw23ikyk 80 | + https://jinyunlong.cc/books/how-to-play-serverless-framework.html -------------------------------------------------------------------------------- /markdown/midway/loc.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/midway/loc.md -------------------------------------------------------------------------------- /markdown/midway/疑问整理.md: -------------------------------------------------------------------------------- 1 | + 依赖注入如何实现 2 | + https://www.midwayjs.org/doc/guide/middleware 3 | 由于 Web 中间件在生命周期的特殊性，会在应用请求前就被加载（绑定）到路由上，所以无法和请求关联。中间件类的作用域 固定为单例（Singleton）。 4 | 由于 中间件实例为单例，所以中间件中注入的实例和请求不绑定，无法获取到 ctx，无法使用 @Inject() 注入请求作用域的实例，只能获取 Singleton 的实例。 -------------------------------------------------------------------------------- /markdown/miniprogram/基本原理.md: -------------------------------------------------------------------------------- 1 | # 基本原理 2 | 3 | ### 小程序设计原理 4 | -------------------------------------------------------------------------------- /markdown/network/http2&http3总结.md: -------------------------------------------------------------------------------- 1 | ### HTTP2的主要特性 2 | 1. H2是一个二进制协议,H1是超文本协议.传输的内容都不是一样的。 3 | 2. H2遵循多路复用即,代替同一host下的内容,只建立一次连接. H1不是。 4 | 3. H2可以使用HPACK进行头部的压缩,H1则不论什么请求都会发送。 5 | 4. H2允许服务器,预先将网页所需要的资源PUSH到浏览器的内存当中。 6 | 7 | ### HTTP2的多路复用 8 | 在HTTP1.1的协议中，我们传输的request和response都是基本于文本的，这样就会引发一个问题：所有的数据必须按顺序传输，比如需要传输：hello world，只能从h到d一个一个的传输，不能并行传输，因为接收端并不知道这些字符的顺序，所以并行传输在HTTP1.1是不能实现的。 9 | 10 | HTTP/2引入二进制数据帧和流的概念，其中帧对数据进行顺序标识，这样浏览器收到数据之后，就可以按照序列对数据进行合并，而不会出现合并后数据错乱的情况。同样是因为有了序列，服务器就可以并行的传输数据，这就是流所做的事情。 11 | 12 | HTTP/2对同一域名下所有请求都是基于流，也就是说同一域名不管访问多少文件，也只建立一路连接。 13 | 14 | ### HTTP2的新特性 15 | 16 | #### 新的二进制格式 17 | 18 | （Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。 19 | 20 | #### 多路复用 （MultiPlexing） 21 | 22 | 即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。 23 | 24 | #### header压缩 25 | 26 | HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。 27 | 28 | #### 服务端推送 （server push） 29 | 30 | 同SPDY一样，HTTP2.0也具有server push功能。目前，有大多数网站已经启用HTTP2.0，例如 YouTuBe，淘宝网等网站，可以利用chrome控制台可以查看是否启用H2 31 | 32 | ### SPDY 33 | 34 | 35 | 2012年google如一声惊雷提出了SPDY的方案，大家才开始从正面看待和解决老版本HTTP协议本身的问题，SPDY可以说是综合了HTTPS和HTTP两者优点于一体的传输协议，主要解决： 36 | 37 | 1. 降低延迟 38 | 39 | 针对HTTP高延迟的问题，SPDY优雅的采取了多路复用（multiplexing）。多路复用通过多个请求stream共享一个tcp连接的方式，解决了HOL blocking的问题，降低了延迟同时提高了带宽的利用率。 40 | 41 | 2. 请求优先级（request prioritization） 42 | 43 | 多路复用带来一个新的问题是，在连接共享的基础之上有可能会导致关键请求被阻塞。SPDY允许给每个request设置优先级，这样重要的请求就会优先得到响应。比如浏览器加载首页，首页的html内容应该优先展示，之后才是各种静态资源文件，脚本文件等加载，这样可以保证用户能第一时间看到网页内容。 44 | 45 | 3. header压缩 46 | 47 | 前面提到HTTP1.x的header很多时候都是重复多余的。选择合适的压缩算法可以减小包的大小和数量。 48 | 49 | 4. 基于HTTPS的加密协议传输 50 | 51 | 这大大提高了传输数据的可靠性。 52 | 53 | 5. 服务端推送（server push） 54 | 55 | 采用了SPDY的网页，例如我的网页有一个sytle.css的请求，在客户端收到sytle.css数据的同时，服务端会将sytle.js的文件推送给客户端，当客户端再次尝试获取sytle.js时就可以直接从缓存中获取到，不用再发请求了。 56 | 57 | SPDY位于HTTP之下，TCP和SSL之上，这样可以轻松兼容老版本的HTTP协议(将HTTP1.x的内容封装成一种新的frame格式)，同时可以使用已有的SSL功能。 58 | 59 | ### SPDY与HTTP2的区别 60 | 61 | 1. 头部压缩算法，SPDY，通用的deflate算法[注1]；HTTP2，专门为压缩头部设计的HPACK算法 62 | 2. SPDY必须在TLS上运行，HTTP2可在TCP上直接使用，因为增加了HTTP1.1的Upgrade机制 63 | 更加完善的协议商讨和确认流程 64 | 3. 更加完善的Server Push流程 65 | 4. 增加控制帧的种类，并对帧的格式考虑的更细致 66 | 67 | ### HTTP2的缺点 68 | 69 | 1. TCP 以及 TCP+TLS建立连接的延时,HTTP/2使用TCP协议来传输的，而如果使用HTTPS的话，还需要使用TLS协议进行安全传输，而使用TLS也需要一个握手过程,在传输数据之前，导致我们需要花掉 3～4 个 RTT。 70 | 71 | 2. TCP的队头阻塞并没有彻底解决。在HTTP/2中，多个请求是跑在一个TCP管道中的。但当HTTP/2出现丢包时，整个 TCP 都要开始等待重传，那么就会阻塞该TCP连接中的所有请求。 72 | 73 | ### HTTP3 74 | Google 在推SPDY的时候就已经意识到了这些问题，于是就另起炉灶搞了一个基于 UDP 协议的“QUIC”协议，让HTTP跑在QUIC上而不是TCP上。主要特性如下： 75 | 76 | + 实现了类似TCP的流量控制、传输可靠性的功能。虽然UDP不提供可靠性的传输，但QUIC在UDP的基础之上增加了一层来保证数据可靠性传输。它提供了数据包重传、拥塞控制以及其他一些TCP中存在的特性 77 | 78 | + 实现了快速握手功能。由于QUIC是基于UDP的，所以QUIC可以实现使用0-RTT或者1-RTT来建立连接，这意味着QUIC可以用最快的速度来发送和接收数据。 79 | 80 | + 集成了TLS加密功能。目前QUIC使用的是TLS1.3，相较于早期版本TLS1.3有更多的优点，其中最重要的一点是减少了握手所花费的RTT个数。 81 | 82 | + 多路复用，彻底解决TCP中队头阻塞的问题 83 | 84 | ### 最后 85 | + 欢迎加我微信(winty230)，拉你进技术群，长期交流学习... 86 | + 欢迎关注「前端Q」,认真学前端，做个有专业的技术人... 87 | 88 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/gzh/1571395642.png) -------------------------------------------------------------------------------- /markdown/network/你应该知道的https知识.md: -------------------------------------------------------------------------------- 1 | ### 基本概念 2 | 3 | HTTP:超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。 4 | 5 | 6 | HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL(SSL记录协议[SSL Record Protocol])，因此加密的详细内容就需要SSL。 7 | 8 | HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。 9 | 10 | ### HTTPS和HTTP的区别： 11 | 12 | 1. https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。 13 | 2. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。 14 | 3. http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。 15 | 4. http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。 16 | 17 | ### HTTPS最大的特点 18 | HTTPS最大的特点是安全， 在保护用户隐私，防止流量劫持方面发挥着非常关键的作用。主要有以下3点： 19 | 20 | 1. 内容加密。浏览器到百度服务器的内容都是以加密形式传输，中间者无法直接查看原始内容。 21 | 2. 身份认证。保证用户访问的是百度服务，即使被 DNS 劫持到了第三方站点，也会提醒用户没有访问百度服务，有可能被劫持 22 | 3. 数据完整性。防止内容被第三方冒充或者篡改。 23 | 24 | ### HTTPS的缺点 25 | 26 | 1、证书费用以及更新维护。 27 | 2、HTTPS 降低一定用户访问速度（实际上优化好就不是缺点了）。 28 | 3、HTTPS 消耗 CPU 资源，需要增加大量机器。 29 | 30 | ### HTTPS 网络访问过程 31 | 32 | http协议下，用户只需要完成 TCP 三次握手建立 TCP 连接就能够直接发送 HTTP 请求获取应用层数据，此外在整个访问过程中也没有需要消耗计算资源的地方。 33 | 34 | HTTPS 的访问过程，相比 HTTP 要复杂很多，在部分场景下，使用 HTTPS 访问有可能增加 7 个 RTT。 35 | 36 | 1. 三次握手建立 TCP 连接。耗时一个 RTT。 37 | 2. 使用 HTTP 发起 GET 请求，服务端返回 302 跳转到 https://www.baidu.com 。需要一个 RTT 以及 302 跳转延时。 38 | 3. 三次握手重新建立 TCP 连接。耗时一个 RTT。 39 | 4. TLS 完全握手阶段一。耗时至少一个 RTT。 40 | 5. 解析 CA 站点的 DNS。耗时一个 RTT。 41 | 6. 三次握手建立 CA 站点的 TCP 连接。耗时一个 RTT。 42 | 7. 发起 OCSP 请求，获取响应。耗时一个 RTT。 43 | 8. 完全握手阶段二，耗时一个 RTT 及计算时间。 44 | 9. 完全握手结束后，浏览器和服务器之间进行应用层（也就是 HTTP）数据传输。 45 | 当然不是每个请求都需要增加 7 个 RTT 才能完成 HTTPS 首次请求交互。大概只有不到 0.01% 的请求才有可能需要经历上述步骤。 46 | 47 | ### HTTPS的性能优化 48 | 主要优化两方面，访问速度和计算性能 49 | 50 | #### 一、HTTPS 访问速度优化 51 | 52 | 1. 设置HSTS，服务端返回一个 HSTS 的 http header，浏览器获取到 HSTS 头部之后，在一段时间内，不管用户输入www.baidu.com还是http://www.baidu.com，都会默认将请求内部跳转成https://www.baidu.com。Chrome, firefox, ie 都支持了 HSTS。 53 | 54 | 2. Session resume，复用session可以减少 CPU 消耗，因为不需要进行非对称密钥交换的计算。可以提升访问速度，不需要进行完全握手阶段二，节省了一个 RTT 和计算耗时。复用有2种方式，Session cache和Session ticket。 55 | 56 | 3. Nginx设置Ocsp stapling。Ocsp 全称在线证书状态检查协议 (rfc6960)，用来向 CA 站点查询证书状态，比如是否撤销。通常情况下，浏览器使用 OCSP 协议发起查询请求，CA 返回证书状态内容，然后浏览器接受证书是否可信的状态。这个过程非常消耗时间，因为 CA 站点有可能在国外，网络不稳定，RTT 也比较大。如果不需要查询则可节约时间。 57 | 58 | 4. 使用 SPDY 或者 HTTP2。SPDY 最大的特性就是多路复用，能将多个 HTTP 请求在同一个连接上一起发出去，不像目前的 HTTP 协议一样，只能串行地逐个发送请求。Pipeline 虽然支持多个请求一起发送，但是接收时依然得按照顺序接收，本质上无法解决并发的问题。HTTP2支持多路复用，有同样的效果。 59 | 60 | 5. False start。简单概括 False start 的原理就是在 client_key_exchange 发出时将应用层数据一起发出来，能够节省一个 RTT。 61 | 62 | #### HTTPS 计算性能优化 63 | 64 | 1. 优先使用 ECC椭圆加密算术。 65 | 2. 使用最新版的 openssl。 66 | 3. 硬件加速方案。 67 | 4. TLS 远程代理计算 68 | 69 | ### 参考资料 70 | + http://blog.itpub.net/31557835/viewspace-2219412/ 71 | 72 | ### 最后 73 | + 欢迎加我微信(winty230)，拉你进技术群，长期交流学习... 74 | + 欢迎关注「前端Q」,认真学前端，做个有专业的技术人... 75 | 76 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/gzh/1571395642.png) -------------------------------------------------------------------------------- /markdown/network/你应该知道的options请求.md: -------------------------------------------------------------------------------- 1 | # 你应该知道的 options 请求 2 | 3 | ### 什么是 options 请求 4 | 5 | 我们可以看下 MDN 中的一段描述： 6 | 7 | > HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法，也可以对整站（通过将 URL 设置为"\*"）使用该方法。 8 | 9 | 简单来说，就是可以用 options 请求去嗅探某个请求在对应的服务器中都支持哪种请求方法。 10 | 11 | 在前端中我们一般不会主动发起这个请求，但是往往你可以看到浏览器中相同的请求发起了 2 次，如图： 12 | 13 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/network/1591547440557.jpg) 14 | 15 | 其实，这是因为在跨域的情况下，在浏览器发起"复杂请求"时主动发起的。跨域共享标准规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。 16 | 17 | ### 简单请求与复杂请求 18 | 19 | 某些请求不会触发 CORS 预检请求，这样的请求一般称为"简单请求",而会触发预检的请求则成为"复杂请求"。 20 | 21 | #### 简单请求 22 | 23 | - 请求方法为`GET、HEAD、POST`时发的请求 24 | - 人为设置了规范集合之内的首部字段，如`Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width` 25 | - `Content-Type` 的值仅限于下列三者之一,即`application/x-www-form-urlencoded、multipart/form-data、text/plain` 26 | - 请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器； 27 | - 请求中没有使用 ReadableStream 对象。 28 | 29 | #### 复杂请求 30 | 31 | - 使用了下面任一 HTTP 方法，PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH 32 | - 人为设置了以下集合之外首部字段，即简单请求外的字段 33 | - Content-Type 的值不属于下列之一，即`application/x-www-form-urlencoded、multipart/form-data、text/plain` 34 | 35 | ### options 关键的请求头字段 36 | 37 | #### request header 的关键字段 38 | 39 | | 关键字段 | 作用 | 40 | | ------------------------------ | ---------------------------------------------- | 41 | | Access-Control-Request-Method | 告知服务器，实际请求将使用 POST 方法 | 42 | | Access-Control-Request-Headers | 告知服务器，实际请求将携带的自定义请求首部字段 | 43 | 44 | 如： 45 | 46 | ```js 47 | Access-Control-Request-Method: POST 48 | Access-Control-Request-Headers: X-PINGOTHER, Content-Type 49 | ``` 50 | 51 | #### response header 的关键字段 52 | 53 | | 关键字段 | 作用 | 54 | | ------------------------------ | ------------------------------------------------- | 55 | | Access-Control-Allow-Methods | 表明服务器允许客户端使用什么方法发起请求 | 56 | | Access-Control-Allow-Origin | 允许跨域请求的域名，如果要允许所有域名则设置为 \* | 57 | | Access-Control-Request-Headers | 将实际请求所携带的首部字段告诉服务器 | 58 | | Access-Control-Max-Age | 指定了预检请求的结果能够被缓存多久 | 59 | 60 | ### Options 请求优化 61 | 62 | 当我们发起跨域请求时，如果是简单请求，那么我们只会发出一次请求，但是如果是复杂请求则先发出 options 请求，用于确认目标资源是否支持跨域，然后浏览器会根据服务端响应的 header 自动处理剩余的请求，如果响应支持跨域，则继续发出正常请求，如果不支持，则在控制台显示错误。 63 | 64 | 由此可见，当触发预检时，跨域请求便会发送 2 次请求，既增加了请求数，也延迟了请求真正发起的时间，严重影响性能。 65 | 66 | 所以，我们可以优化 Options 请求，主要有 2 种方法。 67 | 68 | 1. 转为简单请求，如用 JSONP 做跨域请求 69 | 2. 对 options 请求进行缓存，服务器端设置 `Access-Control-Max-Age` 字段，那么当第一次请求该 URL 时会发出 OPTIONS 请求，浏览器会根据返回的 Access-Control-Max-Age 字段缓存该请求的 OPTIONS 预检请求的响应结果（具体缓存时间还取决于浏览器的支持的默认最大值，取两者最小值，一般为 10 分钟）。在缓存有效期内，该资源的请求（URL 和 header 字段都相同的情况下）不会再触发预检。（chrome 打开控制台可以看到，当服务器响应 Access-Control-Max-Age 时只有第一次请求会有预检，后面不会了。注意要开启缓存，去掉 disable cache 勾选。） 70 | 71 | ### 总结 72 | 73 | options 请求就是预检请求，可用于检测服务器允许的 http 方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求，即 CORS 预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。 74 | 75 | ### 参考资料 76 | 77 | - https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests 78 | 79 | * https://zhuanlan.zhihu.com/p/70032617 80 | 81 | ### 最后 82 | 83 | - 欢迎加我微信(winty230)，拉你进技术群，长期交流学习... 84 | - 欢迎关注「前端 Q」,认真学前端，做个有专业的技术人... 85 | 86 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/qrcode/%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%BE%8E%E5%8C%96%202.png) 87 | -------------------------------------------------------------------------------- /markdown/network/网络协议.md: -------------------------------------------------------------------------------- 1 | ### 网络协议 2 | GitHub 3 | 4 | #### 一些概念 5 | + 只要是在网络上跑的包，都是完整的。可以有下层没上层，绝对不可能有上层没下层。 6 | + 对 TCP 协议来说，三次握手也好，重试也好，只要想发出去包，就要有 IP 层和 MAC 层，不然是发不出去的。 7 | + 查看 IP 地址,在 Windows 上是 ipconfig，在 Linux 上是ifconfig。 8 | + IP 地址是一个网卡在网络世界的通讯地址，相当于我们现实世界的门牌号。 9 | 10 | 11 | ##### 协议 -------------------------------------------------------------------------------- /markdown/node/node.js模块机制.md: -------------------------------------------------------------------------------- 1 | 如果你对 JS 模块化相关的知识不够熟悉，请你先看了这篇《js 模块化总结》，再来看这篇文章。 2 | 3 | ### CommonJS 4 | 5 | CommonJS 是一种模块化规范，使用 CommonJS 规范来作为 Node.js 的模块导出、引入机制，相当于把每个 JavaScript 文件或者模块当作一个不会污染全局的闭包。 -------------------------------------------------------------------------------- /markdown/node/nodejs新版本13.2.0正式支持ES modules特性.md: -------------------------------------------------------------------------------- 1 | 在本月 21 日，即2019.11.21，Node.js 发布了 13.2.0 版本，更新了一些特性。其中最令人兴奋的莫过于正式取消了 `--experimental-modules` 启动参数。这说明Node.js 正式支持 ES modules。我们一起来看看。 2 | 3 | ### Stability Index说明 4 | Stability Index，即 Api 的稳定指数说明。它包括3个值： 5 | 1. Stability: 0 ,不推荐使用。表示该Api官方不推荐使用，该功能可能会发出警告。不能保证向后兼容。 6 | 2. Stability: 1，实验性的。表示该Api已经支持使用性使用。但是在将来的任何发行版中都可能发生非向后兼容的更改或删除。不建议在生产环境中使用该功能。 7 | + Stability: 2，稳定版。表示已经试验完成，基本不会再发生改动，可以再生产环境中使用。 8 | 9 | ### Unflag --experimental-modules 10 | 在 13.2.0的版本中，node 默认情况下会启用对ECMAScript模块的实验支持，也就是不需要启动参数了。那么nodejs是如何区分 esm 和 commonjs 的呢？这里翻译一下官方文档。 11 | 12 | Node.js会将把以下内容视为ES模块： 13 | + 文件后缀为`.mjs` 14 | + 当文件后缀为`.js`，或者无文件后缀时，看其package.json文件，`package.json 中 type 字段值为 "module"` 15 | + 启动参数添加 —-input-type=module 16 | + 使用传递字符参数给`--eval`，如`$ node --eval 'import("http");` 17 | 18 | 其他情况下，都会被识别为 commonjs。现在node已经支持esm和commonjs了，我们在使用的时候，最好还是指定一下模块。 19 | 20 | ### 举个例子🌰 21 | ```js 22 | import './legacy-file.cjs'; 23 | // Loaded as CommonJS since .cjs is always loaded as CommonJS. 24 | 25 | import 'commonjs-package/src/index.mjs'; 26 | // Loaded as ES module since .mjs is always loaded as ES module. 27 | ``` 28 | 这种情况，根据文件后缀按不同模块处理。 29 | ```js 30 | // package.json 31 | { 32 | "type": "module" 33 | } 34 | ``` 35 | 当前目录下，或者上级目录中的`package.json`含有`"type": "module"`时，该模块会被当作ES Module。 36 | ```js 37 | // my-app.js, in an ES module package scope because there is a package.json 38 | // file in the same folder with "type": "module". 39 | 40 | import './startup/init.js'; 41 | // Loaded as ES module since ./startup contains no package.json file, 42 | // and therefore inherits the ES module package scope from one level up. 43 | 44 | import 'commonjs-package'; 45 | // Loaded as CommonJS since ./node_modules/commonjs-package/package.json 46 | // lacks a "type" field or contains "type": "commonjs". 47 | 48 | import './node_modules/commonjs-package/index.js'; 49 | // Loaded as CommonJS since ./node_modules/commonjs-package/package.json 50 | // lacks a "type" field or contains "type": "commonjs". 51 | ``` 52 | 如上图注释所示，如果当前文件目录不包含`package.json`，则会看其父级目录的`package.json`文件，然后判断type类型。 53 | ```js 54 | node --input-type=module --eval "import { sep } from 'path'; console.log(sep);" 55 | echo "import { sep } from 'path'; console.log(sep);" | node --input-type=module 56 | ``` 57 | 这里就是使用传递字符参数给`--eval`，添加 `--input-type`启动参数的情况。 58 | 59 | ### 快速体验 60 | 61 | 目前13.2.0版本的官方文档对ES Module的标记是 `Stability: 1 `，你已经可以安装新版本来试验啦。相信在社区的共同努力下，很快就会进入 `Stability: 2` 正式稳定版了。 62 | 63 | 本地开发的时候，经常需要快速更新或切换不同的node版本。可以使用 nvm、n 等方案，还有一个跨平台的本地管理方案就是 nvs。都可以选择使用，这里我举的例子，就是使用 nvs： 64 | ```js 65 | $ nvs add node/13.2.0 66 | $ nvs use 13.2.0 67 | $ node -v 68 | 13.2.0 69 | ``` 70 | 赶紧尝试一下吧～ 71 | 72 | ### 最后 73 | + 欢迎加我微信(winty230)，拉你进技术群，长期交流学习... 74 | + 欢迎关注「前端Q」,认真学前端，做个有专业的技术人... 75 | 76 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/qrcode/%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%BE%8E%E5%8C%96%202.png) -------------------------------------------------------------------------------- /markdown/node/node命令行参数.md: -------------------------------------------------------------------------------- 1 | ## node命令行参数说明 2 | 3 | ### node 命令中 & 和 && 的区别 4 | 使用`&&`时，将运行第一个命令，如果没有错误，则将运行第二个命令。这就像一个逻辑与，即命令会被串行执行。 5 | 使用`&`时，将并行执行 `&` 前后的命令。 6 | 例如有如下3个文件： 7 | ```js 8 | // demo1.js 9 | console.log('start demo1'); 10 | 11 | setTimeout(() => { 12 | console.log('end demo1'); 13 | }, 5000); 14 | ``` 15 | ```js 16 | // demo2.js 17 | console.log('start demo2'); 18 | 19 | setTimeout(() => { 20 | console.log('end demo2'); 21 | }, 2000); 22 | ``` 23 | ```js 24 | // demo3.js 25 | console.log('start demo3'); 26 | 27 | setTimeout(() => { 28 | console.log('end demo3'); 29 | }, 1000); 30 | ``` 31 | 脚本命令为： 32 | ```js 33 | { 34 | "name": "test", 35 | "version": "1.0.0", 36 | "main": "demo.js", 37 | "scripts": { 38 | "test":"node demo1.js & node demo2.js && node demo3.js" 39 | } 40 | } 41 | ``` 42 | 输出顺序为： 43 | ```js 44 | start demo1 45 | start demo2 46 | end demo2 47 | start demo3 48 | end demo3 49 | end demo1 50 | ``` 51 | 运行示意图： 52 | // TODO 53 | ### node 命令中 -- 和-- --区别 54 | 55 | + 参数(options/argv) 56 | 一般是--如 npm install egg --save 57 | + 一些使用频率较高的会提供缩写（alias），那就是一个 `-` 58 | 如 npm install egg -S ，等价于上面那句。 59 | + 还有一种情况是两个 `--`，代表后面的参数不解析。 60 | 譬如 npm scripts 如果设置了 "start": "egg-scripts start" 61 | 那当你执行 npm start -s -- --workers=1 时第一个 -s 是 npm 本身的参数，代表静默，后面的 workers 参数不解析，直接传递进去，相当于执行 egg-scripts start --workers=1 -------------------------------------------------------------------------------- /markdown/node/可观测和可控制.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LuckyWinty/blog/7069cc5b863d42d73f75f155bf40db5544e88aeb/markdown/node/可观测和可控制.md -------------------------------------------------------------------------------- /markdown/node/问题记录.md: -------------------------------------------------------------------------------- 1 | #### process.cwd()与__dirname区别 2 | + process.cwd()方法返回 Node.js 进程当前工作的目录,与执行命令的当前目录相关 3 | + __dirname,Node全局变量，标识被执行的js文件的目录 -------------------------------------------------------------------------------- /markdown/other/你不知道的works.md: -------------------------------------------------------------------------------- 1 | # 你不知道的works 2 | 3 | 众所周知，js 是单线程的。 -------------------------------------------------------------------------------- /markdown/other/前端Q的小小小里程碑.md: -------------------------------------------------------------------------------- 1 | 很多关注我的人都不太了解前端Q这个名字的由来，这篇文章就来讲讲前端Q的前世今生，顺便送大大福利(文末有惊喜)，哈哈～～ 2 | 3 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/gzh/count.png) 4 | 5 | **`恭喜！前端Q总用户数突破千啦~~`** 6 | 7 | ### 前端Q前世 8 | 9 | 前端Q这个公众号，其实很早很早的时候就有了，只是以前不叫前端Q。前端Q的前身叫"前端生活"，诞生于2016年03月09号，可以说前端Q已经三岁半了... 10 | 11 | 刚开始弄公众号的时候，是大三，就是发一些自己学习的总结。积累了一点粉丝，有多少人已经忘记了，大概200左右吧。后面在学校加了一个老师的工作室，其实就是打打杂，写一些前端的东西，渐渐开始忙起来了。更新的频率就变少了... 12 | 13 | 大四的时候，去了广州唯品会实习，那时候做的东西还是挺有意思的，用的是Angular，但是我更忙了，加上粉丝数少，每次发看的人都不多，不如发到博客园(我的第一个正式博客就是在博客园上面写，哈哈)比较多人看，就渐渐冷落了这个号。最后一篇发文是2016年7月24号... 14 | 15 | 再后来，这个号粉取关得差不多了，号也被腾讯回收了(捂脸)... 16 | 17 | ### 前端Q今生 18 | 19 | 20 | 2019年09月04日，我突然想起我申请过一个公众号，于是登陆了一下，去找回，但是原来的名字由于已经被回收，就必须新起一个名字了。然后我想啊想啊想啊想... 21 | 22 | 首先，我是做前端的，名字得带前端两个字，然后，我想做一个有趣的人，有个有趣的灵魂，再然后，我是广东人，广东人说一个东西很可爱或者很好玩的时候，会说"你好Q(cute)啊"，于是，我灵机一动，就叫前端Q吧，完美的名字～～ 23 | 24 | **`所以，前端Q的意思就是，一个有着有趣的灵魂的很Q的主营前端的前端号。`** 25 | 26 | 27 | 重新搞公众号，粉丝还剩67个，估计也是极度不活跃的粉，因为忘记关注过才没有取消的吧，哈哈。对我来说，就是一切从0开始。 28 | 29 | 写文章，发公众号，也发掘金。慢慢滴，有人说我写得不错，然后来关注我。看每日涨粉的那个数据，刚开始，是一天2个3个，到慢慢滴5个6个，虽然人不多，但是那种激动的心，难以描述。后来，别的号转了我的文章，然后开始一天30个40个到60个100个...每次有人转文章，都能增粉不少。 30 | 31 | 你们的关注就是对我的认可，我曾经激动得午睡睡不着，晚上失眠，纯粹就是好激动好激动，可能就是传说中的成就感吧，哈哈哈～ 32 | 33 | ### 前端Q未来 34 | 35 | 前端Q的未来，还真不好说。不过既然从头来过了，我绝对不会再丢下这个号。一定会全心全意做下去，写更多的文章。所以有认同这个号的，欢迎推荐给更多人，让更多人加进来，一起学习，一起成长～ 36 | 37 | 这个号的内容，不止是我写的东西，我认为好的内容，我会转载过来，认为有趣的东西，我也会发的，这里是前端，又不止于前端。 38 | 39 | 目前，前端Q是有收入的，平均下来，发文的时候大概一天0.5元，其实就是文章底部的那个广告位，因为我开通了流量主，有阅读量就有曝光量，有曝光量和点击量我就有收入，所以你要是觉得文章好，欢迎动手点点在看和点点下面的广告，哈哈～～ 40 | 41 | 42 | ### 最后 43 | + 欢迎加我微信(winty230)，拉你进技术群，长期交流学习... 44 | + 欢迎关注「前端Q」,认真学前端，做个有专业的技术人... 45 | 46 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/qrcode/%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%BE%8E%E5%8C%96%202.png) -------------------------------------------------------------------------------- /markdown/other/前端Q线下活动精彩回顾.md: -------------------------------------------------------------------------------- 1 | ### 背景 2 | 12月7日（周六），`前端Q&AIRIO前端技术沙龙`第一期在深圳南山的某个咖啡厅进行，活动主题主要为个人成长与nodejs学习。让我们一起回顾一下本次活动吧~ 3 | 4 | -------------------------------------------------------------------------------- /markdown/other/前端学习图谱与新奇趣玩(直播回顾).md: -------------------------------------------------------------------------------- 1 | 2 | `PS：关注前端Q公众号，回复 直播 ，可获得直播所有资料及录播视频～` 3 | 4 | ​### 学习 5 | 6 | #### 全局了解 7 | 8 | 开局一张图，了解一下前端体系都涉及哪些知识...当然，实际包含的知识更多，这图是一个参考方向～ 9 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/WechatIMG22281.jpeg) 10 | 11 | #### 新手路线建议 12 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/1.png) 13 | 14 | 1. HTML学习，w3school 15 | 2. CSS，CSS+DIV从入门到精通/CSS权威指南/精通 CSS 高级 web 标准解决方案，例子都跟着做一遍 16 | 3. 自我检验，微博首页/淘宝首页 17 | 4. 学习《JavaScript高级程序设计》(公众号回复 ebook 有资源) 18 | 5. 自我检验，刷 js 基础题目+造小轮子，如原生js实现图片轮播/原生Ajax插件等 19 | 6. ES6/7/8...，阮一峰ES6教程 20 | 7. 自我检验，https://www.runoob.com/wp-content/uploads/2018/12/es6-tutorial.jpg，看着这些知识点，来回顾自己都掌握了没有 21 | + 框架学习，React/Vue… 22 | + 了解简单的node，会使用命令 23 | + GIT 使用学习 24 | + 编辑器/浏览器的使用及调试技能 25 | + 工程化技能，Webpack/CI… 26 | + 代理工具，whistle… 27 | + 其他工具，文件上传(transmit软件)等… 28 | #### 进阶路线建议 29 | 提供一些参考知识点，可以自我对照 30 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/2.png) 31 | 32 | #### 我的现阶段的进阶规划 33 | 学习，不是罗列知识点，而是要学。你不需要把所有东西都列出来，你只需要想清楚自己现阶段的学习就好，慢慢学习，慢慢进步。这里放一个我现阶段的学习规划，大家可以参考一下，其中webpack/promise/浏览器/性能优化等很多点的学习我都完成啦～ 这些我都有输出的，有需要学习的可以翻看一下公众号的文章～ 34 | 35 | `公众号回复 文章 即可～` 36 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6%E9%87%91%E5%85%B8.png) 37 | 38 | 39 | #### 学习过程 40 | 41 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/3.png) 42 | 43 | ### 新奇趣玩 44 | 45 | 46 | #### 狼人杀 47 | 48 | 一局狼人杀游戏一般由十二名玩家组成，他们将分属于游戏中两个对立的阵营：狼人阵营和好人阵营。可以锻炼你的逻辑思维/推理能力/口才能力/演戏能力～ 49 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/4.png) 50 | 51 | #### 英语趣配音 52 | 为电影/电视剧等片段配音，它会美化一下你的声音，听起来很有感觉，既可以学习，又好玩～ 53 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/5.png) 54 | 55 | #### 跳舞毯 56 | 玩与锻炼身体于一身，一个毯子，全家可用。可以跳舞/游戏等～ 57 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/6.png) 58 | 59 | #### 剧本杀 60 | 角色扮演，实景推理，参考综艺节目《明星大侦探》，烧脑又有趣～ 61 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/7.png) 62 | 63 | #### 电玩城 64 | 方便，几乎每个商场都有电玩城，有很多很多可以玩的游戏设备。便宜，玩个投篮游戏才2个币，既玩乐，又锻炼身体～ 65 | 66 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/8.png) 67 | #### 蹦床 68 | 既玩乐，又锻炼身体～ 69 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/9.png) 70 | 71 | #### DIY 72 | 各式DIY都有，只要你想就可以玩～ 73 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/10.png) 74 | 75 | #### 动与静的玩 76 | 动有冲浪/潜水/滑板等，静可以钓虾，玩起来～ 77 | ![Github](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/fit/11.png) 78 | 79 | ### 最后 80 | + 欢迎加我微信(winty230)，拉你进技术群，长期交流学习... 81 | + 欢迎关注「前端Q」,认真学前端，做个有专业的技术人... 82 | 83 | ![GitHub](https://raw.githubusercontent.com/LuckyWinty/blog/master/images/qrcode/%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%BE%8E%E5%8C%96%202.png) -------------------------------------------------------------------------------- /markdown/other/博客推荐.md: -------------------------------------------------------------------------------- 1 | 博客园官方博客:https://www.cnblogs.com/cmt 2 | 美团：https://tech.meituan.com/ 3 | AlloyTeam：http://www.alloyteam.com/page/0/ 4 | IMWeb团队：https://imweb.io/topic/5d4a2ef48db073cf44ca8cb5 -------------------------------------------------------------------------------- /markdown/other/招聘.md: -------------------------------------------------------------------------------- 1 | ### 微信小程序电商前端开发工程师（广州） 2 | 3 | #### 工作职责: 4 | - 负责微信小程序电商（含小商店、交易组件、视频号电商等）的前端开发工作。 5 | - 负责优化业务体验，包括但不限于：业务流程、交互、性能、安全等。 6 | - 参与技术基础建设、持续优化工程效能，提升团队工作效率。 7 | 8 | #### 岗位要求: 9 | - 本科及以上学历，计算机相关专业，1-2年前端开发经验。 10 | - 计算机学科基础、前端知识扎实，熟悉ES6/HTML5/CSS3，拥有良好的编程习惯。 11 | - 至少熟练掌握一种主流JavaScript框架（Vue/React等）。 12 | - 有Node.js开发经验，用过至少一种主流Node.js框架（Express/Koa/Nestjs等）。 13 | - 有使用Webpack、Gulp、Vite等工具进行前端工程化经验。 14 | - 具备良好的沟通能力、团队协作精神，较强的学习能力和逻辑分析能力。 15 | 16 | #### 工作地点: 17 | 广州TIT创意园 18 | 19 | #### 工作职责: 20 | 21 | ### 腾讯广告前端开发工程师(深圳) 22 | 23 | #### 工作职责: 24 | * 负责腾讯广告效能研发中心相关低代码平台的开发与优化, 提供高效, 功能丰富的低代码平台系统 25 | * 维护 node 接入层, 为海量广告页面提供稳定的服务与极致的性能 26 | * 参与前端架构建设与持续集成工作流的优化 27 | * 负责内部相关运营工具的 Web 前端研发, 保证用户体验与可用性 28 | 29 | #### 岗位要求: 30 | * 本科及以上学历, 1 年以上工作经验 31 | * 熟练掌握 JavaScript 32 | * 熟练掌握 React 或 Vue 33 | * 良好的团队合作精神和积极主动的沟通意识, 具有较强的学习能力 34 | 35 | #### 加分项: 36 | * 熟悉 NodeJS, 有 NodeJS 开发经验, 熟悉 Express\koa 等框架 37 | * 对前端工程化有实践或有参与开源框架、库经验 38 | 39 | #### 职位亮点 40 | * 司内优秀的辅导团队, 助力能力成长与职级晋升 41 | * 复杂的业务场景与不断追求的工程化建设, 充满挑战和机会 42 | * 缺人, 速来 43 | 44 | #### 工作地点: 45 | * 深圳滨海大厦 46 | ![腾讯滨海大厦](./binhai.jpg) 47 | 48 |