-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdb.json
1 lines (1 loc) · 201 KB
/
db.json
1
{"meta":{"version":1,"warehouse":"4.0.2"},"models":{"Asset":[{"_id":"themes/zuixinzhuti1/source/js/pjax.min.js","path":"js/pjax.min.js","modified":0,"renderable":1},{"_id":"themes/zuixinzhuti1/source/js/sha1.js","path":"js/sha1.js","modified":0,"renderable":1},{"_id":"themes/zuixinzhuti1/source/font/HarmonyOS.ttf","path":"font/HarmonyOS.ttf","modified":0,"renderable":1}],"Cache":[{"_id":"source/_posts/Node.js小爬虫之澎湃热榜.md","hash":"63fd513984d8da9e2a391f26704b8b3082514a86","modified":1664742475673},{"_id":"source/_posts/Node.js_PHP处理XML数据.md","hash":"74f42ca6da166179178f6a470dd7bd00b6091f5b","modified":1664737241694},{"_id":"source/_posts/Vue路由传参的三种方式.md","hash":"598c542d4740dfff43f60422a7baba67de3b013d","modified":1662040651000},{"_id":"source/_posts/axios文档流下载.md","hash":"4311821c9839c52805b3fcd749d0d862836e3abe","modified":1662040651000},{"_id":"source/_posts/Axios挂载到Vue全局配置，beforeRouteEnter无法使用Axios的问题.md","hash":"179ff6091f5bd6aebed3a8ff9cf14f2f1b9f5012","modified":1662040651000},{"_id":"source/_posts/Promise链式调用.md","hash":"306609dbb2e8962b8e49ae3a88d1b43eadc40681","modified":1662049198265},{"_id":"source/_posts/css-minimizer-webpack-plugin和生产模式下JavaScript自动压缩冲突.md","hash":"7f057c82922bd391cb542e1317bfc7db9da24547","modified":1662040651000},{"_id":"source/_posts/ele.style、getComputedStyle、ele.currentStyle三种读__写样式的方法.md","hash":"d3596861cb7ce2f9b7370d2cba7676b58b115e77","modified":1662040651000},{"_id":"source/_posts/file-loader,url-loader在webpack5中废弃，改用asset_module.md","hash":"1e8b11ec78116fd5a8c33683269037c97e8e1ad8","modified":1662040651000},{"_id":"source/_posts/javascript图片转base64.md","hash":"bb80ab9e3567cbcee9f73f41601b5be523136b42","modified":1662040651000},{"_id":"source/_posts/jQuery在添加新元素或则替换元素后添加监听事件.md","hash":"d070b5987a1364de54e2693124075795aed7ab2f","modified":1662040651000},{"_id":"source/_posts/nodejs把响应内容保存到本地，而不是打开.md","hash":"8667933e91c634f8090fc5f3047d64d411fa9438","modified":1662040651000},{"_id":"source/_posts/利用github-actions自动执行Node-js脚本.md","hash":"e3349a9d6ad95303296bf34043e9ba4ae2300f8e","modified":1664742546170},{"_id":"source/_posts/scroll滚动兼容性.md","hash":"61f9484535f46fb126a89a3ba8c6dae8b8f30782","modified":1662040651000},{"_id":"source/_posts/webpack-dev-server报webpack-cli_not_found错误.md","hash":"036aface9e1f1bda0a2d95e534b1c711574685e3","modified":1662040651000},{"_id":"source/_posts/vuejs标签_选项卡切换效果.md","hash":"960cb550e39c9579366ca934b57a30a628887619","modified":1662040651000},{"_id":"source/_posts/正则的前瞻断言和后瞻断言.md","hash":"3d530752508dff1d3ce961ad60c5188e3eaea6a4","modified":1662040651000},{"_id":"source/_posts/数组的map()方法对数组里对象的合并处理.md","hash":"82d50768aabcf69f888aeff6c00c4e25ca81a822","modified":1662040651000},{"_id":"source/_posts/使用AbortController中止http请求.md","hash":"739706d150c8d1c5eb5fe650013f216d73fceb33","modified":1662041739642},{"_id":"source/_posts/事件委托(利用冒泡实现管理子元素.md","hash":"874f45c5a8827c1b25704185a01111adb0bbd0cc","modified":1662040651000},{"_id":"source/_posts/正则的懒惰量词.md","hash":"6d7422318f97d7515fb828730fcb34c2b6a6978e","modified":1662040651000},{"_id":"source/_posts/用async_await改变for循环promise.then()中的变量输出结果.md","hash":"b2f3ed2b71fa4b2eec2456c310bb3afff766b510","modified":1662040651000},{"_id":"source/_posts/用ES6的解构删除和过滤出属性.md","hash":"3ef2d98d23dc5d5681a80138a0518965b6af2f0a","modified":1662040651000},{"_id":"source/_posts/联通虚拟定位领数字人民币充值话费活动.md","hash":"a81bce97fb964572858622e8d6c5cc3e0ad5f611","modified":1662040651000},{"_id":"source/gallery/index.md","hash":"9cb0132f70c2ebd868d1d8fcb1b7663c4b03b2e7","modified":1661736874871},{"_id":"source/_posts/解决中文input输入事件在pc端触发两次.md","hash":"56c882e2874620330897cdcb3889a762e41fae6e","modified":1662040651000},{"_id":"source/gallery/稳经济接续发力 盘活地方专项债限额空间 - 副本 (2).md","hash":"5edd8df6f67cc082fd52121f814e3fbd5b612954","modified":1661750800215},{"_id":"source/hot/index.md","hash":"6aae5dea40bf78519a553aa0117a55527488342d","modified":1661816021490},{"_id":"source/_posts/请求体类型.md","hash":"8c8770b6cf04f26d65c5af6595eb8ee05c86ed13","modified":1662040651000},{"_id":"source/hotnews/index.md","hash":"52e54d774867c27b170c55b42507c7b9542035d0","modified":1661942905452},{"_id":"source/_posts/防抖和节流_—_性能优化.md","hash":"80e99b00ca7382dee07a4a5c60c9dd8e59c44fdd","modified":1662040651000},{"_id":"source/search/index.md","hash":"5336d40f907cfd2c0d33ba0af8ce2cfd83563264","modified":1661513106265},{"_id":"themes/zuixinzhuti1/.npmignore","hash":"58d26d4b5f2f94c2d02a4e4a448088e4a2527c77","modified":1651684178000},{"_id":"themes/zuixinzhuti1/_config.yml","hash":"34d448fea17b7c24687b833194485e2e3bc55e4b","modified":1661942837621},{"_id":"themes/zuixinzhuti1/languages/de.yml","hash":"3ebf0775abbee928c8d7bda943c191d166ded0d3","modified":1651684178000},{"_id":"themes/zuixinzhuti1/Gruntfile.js","hash":"71adaeaac1f3cc56e36c49d549b8d8a72235c9b9","modified":1651684178000},{"_id":"themes/zuixinzhuti1/LICENSE","hash":"c480fce396b23997ee23cc535518ffaaf7f458f8","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/default.yml","hash":"3083f319b352d21d80fc5e20113ddf27889c9d11","modified":1651684178000},{"_id":"themes/zuixinzhuti1/README.md","hash":"37fae88639ef60d63bd0de22314d7cc4c5d94b07","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/ja.yml","hash":"a73e1b9c80fd6e930e2628b393bfe3fb716a21a9","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/es.yml","hash":"76edb1171b86532ef12cfd15f5f2c1ac3949f061","modified":1651684178000},{"_id":"themes/zuixinzhuti1/package.json","hash":"544f21a0b2c7034998b36ae94dba6e3e0f39f228","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/nl.yml","hash":"12ed59faba1fc4e8cdd1d42ab55ef518dde8039c","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/fr.yml","hash":"415e1c580ced8e4ce20b3b0aeedc3610341c76fb","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/ko.yml","hash":"881d6a0a101706e0452af81c580218e0bfddd9cf","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/no.yml","hash":"965a171e70347215ec726952e63f5b47930931ef","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/pt.yml","hash":"57d07b75d434fbfc33b0ddb543021cb5f53318a8","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/ru.yml","hash":"4fda301bbd8b39f2c714e2c934eccc4b27c0a2b0","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/zh-CN.yml","hash":"ca40697097ab0b3672a80b455d3f4081292d1eed","modified":1651684178000},{"_id":"themes/zuixinzhuti1/languages/zh-TW.yml","hash":"53ce3000c5f767759c7d2c4efcaa9049788599c3","modified":1651684178000},{"_id":"themes/zuixinzhuti1/layout/archive.ejs","hash":"6416ed98ad821668466944395e062a0ef73cdf5b","modified":1662555521627},{"_id":"themes/zuixinzhuti1/layout/layout.ejs","hash":"e81d75bbd32baca8cf6d947f20365bca3a8fb414","modified":1664743717067},{"_id":"themes/zuixinzhuti1/layout/index.ejs","hash":"5ca2ba1dec4de100ac4038666ea126bf5bd909b8","modified":1661799484554},{"_id":"themes/zuixinzhuti1/layout/page.ejs","hash":"3a7c64cb794f81d8a097852ce9d1d8f6f4283ba5","modified":1661942927660},{"_id":"themes/zuixinzhuti1/layout/category.ejs","hash":"79c30fe9da24efcd311c51a8d521d7d8f72e78b2","modified":1661949027351},{"_id":"themes/zuixinzhuti1/layout/post.ejs","hash":"8470de58cacc33440145af04376548cfefbf58d9","modified":1661801917831},{"_id":"themes/zuixinzhuti1/layout/tag.ejs","hash":"40f88e423b130193a387a52e166f9c5df8e1b49d","modified":1661605710687},{"_id":"themes/zuixinzhuti1/layout/_partial/gallery.ejs","hash":"4165b38c3a44f37ac9a14e62af7b6148b9d34491","modified":1661854308884},{"_id":"themes/zuixinzhuti1/layout/_partial/search.ejs","hash":"513f4d539132a1d6567b8de384435b16aadd9d98","modified":1664746949184},{"_id":"themes/zuixinzhuti1/layout/_partial/hot.js","hash":"e7a50236bf875dc66e3ef488d19618374bb4e193","modified":1661948526038},{"_id":"themes/zuixinzhuti1/source/js/pjax.min.js","hash":"3d796e5be9cdd4067c94e190ea2482d7fdb4856c","modified":1661588183080},{"_id":"themes/zuixinzhuti1/source/js/sha1.js","hash":"3c4b9879edbaeb4b3d285dd7f7993400eab33c62","modified":1661754740043},{"_id":"themes/zuixinzhuti1/source/font/HarmonyOS.ttf","hash":"63e4fd4ed306fca16e579a6f4416c48f7c2ec63e","modified":1661851679805},{"_id":"public/search.json","hash":"88a7dd6a4e18b08449539895b52d6c5b95e7beda","modified":1664745696317},{"_id":"public/gallery/index.html","hash":"4722f37d99adb67827fdc8baaf076ac9898b718f","modified":1664745561326},{"_id":"public/gallery/稳经济接续发力 盘活地方专项债限额空间 - 副本 (2).html","hash":"08cf7f28ca867d040875af133abb530c50be45bb","modified":1664745561326},{"_id":"public/hot/index.html","hash":"64395f62b721908c468c5f09bf7c2bfc2be45490","modified":1664745561326},{"_id":"public/hotnews/index.html","hash":"919cf6622685430dfc2d89303b677fbe5b30e07f","modified":1664745561326},{"_id":"public/search/index.html","hash":"3c60f47b79bb847034502cf823890f705de3dcea","modified":1664745561326},{"_id":"public/2022/09/22/利用github-actions自动执行Node-js脚本/index.html","hash":"93db5c7abae35c0d9561ad0ef92fe51abe963650","modified":1664745561326},{"_id":"public/2022/09/01/Node.js小爬虫之澎湃热榜/index.html","hash":"ad34ec5e754c1611c2fa2ac37c893896961713a2","modified":1664745561326},{"_id":"public/2022/08/24/Axios挂载到Vue全局配置，beforeRouteEnter无法使用Axios的问题/index.html","hash":"0a84980cfd2f1020cc826beae5aa6b3dbc427569","modified":1664745561326},{"_id":"public/2022/08/17/Node.js_PHP处理XML数据/index.html","hash":"01d7dd2ec07fc41813eca41a7a5ad05ec49f1050","modified":1664745561326},{"_id":"public/2022/08/08/使用AbortController中止http请求/index.html","hash":"375e428d1df9fe6ca544bcfe7b9ffe5b0b3d2f51","modified":1664745561326},{"_id":"public/2022/08/06/jQuery在添加新元素或则替换元素后添加监听事件/index.html","hash":"1a4d0a878eb8ec4956fdcf1683f46bee27656a03","modified":1664745561326},{"_id":"public/2022/08/06/联通虚拟定位领数字人民币充值话费活动/index.html","hash":"cbc57488d3426c4855417a5efc5954d3dab25c9b","modified":1664745561326},{"_id":"public/2022/07/26/正则的懒惰量词/index.html","hash":"5fc12e5ff66a5b6f469acd8e4faaaf079c8e3a2d","modified":1664745561326},{"_id":"public/2022/07/25/正则的前瞻断言和后瞻断言/index.html","hash":"08f4cddc767f5a31dca68586dcc2bcef999a1296","modified":1664745561326},{"_id":"public/2022/05/13/解决中文input输入事件在pc端触发两次/index.html","hash":"09dc3d8533985e166f5b9dd1a14836c0b7cf59d9","modified":1664745561326},{"_id":"public/2022/05/09/请求体类型/index.html","hash":"405d40dc41b8cc0e7d3fbdb987e593a318d9ab89","modified":1664745561326},{"_id":"public/2022/03/30/用ES6的解构删除和过滤出属性/index.html","hash":"7a0d2feb93804ae9a73085c4290eea9c45a3c7ad","modified":1664745561326},{"_id":"public/2022/03/12/css-minimizer-webpack-plugin和生产模式下JavaScript自动压缩冲突/index.html","hash":"a311867250a53b847bf57c4275e8f3d9aa8e3bc2","modified":1664745561326},{"_id":"public/2022/03/12/ele.style、getComputedStyle、ele.currentStyle三种读__写样式的方法/index.html","hash":"7fd93e5944c0b423f5b598b64f8c58eb36a436ca","modified":1664745561326},{"_id":"public/2022/03/06/webpack-dev-server报webpack-cli_not_found错误/index.html","hash":"658e9075165cc9e0f1fd88031bbda390f8cc76a2","modified":1664745561326},{"_id":"public/2022/03/06/file-loader,url-loader在webpack5中废弃，改用asset_module/index.html","hash":"31127cb236d1b2028a885b2f6409be470169c472","modified":1664745561326},{"_id":"public/2022/02/15/Promise链式调用/index.html","hash":"7eae7f7a7b387bab925fab1db93db63677d4cce4","modified":1664745561326},{"_id":"public/2021/12/07/事件委托(利用冒泡实现管理子元素/index.html","hash":"8b16671bd7532ddf0ae31be321fb81a072bfef79","modified":1664745561326},{"_id":"public/2021/12/05/scroll滚动兼容性/index.html","hash":"6236b71a3228f36bbec3bcc5717d8f0a195243a1","modified":1664745561326},{"_id":"public/2021/11/22/数组的map()方法对数组里对象的合并处理/index.html","hash":"816879821c452c39767bdf287545cae7d7519f23","modified":1664745561326},{"_id":"public/2021/11/16/防抖和节流_—_性能优化/index.html","hash":"f772322b56f6184784c40bfc6167bd58cf35da27","modified":1664745561326},{"_id":"public/2021/10/08/用async_await改变for循环promise.then()中的变量输出结果/index.html","hash":"6d359a6d669bb5cebbfd00133002317ad8fe9f40","modified":1664745561326},{"_id":"public/2021/10/02/nodejs把响应内容保存到本地，而不是打开/index.html","hash":"c2fe41438a56df6ad44a517031811f7b0ee7abd7","modified":1664745561326},{"_id":"public/2021/09/21/javascript图片转base64/index.html","hash":"a82b6f3cc9c7e1f204be34536bb745b57a856982","modified":1664745561326},{"_id":"public/2021/09/08/vuejs标签_选项卡切换效果/index.html","hash":"d7286bbe26a27313d92cb51004d48559892db07f","modified":1664745561326},{"_id":"public/2021/08/27/Vue路由传参的三种方式/index.html","hash":"c38c20820273e90c522af510c0f3d9a2a14dc51e","modified":1664745561326},{"_id":"public/2021/07/15/axios文档流下载/index.html","hash":"5728625f071ac2b07715a0f010eb2fc808b0a1b3","modified":1664745561326},{"_id":"public/archives/index.html","hash":"ed6471a75d1fd899a91a4e6fa5fe5633b735dcf9","modified":1664745561326},{"_id":"public/archives/page/2/index.html","hash":"ae14eee289356deade35c16feca18025845915ad","modified":1664745561326},{"_id":"public/archives/2021/index.html","hash":"c8075e44839142ea3ffafadd22ffdee3df4d326f","modified":1664745561326},{"_id":"public/archives/2021/07/index.html","hash":"b8ac3d63a7d1e1b926f31588ae81d7a4944594a4","modified":1664745561326},{"_id":"public/archives/2021/08/index.html","hash":"1ca1ab48a87e2cc17bbb042df743c3c608a2017f","modified":1664745561326},{"_id":"public/archives/2021/09/index.html","hash":"7a438f3d06e68a3799a6f0cbd94ed6b0f3758f20","modified":1664745561326},{"_id":"public/archives/2021/10/index.html","hash":"0d11a80dcda269a423d04314fb63e8fe5729e5b5","modified":1664745561326},{"_id":"public/archives/2021/11/index.html","hash":"c0578ad3e80ffc2c2785341a4a96f9d8bbf8e352","modified":1664745561326},{"_id":"public/archives/2021/12/index.html","hash":"b1828ddb5a7cfbab140384f7211420f78b8dc7b7","modified":1664745561326},{"_id":"public/archives/2022/index.html","hash":"0b7c55c8c3a0d7f403c0686da0396c697b362c6f","modified":1664745561326},{"_id":"public/archives/2022/page/2/index.html","hash":"2fd90b9de60cb35f2ed4b8a8b976b61b90db9319","modified":1664745561326},{"_id":"public/archives/2022/02/index.html","hash":"63ddcde43d78edb65517639c59096c7e6a9a97a5","modified":1664745561326},{"_id":"public/archives/2022/03/index.html","hash":"97d89f0ee22f4b86769a1e015c3ee3fddf857fd6","modified":1664745561326},{"_id":"public/archives/2022/05/index.html","hash":"d39a11bd54bb59f4bc405bd80e2594dbfa52d5a4","modified":1664745561326},{"_id":"public/archives/2022/07/index.html","hash":"8734e7fab1aa6914b2ee4b2307213219fd488ac1","modified":1664745561326},{"_id":"public/archives/2022/08/index.html","hash":"e9963e7e5f579efa53d0c4740a55c8ca8b47c246","modified":1664745561326},{"_id":"public/archives/2022/09/index.html","hash":"b976eaf51a12cc67bc5d53ced54175f2d9397295","modified":1664745561326},{"_id":"public/categories/后端编程/index.html","hash":"05779227c197778154a8abb1a3af1d8f02a15261","modified":1664745561326},{"_id":"public/categories/前端编程/index.html","hash":"671c3669d043e88b2cb5d750e293cddf25a2d066","modified":1664745561326},{"_id":"public/categories/前端编程/page/2/index.html","hash":"9923a305d4b06ea5a489dad3056b6350b60b09b7","modified":1664745561326},{"_id":"public/categories/优惠活动/index.html","hash":"6a7566862c36b36e1e055d56d2232a7db2933706","modified":1664745561326},{"_id":"public/index.html","hash":"1b373c996b126904c987d4cb59da8e37bc810637","modified":1664745561326},{"_id":"public/page/2/index.html","hash":"89d54f5776dde0b751231665315dac3729bb51a9","modified":1664745561326},{"_id":"public/tags/node-js/index.html","hash":"9f0efd10ef50ff73f91988f5ba64bf124b6e85d5","modified":1664745561326},{"_id":"public/tags/xml/index.html","hash":"7fd73d0397cff4d345026b19790647b30f10fed6","modified":1664745561326},{"_id":"public/tags/axios/index.html","hash":"4a244fababfd54201510b94912fbcd0a33da1e06","modified":1664745561326},{"_id":"public/tags/HTTP/index.html","hash":"6d4c540a8090fea6fac8b198bb0a1240bb3847cc","modified":1664745561326},{"_id":"public/tags/Vue路由/index.html","hash":"049aef3389f1bdcbe7fdfdaa50ebeeb9e6a9144c","modified":1664745561326},{"_id":"public/tags/Vue传参/index.html","hash":"f3c51f98c54d253e605e0d54fc75761f45db65e6","modified":1664745561326},{"_id":"public/tags/JavaScript/index.html","hash":"d39387bf7f3303447e8913912f79e0153130a2b7","modified":1664745561326},{"_id":"public/tags/图片处理/index.html","hash":"0b8816065cd98de6a7c1fbc53625b845076627e1","modified":1664745561326},{"_id":"public/tags/base64/index.html","hash":"679ac82e3868cb5bd7713e5943f4be52d4070fb0","modified":1664745561326},{"_id":"public/tags/Nodejs/index.html","hash":"0ab6a91ed191ad1fdcda705d3830780b0531c633","modified":1664745561326},{"_id":"public/tags/图片/index.html","hash":"06a0deb4f06a6846a75dfe02499c33d661a0d182","modified":1664745561326},{"_id":"public/tags/下载/index.html","hash":"87d59ee7b4c8f5f9285f3df3d59455fd5ff718fa","modified":1664745561326},{"_id":"public/tags/网页滚动/index.html","hash":"75d496042de504966b344da76b5759b4147ed99f","modified":1664745561326},{"_id":"public/tags/Vue/index.html","hash":"94946dd584287186f560a79e99e05c14eb7b404f","modified":1664745561326},{"_id":"public/tags/js数组处理/index.html","hash":"b6672a1fc2480051130d359d7ba20657897d5138","modified":1664745561326},{"_id":"public/tags/数组过滤/index.html","hash":"bc3947bc46c70c5aa47d4230b1855cb6bbd1b9ff","modified":1664745561326},{"_id":"public/tags/异步函数/index.html","hash":"f86449c0e6e7dcfdf9c281f7d4977506be5d02e1","modified":1664745561326},{"_id":"public/js/sha1.js","hash":"3c4b9879edbaeb4b3d285dd7f7993400eab33c62","modified":1664745561326},{"_id":"public/js/pjax.min.js","hash":"3d796e5be9cdd4067c94e190ea2482d7fdb4856c","modified":1664745561326},{"_id":"public/font/HarmonyOS.ttf","hash":"63e4fd4ed306fca16e579a6f4416c48f7c2ec63e","modified":1664745561326}],"Category":[{"name":"后端编程","_id":"cl8ruiwif0004ost2f55fb3mn"},{"name":"前端编程","_id":"cl8ruiwiq000gost28nxkcn1j"},{"name":"优惠活动","_id":"cl8ruiwjd001xost2ggs40gk5"}],"Data":[],"Page":[{"title":"gallery","date":"2022-08-29T01:04:31.000Z","_content":"","source":"gallery/index.md","raw":"---\ntitle: gallery\ndate: 2022-08-29 09:04:31\n---\n","updated":"2022-08-29T01:34:34.871Z","path":"gallery/index.html","comments":1,"layout":"page","_id":"cl8ruiwi50000ost2atha7fc2","content":"","site":{"data":{}},"excerpt":"","more":""},{"title":"绿色护眼高清自然风景","_content":"\n","source":"gallery/稳经济接续发力 盘活地方专项债限额空间 - 副本 (2).md","raw":"title: 绿色护眼高清自然风景\n---\n\n","date":"2022-10-02T20:14:52.296Z","updated":"2022-08-29T05:26:40.215Z","path":"gallery/稳经济接续发力 盘活地方专项债限额空间 - 副本 (2).html","comments":1,"layout":"page","_id":"cl8ruiwic0002ost2ek9jg5gy","content":"<p><img src=\"https://ts1.cn.mm.bing.net/th/id/R-C.1e670af528d4aac7d858aeab6436d2d6?rik=OBWRV+iBaDwRcw&riu=http://www.beihaiting.com/uploads/allimg/150307/10723-15030G20Ab07.jpg&ehk=b2AOFe0YPBd6APAOy63TcBUlRDkVbxTsfyxoUT9GyCw=&risl=&pid=ImgRaw&r=0\"><br><img src=\"https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p><img src=\"https://ts1.cn.mm.bing.net/th/id/R-C.1e670af528d4aac7d858aeab6436d2d6?rik=OBWRV+iBaDwRcw&riu=http://www.beihaiting.com/uploads/allimg/150307/10723-15030G20Ab07.jpg&ehk=b2AOFe0YPBd6APAOy63TcBUlRDkVbxTsfyxoUT9GyCw=&risl=&pid=ImgRaw&r=0\"><br><img src=\"https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg\"></p>\n"},{"title":"hot","date":"2022-08-29T23:33:41.000Z","_content":"","source":"hot/index.md","raw":"---\ntitle: hot\ndate: 2022-08-30 07:33:41\n---\n","updated":"2022-08-29T23:33:41.490Z","path":"hot/index.html","comments":1,"layout":"page","_id":"cl8ruiwii0006ost2hepe1300","content":"","site":{"data":{}},"excerpt":"","more":""},{"title":"hotnews","date":"2022-08-31T10:48:25.000Z","_content":"","source":"hotnews/index.md","raw":"---\ntitle: hotnews\ndate: 2022-08-31 18:48:25\n---\n","updated":"2022-08-31T10:48:25.452Z","path":"hotnews/index.html","comments":1,"layout":"page","_id":"cl8ruiwik0008ost2623seyru","content":"","site":{"data":{}},"excerpt":"","more":""},{"title":"search","date":"2022-08-26T11:25:06.000Z","_content":"","source":"search/index.md","raw":"---\ntitle: search\ndate: 2022-08-26 19:25:06\n---\n","updated":"2022-08-26T11:25:06.265Z","path":"search/index.html","comments":1,"layout":"page","_id":"cl8ruiwil000aost28edk0gaf","content":"","site":{"data":{}},"excerpt":"","more":""}],"Post":[{"title":"Node.js PHP处理XML数据","date":"2022-08-17T05:30:00.000Z","_content":"\n\n> 现在XML数据相对来说比较少，微信公众号发送的信息就是XML格式的，影视采集站是json和xml\n\n### Node.js\n[express-xml-bodyparser][1]模块会把请求体中的xml转为json格式，之后用req.body就能取到数据了\n\n给客户端发送xml数据用[xml2js][2]模块\n![nodejsxml][3]\n\n### PHP\n`file_get_contents(\"input://input\")`方法拿到请求体源数据，拿到后再用`simplexml_load_string(xml,SimpleXMLElement,LIBXML_NOCDATA)`方法把xml转为simplexml对象，之后直接用->取值\n\n这里有个很重要的点，如果数据中含有`<![CDATA[data...]]>`需要再传递第三个参数LIBXML_NOCDATA把CDATA数据转为字符串，没传这个参数就取不到数据\n\n刚开始看别人文章只传了前两个参数给我整半小时，最后专门去查了这个方法才发现可以传三个参数来解决CDATA\n![phpxml][4]\n\n\n [1]: https://www.npmjs.com/package/express-xml-bodyparser\n [2]: https://www.npmjs.com/package/xml2js#xml-builder-usage\n [3]: https://i.imgtg.com/2022/08/17/Kz8jg.png\n [4]: https://i.imgtg.com/2022/08/17/Kz6Rl.png","source":"_posts/Node.js_PHP处理XML数据.md","raw":"---\ntitle: Node.js PHP处理XML数据\ndate: 2022/08/17 13:30:00\ncategories: \n - 后端编程\ntags: \n - node.js\n - xml\n---\n\n\n> 现在XML数据相对来说比较少，微信公众号发送的信息就是XML格式的，影视采集站是json和xml\n\n### Node.js\n[express-xml-bodyparser][1]模块会把请求体中的xml转为json格式，之后用req.body就能取到数据了\n\n给客户端发送xml数据用[xml2js][2]模块\n![nodejsxml][3]\n\n### PHP\n`file_get_contents(\"input://input\")`方法拿到请求体源数据，拿到后再用`simplexml_load_string(xml,SimpleXMLElement,LIBXML_NOCDATA)`方法把xml转为simplexml对象，之后直接用->取值\n\n这里有个很重要的点，如果数据中含有`<![CDATA[data...]]>`需要再传递第三个参数LIBXML_NOCDATA把CDATA数据转为字符串，没传这个参数就取不到数据\n\n刚开始看别人文章只传了前两个参数给我整半小时，最后专门去查了这个方法才发现可以传三个参数来解决CDATA\n![phpxml][4]\n\n\n [1]: https://www.npmjs.com/package/express-xml-bodyparser\n [2]: https://www.npmjs.com/package/xml2js#xml-builder-usage\n [3]: https://i.imgtg.com/2022/08/17/Kz8jg.png\n [4]: https://i.imgtg.com/2022/08/17/Kz6Rl.png","slug":"Node.js_PHP处理XML数据","published":1,"updated":"2022-10-02T19:00:41.694Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwi90001ost2d0b74ovu","content":"<blockquote>\n<p>现在XML数据相对来说比较少，微信公众号发送的信息就是XML格式的，影视采集站是json和xml</p>\n</blockquote>\n<h3 id=\"Node-js\"><a href=\"#Node-js\" class=\"headerlink\" title=\"Node.js\"></a>Node.js</h3><p><a href=\"https://www.npmjs.com/package/express-xml-bodyparser\">express-xml-bodyparser</a>模块会把请求体中的xml转为json格式，之后用req.body就能取到数据了</p>\n<p>给客户端发送xml数据用<a href=\"https://www.npmjs.com/package/xml2js#xml-builder-usage\">xml2js</a>模块<br><img src=\"https://i.imgtg.com/2022/08/17/Kz8jg.png\" alt=\"nodejsxml\"></p>\n<h3 id=\"PHP\"><a href=\"#PHP\" class=\"headerlink\" title=\"PHP\"></a>PHP</h3><p><code>file_get_contents("input://input")</code>方法拿到请求体源数据，拿到后再用<code>simplexml_load_string(xml,SimpleXMLElement,LIBXML_NOCDATA)</code>方法把xml转为simplexml对象，之后直接用->取值</p>\n<p>这里有个很重要的点，如果数据中含有<code><![CDATA[data...]]></code>需要再传递第三个参数LIBXML_NOCDATA把CDATA数据转为字符串，没传这个参数就取不到数据</p>\n<p>刚开始看别人文章只传了前两个参数给我整半小时，最后专门去查了这个方法才发现可以传三个参数来解决CDATA<br><img src=\"https://i.imgtg.com/2022/08/17/Kz6Rl.png\" alt=\"phpxml\"></p>\n","site":{"data":{}},"excerpt":"","more":"<blockquote>\n<p>现在XML数据相对来说比较少，微信公众号发送的信息就是XML格式的，影视采集站是json和xml</p>\n</blockquote>\n<h3 id=\"Node-js\"><a href=\"#Node-js\" class=\"headerlink\" title=\"Node.js\"></a>Node.js</h3><p><a href=\"https://www.npmjs.com/package/express-xml-bodyparser\">express-xml-bodyparser</a>模块会把请求体中的xml转为json格式，之后用req.body就能取到数据了</p>\n<p>给客户端发送xml数据用<a href=\"https://www.npmjs.com/package/xml2js#xml-builder-usage\">xml2js</a>模块<br><img src=\"https://i.imgtg.com/2022/08/17/Kz8jg.png\" alt=\"nodejsxml\"></p>\n<h3 id=\"PHP\"><a href=\"#PHP\" class=\"headerlink\" title=\"PHP\"></a>PHP</h3><p><code>file_get_contents("input://input")</code>方法拿到请求体源数据，拿到后再用<code>simplexml_load_string(xml,SimpleXMLElement,LIBXML_NOCDATA)</code>方法把xml转为simplexml对象，之后直接用->取值</p>\n<p>这里有个很重要的点，如果数据中含有<code><![CDATA[data...]]></code>需要再传递第三个参数LIBXML_NOCDATA把CDATA数据转为字符串，没传这个参数就取不到数据</p>\n<p>刚开始看别人文章只传了前两个参数给我整半小时，最后专门去查了这个方法才发现可以传三个参数来解决CDATA<br><img src=\"https://i.imgtg.com/2022/08/17/Kz6Rl.png\" alt=\"phpxml\"></p>\n"},{"title":"Node.js小爬虫之澎湃热榜","date":"2022-09-01T02:02:00.000Z","_content":"\n先请求下热搜榜所在页面，发现搜不到关键字\n![请输入图片描述][1]\n\n再看看开发者工具的页面链接，第一眼看请求选项卡，有个rightSidebar，进去后搜索到，说明是HTTP请求渲染上去的\n![请输入图片描述][2]\n![请输入图片描述][3]\n\nNodejs用的是Axios包,请求这个API，拿到hotNews\n```javascript\nvar result=(await axios.get('https://www.thepaper.cn/contentapi/wwwIndex/rightSidebar',{\n headers:{\n 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) \n Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.70'\n }\n})).data.data.hotNews\n```\n\n因为我要把这些采集的数据存到数据库，这里用到的数据库是LeanCloud，免费数据库\n然后的话我用的是koa框架，支持async await语法，请求API和数据库操作都是异步\n![请输入图片描述][4]\n\nfor循环里用await的话会等异步执行完才会进行下一次循环，这样才能保证采集的数据和写入数据库顺序不会混乱，那段像jQuery是用的cheerio包，可以像在客户端里一样操作DOM\n\n还有个采集数据必不可少的就是你得让他定时采集，node-schedule包，支持cron表达式，定时每小时30分时采集一次\n```schedule.scheduleJob('30 * * * *', async function(){})```\n\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f34fee269cb12273173c181fe79bb8f44b/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f3b176ac6aa710a07aeb4e313a0932512f/0.png\n [3]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f3bbf4c91c516c0765b8b169aec874ddd9/0.png\n [4]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f36b3aa03704e229ab3292fbfb39c8c158/0.png","source":"_posts/Node.js小爬虫之澎湃热榜.md","raw":"title: Node.js小爬虫之澎湃热榜\ndate: 2022/09/01 10:02:00\ncategories:\n - 后端编程\ntags: []\n---\n\n先请求下热搜榜所在页面，发现搜不到关键字\n![请输入图片描述][1]\n\n再看看开发者工具的页面链接，第一眼看请求选项卡，有个rightSidebar，进去后搜索到，说明是HTTP请求渲染上去的\n![请输入图片描述][2]\n![请输入图片描述][3]\n\nNodejs用的是Axios包,请求这个API，拿到hotNews\n```javascript\nvar result=(await axios.get('https://www.thepaper.cn/contentapi/wwwIndex/rightSidebar',{\n headers:{\n 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) \n Chrome/104.0.5112.102 Safari/537.36 Edg/104.0.1293.70'\n }\n})).data.data.hotNews\n```\n\n因为我要把这些采集的数据存到数据库，这里用到的数据库是LeanCloud，免费数据库\n然后的话我用的是koa框架，支持async await语法，请求API和数据库操作都是异步\n![请输入图片描述][4]\n\nfor循环里用await的话会等异步执行完才会进行下一次循环，这样才能保证采集的数据和写入数据库顺序不会混乱，那段像jQuery是用的cheerio包，可以像在客户端里一样操作DOM\n\n还有个采集数据必不可少的就是你得让他定时采集，node-schedule包，支持cron表达式，定时每小时30分时采集一次\n```schedule.scheduleJob('30 * * * *', async function(){})```\n\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f34fee269cb12273173c181fe79bb8f44b/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f3b176ac6aa710a07aeb4e313a0932512f/0.png\n [3]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f3bbf4c91c516c0765b8b169aec874ddd9/0.png\n [4]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f36b3aa03704e229ab3292fbfb39c8c158/0.png","slug":"Node.js小爬虫之澎湃热榜","published":1,"updated":"2022-10-02T20:27:55.673Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwid0003ost21yghc8s3","content":"<p>先请求下热搜榜所在页面，发现搜不到关键字<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f34fee269cb12273173c181fe79bb8f44b/0.png\" alt=\"请输入图片描述\"></p>\n<p>再看看开发者工具的页面链接，第一眼看请求选项卡，有个rightSidebar，进去后搜索到，说明是HTTP请求渲染上去的<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f3b176ac6aa710a07aeb4e313a0932512f/0.png\" alt=\"请输入图片描述\"><br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f3bbf4c91c516c0765b8b169aec874ddd9/0.png\" alt=\"请输入图片描述\"></p>\n<p>Nodejs用的是Axios包,请求这个API，拿到hotNews</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> result<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">await</span> axios<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'https://www.thepaper.cn/contentapi/wwwIndex/rightSidebar'</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">headers</span><span class=\"token operator\">:</span><span class=\"token punctuation\">{</span>\n <span class=\"token string-property property\">'user-agent'</span><span class=\"token operator\">:</span> 'Mozilla<span class=\"token operator\">/</span><span class=\"token number\">5.0</span> <span class=\"token punctuation\">(</span>Windows <span class=\"token constant\">NT</span> <span class=\"token number\">10.0</span><span class=\"token punctuation\">;</span> Win64<span class=\"token punctuation\">;</span> x64<span class=\"token punctuation\">)</span> AppleWebKit<span class=\"token operator\">/</span><span class=\"token number\">537.36</span> <span class=\"token punctuation\">(</span><span class=\"token constant\">KHTML</span><span class=\"token punctuation\">,</span> like Gecko<span class=\"token punctuation\">)</span> \n Chrome<span class=\"token operator\">/</span><span class=\"token number\">104.0</span><span class=\"token number\">.5112</span><span class=\"token number\">.102</span> Safari<span class=\"token operator\">/</span><span class=\"token number\">537.36</span> Edg<span class=\"token operator\">/</span><span class=\"token number\">104.0</span><span class=\"token number\">.1293</span><span class=\"token number\">.70</span>'\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>data<span class=\"token punctuation\">.</span>data<span class=\"token punctuation\">.</span>hotNews<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n<p>因为我要把这些采集的数据存到数据库，这里用到的数据库是LeanCloud，免费数据库<br>然后的话我用的是koa框架，支持async await语法，请求API和数据库操作都是异步<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f36b3aa03704e229ab3292fbfb39c8c158/0.png\" alt=\"请输入图片描述\"></p>\n<p>for循环里用await的话会等异步执行完才会进行下一次循环，这样才能保证采集的数据和写入数据库顺序不会混乱，那段像jQuery是用的cheerio包，可以像在客户端里一样操作DOM</p>\n<p>还有个采集数据必不可少的就是你得让他定时采集，node-schedule包，支持cron表达式，定时每小时30分时采集一次<br><code>schedule.scheduleJob('30 * * * *', async function(){})</code></p>\n","site":{"data":{}},"excerpt":"","more":"<p>先请求下热搜榜所在页面，发现搜不到关键字<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f34fee269cb12273173c181fe79bb8f44b/0.png\" alt=\"请输入图片描述\"></p>\n<p>再看看开发者工具的页面链接，第一眼看请求选项卡，有个rightSidebar，进去后搜索到，说明是HTTP请求渲染上去的<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f3b176ac6aa710a07aeb4e313a0932512f/0.png\" alt=\"请输入图片描述\"><br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f3bbf4c91c516c0765b8b169aec874ddd9/0.png\" alt=\"请输入图片描述\"></p>\n<p>Nodejs用的是Axios包,请求这个API，拿到hotNews</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> result<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">await</span> axios<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'https://www.thepaper.cn/contentapi/wwwIndex/rightSidebar'</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">headers</span><span class=\"token operator\">:</span><span class=\"token punctuation\">{</span>\n <span class=\"token string-property property\">'user-agent'</span><span class=\"token operator\">:</span> 'Mozilla<span class=\"token operator\">/</span><span class=\"token number\">5.0</span> <span class=\"token punctuation\">(</span>Windows <span class=\"token constant\">NT</span> <span class=\"token number\">10.0</span><span class=\"token punctuation\">;</span> Win64<span class=\"token punctuation\">;</span> x64<span class=\"token punctuation\">)</span> AppleWebKit<span class=\"token operator\">/</span><span class=\"token number\">537.36</span> <span class=\"token punctuation\">(</span><span class=\"token constant\">KHTML</span><span class=\"token punctuation\">,</span> like Gecko<span class=\"token punctuation\">)</span> \n Chrome<span class=\"token operator\">/</span><span class=\"token number\">104.0</span><span class=\"token number\">.5112</span><span class=\"token number\">.102</span> Safari<span class=\"token operator\">/</span><span class=\"token number\">537.36</span> Edg<span class=\"token operator\">/</span><span class=\"token number\">104.0</span><span class=\"token number\">.1293</span><span class=\"token number\">.70</span>'\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>data<span class=\"token punctuation\">.</span>data<span class=\"token punctuation\">.</span>hotNews<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n<p>因为我要把这些采集的数据存到数据库，这里用到的数据库是LeanCloud，免费数据库<br>然后的话我用的是koa框架，支持async await语法，请求API和数据库操作都是异步<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842baa242fa0505e8f36b3aa03704e229ab3292fbfb39c8c158/0.png\" alt=\"请输入图片描述\"></p>\n<p>for循环里用await的话会等异步执行完才会进行下一次循环，这样才能保证采集的数据和写入数据库顺序不会混乱，那段像jQuery是用的cheerio包，可以像在客户端里一样操作DOM</p>\n<p>还有个采集数据必不可少的就是你得让他定时采集，node-schedule包，支持cron表达式，定时每小时30分时采集一次<br><code>schedule.scheduleJob('30 * * * *', async function(){})</code></p>\n"},{"title":"Axios挂载到Vue全局配置，beforeRouteEnter无法使用Axios的问题","date":"2022-08-24T12:45:00.000Z","_content":"\n\nVue3使用`createApp(App).config.globalProperties.axios = axios`即可把axios对象挂载到Vue实例中\n\n因为页面进入后再请求后台数据会有闪烁问题，即默认数据和请求数据替换\n![请输入图片描述][1]\n这种解决办法就是先显示个加载图标之类的，等待数据请求完成再把加载图标隐藏即可\n\nVue还提供了beforeRouteEnter组件路由钩子，可以在路由进入前执行一些操作，所以可以在此期间请求数据，并通过next回调的参数获取Vue实例，从而赋值数据给实例data来更新页面数据，这种方式可以完美解决闪烁问题\n\n但由于此时无法获取Vue实例，自然Vue实例上的axios对象也拿不到\n\n目前能想到的两种解决办法就是在使用beforeRouteEnter的组件内手动引入axios或者使用原生HTTP请求(Fetch、XMLHttpRequest)替代\n```javascript\nfetch('http://localhost:3000/getPosts').then(res => {\n return res.json()\n}).then(res => {\n next(vm => {\n vm.posts = res\n })\n})\n```\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa051684291d06431bce71a5c4d679c7410196d8f957939e49de5c98d/0.png","source":"_posts/Axios挂载到Vue全局配置，beforeRouteEnter无法使用Axios的问题.md","raw":"---\ntitle: Axios挂载到Vue全局配置，beforeRouteEnter无法使用Axios的问题\ndate: 2022/08/24 20:45:00\ncategories: \n - 前端编程\ntags: \n---\n\n\nVue3使用`createApp(App).config.globalProperties.axios = axios`即可把axios对象挂载到Vue实例中\n\n因为页面进入后再请求后台数据会有闪烁问题，即默认数据和请求数据替换\n![请输入图片描述][1]\n这种解决办法就是先显示个加载图标之类的，等待数据请求完成再把加载图标隐藏即可\n\nVue还提供了beforeRouteEnter组件路由钩子，可以在路由进入前执行一些操作，所以可以在此期间请求数据，并通过next回调的参数获取Vue实例，从而赋值数据给实例data来更新页面数据，这种方式可以完美解决闪烁问题\n\n但由于此时无法获取Vue实例，自然Vue实例上的axios对象也拿不到\n\n目前能想到的两种解决办法就是在使用beforeRouteEnter的组件内手动引入axios或者使用原生HTTP请求(Fetch、XMLHttpRequest)替代\n```javascript\nfetch('http://localhost:3000/getPosts').then(res => {\n return res.json()\n}).then(res => {\n next(vm => {\n vm.posts = res\n })\n})\n```\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa051684291d06431bce71a5c4d679c7410196d8f957939e49de5c98d/0.png","slug":"Axios挂载到Vue全局配置，beforeRouteEnter无法使用Axios的问题","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwii0007ost2ghyu6aen","content":"<p>Vue3使用<code>createApp(App).config.globalProperties.axios = axios</code>即可把axios对象挂载到Vue实例中</p>\n<p>因为页面进入后再请求后台数据会有闪烁问题，即默认数据和请求数据替换<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa051684291d06431bce71a5c4d679c7410196d8f957939e49de5c98d/0.png\" alt=\"请输入图片描述\"><br>这种解决办法就是先显示个加载图标之类的，等待数据请求完成再把加载图标隐藏即可</p>\n<p>Vue还提供了beforeRouteEnter组件路由钩子，可以在路由进入前执行一些操作，所以可以在此期间请求数据，并通过next回调的参数获取Vue实例，从而赋值数据给实例data来更新页面数据，这种方式可以完美解决闪烁问题</p>\n<p>但由于此时无法获取Vue实例，自然Vue实例上的axios对象也拿不到</p>\n<p>目前能想到的两种解决办法就是在使用beforeRouteEnter的组件内手动引入axios或者使用原生HTTP请求(Fetch、XMLHttpRequest)替代</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'http://localhost:3000/getPosts'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">res</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> res<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">res</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">next</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">vm</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n vm<span class=\"token punctuation\">.</span>posts <span class=\"token operator\">=</span> res\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n","site":{"data":{}},"excerpt":"","more":"<p>Vue3使用<code>createApp(App).config.globalProperties.axios = axios</code>即可把axios对象挂载到Vue实例中</p>\n<p>因为页面进入后再请求后台数据会有闪烁问题，即默认数据和请求数据替换<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa051684291d06431bce71a5c4d679c7410196d8f957939e49de5c98d/0.png\" alt=\"请输入图片描述\"><br>这种解决办法就是先显示个加载图标之类的，等待数据请求完成再把加载图标隐藏即可</p>\n<p>Vue还提供了beforeRouteEnter组件路由钩子，可以在路由进入前执行一些操作，所以可以在此期间请求数据，并通过next回调的参数获取Vue实例，从而赋值数据给实例data来更新页面数据，这种方式可以完美解决闪烁问题</p>\n<p>但由于此时无法获取Vue实例，自然Vue实例上的axios对象也拿不到</p>\n<p>目前能想到的两种解决办法就是在使用beforeRouteEnter的组件内手动引入axios或者使用原生HTTP请求(Fetch、XMLHttpRequest)替代</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'http://localhost:3000/getPosts'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">res</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> res<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">res</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">next</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">vm</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n vm<span class=\"token punctuation\">.</span>posts <span class=\"token operator\">=</span> res\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n"},{"title":"Promise链式调用","date":"2022-02-14T17:57:00.000Z","_content":"\n\n### 链式调用\n\n![请输入图片描述][1]\n\n因为then方法返回的是Promise所以可以一直使用then方法获取Promise的值，为了让回调正确获取到值，可以return Promise或者其他数据类型(字符串，数组等)\n\n但是值得注意的是，当用定时器延迟return时，下一个then方法并不会等待这个延迟执行完再调用回调函数，所以导致了最后的回调获取不到值。如果下一个回调要获取上一个延迟return值一定要return Promise\n\n![请输入图片描述][2]\n\n### reject终止链式调用\n\n当进行then链式调用时，如果其中有Promise是reject（失败）的情况，那么之后的链式不会继续执行，可以用catch去捕获reject值。\n\n![请输入图片描述][3]\n\nPromise resolve()和Promise reject()会自动转为Promise，记得它是一个Promise对象\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c58979dfc6eada2c05de8dc6646efc9df18f/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5890eb84f1c5af16955145e7b99e57e1b88/0.png\n [3]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589992b2b850b7b3f1e1353c63b73523bd4/0.png","source":"_posts/Promise链式调用.md","raw":"---\ntitle: Promise链式调用\ndate: 2022/02/15 01:57:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n### 链式调用\n\n![请输入图片描述][1]\n\n因为then方法返回的是Promise所以可以一直使用then方法获取Promise的值，为了让回调正确获取到值，可以return Promise或者其他数据类型(字符串，数组等)\n\n但是值得注意的是，当用定时器延迟return时，下一个then方法并不会等待这个延迟执行完再调用回调函数，所以导致了最后的回调获取不到值。如果下一个回调要获取上一个延迟return值一定要return Promise\n\n![请输入图片描述][2]\n\n### reject终止链式调用\n\n当进行then链式调用时，如果其中有Promise是reject（失败）的情况，那么之后的链式不会继续执行，可以用catch去捕获reject值。\n\n![请输入图片描述][3]\n\nPromise resolve()和Promise reject()会自动转为Promise，记得它是一个Promise对象\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c58979dfc6eada2c05de8dc6646efc9df18f/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5890eb84f1c5af16955145e7b99e57e1b88/0.png\n [3]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589992b2b850b7b3f1e1353c63b73523bd4/0.png","slug":"Promise链式调用","published":1,"updated":"2022-09-01T16:19:58.265Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwik0009ost2h7za2lvc","content":"<h3 id=\"链式调用\"><a href=\"#链式调用\" class=\"headerlink\" title=\"链式调用\"></a>链式调用</h3><p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c58979dfc6eada2c05de8dc6646efc9df18f/0.png\" alt=\"请输入图片描述\"></p>\n<p>因为then方法返回的是Promise所以可以一直使用then方法获取Promise的值，为了让回调正确获取到值，可以return Promise或者其他数据类型(字符串，数组等)</p>\n<p>但是值得注意的是，当用定时器延迟return时，下一个then方法并不会等待这个延迟执行完再调用回调函数，所以导致了最后的回调获取不到值。如果下一个回调要获取上一个延迟return值一定要return Promise</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5890eb84f1c5af16955145e7b99e57e1b88/0.png\" alt=\"请输入图片描述\"></p>\n<h3 id=\"reject终止链式调用\"><a href=\"#reject终止链式调用\" class=\"headerlink\" title=\"reject终止链式调用\"></a>reject终止链式调用</h3><p>当进行then链式调用时，如果其中有Promise是reject（失败）的情况，那么之后的链式不会继续执行，可以用catch去捕获reject值。</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589992b2b850b7b3f1e1353c63b73523bd4/0.png\" alt=\"请输入图片描述\"></p>\n<p>Promise resolve()和Promise reject()会自动转为Promise，记得它是一个Promise对象</p>\n","site":{"data":{}},"excerpt":"","more":"<h3 id=\"链式调用\"><a href=\"#链式调用\" class=\"headerlink\" title=\"链式调用\"></a>链式调用</h3><p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c58979dfc6eada2c05de8dc6646efc9df18f/0.png\" alt=\"请输入图片描述\"></p>\n<p>因为then方法返回的是Promise所以可以一直使用then方法获取Promise的值，为了让回调正确获取到值，可以return Promise或者其他数据类型(字符串，数组等)</p>\n<p>但是值得注意的是，当用定时器延迟return时，下一个then方法并不会等待这个延迟执行完再调用回调函数，所以导致了最后的回调获取不到值。如果下一个回调要获取上一个延迟return值一定要return Promise</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5890eb84f1c5af16955145e7b99e57e1b88/0.png\" alt=\"请输入图片描述\"></p>\n<h3 id=\"reject终止链式调用\"><a href=\"#reject终止链式调用\" class=\"headerlink\" title=\"reject终止链式调用\"></a>reject终止链式调用</h3><p>当进行then链式调用时，如果其中有Promise是reject（失败）的情况，那么之后的链式不会继续执行，可以用catch去捕获reject值。</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589992b2b850b7b3f1e1353c63b73523bd4/0.png\" alt=\"请输入图片描述\"></p>\n<p>Promise resolve()和Promise reject()会自动转为Promise，记得它是一个Promise对象</p>\n"},{"title":"axios文档流下载","date":"2021-07-15T01:18:00.000Z","_content":"\n\n```javascript\naxios({\n method: 'post',\n url:**, //要下载的文件链接\n responseType: 'arraybuffer'\n}).then((data) => {\n var url = window.URL.createObjectURL(new Blob([data.data], { type: 'arraybuffer' })) \n //创建a链接 并设置隐藏 模拟click()方法点击 \n const link = document.createElement('a')\n const text = document.createTextNode('下载图片')\n link.appendChild(text)\n link.style.display = 'none'\n link.setAttribute('download', '1280.jpg') //设置下载名称 \n link.href = url\n document.body.appendChild(link)\n link.click()\n window.URL.revokeObjectURL(url)\n document.body.removeChild(link)\n})\n```","source":"_posts/axios文档流下载.md","raw":"---\ntitle: axios文档流下载\ndate: 2021/07/15 09:18:00\ncategories: \n - 前端编程\ntags: \n - axios\n - HTTP\n---\n\n\n```javascript\naxios({\n method: 'post',\n url:**, //要下载的文件链接\n responseType: 'arraybuffer'\n}).then((data) => {\n var url = window.URL.createObjectURL(new Blob([data.data], { type: 'arraybuffer' })) \n //创建a链接 并设置隐藏 模拟click()方法点击 \n const link = document.createElement('a')\n const text = document.createTextNode('下载图片')\n link.appendChild(text)\n link.style.display = 'none'\n link.setAttribute('download', '1280.jpg') //设置下载名称 \n link.href = url\n document.body.appendChild(link)\n link.click()\n window.URL.revokeObjectURL(url)\n document.body.removeChild(link)\n})\n```","slug":"axios文档流下载","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwim000bost2dvuifpxq","content":"<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token function\">axios</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">method</span><span class=\"token operator\">:</span> <span class=\"token string\">'post'</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">url</span><span class=\"token operator\">:</span><span class=\"token operator\">**</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//要下载的文件链接</span>\n <span class=\"token literal-property property\">responseType</span><span class=\"token operator\">:</span> <span class=\"token string\">'arraybuffer'</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">data</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> url <span class=\"token operator\">=</span> window<span class=\"token punctuation\">.</span><span class=\"token constant\">URL</span><span class=\"token punctuation\">.</span><span class=\"token function\">createObjectURL</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">Blob</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>data<span class=\"token punctuation\">.</span>data<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'arraybuffer'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> \n <span class=\"token comment\">//创建a链接 并设置隐藏 模拟click()方法点击 </span>\n <span class=\"token keyword\">const</span> link <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'a'</span><span class=\"token punctuation\">)</span>\n <span class=\"token keyword\">const</span> text <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createTextNode</span><span class=\"token punctuation\">(</span><span class=\"token string\">'下载图片'</span><span class=\"token punctuation\">)</span>\n link<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>text<span class=\"token punctuation\">)</span>\n link<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>display <span class=\"token operator\">=</span> <span class=\"token string\">'none'</span>\n link<span class=\"token punctuation\">.</span><span class=\"token function\">setAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'download'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'1280.jpg'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">//设置下载名称 </span>\n link<span class=\"token punctuation\">.</span>href <span class=\"token operator\">=</span> url\n document<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>link<span class=\"token punctuation\">)</span>\n link<span class=\"token punctuation\">.</span><span class=\"token function\">click</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n window<span class=\"token punctuation\">.</span><span class=\"token constant\">URL</span><span class=\"token punctuation\">.</span><span class=\"token function\">revokeObjectURL</span><span class=\"token punctuation\">(</span>url<span class=\"token punctuation\">)</span>\n document<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">.</span><span class=\"token function\">removeChild</span><span class=\"token punctuation\">(</span>link<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>","site":{"data":{}},"excerpt":"","more":"<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token function\">axios</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">method</span><span class=\"token operator\">:</span> <span class=\"token string\">'post'</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">url</span><span class=\"token operator\">:</span><span class=\"token operator\">**</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">//要下载的文件链接</span>\n <span class=\"token literal-property property\">responseType</span><span class=\"token operator\">:</span> <span class=\"token string\">'arraybuffer'</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">data</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> url <span class=\"token operator\">=</span> window<span class=\"token punctuation\">.</span><span class=\"token constant\">URL</span><span class=\"token punctuation\">.</span><span class=\"token function\">createObjectURL</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">Blob</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span>data<span class=\"token punctuation\">.</span>data<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'arraybuffer'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> \n <span class=\"token comment\">//创建a链接 并设置隐藏 模拟click()方法点击 </span>\n <span class=\"token keyword\">const</span> link <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'a'</span><span class=\"token punctuation\">)</span>\n <span class=\"token keyword\">const</span> text <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createTextNode</span><span class=\"token punctuation\">(</span><span class=\"token string\">'下载图片'</span><span class=\"token punctuation\">)</span>\n link<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>text<span class=\"token punctuation\">)</span>\n link<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>display <span class=\"token operator\">=</span> <span class=\"token string\">'none'</span>\n link<span class=\"token punctuation\">.</span><span class=\"token function\">setAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'download'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'1280.jpg'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">//设置下载名称 </span>\n link<span class=\"token punctuation\">.</span>href <span class=\"token operator\">=</span> url\n document<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>link<span class=\"token punctuation\">)</span>\n link<span class=\"token punctuation\">.</span><span class=\"token function\">click</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n window<span class=\"token punctuation\">.</span><span class=\"token constant\">URL</span><span class=\"token punctuation\">.</span><span class=\"token function\">revokeObjectURL</span><span class=\"token punctuation\">(</span>url<span class=\"token punctuation\">)</span>\n document<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">.</span><span class=\"token function\">removeChild</span><span class=\"token punctuation\">(</span>link<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>"},{"title":"Vue路由传参的三种方式","date":"2021-08-27T01:04:00.000Z","_content":"\n\n路由:从一个页面导航到另一个页面，可以传参数到新页面，有三种方式\n\n当用router-link标签进行跳转时(声明式导航)，路由文件的path值用<font color=\"red\">:prop</font>(prop名字随意)去接收路由链接的参数，用this.$route.params.<font color=\"red\">prop</font>就能拿到传过来的参数注意\n\n![请输入图片描述][1]\n![请输入图片描述][2]\n![请输入图片描述][3]\n![请输入图片描述][4]\n--- \n\n还有两种是通过绑定to属性，这种方式在路由文件的**path就不用写:prop去接收了,记得去掉**\n\n**:to{path:'about',query:{prop:'参数参数'}}**\n\n![请输入图片描述][5]\n用this.$route.query.prop去获取参数\n\n![请输入图片描述][6]\n浏览器地址栏里会出现?prop=参数参数\n\n--- \n**:to{name:'About',params:{prop:'命名路由的参数'}}**\n路由文件里要写上name:About，不然会找不到这个路由\n\n![请输入图片描述][7]\n用this.$route.params.prop去获取参数\n\n![请输入图片描述][8]\n\n这种方式地址栏不会出现参数，而且当刷新网页时参数会丢失\n\n这两种方式在编程式导航里效果是一样的\nthis.$router.push({path:'about',query:{prop:'参数参数'}})\nthis.$router.push({name:'About',params:{prop:'命名路由的参数'}})\n\n [1]: https://img10.360buyimg.com/ddimg/jfs/t1/206967/33/7152/44163/617b41b7E34fbd586/a129c5b48eb45946.png\n [2]: https://img13.360buyimg.com/ddimg/jfs/t1/203659/32/13099/50428/617b41d9E5a321cd6/28f80768eab8e2f6.png\n [3]: https://img13.360buyimg.com/ddimg/jfs/t1/207973/18/7221/44875/617b41edE23302fd2/acd17d1259733e48.png\n [4]: https://img11.360buyimg.com/ddimg/jfs/t1/161548/8/22787/10466/617b4622E0b971619/b41ef058ed862b03.png\n [5]: https://img10.360buyimg.com/ddimg/jfs/t1/170217/33/21283/41772/617b4779E6ec216cd/5e6fae57dd89e5b4.png\n [6]: https://img12.360buyimg.com/ddimg/jfs/t1/219012/19/2250/8813/617b4622E565a5b79/422be182c93361ff.png\n [7]: https://img14.360buyimg.com/ddimg/jfs/t1/141331/36/21084/40940/617b4841E9b60f188/f1e918dc233fdece.png\n [8]: https://img13.360buyimg.com/ddimg/jfs/t1/145941/14/21202/11374/617b4841E157d8ebc/f3aa6bf430628165.png","source":"_posts/Vue路由传参的三种方式.md","raw":"---\ntitle: Vue路由传参的三种方式\ndate: 2021/08/27 09:04:00\ncategories: \n - 前端编程\ntags: \n - Vue路由\n - Vue传参\n---\n\n\n路由:从一个页面导航到另一个页面，可以传参数到新页面，有三种方式\n\n当用router-link标签进行跳转时(声明式导航)，路由文件的path值用<font color=\"red\">:prop</font>(prop名字随意)去接收路由链接的参数，用this.$route.params.<font color=\"red\">prop</font>就能拿到传过来的参数注意\n\n![请输入图片描述][1]\n![请输入图片描述][2]\n![请输入图片描述][3]\n![请输入图片描述][4]\n--- \n\n还有两种是通过绑定to属性，这种方式在路由文件的**path就不用写:prop去接收了,记得去掉**\n\n**:to{path:'about',query:{prop:'参数参数'}}**\n\n![请输入图片描述][5]\n用this.$route.query.prop去获取参数\n\n![请输入图片描述][6]\n浏览器地址栏里会出现?prop=参数参数\n\n--- \n**:to{name:'About',params:{prop:'命名路由的参数'}}**\n路由文件里要写上name:About，不然会找不到这个路由\n\n![请输入图片描述][7]\n用this.$route.params.prop去获取参数\n\n![请输入图片描述][8]\n\n这种方式地址栏不会出现参数，而且当刷新网页时参数会丢失\n\n这两种方式在编程式导航里效果是一样的\nthis.$router.push({path:'about',query:{prop:'参数参数'}})\nthis.$router.push({name:'About',params:{prop:'命名路由的参数'}})\n\n [1]: https://img10.360buyimg.com/ddimg/jfs/t1/206967/33/7152/44163/617b41b7E34fbd586/a129c5b48eb45946.png\n [2]: https://img13.360buyimg.com/ddimg/jfs/t1/203659/32/13099/50428/617b41d9E5a321cd6/28f80768eab8e2f6.png\n [3]: https://img13.360buyimg.com/ddimg/jfs/t1/207973/18/7221/44875/617b41edE23302fd2/acd17d1259733e48.png\n [4]: https://img11.360buyimg.com/ddimg/jfs/t1/161548/8/22787/10466/617b4622E0b971619/b41ef058ed862b03.png\n [5]: https://img10.360buyimg.com/ddimg/jfs/t1/170217/33/21283/41772/617b4779E6ec216cd/5e6fae57dd89e5b4.png\n [6]: https://img12.360buyimg.com/ddimg/jfs/t1/219012/19/2250/8813/617b4622E565a5b79/422be182c93361ff.png\n [7]: https://img14.360buyimg.com/ddimg/jfs/t1/141331/36/21084/40940/617b4841E9b60f188/f1e918dc233fdece.png\n [8]: https://img13.360buyimg.com/ddimg/jfs/t1/145941/14/21202/11374/617b4841E157d8ebc/f3aa6bf430628165.png","slug":"Vue路由传参的三种方式","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwio000eost2c1graty2","content":"<p>路由:从一个页面导航到另一个页面，可以传参数到新页面，有三种方式</p>\n<p>当用router-link标签进行跳转时(声明式导航)，路由文件的path值用<font color=\"red\">:prop</font>(prop名字随意)去接收路由链接的参数，用this.$route.params.<font color=\"red\">prop</font>就能拿到传过来的参数注意</p>\n<p><img src=\"https://img10.360buyimg.com/ddimg/jfs/t1/206967/33/7152/44163/617b41b7E34fbd586/a129c5b48eb45946.png\" alt=\"请输入图片描述\"><br><img src=\"https://img13.360buyimg.com/ddimg/jfs/t1/203659/32/13099/50428/617b41d9E5a321cd6/28f80768eab8e2f6.png\" alt=\"请输入图片描述\"><br><img src=\"https://img13.360buyimg.com/ddimg/jfs/t1/207973/18/7221/44875/617b41edE23302fd2/acd17d1259733e48.png\" alt=\"请输入图片描述\"><br><img src=\"https://img11.360buyimg.com/ddimg/jfs/t1/161548/8/22787/10466/617b4622E0b971619/b41ef058ed862b03.png\" alt=\"请输入图片描述\"></p>\n<hr>\n<p>还有两种是通过绑定to属性，这种方式在路由文件的<strong>path就不用写:prop去接收了,记得去掉</strong></p>\n<p><strong>:to{path:’about’,query:{prop:’参数参数’}}</strong></p>\n<p><img src=\"https://img10.360buyimg.com/ddimg/jfs/t1/170217/33/21283/41772/617b4779E6ec216cd/5e6fae57dd89e5b4.png\" alt=\"请输入图片描述\"><br>用this.$route.query.prop去获取参数</p>\n<p><img src=\"https://img12.360buyimg.com/ddimg/jfs/t1/219012/19/2250/8813/617b4622E565a5b79/422be182c93361ff.png\" alt=\"请输入图片描述\"><br>浏览器地址栏里会出现?prop=参数参数</p>\n<hr>\n<p><strong>:to{name:’About’,params:{prop:’命名路由的参数’}}</strong><br>路由文件里要写上name:About，不然会找不到这个路由</p>\n<p><img src=\"https://img14.360buyimg.com/ddimg/jfs/t1/141331/36/21084/40940/617b4841E9b60f188/f1e918dc233fdece.png\" alt=\"请输入图片描述\"><br>用this.$route.params.prop去获取参数</p>\n<p><img src=\"https://img13.360buyimg.com/ddimg/jfs/t1/145941/14/21202/11374/617b4841E157d8ebc/f3aa6bf430628165.png\" alt=\"请输入图片描述\"></p>\n<p>这种方式地址栏不会出现参数，而且当刷新网页时参数会丢失</p>\n<p>这两种方式在编程式导航里效果是一样的<br>this.$router.push({path:’about’,query:{prop:’参数参数’}})<br>this.$router.push({name:’About’,params:{prop:’命名路由的参数’}})</p>\n","site":{"data":{}},"excerpt":"","more":"<p>路由:从一个页面导航到另一个页面，可以传参数到新页面，有三种方式</p>\n<p>当用router-link标签进行跳转时(声明式导航)，路由文件的path值用<font color=\"red\">:prop</font>(prop名字随意)去接收路由链接的参数，用this.$route.params.<font color=\"red\">prop</font>就能拿到传过来的参数注意</p>\n<p><img src=\"https://img10.360buyimg.com/ddimg/jfs/t1/206967/33/7152/44163/617b41b7E34fbd586/a129c5b48eb45946.png\" alt=\"请输入图片描述\"><br><img src=\"https://img13.360buyimg.com/ddimg/jfs/t1/203659/32/13099/50428/617b41d9E5a321cd6/28f80768eab8e2f6.png\" alt=\"请输入图片描述\"><br><img src=\"https://img13.360buyimg.com/ddimg/jfs/t1/207973/18/7221/44875/617b41edE23302fd2/acd17d1259733e48.png\" alt=\"请输入图片描述\"><br><img src=\"https://img11.360buyimg.com/ddimg/jfs/t1/161548/8/22787/10466/617b4622E0b971619/b41ef058ed862b03.png\" alt=\"请输入图片描述\"></p>\n<hr>\n<p>还有两种是通过绑定to属性，这种方式在路由文件的<strong>path就不用写:prop去接收了,记得去掉</strong></p>\n<p><strong>:to{path:’about’,query:{prop:’参数参数’}}</strong></p>\n<p><img src=\"https://img10.360buyimg.com/ddimg/jfs/t1/170217/33/21283/41772/617b4779E6ec216cd/5e6fae57dd89e5b4.png\" alt=\"请输入图片描述\"><br>用this.$route.query.prop去获取参数</p>\n<p><img src=\"https://img12.360buyimg.com/ddimg/jfs/t1/219012/19/2250/8813/617b4622E565a5b79/422be182c93361ff.png\" alt=\"请输入图片描述\"><br>浏览器地址栏里会出现?prop=参数参数</p>\n<hr>\n<p><strong>:to{name:’About’,params:{prop:’命名路由的参数’}}</strong><br>路由文件里要写上name:About，不然会找不到这个路由</p>\n<p><img src=\"https://img14.360buyimg.com/ddimg/jfs/t1/141331/36/21084/40940/617b4841E9b60f188/f1e918dc233fdece.png\" alt=\"请输入图片描述\"><br>用this.$route.params.prop去获取参数</p>\n<p><img src=\"https://img13.360buyimg.com/ddimg/jfs/t1/145941/14/21202/11374/617b4841E157d8ebc/f3aa6bf430628165.png\" alt=\"请输入图片描述\"></p>\n<p>这种方式地址栏不会出现参数，而且当刷新网页时参数会丢失</p>\n<p>这两种方式在编程式导航里效果是一样的<br>this.$router.push({path:’about’,query:{prop:’参数参数’}})<br>this.$router.push({name:’About’,params:{prop:’命名路由的参数’}})</p>\n"},{"title":"css-minimizer-webpack-plugin和生产模式下JavaScript自动压缩冲突","date":"2022-03-12T02:04:00.000Z","_content":"\n\n在production模式下webpack会自动压缩JavaScript代码，但是遇到了使用css-minimizer-webpack-plugin压缩css代码插件时自动压缩JavaScript代码失效，这个时候可以使用terser-webpack-plugin去压缩JavaScript代码，这个插件webpack5自带，不用npm安装，直接require引用就行了\n","source":"_posts/css-minimizer-webpack-plugin和生产模式下JavaScript自动压缩冲突.md","raw":"---\ntitle: css-minimizer-webpack-plugin和生产模式下JavaScript自动压缩冲突\ndate: 2022/03/12 10:04:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n在production模式下webpack会自动压缩JavaScript代码，但是遇到了使用css-minimizer-webpack-plugin压缩css代码插件时自动压缩JavaScript代码失效，这个时候可以使用terser-webpack-plugin去压缩JavaScript代码，这个插件webpack5自带，不用npm安装，直接require引用就行了\n","slug":"css-minimizer-webpack-plugin和生产模式下JavaScript自动压缩冲突","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwip000fost20n3932fl","content":"<p>在production模式下webpack会自动压缩JavaScript代码，但是遇到了使用css-minimizer-webpack-plugin压缩css代码插件时自动压缩JavaScript代码失效，这个时候可以使用terser-webpack-plugin去压缩JavaScript代码，这个插件webpack5自带，不用npm安装，直接require引用就行了</p>\n","site":{"data":{}},"excerpt":"","more":"<p>在production模式下webpack会自动压缩JavaScript代码，但是遇到了使用css-minimizer-webpack-plugin压缩css代码插件时自动压缩JavaScript代码失效，这个时候可以使用terser-webpack-plugin去压缩JavaScript代码，这个插件webpack5自带，不用npm安装，直接require引用就行了</p>\n"},{"title":"ele.style、getComputedStyle、ele.currentStyle三种读||写样式的方法","date":"2022-03-12T01:01:00.000Z","_content":"\n\n`ele.style`能够设置或者返回样式,但是只对内联样式(标签内style属性设置的样式)起作用\n`getComputedStyle(ele,[pseudoElt]).getPropertyValue(attr)`只能获取样式，不能写入样式，**不兼容IE**\n`ele.currentStyle(attr)`只能获取样式，不能写入样式，**只兼容IE**","source":"_posts/ele.style、getComputedStyle、ele.currentStyle三种读__写样式的方法.md","raw":"---\ntitle: ele.style、getComputedStyle、ele.currentStyle三种读||写样式的方法\ndate: 2022/03/12 09:01:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n`ele.style`能够设置或者返回样式,但是只对内联样式(标签内style属性设置的样式)起作用\n`getComputedStyle(ele,[pseudoElt]).getPropertyValue(attr)`只能获取样式，不能写入样式，**不兼容IE**\n`ele.currentStyle(attr)`只能获取样式，不能写入样式，**只兼容IE**","slug":"ele.style、getComputedStyle、ele.currentStyle三种读__写样式的方法","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwir000jost205oi1d86","content":"<p><code>ele.style</code>能够设置或者返回样式,但是只对内联样式(标签内style属性设置的样式)起作用<br><code>getComputedStyle(ele,[pseudoElt]).getPropertyValue(attr)</code>只能获取样式，不能写入样式，<strong>不兼容IE</strong><br><code>ele.currentStyle(attr)</code>只能获取样式，不能写入样式，<strong>只兼容IE</strong></p>\n","site":{"data":{}},"excerpt":"","more":"<p><code>ele.style</code>能够设置或者返回样式,但是只对内联样式(标签内style属性设置的样式)起作用<br><code>getComputedStyle(ele,[pseudoElt]).getPropertyValue(attr)</code>只能获取样式，不能写入样式，<strong>不兼容IE</strong><br><code>ele.currentStyle(attr)</code>只能获取样式，不能写入样式，<strong>只兼容IE</strong></p>\n"},{"title":"file-loader,url-loader在webpack5中废弃，改用asset module","date":"2022-03-05T17:46:00.000Z","_content":"\n\n之前版本file-loader,url-loader能够处理输出css样式中的图片和字体文件，webpack5已经可以使用内建的资源模块类型(asset module type)，html中的img标签图片还需要使用html-loader。\n资源模块类型可以规定以下4种type属性值\ntype: asset/resource 之前版本的 file-loader 功能\ntype: asset/inline 之前版本的url-loader 输出为base64编码\ntype: asset/source 之前版本的raw-loader 导出源代码\ntype: asset 之前版本的url-loader 这个可以规定小于多少kb时输出base64编码\n\n自定义输出文件名\n```javascript\ngenerator: {\n filename: '[hash:6][ext][query]'\n}\n```\n或者在output对象添加assetModuleFilename: 'images/[hash][ext][query]\n\nurl-loader能在小于规定kb时自动把图片转为base64编码，现在使用以下实现\n```javascript\nparser:{\n dataUrlCondition:{\n maxSize: 8*1024\n }\n}\n```\n如果想继续用这些loader可以添加type: 'javascript/auto'属性值","source":"_posts/file-loader,url-loader在webpack5中废弃，改用asset_module.md","raw":"---\ntitle: file-loader,url-loader在webpack5中废弃，改用asset module\ndate: 2022/03/06 01:46:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n之前版本file-loader,url-loader能够处理输出css样式中的图片和字体文件，webpack5已经可以使用内建的资源模块类型(asset module type)，html中的img标签图片还需要使用html-loader。\n资源模块类型可以规定以下4种type属性值\ntype: asset/resource 之前版本的 file-loader 功能\ntype: asset/inline 之前版本的url-loader 输出为base64编码\ntype: asset/source 之前版本的raw-loader 导出源代码\ntype: asset 之前版本的url-loader 这个可以规定小于多少kb时输出base64编码\n\n自定义输出文件名\n```javascript\ngenerator: {\n filename: '[hash:6][ext][query]'\n}\n```\n或者在output对象添加assetModuleFilename: 'images/[hash][ext][query]\n\nurl-loader能在小于规定kb时自动把图片转为base64编码，现在使用以下实现\n```javascript\nparser:{\n dataUrlCondition:{\n maxSize: 8*1024\n }\n}\n```\n如果想继续用这些loader可以添加type: 'javascript/auto'属性值","slug":"file-loader,url-loader在webpack5中废弃，改用asset_module","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwit000lost2d0lk7h56","content":"<p>之前版本file-loader,url-loader能够处理输出css样式中的图片和字体文件，webpack5已经可以使用内建的资源模块类型(asset module type)，html中的img标签图片还需要使用html-loader。<br>资源模块类型可以规定以下4种type属性值<br>type: asset/resource 之前版本的 file-loader 功能<br>type: asset/inline 之前版本的url-loader 输出为base64编码<br>type: asset/source 之前版本的raw-loader 导出源代码<br>type: asset 之前版本的url-loader 这个可以规定小于多少kb时输出base64编码</p>\n<p>自定义输出文件名</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token literal-property property\">generator</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'[hash:6][ext][query]'</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>或者在output对象添加assetModuleFilename: ‘images/[hash][ext][query]</p>\n<p>url-loader能在小于规定kb时自动把图片转为base64编码，现在使用以下实现</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token literal-property property\">parser</span><span class=\"token operator\">:</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">dataUrlCondition</span><span class=\"token operator\">:</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">maxSize</span><span class=\"token operator\">:</span> <span class=\"token number\">8</span><span class=\"token operator\">*</span><span class=\"token number\">1024</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>如果想继续用这些loader可以添加type: ‘javascript/auto’属性值</p>\n","site":{"data":{}},"excerpt":"","more":"<p>之前版本file-loader,url-loader能够处理输出css样式中的图片和字体文件，webpack5已经可以使用内建的资源模块类型(asset module type)，html中的img标签图片还需要使用html-loader。<br>资源模块类型可以规定以下4种type属性值<br>type: asset/resource 之前版本的 file-loader 功能<br>type: asset/inline 之前版本的url-loader 输出为base64编码<br>type: asset/source 之前版本的raw-loader 导出源代码<br>type: asset 之前版本的url-loader 这个可以规定小于多少kb时输出base64编码</p>\n<p>自定义输出文件名</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token literal-property property\">generator</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">filename</span><span class=\"token operator\">:</span> <span class=\"token string\">'[hash:6][ext][query]'</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>或者在output对象添加assetModuleFilename: ‘images/[hash][ext][query]</p>\n<p>url-loader能在小于规定kb时自动把图片转为base64编码，现在使用以下实现</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token literal-property property\">parser</span><span class=\"token operator\">:</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">dataUrlCondition</span><span class=\"token operator\">:</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">maxSize</span><span class=\"token operator\">:</span> <span class=\"token number\">8</span><span class=\"token operator\">*</span><span class=\"token number\">1024</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>如果想继续用这些loader可以添加type: ‘javascript/auto’属性值</p>\n"},{"title":"javascript图片转base64","date":"2021-09-21T02:30:00.000Z","_content":"\n\n```<input type=\"file\" id=\"a\" onChange=\"b()\">```\n文件上传后就会触发onChange,上传的图片文件可在获取到该dom节点后用files[0]去拿到这个图片\n```javascript\nvar pic = document.getElementById('a').files[0]\nvar tobase64 = new FileReader()\ntobase64.readAsDataURL(pic)\ntobase64.onload = function (e) { //onload会在读取成功后触发\n console.log(e.target.result)\n}\n```\n还有两个可能用的上的方法readAsArrayBuffer()和readAsText()\nreadAsArrayBuffer()返回的是arrayBuffer对象,readAsText()返回的是文本字符串，这个方法有还能接收第二个参数，指定字符串的编码类型，默认为UTF-8\n[FileReade API](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)","source":"_posts/javascript图片转base64.md","raw":"---\ntitle: javascript图片转base64\ndate: 2021/09/21 10:30:00\ncategories: \n - 前端编程\ntags: \n - JavaScript\n - 图片处理\n - base64\n---\n\n\n```<input type=\"file\" id=\"a\" onChange=\"b()\">```\n文件上传后就会触发onChange,上传的图片文件可在获取到该dom节点后用files[0]去拿到这个图片\n```javascript\nvar pic = document.getElementById('a').files[0]\nvar tobase64 = new FileReader()\ntobase64.readAsDataURL(pic)\ntobase64.onload = function (e) { //onload会在读取成功后触发\n console.log(e.target.result)\n}\n```\n还有两个可能用的上的方法readAsArrayBuffer()和readAsText()\nreadAsArrayBuffer()返回的是arrayBuffer对象,readAsText()返回的是文本字符串，这个方法有还能接收第二个参数，指定字符串的编码类型，默认为UTF-8\n[FileReade API](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)","slug":"javascript图片转base64","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwiv000qost2d4b65n1b","content":"<p><code><input type="file" id="a" onChange="b()"></code><br>文件上传后就会触发onChange,上传的图片文件可在获取到该dom节点后用files[0]去拿到这个图片</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> pic <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'a'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>files<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span>\n<span class=\"token keyword\">var</span> tobase64 <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FileReader</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\ntobase64<span class=\"token punctuation\">.</span><span class=\"token function\">readAsDataURL</span><span class=\"token punctuation\">(</span>pic<span class=\"token punctuation\">)</span>\ntobase64<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">onload</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">//onload会在读取成功后触发</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>还有两个可能用的上的方法readAsArrayBuffer()和readAsText()<br>readAsArrayBuffer()返回的是arrayBuffer对象,readAsText()返回的是文本字符串，这个方法有还能接收第二个参数，指定字符串的编码类型，默认为UTF-8<br><a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader\">FileReade API</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p><code><input type="file" id="a" onChange="b()"></code><br>文件上传后就会触发onChange,上传的图片文件可在获取到该dom节点后用files[0]去拿到这个图片</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> pic <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'a'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>files<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span>\n<span class=\"token keyword\">var</span> tobase64 <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">FileReader</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\ntobase64<span class=\"token punctuation\">.</span><span class=\"token function\">readAsDataURL</span><span class=\"token punctuation\">(</span>pic<span class=\"token punctuation\">)</span>\ntobase64<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">onload</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">//onload会在读取成功后触发</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">.</span>result<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>还有两个可能用的上的方法readAsArrayBuffer()和readAsText()<br>readAsArrayBuffer()返回的是arrayBuffer对象,readAsText()返回的是文本字符串，这个方法有还能接收第二个参数，指定字符串的编码类型，默认为UTF-8<br><a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader\">FileReade API</a></p>\n"},{"title":"jQuery在添加新元素或则替换元素后添加监听事件","date":"2022-08-06T14:30:00.000Z","_content":"\n\n在替换元素后，或则添加新元素后用`$('选择器').on('click',()=>{})`这样是监听不到的\n\njQ1.7版本时可以用delegate方法，之后被on方法取代，上面on方法不行是用的方法不对，需要这样写\n\n`$(document).on('click','选择器',()=>{})`,这样就能监听到新元素了","source":"_posts/jQuery在添加新元素或则替换元素后添加监听事件.md","raw":"---\ntitle: jQuery在添加新元素或则替换元素后添加监听事件\ndate: 2022/08/06 22:30:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n在替换元素后，或则添加新元素后用`$('选择器').on('click',()=>{})`这样是监听不到的\n\njQ1.7版本时可以用delegate方法，之后被on方法取代，上面on方法不行是用的方法不对，需要这样写\n\n`$(document).on('click','选择器',()=>{})`,这样就能监听到新元素了","slug":"jQuery在添加新元素或则替换元素后添加监听事件","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwiw000rost20urzeu01","content":"<p>在替换元素后，或则添加新元素后用<code>$('选择器').on('click',()=>{})</code>这样是监听不到的</p>\n<p>jQ1.7版本时可以用delegate方法，之后被on方法取代，上面on方法不行是用的方法不对，需要这样写</p>\n<p><code>$(document).on('click','选择器',()=>{})</code>,这样就能监听到新元素了</p>\n","site":{"data":{}},"excerpt":"","more":"<p>在替换元素后，或则添加新元素后用<code>$('选择器').on('click',()=>{})</code>这样是监听不到的</p>\n<p>jQ1.7版本时可以用delegate方法，之后被on方法取代，上面on方法不行是用的方法不对，需要这样写</p>\n<p><code>$(document).on('click','选择器',()=>{})</code>,这样就能监听到新元素了</p>\n"},{"title":"nodejs把响应内容保存到本地，而不是打开","date":"2021-10-02T11:14:00.000Z","_content":"\n\n创建一个nodejs应用时，在res.end(？)输出一个图片时，他是直接显示在网页上的，以下这个例子\n\n![请输入图片描述][1]\n\n我们也经常看到点击下载按钮就可以下载图片，在nodejs中想要下载保存到本地就需要向response响应中添加响应头headers，nodejs中使用response.writeHead()去添加响应头，想要做到下载功能就要把\n```\nres.writeHead(200,{'Content-Disposition':'attachment;filename=example.png'})\n```\n添加到响应头对象中。Content-Disposition有两个属性值，当你不设置Content-Disposition属性时，就是用inline作为默认值，即是上图中直接显示在浏览器中，当你设置了attachment作为属性值时，就能实现下载功能，example.png是浏览器显示的下载文件名，可自行更改为变量或常量，如下\n\n![请输入图片描述][2]\n\n这里补充一下，上面的例子是用http请求网络图片资源，如果要获取自己服务器磁盘上资源时可以用fs.readFile('filePath',function(ress){})方法去获取,其他代码不变，回调函数的ress参数有data事件能在读取数据时触发回调函数，参数chunk就是一段文件的Buffer数据,把data事件中获取的每段Buffer数据保存在数组中，最后用Buffer.concat()去合并，结果就是整个文件的Buffer数据了\n\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589769ceea51cdcb1e97c974d42e7845675/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c58925fda2aad032d50ea8a6266dc86cb4b0/0.png","source":"_posts/nodejs把响应内容保存到本地，而不是打开.md","raw":"---\ntitle: nodejs把响应内容保存到本地，而不是打开\ndate: 2021/10/02 19:14:00\ncategories: \n - 前端编程\ntags: \n - Nodejs\n - 图片\n - 下载\n---\n\n\n创建一个nodejs应用时，在res.end(？)输出一个图片时，他是直接显示在网页上的，以下这个例子\n\n![请输入图片描述][1]\n\n我们也经常看到点击下载按钮就可以下载图片，在nodejs中想要下载保存到本地就需要向response响应中添加响应头headers，nodejs中使用response.writeHead()去添加响应头，想要做到下载功能就要把\n```\nres.writeHead(200,{'Content-Disposition':'attachment;filename=example.png'})\n```\n添加到响应头对象中。Content-Disposition有两个属性值，当你不设置Content-Disposition属性时，就是用inline作为默认值，即是上图中直接显示在浏览器中，当你设置了attachment作为属性值时，就能实现下载功能，example.png是浏览器显示的下载文件名，可自行更改为变量或常量，如下\n\n![请输入图片描述][2]\n\n这里补充一下，上面的例子是用http请求网络图片资源，如果要获取自己服务器磁盘上资源时可以用fs.readFile('filePath',function(ress){})方法去获取,其他代码不变，回调函数的ress参数有data事件能在读取数据时触发回调函数，参数chunk就是一段文件的Buffer数据,把data事件中获取的每段Buffer数据保存在数组中，最后用Buffer.concat()去合并，结果就是整个文件的Buffer数据了\n\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589769ceea51cdcb1e97c974d42e7845675/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c58925fda2aad032d50ea8a6266dc86cb4b0/0.png","slug":"nodejs把响应内容保存到本地，而不是打开","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwiy000vost21xp54dly","content":"<p>创建一个nodejs应用时，在res.end(？)输出一个图片时，他是直接显示在网页上的，以下这个例子</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589769ceea51cdcb1e97c974d42e7845675/0.png\" alt=\"请输入图片描述\"></p>\n<p>我们也经常看到点击下载按钮就可以下载图片，在nodejs中想要下载保存到本地就需要向response响应中添加响应头headers，nodejs中使用response.writeHead()去添加响应头，想要做到下载功能就要把</p>\n<pre class=\"line-numbers language-none\"><code class=\"language-none\">res.writeHead(200,{'Content-Disposition':'attachment;filename=example.png'})<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n<p>添加到响应头对象中。Content-Disposition有两个属性值，当你不设置Content-Disposition属性时，就是用inline作为默认值，即是上图中直接显示在浏览器中，当你设置了attachment作为属性值时，就能实现下载功能，example.png是浏览器显示的下载文件名，可自行更改为变量或常量，如下</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c58925fda2aad032d50ea8a6266dc86cb4b0/0.png\" alt=\"请输入图片描述\"></p>\n<p>这里补充一下，上面的例子是用http请求网络图片资源，如果要获取自己服务器磁盘上资源时可以用fs.readFile(‘filePath’,function(ress){})方法去获取,其他代码不变，回调函数的ress参数有data事件能在读取数据时触发回调函数，参数chunk就是一段文件的Buffer数据,把data事件中获取的每段Buffer数据保存在数组中，最后用Buffer.concat()去合并，结果就是整个文件的Buffer数据了</p>\n","site":{"data":{}},"excerpt":"","more":"<p>创建一个nodejs应用时，在res.end(？)输出一个图片时，他是直接显示在网页上的，以下这个例子</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589769ceea51cdcb1e97c974d42e7845675/0.png\" alt=\"请输入图片描述\"></p>\n<p>我们也经常看到点击下载按钮就可以下载图片，在nodejs中想要下载保存到本地就需要向response响应中添加响应头headers，nodejs中使用response.writeHead()去添加响应头，想要做到下载功能就要把</p>\n<pre class=\"line-numbers language-none\"><code class=\"language-none\">res.writeHead(200,{'Content-Disposition':'attachment;filename=example.png'})<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n<p>添加到响应头对象中。Content-Disposition有两个属性值，当你不设置Content-Disposition属性时，就是用inline作为默认值，即是上图中直接显示在浏览器中，当你设置了attachment作为属性值时，就能实现下载功能，example.png是浏览器显示的下载文件名，可自行更改为变量或常量，如下</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c58925fda2aad032d50ea8a6266dc86cb4b0/0.png\" alt=\"请输入图片描述\"></p>\n<p>这里补充一下，上面的例子是用http请求网络图片资源，如果要获取自己服务器磁盘上资源时可以用fs.readFile(‘filePath’,function(ress){})方法去获取,其他代码不变，回调函数的ress参数有data事件能在读取数据时触发回调函数，参数chunk就是一段文件的Buffer数据,把data事件中获取的每段Buffer数据保存在数组中，最后用Buffer.concat()去合并，结果就是整个文件的Buffer数据了</p>\n"},{"title":"scroll滚动兼容性","date":"2021-12-04T16:18:00.000Z","desc":null,"keywords":null,"sharePic":null,"thumb":null,"video":null,"_content":"\n\n安卓测试的是极速浏览器(基于Chromium 73内核)国内浏览器和Chrome浏览器\n\n分别试了两种js和一种jQuery滚动方法\n```javascript\nwindow.scroll(x,y) //window.scrollY(获取垂直滚动距离)window.scrollX(获取水平滚动距离)\ndocument.documentElement.scrollTop = y\n$('html').scrollTop = y\n```\n在极速浏览器中只有window.scroll(x,y)才能生效，Chrome浏览器三种方法都能用","source":"_posts/scroll滚动兼容性.md","raw":"---\ntitle: scroll滚动兼容性\ndate: 2021/12/05 00:18:00\ncategories: \n - 前端编程\ntags: \n - JavaScript\n - 网页滚动\ndesc: \nkeywords: \nsharePic: \nthumb: \nvideo: \n---\n\n\n安卓测试的是极速浏览器(基于Chromium 73内核)国内浏览器和Chrome浏览器\n\n分别试了两种js和一种jQuery滚动方法\n```javascript\nwindow.scroll(x,y) //window.scrollY(获取垂直滚动距离)window.scrollX(获取水平滚动距离)\ndocument.documentElement.scrollTop = y\n$('html').scrollTop = y\n```\n在极速浏览器中只有window.scroll(x,y)才能生效，Chrome浏览器三种方法都能用","slug":"scroll滚动兼容性","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwiz000yost2gnx24xba","content":"<p>安卓测试的是极速浏览器(基于Chromium 73内核)国内浏览器和Chrome浏览器</p>\n<p>分别试了两种js和一种jQuery滚动方法</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">window<span class=\"token punctuation\">.</span><span class=\"token function\">scroll</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span>y<span class=\"token punctuation\">)</span> <span class=\"token comment\">//window.scrollY(获取垂直滚动距离)window.scrollX(获取水平滚动距离)</span>\ndocument<span class=\"token punctuation\">.</span>documentElement<span class=\"token punctuation\">.</span>scrollTop <span class=\"token operator\">=</span> y\n<span class=\"token function\">$</span><span class=\"token punctuation\">(</span><span class=\"token string\">'html'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>scrollTop <span class=\"token operator\">=</span> y<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>在极速浏览器中只有window.scroll(x,y)才能生效，Chrome浏览器三种方法都能用</p>\n","site":{"data":{}},"excerpt":"","more":"<p>安卓测试的是极速浏览器(基于Chromium 73内核)国内浏览器和Chrome浏览器</p>\n<p>分别试了两种js和一种jQuery滚动方法</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">window<span class=\"token punctuation\">.</span><span class=\"token function\">scroll</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span>y<span class=\"token punctuation\">)</span> <span class=\"token comment\">//window.scrollY(获取垂直滚动距离)window.scrollX(获取水平滚动距离)</span>\ndocument<span class=\"token punctuation\">.</span>documentElement<span class=\"token punctuation\">.</span>scrollTop <span class=\"token operator\">=</span> y\n<span class=\"token function\">$</span><span class=\"token punctuation\">(</span><span class=\"token string\">'html'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>scrollTop <span class=\"token operator\">=</span> y<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n<p>在极速浏览器中只有window.scroll(x,y)才能生效，Chrome浏览器三种方法都能用</p>\n"},{"title":"vuejs标签/选项卡切换效果","date":"2021-09-08T12:38:00.000Z","_content":"\n\n相信有看到过很多这种常用的效果，切换上面不同的按钮显示不同内容，vuejs可以很容易实现这种效果\n\n![请输入图片描述][1]\n\n在vuejs中有一个component标签，这个标签有个is属性，通过v-bind绑定这个属性就可以切换不同的组件，下面写了个例子\n\n![请输入图片描述][2]\n\n引入两个组件tabOne和tabTwo并注册，component标签绑定的is属性值在data()中通过tab来改值，然后通过one和two两个函数改变tab的值，值就是组件名称，点击两个按钮后就会发现显示的是两个不同组件了\n\n![请输入图片描述][3]\n\n这里也出现另一种情况，切换回来的时候输入框里面的内容没了？在切换不同组件时都是新创建实例的，所以会出现组件默认状态，input是默认没输入的，123是我自己输入的，所以切换回去输入框为空。\n如果想保留切换之前的状态，可以使用keep-alive缓存标签\n\n![请输入图片描述][4]\n\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5899afa74b875bc5305588db695769807bc/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5892514c0c3b4cd77014db22648520f17ba/0.png\n [3]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589ac6dedcec008fd6db0d835246583ff00/0.png\n [4]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589c0e487c71c0f24a1d289cf83ae39542c/0.png","source":"_posts/vuejs标签_选项卡切换效果.md","raw":"---\ntitle: vuejs标签/选项卡切换效果\ndate: 2021/09/08 20:38:00\ncategories: \n - 前端编程\ntags: \n - Vue\n---\n\n\n相信有看到过很多这种常用的效果，切换上面不同的按钮显示不同内容，vuejs可以很容易实现这种效果\n\n![请输入图片描述][1]\n\n在vuejs中有一个component标签，这个标签有个is属性，通过v-bind绑定这个属性就可以切换不同的组件，下面写了个例子\n\n![请输入图片描述][2]\n\n引入两个组件tabOne和tabTwo并注册，component标签绑定的is属性值在data()中通过tab来改值，然后通过one和two两个函数改变tab的值，值就是组件名称，点击两个按钮后就会发现显示的是两个不同组件了\n\n![请输入图片描述][3]\n\n这里也出现另一种情况，切换回来的时候输入框里面的内容没了？在切换不同组件时都是新创建实例的，所以会出现组件默认状态，input是默认没输入的，123是我自己输入的，所以切换回去输入框为空。\n如果想保留切换之前的状态，可以使用keep-alive缓存标签\n\n![请输入图片描述][4]\n\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5899afa74b875bc5305588db695769807bc/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5892514c0c3b4cd77014db22648520f17ba/0.png\n [3]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589ac6dedcec008fd6db0d835246583ff00/0.png\n [4]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589c0e487c71c0f24a1d289cf83ae39542c/0.png","slug":"vuejs标签_选项卡切换效果","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwj10012ost27tdf1m75","content":"<p>相信有看到过很多这种常用的效果，切换上面不同的按钮显示不同内容，vuejs可以很容易实现这种效果</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5899afa74b875bc5305588db695769807bc/0.png\" alt=\"请输入图片描述\"></p>\n<p>在vuejs中有一个component标签，这个标签有个is属性，通过v-bind绑定这个属性就可以切换不同的组件，下面写了个例子</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5892514c0c3b4cd77014db22648520f17ba/0.png\" alt=\"请输入图片描述\"></p>\n<p>引入两个组件tabOne和tabTwo并注册，component标签绑定的is属性值在data()中通过tab来改值，然后通过one和two两个函数改变tab的值，值就是组件名称，点击两个按钮后就会发现显示的是两个不同组件了</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589ac6dedcec008fd6db0d835246583ff00/0.png\" alt=\"请输入图片描述\"></p>\n<p>这里也出现另一种情况，切换回来的时候输入框里面的内容没了？在切换不同组件时都是新创建实例的，所以会出现组件默认状态，input是默认没输入的，123是我自己输入的，所以切换回去输入框为空。<br>如果想保留切换之前的状态，可以使用keep-alive缓存标签</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589c0e487c71c0f24a1d289cf83ae39542c/0.png\" alt=\"请输入图片描述\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>相信有看到过很多这种常用的效果，切换上面不同的按钮显示不同内容，vuejs可以很容易实现这种效果</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5899afa74b875bc5305588db695769807bc/0.png\" alt=\"请输入图片描述\"></p>\n<p>在vuejs中有一个component标签，这个标签有个is属性，通过v-bind绑定这个属性就可以切换不同的组件，下面写了个例子</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5892514c0c3b4cd77014db22648520f17ba/0.png\" alt=\"请输入图片描述\"></p>\n<p>引入两个组件tabOne和tabTwo并注册，component标签绑定的is属性值在data()中通过tab来改值，然后通过one和two两个函数改变tab的值，值就是组件名称，点击两个按钮后就会发现显示的是两个不同组件了</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589ac6dedcec008fd6db0d835246583ff00/0.png\" alt=\"请输入图片描述\"></p>\n<p>这里也出现另一种情况，切换回来的时候输入框里面的内容没了？在切换不同组件时都是新创建实例的，所以会出现组件默认状态，input是默认没输入的，123是我自己输入的，所以切换回去输入框为空。<br>如果想保留切换之前的状态，可以使用keep-alive缓存标签</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589c0e487c71c0f24a1d289cf83ae39542c/0.png\" alt=\"请输入图片描述\"></p>\n"},{"title":"webpack-dev-server报webpack-cli not found错误","date":"2022-03-05T19:11:00.000Z","_content":"\n\nwebpack-dev-server4.0.0之前用npx webpack-dev-server启动本地服务器，webpack>=4.0.0后用这个命令会报webpack-cli not found,需要用webpack serve来启动server服务,并且static属性来提供服务路径","source":"_posts/webpack-dev-server报webpack-cli_not_found错误.md","raw":"---\ntitle: webpack-dev-server报webpack-cli not found错误\ndate: 2022/03/06 03:11:00\ncategories: \n - 前端编程\ntags: \n---\n\n\nwebpack-dev-server4.0.0之前用npx webpack-dev-server启动本地服务器，webpack>=4.0.0后用这个命令会报webpack-cli not found,需要用webpack serve来启动server服务,并且static属性来提供服务路径","slug":"webpack-dev-server报webpack-cli_not_found错误","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwj20015ost2ev1qabvv","content":"<p>webpack-dev-server4.0.0之前用npx webpack-dev-server启动本地服务器，webpack>=4.0.0后用这个命令会报webpack-cli not found,需要用webpack serve来启动server服务,并且static属性来提供服务路径</p>\n","site":{"data":{}},"excerpt":"","more":"<p>webpack-dev-server4.0.0之前用npx webpack-dev-server启动本地服务器，webpack>=4.0.0后用这个命令会报webpack-cli not found,需要用webpack serve来启动server服务,并且static属性来提供服务路径</p>\n"},{"title":"利用github actions自动执行Node.js脚本","date":"2022-09-21T20:16:50.000Z","_content":"> 上一篇爬取澎湃热榜里说到node-schedule定时任务，但在白嫖Vercel无服务函数时并不会执行这个包，无奈只能另想它法\n\n这里使用**免费**的github actions\n\n首先在仓库下新建文件```.github/workflows/abc.yml```,文件名随便取\n\n```yml\nname: coupons //自定义\non:\n schedule: \n - cron: '5 7-23 * * *' //cron表达式，用于将任务放置队列\n workflow_dispatch: //定义这个可以手动执行，否者不会显示手动执行按钮\njobs:\n run-coupons: //这个也可以自定义，只是显示\n runs-on: ubuntu-latest //运行在最新ubuntu\n steps: // 这个就是执行步骤\n - uses: actions/checkout@master\n - name: Setup Node.js\n uses: actions/setup-node@v2 //设置运行时的nodejs环境\n with:\n node-version: '16' // 16版本的nodejs\n - name: Install Dependency \n run:\n npm install axios //不push node_modules就要安装\n node ./index.js //运行根目录index.js文件\n```\n\n在本地push到仓库时，如果不```push node_modules```模块文件夹，那就需要在添加```npm install 模块名```,比如index.js要用到axios，那就```npm install axios```去安装。还有```push package.json```，那么只需要```npm install```就会安装全部依赖\n\n重要的提示一下，设置的cron表达式并不是说设置了 ```0 * * * *```就会每小时0分执行脚本，它只是把执行放入队列，真正执行可能时稍后几分钟，或者不会执行，想精确定时任务这种是达不到要求的","source":"_posts/利用github-actions自动执行Node-js脚本.md","raw":"title: 利用github actions自动执行Node.js脚本\ntags: []\ncategories:\n - 后端编程\ndate: '2022-09-21T20:16:50.000Z'\n---\n> 上一篇爬取澎湃热榜里说到node-schedule定时任务，但在白嫖Vercel无服务函数时并不会执行这个包，无奈只能另想它法\n\n这里使用**免费**的github actions\n\n首先在仓库下新建文件```.github/workflows/abc.yml```,文件名随便取\n\n```yml\nname: coupons //自定义\non:\n schedule: \n - cron: '5 7-23 * * *' //cron表达式，用于将任务放置队列\n workflow_dispatch: //定义这个可以手动执行，否者不会显示手动执行按钮\njobs:\n run-coupons: //这个也可以自定义，只是显示\n runs-on: ubuntu-latest //运行在最新ubuntu\n steps: // 这个就是执行步骤\n - uses: actions/checkout@master\n - name: Setup Node.js\n uses: actions/setup-node@v2 //设置运行时的nodejs环境\n with:\n node-version: '16' // 16版本的nodejs\n - name: Install Dependency \n run:\n npm install axios //不push node_modules就要安装\n node ./index.js //运行根目录index.js文件\n```\n\n在本地push到仓库时，如果不```push node_modules```模块文件夹，那就需要在添加```npm install 模块名```,比如index.js要用到axios，那就```npm install axios```去安装。还有```push package.json```，那么只需要```npm install```就会安装全部依赖\n\n重要的提示一下，设置的cron表达式并不是说设置了 ```0 * * * *```就会每小时0分执行脚本，它只是把执行放入队列，真正执行可能时稍后几分钟，或者不会执行，想精确定时任务这种是达不到要求的","slug":"利用github-actions自动执行Node-js脚本","published":1,"updated":"2022-10-02T20:29:06.170Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwj30018ost2auhv7u6e","content":"<blockquote>\n<p>上一篇爬取澎湃热榜里说到node-schedule定时任务，但在白嫖Vercel无服务函数时并不会执行这个包，无奈只能另想它法</p>\n</blockquote>\n<p>这里使用<strong>免费</strong>的github actions</p>\n<p>首先在仓库下新建文件<code>.github/workflows/abc.yml</code>,文件名随便取</p>\n<pre class=\"line-numbers language-yaml\" data-language=\"yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> coupons //自定义\n<span class=\"token key atrule\">on</span><span class=\"token punctuation\">:</span>\n <span class=\"token key atrule\">schedule</span><span class=\"token punctuation\">:</span> \n <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">cron</span><span class=\"token punctuation\">:</span> '5 7<span class=\"token punctuation\">-</span>23 * * <span class=\"token important\">*'</span> //cron表达式，用于将任务放置队列\n <span class=\"token key atrule\">workflow_dispatch</span><span class=\"token punctuation\">:</span> //定义这个可以手动执行，否者不会显示手动执行按钮\n<span class=\"token key atrule\">jobs</span><span class=\"token punctuation\">:</span>\n <span class=\"token key atrule\">run-coupons</span><span class=\"token punctuation\">:</span> //这个也可以自定义，只是显示\n <span class=\"token key atrule\">runs-on</span><span class=\"token punctuation\">:</span> ubuntu<span class=\"token punctuation\">-</span>latest //运行在最新ubuntu\n <span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span> // 这个就是执行步骤\n <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/checkout@master\n <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Setup Node.js\n <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/setup<span class=\"token punctuation\">-</span>node@v2 //设置运行时的nodejs环境\n <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\n <span class=\"token key atrule\">node-version</span><span class=\"token punctuation\">:</span> '16' // 16版本的nodejs\n <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Install Dependency \n <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span>\n npm install axios //不push node_modules就要安装\n node ./index.js //运行根目录index.js文件<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n<p>在本地push到仓库时，如果不<code>push node_modules</code>模块文件夹，那就需要在添加<code>npm install 模块名</code>,比如index.js要用到axios，那就<code>npm install axios</code>去安装。还有<code>push package.json</code>，那么只需要<code>npm install</code>就会安装全部依赖</p>\n<p>重要的提示一下，设置的cron表达式并不是说设置了 <code>0 * * * *</code>就会每小时0分执行脚本，它只是把执行放入队列，真正执行可能时稍后几分钟，或者不会执行，想精确定时任务这种是达不到要求的</p>\n","site":{"data":{}},"excerpt":"","more":"<blockquote>\n<p>上一篇爬取澎湃热榜里说到node-schedule定时任务，但在白嫖Vercel无服务函数时并不会执行这个包，无奈只能另想它法</p>\n</blockquote>\n<p>这里使用<strong>免费</strong>的github actions</p>\n<p>首先在仓库下新建文件<code>.github/workflows/abc.yml</code>,文件名随便取</p>\n<pre class=\"line-numbers language-yaml\" data-language=\"yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> coupons //自定义\n<span class=\"token key atrule\">on</span><span class=\"token punctuation\">:</span>\n <span class=\"token key atrule\">schedule</span><span class=\"token punctuation\">:</span> \n <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">cron</span><span class=\"token punctuation\">:</span> '5 7<span class=\"token punctuation\">-</span>23 * * <span class=\"token important\">*'</span> //cron表达式，用于将任务放置队列\n <span class=\"token key atrule\">workflow_dispatch</span><span class=\"token punctuation\">:</span> //定义这个可以手动执行，否者不会显示手动执行按钮\n<span class=\"token key atrule\">jobs</span><span class=\"token punctuation\">:</span>\n <span class=\"token key atrule\">run-coupons</span><span class=\"token punctuation\">:</span> //这个也可以自定义，只是显示\n <span class=\"token key atrule\">runs-on</span><span class=\"token punctuation\">:</span> ubuntu<span class=\"token punctuation\">-</span>latest //运行在最新ubuntu\n <span class=\"token key atrule\">steps</span><span class=\"token punctuation\">:</span> // 这个就是执行步骤\n <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/checkout@master\n <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Setup Node.js\n <span class=\"token key atrule\">uses</span><span class=\"token punctuation\">:</span> actions/setup<span class=\"token punctuation\">-</span>node@v2 //设置运行时的nodejs环境\n <span class=\"token key atrule\">with</span><span class=\"token punctuation\">:</span>\n <span class=\"token key atrule\">node-version</span><span class=\"token punctuation\">:</span> '16' // 16版本的nodejs\n <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> Install Dependency \n <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span>\n npm install axios //不push node_modules就要安装\n node ./index.js //运行根目录index.js文件<span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n<p>在本地push到仓库时，如果不<code>push node_modules</code>模块文件夹，那就需要在添加<code>npm install 模块名</code>,比如index.js要用到axios，那就<code>npm install axios</code>去安装。还有<code>push package.json</code>，那么只需要<code>npm install</code>就会安装全部依赖</p>\n<p>重要的提示一下，设置的cron表达式并不是说设置了 <code>0 * * * *</code>就会每小时0分执行脚本，它只是把执行放入队列，真正执行可能时稍后几分钟，或者不会执行，想精确定时任务这种是达不到要求的</p>\n"},{"title":"使用AbortController中止http请求","date":"2022-08-08T15:51:00.000Z","_content":"\n\nAbortController可以中止Fetch请求，在Axios的0.22.0版本后也可以使用该方法。\n```javascript\nvar controller=new AbortController()\nvar signal=controller.signal\nfunction mydata(){\n fetch('/api',{signal:signal}).then()\n} \n```\n使用`controller.abort()`即可中止存在`{signal:signal}`信号的请求\n\n### 存在的问题\n当第二次使用该请求时会发现无法再次发送请求，这个问题的原因是controller.abort()中止请求后[signal的aborted属性就为true](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortSignal)(表示已中止了请求)，导致了无法再次发送请求，所以解决办法就是把用过的AbortController实例清空重新创建新实例\n```javascript\n var controller=null\n var signal=null\n function mydata(){\n controller=new AbortController()\n signal=controller.signal\n fetch('/api',{signal:signal}).then()\n } \n function abort(){\n if(controller){\n controller.abort()\n controller=null\n }\n } \n```\n上面代码abort中止函数会判断是否有AbortController实例controller，如果有就中止它并且清空中止后的实例，在下次请求时会创建一个新实例，拿到的就是新的signal，就不会存在无法发送请求的情况\n\n","source":"_posts/使用AbortController中止http请求.md","raw":"---\ntitle: 使用AbortController中止http请求\ndate: 2022/08/08 23:51:00\ncategories: \n - 前端编程\ntags: \n---\n\n\nAbortController可以中止Fetch请求，在Axios的0.22.0版本后也可以使用该方法。\n```javascript\nvar controller=new AbortController()\nvar signal=controller.signal\nfunction mydata(){\n fetch('/api',{signal:signal}).then()\n} \n```\n使用`controller.abort()`即可中止存在`{signal:signal}`信号的请求\n\n### 存在的问题\n当第二次使用该请求时会发现无法再次发送请求，这个问题的原因是controller.abort()中止请求后[signal的aborted属性就为true](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortSignal)(表示已中止了请求)，导致了无法再次发送请求，所以解决办法就是把用过的AbortController实例清空重新创建新实例\n```javascript\n var controller=null\n var signal=null\n function mydata(){\n controller=new AbortController()\n signal=controller.signal\n fetch('/api',{signal:signal}).then()\n } \n function abort(){\n if(controller){\n controller.abort()\n controller=null\n }\n } \n```\n上面代码abort中止函数会判断是否有AbortController实例controller，如果有就中止它并且清空中止后的实例，在下次请求时会创建一个新实例，拿到的就是新的signal，就不会存在无法发送请求的情况\n\n","slug":"使用AbortController中止http请求","published":1,"updated":"2022-09-01T14:15:39.642Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwj5001bost27zwghyls","content":"<p>AbortController可以中止Fetch请求，在Axios的0.22.0版本后也可以使用该方法。</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> controller<span class=\"token operator\">=</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">AbortController</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">var</span> signal<span class=\"token operator\">=</span>controller<span class=\"token punctuation\">.</span>signal\n<span class=\"token keyword\">function</span> <span class=\"token function\">mydata</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'/api'</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span><span class=\"token literal-property property\">signal</span><span class=\"token operator\">:</span>signal<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span> <span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>使用<code>controller.abort()</code>即可中止存在<code>{signal:signal}</code>信号的请求</p>\n<h3 id=\"存在的问题\"><a href=\"#存在的问题\" class=\"headerlink\" title=\"存在的问题\"></a>存在的问题</h3><p>当第二次使用该请求时会发现无法再次发送请求，这个问题的原因是controller.abort()中止请求后<a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/AbortSignal\">signal的aborted属性就为true</a>(表示已中止了请求)，导致了无法再次发送请求，所以解决办法就是把用过的AbortController实例清空重新创建新实例</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> controller<span class=\"token operator\">=</span><span class=\"token keyword\">null</span>\n<span class=\"token keyword\">var</span> signal<span class=\"token operator\">=</span><span class=\"token keyword\">null</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">mydata</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n controller<span class=\"token operator\">=</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">AbortController</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n signal<span class=\"token operator\">=</span>controller<span class=\"token punctuation\">.</span>signal\n <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'/api'</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span><span class=\"token literal-property property\">signal</span><span class=\"token operator\">:</span>signal<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span> \n<span class=\"token keyword\">function</span> <span class=\"token function\">abort</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>controller<span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n controller<span class=\"token punctuation\">.</span><span class=\"token function\">abort</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n controller<span class=\"token operator\">=</span><span class=\"token keyword\">null</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span> <span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>上面代码abort中止函数会判断是否有AbortController实例controller，如果有就中止它并且清空中止后的实例，在下次请求时会创建一个新实例，拿到的就是新的signal，就不会存在无法发送请求的情况</p>\n","site":{"data":{}},"excerpt":"","more":"<p>AbortController可以中止Fetch请求，在Axios的0.22.0版本后也可以使用该方法。</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> controller<span class=\"token operator\">=</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">AbortController</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">var</span> signal<span class=\"token operator\">=</span>controller<span class=\"token punctuation\">.</span>signal\n<span class=\"token keyword\">function</span> <span class=\"token function\">mydata</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'/api'</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span><span class=\"token literal-property property\">signal</span><span class=\"token operator\">:</span>signal<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span> <span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>使用<code>controller.abort()</code>即可中止存在<code>{signal:signal}</code>信号的请求</p>\n<h3 id=\"存在的问题\"><a href=\"#存在的问题\" class=\"headerlink\" title=\"存在的问题\"></a>存在的问题</h3><p>当第二次使用该请求时会发现无法再次发送请求，这个问题的原因是controller.abort()中止请求后<a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/AbortSignal\">signal的aborted属性就为true</a>(表示已中止了请求)，导致了无法再次发送请求，所以解决办法就是把用过的AbortController实例清空重新创建新实例</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> controller<span class=\"token operator\">=</span><span class=\"token keyword\">null</span>\n<span class=\"token keyword\">var</span> signal<span class=\"token operator\">=</span><span class=\"token keyword\">null</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">mydata</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n controller<span class=\"token operator\">=</span><span class=\"token keyword\">new</span> <span class=\"token class-name\">AbortController</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n signal<span class=\"token operator\">=</span>controller<span class=\"token punctuation\">.</span>signal\n <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span><span class=\"token string\">'/api'</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span><span class=\"token literal-property property\">signal</span><span class=\"token operator\">:</span>signal<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">then</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span> \n<span class=\"token keyword\">function</span> <span class=\"token function\">abort</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>controller<span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n controller<span class=\"token punctuation\">.</span><span class=\"token function\">abort</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n controller<span class=\"token operator\">=</span><span class=\"token keyword\">null</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span> <span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>上面代码abort中止函数会判断是否有AbortController实例controller，如果有就中止它并且清空中止后的实例，在下次请求时会创建一个新实例，拿到的就是新的signal，就不会存在无法发送请求的情况</p>\n"},{"title":"事件委托(利用冒泡实现管理子元素","date":"2021-12-07T11:35:00.000Z","desc":null,"keywords":null,"sharePic":null,"thumb":null,"video":null,"_content":"\n\n刚看到别人写的JavaScript总结发现个事件委托，学了两年没印象了-_-，然后用强大的搜索引擎发现其实就是利用事件冒泡做的一个性能优化方案\n\n我把事件绑定到ul上，但点击了li也能触发，由里往外触发绑定的事件，这就是事件冒泡。\n![请输入图片描述][1]\n要获取li元素可以使用target属性，这个是通过触发点击事件时传入函数参数e(这个自定义名)获取的一个属性。e.target获取的就是点击的li元素，还有个currentTarget这个属性获取的就是绑定了事件的元素(ul)\n![请输入图片描述][2]\n\n在不用事件委托前都是用for循环li元素来为每个li绑定事件，如果有100？1000？个那就要循环很多次，现在用了事件委托只需要绑定一次就能处理多个子元素\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5893dc5435104d44e700850838f1b7dedb2/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589b6154fa0912fb65d66bcaa2ed32c5502/0.png","source":"_posts/事件委托(利用冒泡实现管理子元素.md","raw":"---\ntitle: 事件委托(利用冒泡实现管理子元素\ndate: 2021/12/07 19:35:00\ncategories: \n - 前端编程\ntags: \ndesc: \nkeywords: \nsharePic: \nthumb: \nvideo: \n---\n\n\n刚看到别人写的JavaScript总结发现个事件委托，学了两年没印象了-_-，然后用强大的搜索引擎发现其实就是利用事件冒泡做的一个性能优化方案\n\n我把事件绑定到ul上，但点击了li也能触发，由里往外触发绑定的事件，这就是事件冒泡。\n![请输入图片描述][1]\n要获取li元素可以使用target属性，这个是通过触发点击事件时传入函数参数e(这个自定义名)获取的一个属性。e.target获取的就是点击的li元素，还有个currentTarget这个属性获取的就是绑定了事件的元素(ul)\n![请输入图片描述][2]\n\n在不用事件委托前都是用for循环li元素来为每个li绑定事件，如果有100？1000？个那就要循环很多次，现在用了事件委托只需要绑定一次就能处理多个子元素\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5893dc5435104d44e700850838f1b7dedb2/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589b6154fa0912fb65d66bcaa2ed32c5502/0.png","slug":"事件委托(利用冒泡实现管理子元素","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwj6001eost2fo1z11x2","content":"<p>刚看到别人写的JavaScript总结发现个事件委托，学了两年没印象了-_-，然后用强大的搜索引擎发现其实就是利用事件冒泡做的一个性能优化方案</p>\n<p>我把事件绑定到ul上，但点击了li也能触发，由里往外触发绑定的事件，这就是事件冒泡。<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5893dc5435104d44e700850838f1b7dedb2/0.png\" alt=\"请输入图片描述\"><br>要获取li元素可以使用target属性，这个是通过触发点击事件时传入函数参数e(这个自定义名)获取的一个属性。e.target获取的就是点击的li元素，还有个currentTarget这个属性获取的就是绑定了事件的元素(ul)<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589b6154fa0912fb65d66bcaa2ed32c5502/0.png\" alt=\"请输入图片描述\"></p>\n<p>在不用事件委托前都是用for循环li元素来为每个li绑定事件，如果有100？1000？个那就要循环很多次，现在用了事件委托只需要绑定一次就能处理多个子元素</p>\n","site":{"data":{}},"excerpt":"","more":"<p>刚看到别人写的JavaScript总结发现个事件委托，学了两年没印象了-_-，然后用强大的搜索引擎发现其实就是利用事件冒泡做的一个性能优化方案</p>\n<p>我把事件绑定到ul上，但点击了li也能触发，由里往外触发绑定的事件，这就是事件冒泡。<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5893dc5435104d44e700850838f1b7dedb2/0.png\" alt=\"请输入图片描述\"><br>要获取li元素可以使用target属性，这个是通过触发点击事件时传入函数参数e(这个自定义名)获取的一个属性。e.target获取的就是点击的li元素，还有个currentTarget这个属性获取的就是绑定了事件的元素(ul)<br><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589b6154fa0912fb65d66bcaa2ed32c5502/0.png\" alt=\"请输入图片描述\"></p>\n<p>在不用事件委托前都是用for循环li元素来为每个li绑定事件，如果有100？1000？个那就要循环很多次，现在用了事件委托只需要绑定一次就能处理多个子元素</p>\n"},{"title":"正则的前瞻断言和后瞻断言","date":"2022-07-25T15:49:00.000Z","_content":"\n\n前瞻断言模式:`X(?=Y)`意思是X后面要跟着Y\n\n后瞻断言:`(?<=Y)X`意思是X前面是Y\n\n这两种模式都有否定断言，只需要把=换成!\n\n这两种匹配模式都不会匹配括号中的内容，像匹配html中img标签的src属性链接，匹配`<img src=\"https://abc.gif\" alt=\"Smiley face\" width=\"42\" height=\"42\">`,可以这样匹配`(?<=src=\").+(?=\" alt)`,这样就能拿到链接了","source":"_posts/正则的前瞻断言和后瞻断言.md","raw":"---\ntitle: 正则的前瞻断言和后瞻断言\ndate: 2022/07/25 23:49:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n前瞻断言模式:`X(?=Y)`意思是X后面要跟着Y\n\n后瞻断言:`(?<=Y)X`意思是X前面是Y\n\n这两种模式都有否定断言，只需要把=换成!\n\n这两种匹配模式都不会匹配括号中的内容，像匹配html中img标签的src属性链接，匹配`<img src=\"https://abc.gif\" alt=\"Smiley face\" width=\"42\" height=\"42\">`,可以这样匹配`(?<=src=\").+(?=\" alt)`,这样就能拿到链接了","slug":"正则的前瞻断言和后瞻断言","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwj7001iost2ci8scpjz","content":"<p>前瞻断言模式:<code>X(?=Y)</code>意思是X后面要跟着Y</p>\n<p>后瞻断言:<code>(?<=Y)X</code>意思是X前面是Y</p>\n<p>这两种模式都有否定断言，只需要把=换成!</p>\n<p>这两种匹配模式都不会匹配括号中的内容，像匹配html中img标签的src属性链接，匹配<code><img src="https://abc.gif" alt="Smiley face" width="42" height="42"></code>,可以这样匹配<code>(?<=src=").+(?=" alt)</code>,这样就能拿到链接了</p>\n","site":{"data":{}},"excerpt":"","more":"<p>前瞻断言模式:<code>X(?=Y)</code>意思是X后面要跟着Y</p>\n<p>后瞻断言:<code>(?<=Y)X</code>意思是X前面是Y</p>\n<p>这两种模式都有否定断言，只需要把=换成!</p>\n<p>这两种匹配模式都不会匹配括号中的内容，像匹配html中img标签的src属性链接，匹配<code><img src="https://abc.gif" alt="Smiley face" width="42" height="42"></code>,可以这样匹配<code>(?<=src=").+(?=" alt)</code>,这样就能拿到链接了</p>\n"},{"title":"数组的map()方法对数组里对象的合并处理","date":"2021-11-22T01:50:00.000Z","_content":"\n\n假设有以下两个数组\n\n两个数组中都有name属性值为小明的对象，第二个数组中多了一个QQ的属性，现在想把这个QQ合并到第一个数组中，可以使用**map()**方法进行合并处理\n\n\nmap()其实也是循环方法，item1为当前循环的数组元素，也就是里面的对象。首先用filter去过滤出arr2中是否包含当前item1的name相同的对象，如果找到(**filter.length!=0**)就能把第二个数组中过滤出的对象属性赋值给第一个数组的当前对象属性(**item1.QQ=filter[0].QQ**),然后return这个item1，**如果不进行return，那返回的是undefined,所以记得一定要返回。**\n还有如果第二个数组的小明对象有很多个属性，想把里面的属性全部合并给第一个数组，那可以用ES6对象方法**Object.assign(to,from)**去合并两个对象，相同属性的话后面属性会覆盖前面属性","source":"_posts/数组的map()方法对数组里对象的合并处理.md","raw":"---\ntitle: 数组的map()方法对数组里对象的合并处理\ndate: 2021/11/22 09:50:00\ncategories: \n - 前端编程\ntags: \n - JavaScript\n - js数组处理\n - 数组过滤\n---\n\n\n假设有以下两个数组\n\n两个数组中都有name属性值为小明的对象，第二个数组中多了一个QQ的属性，现在想把这个QQ合并到第一个数组中，可以使用**map()**方法进行合并处理\n\n\nmap()其实也是循环方法，item1为当前循环的数组元素，也就是里面的对象。首先用filter去过滤出arr2中是否包含当前item1的name相同的对象，如果找到(**filter.length!=0**)就能把第二个数组中过滤出的对象属性赋值给第一个数组的当前对象属性(**item1.QQ=filter[0].QQ**),然后return这个item1，**如果不进行return，那返回的是undefined,所以记得一定要返回。**\n还有如果第二个数组的小明对象有很多个属性，想把里面的属性全部合并给第一个数组，那可以用ES6对象方法**Object.assign(to,from)**去合并两个对象，相同属性的话后面属性会覆盖前面属性","slug":"数组的map()方法对数组里对象的合并处理","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwj8001kost26m2sfabr","content":"<p>假设有以下两个数组<br><img src=\"https://cdn.jsdelivr.net/gh/lqdahv2/blogImg/typecho/map%E6%96%B9%E6%B3%95%E5%90%88%E5%B9%B61.png\"><br>两个数组中都有name属性值为小明的对象，第二个数组中多了一个QQ的属性，现在想把这个QQ合并到第一个数组中，可以使用**map()**方法进行合并处理</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/lqdahv2/blogImg/typecho/map%E6%96%B9%E6%B3%95%E5%90%88%E5%B9%B62.png\"><br>map()其实也是循环方法，item1为当前循环的数组元素，也就是里面的对象。首先用filter去过滤出arr2中是否包含当前item1的name相同的对象，如果找到(<strong>filter.length!=0</strong>)就能把第二个数组中过滤出的对象属性赋值给第一个数组的当前对象属性(<strong>item1.QQ=filter[0].QQ</strong>),然后return这个item1，<strong>如果不进行return，那返回的是undefined,所以记得一定要返回。</strong><br>还有如果第二个数组的小明对象有很多个属性，想把里面的属性全部合并给第一个数组，那可以用ES6对象方法**Object.assign(to,from)**去合并两个对象，相同属性的话后面属性会覆盖前面属性</p>\n","site":{"data":{}},"excerpt":"","more":"<p>假设有以下两个数组<br><img src=\"https://cdn.jsdelivr.net/gh/lqdahv2/blogImg/typecho/map%E6%96%B9%E6%B3%95%E5%90%88%E5%B9%B61.png\"><br>两个数组中都有name属性值为小明的对象，第二个数组中多了一个QQ的属性，现在想把这个QQ合并到第一个数组中，可以使用**map()**方法进行合并处理</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/lqdahv2/blogImg/typecho/map%E6%96%B9%E6%B3%95%E5%90%88%E5%B9%B62.png\"><br>map()其实也是循环方法，item1为当前循环的数组元素，也就是里面的对象。首先用filter去过滤出arr2中是否包含当前item1的name相同的对象，如果找到(<strong>filter.length!=0</strong>)就能把第二个数组中过滤出的对象属性赋值给第一个数组的当前对象属性(<strong>item1.QQ=filter[0].QQ</strong>),然后return这个item1，<strong>如果不进行return，那返回的是undefined,所以记得一定要返回。</strong><br>还有如果第二个数组的小明对象有很多个属性，想把里面的属性全部合并给第一个数组，那可以用ES6对象方法**Object.assign(to,from)**去合并两个对象，相同属性的话后面属性会覆盖前面属性</p>\n"},{"title":"正则的懒惰量词","date":"2022-07-25T16:05:00.000Z","_content":"\n\n拿[上篇文章][1]`<img src=\"https://abc.gif\" alt=\"Smiley face\" width=\"42\" height=\"42\">`标签来讲\n\n想匹配链接上篇是用到了前瞻断言和后瞻断言，初次用正则用src=\".+\"这样匹配规则来匹配,但是其实他是匹配到了`src=\"https://abc.gif\" alt=\"Smiley face\" width=\"42\" height=\"42\"`,这是因为这种模式是贪婪模式，会尽可能多匹配，所以会匹配到最后一个\"符号\n\n想要仅少匹配就需要用到懒惰量词进行懒惰匹配，只需要在量词比如.+ .*就是量词后加?号就是懒惰量词，所以最后的正则规则是`src=\".+?\"`，匹配结果就是`src=\"https://abc.gif\"`\n这还多出了src=这个属性，只需要在量词加个括号`src=\"(.+?)\"`，最终会返回一个数组，`[src=\"https://abc.gif\",https://abc.gif]`,可以看出他匹配的结果是把`src=\".+?\"和(.+?)`结果存进数组\n\n\n [1]: http://728728.xyz/archives/24.html","source":"_posts/正则的懒惰量词.md","raw":"---\ntitle: 正则的懒惰量词\ndate: 2022/07/26 00:05:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n拿[上篇文章][1]`<img src=\"https://abc.gif\" alt=\"Smiley face\" width=\"42\" height=\"42\">`标签来讲\n\n想匹配链接上篇是用到了前瞻断言和后瞻断言，初次用正则用src=\".+\"这样匹配规则来匹配,但是其实他是匹配到了`src=\"https://abc.gif\" alt=\"Smiley face\" width=\"42\" height=\"42\"`,这是因为这种模式是贪婪模式，会尽可能多匹配，所以会匹配到最后一个\"符号\n\n想要仅少匹配就需要用到懒惰量词进行懒惰匹配，只需要在量词比如.+ .*就是量词后加?号就是懒惰量词，所以最后的正则规则是`src=\".+?\"`，匹配结果就是`src=\"https://abc.gif\"`\n这还多出了src=这个属性，只需要在量词加个括号`src=\"(.+?)\"`，最终会返回一个数组，`[src=\"https://abc.gif\",https://abc.gif]`,可以看出他匹配的结果是把`src=\".+?\"和(.+?)`结果存进数组\n\n\n [1]: http://728728.xyz/archives/24.html","slug":"正则的懒惰量词","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwj9001nost2g3exb34x","content":"<p>拿<a href=\"http://728728.xyz/archives/24.html\">上篇文章</a><code><img src="https://abc.gif" alt="Smiley face" width="42" height="42"></code>标签来讲</p>\n<p>想匹配链接上篇是用到了前瞻断言和后瞻断言，初次用正则用src=”.+”这样匹配规则来匹配,但是其实他是匹配到了<code>src="https://abc.gif" alt="Smiley face" width="42" height="42"</code>,这是因为这种模式是贪婪模式，会尽可能多匹配，所以会匹配到最后一个”符号</p>\n<p>想要仅少匹配就需要用到懒惰量词进行懒惰匹配，只需要在量词比如.+ .*就是量词后加?号就是懒惰量词，所以最后的正则规则是<code>src=".+?"</code>，匹配结果就是<code>src="https://abc.gif"</code><br>这还多出了src=这个属性，只需要在量词加个括号<code>src="(.+?)"</code>，最终会返回一个数组，<code>[src="https://abc.gif",https://abc.gif]</code>,可以看出他匹配的结果是把<code>src=".+?"和(.+?)</code>结果存进数组</p>\n","site":{"data":{}},"excerpt":"","more":"<p>拿<a href=\"http://728728.xyz/archives/24.html\">上篇文章</a><code><img src="https://abc.gif" alt="Smiley face" width="42" height="42"></code>标签来讲</p>\n<p>想匹配链接上篇是用到了前瞻断言和后瞻断言，初次用正则用src=”.+”这样匹配规则来匹配,但是其实他是匹配到了<code>src="https://abc.gif" alt="Smiley face" width="42" height="42"</code>,这是因为这种模式是贪婪模式，会尽可能多匹配，所以会匹配到最后一个”符号</p>\n<p>想要仅少匹配就需要用到懒惰量词进行懒惰匹配，只需要在量词比如.+ .*就是量词后加?号就是懒惰量词，所以最后的正则规则是<code>src=".+?"</code>，匹配结果就是<code>src="https://abc.gif"</code><br>这还多出了src=这个属性，只需要在量词加个括号<code>src="(.+?)"</code>，最终会返回一个数组，<code>[src="https://abc.gif",https://abc.gif]</code>,可以看出他匹配的结果是把<code>src=".+?"和(.+?)</code>结果存进数组</p>\n"},{"title":"用ES6的解构删除和过滤出属性","date":"2022-03-29T23:32:00.000Z","_content":"\n\n假如有这么个对象\n```javascript\nvar obj={\n name:'xiaoming',\n age:80,\n position:'grass-roots',\n married:false,\n hobby:'basketball'\n}\n```\n\n如想要除了married,hobby属性外的全部属性（删除）\n`const {married,hobby,...all}=obj`\n\n![删除][1]\n想要married和hobby两个属性,用自执行函数来写（过滤）\n```javascript\nvar two=(function({married,hobby}){\n return {married,hobby}\n})(obj)\n```\n\n![请输入图片描述][2]\n写成ES6的箭头函数就是\n```javascript\nvar two=(({married,hobby})=> {\n return {married,hobby}\n})(obj)\n```\n\n然后函数体只有一条语句时可以省略掉函数体符号{}和return，这条语句是个对象用括号括起来，最后就优化成这样了-_-\n```javascript\nvar two=(({married,hobby}) => ({married,hobby}))(obj)\n```\n\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5896f172dc7be6403977d253a298b8f6623/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589f6b0fc4b88a5cbd95f49a98d539620f9/0.png","source":"_posts/用ES6的解构删除和过滤出属性.md","raw":"---\ntitle: 用ES6的解构删除和过滤出属性\ndate: 2022/03/30 07:32:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n假如有这么个对象\n```javascript\nvar obj={\n name:'xiaoming',\n age:80,\n position:'grass-roots',\n married:false,\n hobby:'basketball'\n}\n```\n\n如想要除了married,hobby属性外的全部属性（删除）\n`const {married,hobby,...all}=obj`\n\n![删除][1]\n想要married和hobby两个属性,用自执行函数来写（过滤）\n```javascript\nvar two=(function({married,hobby}){\n return {married,hobby}\n})(obj)\n```\n\n![请输入图片描述][2]\n写成ES6的箭头函数就是\n```javascript\nvar two=(({married,hobby})=> {\n return {married,hobby}\n})(obj)\n```\n\n然后函数体只有一条语句时可以省略掉函数体符号{}和return，这条语句是个对象用括号括起来，最后就优化成这样了-_-\n```javascript\nvar two=(({married,hobby}) => ({married,hobby}))(obj)\n```\n\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5896f172dc7be6403977d253a298b8f6623/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589f6b0fc4b88a5cbd95f49a98d539620f9/0.png","slug":"用ES6的解构删除和过滤出属性","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwja001post2ey389kf2","content":"<p>假如有这么个对象</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> obj<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span><span class=\"token string\">'xiaoming'</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">age</span><span class=\"token operator\">:</span><span class=\"token number\">80</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">position</span><span class=\"token operator\">:</span><span class=\"token string\">'grass-roots'</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">married</span><span class=\"token operator\">:</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">hobby</span><span class=\"token operator\">:</span><span class=\"token string\">'basketball'</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n<p>如想要除了married,hobby属性外的全部属性（删除）<br><code>const {married,hobby,...all}=obj</code></p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5896f172dc7be6403977d253a298b8f6623/0.png\" alt=\"删除\"><br>想要married和hobby两个属性,用自执行函数来写（过滤）</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> two<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589f6b0fc4b88a5cbd95f49a98d539620f9/0.png\" alt=\"请输入图片描述\"><br>写成ES6的箭头函数就是</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> two<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span><span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<p>然后函数体只有一条语句时可以省略掉函数体符号{}和return，这条语句是个对象用括号括起来，最后就优化成这样了-_-</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> two<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n\n","site":{"data":{}},"excerpt":"","more":"<p>假如有这么个对象</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> obj<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span><span class=\"token string\">'xiaoming'</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">age</span><span class=\"token operator\">:</span><span class=\"token number\">80</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">position</span><span class=\"token operator\">:</span><span class=\"token string\">'grass-roots'</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">married</span><span class=\"token operator\">:</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">hobby</span><span class=\"token operator\">:</span><span class=\"token string\">'basketball'</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n\n<p>如想要除了married,hobby属性外的全部属性（删除）<br><code>const {married,hobby,...all}=obj</code></p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c5896f172dc7be6403977d253a298b8f6623/0.png\" alt=\"删除\"><br>想要married和hobby两个属性,用自执行函数来写（过滤）</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> two<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589f6b0fc4b88a5cbd95f49a98d539620f9/0.png\" alt=\"请输入图片描述\"><br>写成ES6的箭头函数就是</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> two<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span><span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span></span></code></pre>\n\n<p>然后函数体只有一条语句时可以省略掉函数体符号{}和return，这条语句是个对象用括号括起来，最后就优化成这样了-_-</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> two<span class=\"token operator\">=</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>married<span class=\"token punctuation\">,</span>hobby<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span></span></code></pre>\n\n\n"},{"title":"联通虚拟定位领数字人民币充值话费活动","date":"2022-08-06T13:59:00.000Z","_content":"\n\n### 领取条件 ###\n已ROOT安卓机(Magisk)，因为要进行虚拟定位操作，定位软件可以用[Fake location][1]，没ROOT就放弃吧\n\n分别定位到以下三个地区都可以领取20元数字人民币，可以在联通营业厅APP用数字钱包充值话费，20话费分4个月，每月5元领取，海南领完了，没领到，领其他两个\n海南：http://u.10010.cn/0tyJbA0O\n广州：http://u.10010.cn/0tyJC2kQ\n上海：http://u.10010.cn/0tyJCNwT\n\n数字钱包会检测到Magisk，设置Zygisk排除列表就行\n [1]: https://github.com/Lerist/FakeLocation/releases","source":"_posts/联通虚拟定位领数字人民币充值话费活动.md","raw":"---\ntitle: 联通虚拟定位领数字人民币充值话费活动\ndate: 2022/08/06 21:59:00\ncategories: \n - 优惠活动\ntags: \n---\n\n\n### 领取条件 ###\n已ROOT安卓机(Magisk)，因为要进行虚拟定位操作，定位软件可以用[Fake location][1]，没ROOT就放弃吧\n\n分别定位到以下三个地区都可以领取20元数字人民币，可以在联通营业厅APP用数字钱包充值话费，20话费分4个月，每月5元领取，海南领完了，没领到，领其他两个\n海南：http://u.10010.cn/0tyJbA0O\n广州：http://u.10010.cn/0tyJC2kQ\n上海：http://u.10010.cn/0tyJCNwT\n\n数字钱包会检测到Magisk，设置Zygisk排除列表就行\n [1]: https://github.com/Lerist/FakeLocation/releases","slug":"联通虚拟定位领数字人民币充值话费活动","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwjb001rost2gdnr3f2c","content":"<h3 id=\"领取条件\"><a href=\"#领取条件\" class=\"headerlink\" title=\"领取条件\"></a>领取条件</h3><p>已ROOT安卓机(Magisk)，因为要进行虚拟定位操作，定位软件可以用[Fake location][1]，没ROOT就放弃吧</p>\n<p>分别定位到以下三个地区都可以领取20元数字人民币，可以在联通营业厅APP用数字钱包充值话费，20话费分4个月，每月5元领取，海南领完了，没领到，领其他两个<br>海南：<a href=\"http://u.10010.cn/0tyJbA0O\">http://u.10010.cn/0tyJbA0O</a><br>广州：<a href=\"http://u.10010.cn/0tyJC2kQ\">http://u.10010.cn/0tyJC2kQ</a><br>上海：<a href=\"http://u.10010.cn/0tyJCNwT\">http://u.10010.cn/0tyJCNwT</a></p>\n<p>数字钱包会检测到Magisk，设置Zygisk排除列表就行<br> [1]: <a href=\"https://github.com/Lerist/FakeLocation/releases\">https://github.com/Lerist/FakeLocation/releases</a></p>\n","site":{"data":{}},"excerpt":"","more":"<h3 id=\"领取条件\"><a href=\"#领取条件\" class=\"headerlink\" title=\"领取条件\"></a>领取条件</h3><p>已ROOT安卓机(Magisk)，因为要进行虚拟定位操作，定位软件可以用[Fake location][1]，没ROOT就放弃吧</p>\n<p>分别定位到以下三个地区都可以领取20元数字人民币，可以在联通营业厅APP用数字钱包充值话费，20话费分4个月，每月5元领取，海南领完了，没领到，领其他两个<br>海南：<a href=\"http://u.10010.cn/0tyJbA0O\">http://u.10010.cn/0tyJbA0O</a><br>广州：<a href=\"http://u.10010.cn/0tyJC2kQ\">http://u.10010.cn/0tyJC2kQ</a><br>上海：<a href=\"http://u.10010.cn/0tyJCNwT\">http://u.10010.cn/0tyJCNwT</a></p>\n<p>数字钱包会检测到Magisk，设置Zygisk排除列表就行<br> [1]: <a href=\"https://github.com/Lerist/FakeLocation/releases\">https://github.com/Lerist/FakeLocation/releases</a></p>\n"},{"title":"用async/await改变for循环promise.then()中的变量输出结果","date":"2021-10-08T08:35:00.000Z","_content":"\n\n> 这个只针对用var声明的变量，**可以用es6新增关键字 let 去声明变量就不会存在这个问题**\n\n如果在for循环中使用promise的then方法去打印for循环的i变量会得到如下结果\n\n![请输入图片描述][1]\n\n可以发现控制台打印了5次i变量的值都为5，而不是0 1 2 3 4，这是因为i是全局变量，每次i++都会覆盖前一次结果，如果希望控制台能输出0 1 2 3 4这样的期望结果呢，这里就要用到async/await\n\n![请输入图片描述][2]\n\nasync的作用就是指明loop为异步函数，await会等待promise.then()这个异步函数执行完才会继续执行for循环\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589b2197dff61891dccba1b23aca6ac804f/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589bad93a9ba88c7790a323c8a6d9d6a3e6/0.png","source":"_posts/用async_await改变for循环promise.then()中的变量输出结果.md","raw":"---\ntitle: 用async/await改变for循环promise.then()中的变量输出结果\ndate: 2021/10/08 16:35:00\ncategories: \n - 前端编程\ntags: \n - 异步函数\n - JavaScript\n---\n\n\n> 这个只针对用var声明的变量，**可以用es6新增关键字 let 去声明变量就不会存在这个问题**\n\n如果在for循环中使用promise的then方法去打印for循环的i变量会得到如下结果\n\n![请输入图片描述][1]\n\n可以发现控制台打印了5次i变量的值都为5，而不是0 1 2 3 4，这是因为i是全局变量，每次i++都会覆盖前一次结果，如果希望控制台能输出0 1 2 3 4这样的期望结果呢，这里就要用到async/await\n\n![请输入图片描述][2]\n\nasync的作用就是指明loop为异步函数，await会等待promise.then()这个异步函数执行完才会继续执行for循环\n\n [1]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589b2197dff61891dccba1b23aca6ac804f/0.png\n [2]: https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589bad93a9ba88c7790a323c8a6d9d6a3e6/0.png","slug":"用async_await改变for循环promise.then()中的变量输出结果","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwjc001vost22b0l6l23","content":"<blockquote>\n<p>这个只针对用var声明的变量，<strong>可以用es6新增关键字 let 去声明变量就不会存在这个问题</strong></p>\n</blockquote>\n<p>如果在for循环中使用promise的then方法去打印for循环的i变量会得到如下结果</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589b2197dff61891dccba1b23aca6ac804f/0.png\" alt=\"请输入图片描述\"></p>\n<p>可以发现控制台打印了5次i变量的值都为5，而不是0 1 2 3 4，这是因为i是全局变量，每次i++都会覆盖前一次结果，如果希望控制台能输出0 1 2 3 4这样的期望结果呢，这里就要用到async/await</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589bad93a9ba88c7790a323c8a6d9d6a3e6/0.png\" alt=\"请输入图片描述\"></p>\n<p>async的作用就是指明loop为异步函数，await会等待promise.then()这个异步函数执行完才会继续执行for循环</p>\n","site":{"data":{}},"excerpt":"","more":"<blockquote>\n<p>这个只针对用var声明的变量，<strong>可以用es6新增关键字 let 去声明变量就不会存在这个问题</strong></p>\n</blockquote>\n<p>如果在for循环中使用promise的then方法去打印for循环的i变量会得到如下结果</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589b2197dff61891dccba1b23aca6ac804f/0.png\" alt=\"请输入图片描述\"></p>\n<p>可以发现控制台打印了5次i变量的值都为5，而不是0 1 2 3 4，这是因为i是全局变量，每次i++都会覆盖前一次结果，如果希望控制台能输出0 1 2 3 4这样的期望结果呢，这里就要用到async/await</p>\n<p><img src=\"https://p.qlogo.cn/hy_personal/3e28f14aa0516842d26cd9850b43c589bad93a9ba88c7790a323c8a6d9d6a3e6/0.png\" alt=\"请输入图片描述\"></p>\n<p>async的作用就是指明loop为异步函数，await会等待promise.then()这个异步函数执行完才会继续执行for循环</p>\n"},{"title":"解决中文input输入事件在pc端触发两次","date":"2022-05-12T23:55:00.000Z","_content":"\n\n电脑输入法为中文时input事件会触发两次，在手机端是正常的，可以用`compositionend`事件替代input解决这个中文输入问题，但是除了中文外的数字，字符等都不会触发这个事件。\n`console.log`打印触发两次的时间间隔只相差1毫秒，所以可以把最后那次触发的给剔除掉\n这里可以用[防抖或者节流][1]都能达到目的，防抖节流的时间设置在1毫秒后就能剔除掉第二次触发事件\n\n\n [1]: /archives/10.html","source":"_posts/解决中文input输入事件在pc端触发两次.md","raw":"---\ntitle: 解决中文input输入事件在pc端触发两次\ndate: 2022/05/13 07:55:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n电脑输入法为中文时input事件会触发两次，在手机端是正常的，可以用`compositionend`事件替代input解决这个中文输入问题，但是除了中文外的数字，字符等都不会触发这个事件。\n`console.log`打印触发两次的时间间隔只相差1毫秒，所以可以把最后那次触发的给剔除掉\n这里可以用[防抖或者节流][1]都能达到目的，防抖节流的时间设置在1毫秒后就能剔除掉第二次触发事件\n\n\n [1]: /archives/10.html","slug":"解决中文input输入事件在pc端触发两次","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwjd001zost2azacc0hm","content":"<p>电脑输入法为中文时input事件会触发两次，在手机端是正常的，可以用<code>compositionend</code>事件替代input解决这个中文输入问题，但是除了中文外的数字，字符等都不会触发这个事件。<br><code>console.log</code>打印触发两次的时间间隔只相差1毫秒，所以可以把最后那次触发的给剔除掉<br>这里可以用<a href=\"/archives/10.html\">防抖或者节流</a>都能达到目的，防抖节流的时间设置在1毫秒后就能剔除掉第二次触发事件</p>\n","site":{"data":{}},"excerpt":"","more":"<p>电脑输入法为中文时input事件会触发两次，在手机端是正常的，可以用<code>compositionend</code>事件替代input解决这个中文输入问题，但是除了中文外的数字，字符等都不会触发这个事件。<br><code>console.log</code>打印触发两次的时间间隔只相差1毫秒，所以可以把最后那次触发的给剔除掉<br>这里可以用<a href=\"/archives/10.html\">防抖或者节流</a>都能达到目的，防抖节流的时间设置在1毫秒后就能剔除掉第二次触发事件</p>\n"},{"title":"请求体类型","date":"2022-05-09T07:28:00.000Z","_content":"\n\n在发送post请求时可能需要把数据传给后端服务器，一般都是把数据放在配置项的body中发送，请求头content-type会决定body是何种参数，常用有\n`application/x-www-form-urlencoded`\n`application/json`\n`multipart/form-data`\n\napplication/x-www-form-urlencoded请求体类型为url格式`a=1&b=2`，在get请求时叫查询参数\n\n对于对象\n```javascript\n{\n a:1,\n b:2\n}\n```\n可以使用qs库，for循环处理，和`new URLSearchparams(obj)`构造函数，把对象传给构造函数，更多URLSearchparams对象方法见[MDN][1]\n\napplication/json请求体类型为JSON字符串`'{'a':'1','b':'2'}'`，直接`JSON.stringify(obj)`把对象转成JSON字符串\n\nmultipart/form-data传表单数据给后端，使用`new FormData()`创建\n\n\n [1]: https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams","source":"_posts/请求体类型.md","raw":"---\ntitle: 请求体类型\ndate: 2022/05/09 15:28:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n在发送post请求时可能需要把数据传给后端服务器，一般都是把数据放在配置项的body中发送，请求头content-type会决定body是何种参数，常用有\n`application/x-www-form-urlencoded`\n`application/json`\n`multipart/form-data`\n\napplication/x-www-form-urlencoded请求体类型为url格式`a=1&b=2`，在get请求时叫查询参数\n\n对于对象\n```javascript\n{\n a:1,\n b:2\n}\n```\n可以使用qs库，for循环处理，和`new URLSearchparams(obj)`构造函数，把对象传给构造函数，更多URLSearchparams对象方法见[MDN][1]\n\napplication/json请求体类型为JSON字符串`'{'a':'1','b':'2'}'`，直接`JSON.stringify(obj)`把对象转成JSON字符串\n\nmultipart/form-data传表单数据给后端，使用`new FormData()`创建\n\n\n [1]: https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams","slug":"请求体类型","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwjf0023ost26fylbswi","content":"<p>在发送post请求时可能需要把数据传给后端服务器，一般都是把数据放在配置项的body中发送，请求头content-type会决定body是何种参数，常用有<br><code>application/x-www-form-urlencoded</code><br><code>application/json</code><br><code>multipart/form-data</code></p>\n<p>application/x-www-form-urlencoded请求体类型为url格式<code>a=1&b=2</code>，在get请求时叫查询参数</p>\n<p>对于对象</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">a</span><span class=\"token operator\">:</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">b</span><span class=\"token operator\">:</span><span class=\"token number\">2</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span></span></code></pre>\n<p>可以使用qs库，for循环处理，和<code>new URLSearchparams(obj)</code>构造函数，把对象传给构造函数，更多URLSearchparams对象方法见<a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams\">MDN</a></p>\n<p>application/json请求体类型为JSON字符串<code>'{'a':'1','b':'2'}'</code>，直接<code>JSON.stringify(obj)</code>把对象转成JSON字符串</p>\n<p>multipart/form-data传表单数据给后端，使用<code>new FormData()</code>创建</p>\n","site":{"data":{}},"excerpt":"","more":"<p>在发送post请求时可能需要把数据传给后端服务器，一般都是把数据放在配置项的body中发送，请求头content-type会决定body是何种参数，常用有<br><code>application/x-www-form-urlencoded</code><br><code>application/json</code><br><code>multipart/form-data</code></p>\n<p>application/x-www-form-urlencoded请求体类型为url格式<code>a=1&b=2</code>，在get请求时叫查询参数</p>\n<p>对于对象</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">{</span>\n <span class=\"token literal-property property\">a</span><span class=\"token operator\">:</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n <span class=\"token literal-property property\">b</span><span class=\"token operator\">:</span><span class=\"token number\">2</span>\n<span class=\"token punctuation\">}</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span></span></code></pre>\n<p>可以使用qs库，for循环处理，和<code>new URLSearchparams(obj)</code>构造函数，把对象传给构造函数，更多URLSearchparams对象方法见<a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams\">MDN</a></p>\n<p>application/json请求体类型为JSON字符串<code>'{'a':'1','b':'2'}'</code>，直接<code>JSON.stringify(obj)</code>把对象转成JSON字符串</p>\n<p>multipart/form-data传表单数据给后端，使用<code>new FormData()</code>创建</p>\n"},{"title":"防抖和节流 — 性能优化","date":"2021-11-16T07:04:00.000Z","_content":"\n\n节流: 在规定时间内只能执行一次\n防抖: 如果在规定时间内会重新计算时间来执行函数，换句话说，在规定时间外执行才会执行，在规定时间内执行函数那么永远不会执行\n```javascript\n节流\nvar flag = true\nfunction fun() {\n if (flag) {\n setTimeout(() => {\n console.log('执行')\n flag = true\n }, 2000)\n }\n flag = false\n}\nfun()\n```\n当flag是true时才会执行setTimeout，如果在两秒内执行fun函数，由于设置了flag为false，setTimeout不会执行，当回调执行完毕，把flag设为true 此时就能再次调用setTimeout\n\n\n```javascript\n防抖\nvar timer\nfunction fun() {\n clearTimeout(timer)\n timer = setTimeout(() => {\n console.log('执行')\n }, 2000)\n}\nfun()\n```\n在setTimeout前加上clearTimeout去清除定时器，所以在两秒内执行fun函数的话，就会执行clearTimeout，导致setTimeout不会执行。跟节流不同的是，执行多次fun函数，每次小于2秒的话，节流每2秒会执行一次，而防抖只会在最后一次执行\n\n","source":"_posts/防抖和节流_—_性能优化.md","raw":"---\ntitle: 防抖和节流 — 性能优化\ndate: 2021/11/16 15:04:00\ncategories: \n - 前端编程\ntags: \n---\n\n\n节流: 在规定时间内只能执行一次\n防抖: 如果在规定时间内会重新计算时间来执行函数，换句话说，在规定时间外执行才会执行，在规定时间内执行函数那么永远不会执行\n```javascript\n节流\nvar flag = true\nfunction fun() {\n if (flag) {\n setTimeout(() => {\n console.log('执行')\n flag = true\n }, 2000)\n }\n flag = false\n}\nfun()\n```\n当flag是true时才会执行setTimeout，如果在两秒内执行fun函数，由于设置了flag为false，setTimeout不会执行，当回调执行完毕，把flag设为true 此时就能再次调用setTimeout\n\n\n```javascript\n防抖\nvar timer\nfunction fun() {\n clearTimeout(timer)\n timer = setTimeout(() => {\n console.log('执行')\n }, 2000)\n}\nfun()\n```\n在setTimeout前加上clearTimeout去清除定时器，所以在两秒内执行fun函数的话，就会执行clearTimeout，导致setTimeout不会执行。跟节流不同的是，执行多次fun函数，每次小于2秒的话，节流每2秒会执行一次，而防抖只会在最后一次执行\n\n","slug":"防抖和节流_—_性能优化","published":1,"updated":"2022-09-01T13:57:31.000Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cl8ruiwjn002vost2axzdal7e","content":"<p>节流: 在规定时间内只能执行一次<br>防抖: 如果在规定时间内会重新计算时间来执行函数，换句话说，在规定时间外执行才会执行，在规定时间内执行函数那么永远不会执行</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">节流\n<span class=\"token keyword\">var</span> flag <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">fun</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>flag<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'执行'</span><span class=\"token punctuation\">)</span>\n flag <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2000</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span>\n flag <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token function\">fun</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>当flag是true时才会执行setTimeout，如果在两秒内执行fun函数，由于设置了flag为false，setTimeout不会执行，当回调执行完毕，把flag设为true 此时就能再次调用setTimeout</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">防抖\n<span class=\"token keyword\">var</span> timer\n<span class=\"token keyword\">function</span> <span class=\"token function\">fun</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">clearTimeout</span><span class=\"token punctuation\">(</span>timer<span class=\"token punctuation\">)</span>\n timer <span class=\"token operator\">=</span> <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'执行'</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2000</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token function\">fun</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>在setTimeout前加上clearTimeout去清除定时器，所以在两秒内执行fun函数的话，就会执行clearTimeout，导致setTimeout不会执行。跟节流不同的是，执行多次fun函数，每次小于2秒的话，节流每2秒会执行一次，而防抖只会在最后一次执行</p>\n","site":{"data":{}},"excerpt":"","more":"<p>节流: 在规定时间内只能执行一次<br>防抖: 如果在规定时间内会重新计算时间来执行函数，换句话说，在规定时间外执行才会执行，在规定时间内执行函数那么永远不会执行</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">节流\n<span class=\"token keyword\">var</span> flag <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">fun</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>flag<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'执行'</span><span class=\"token punctuation\">)</span>\n flag <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2000</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span>\n flag <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token function\">fun</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>当flag是true时才会执行setTimeout，如果在两秒内执行fun函数，由于设置了flag为false，setTimeout不会执行，当回调执行完毕，把flag设为true 此时就能再次调用setTimeout</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">防抖\n<span class=\"token keyword\">var</span> timer\n<span class=\"token keyword\">function</span> <span class=\"token function\">fun</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">clearTimeout</span><span class=\"token punctuation\">(</span>timer<span class=\"token punctuation\">)</span>\n timer <span class=\"token operator\">=</span> <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'执行'</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2000</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token function\">fun</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>\n<p>在setTimeout前加上clearTimeout去清除定时器，所以在两秒内执行fun函数的话，就会执行clearTimeout，导致setTimeout不会执行。跟节流不同的是，执行多次fun函数，每次小于2秒的话，节流每2秒会执行一次，而防抖只会在最后一次执行</p>\n"}],"PostAsset":[],"PostCategory":[{"post_id":"cl8ruiwi90001ost2d0b74ovu","category_id":"cl8ruiwif0004ost2f55fb3mn","_id":"cl8ruiwir000host2df1p3qhh"},{"post_id":"cl8ruiwid0003ost21yghc8s3","category_id":"cl8ruiwif0004ost2f55fb3mn","_id":"cl8ruiwiu000most29b095q9o"},{"post_id":"cl8ruiwir000jost205oi1d86","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwix000sost2blida225"},{"post_id":"cl8ruiwii0007ost2ghyu6aen","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwiz000wost209yjbo32"},{"post_id":"cl8ruiwit000lost2d0lk7h56","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwj0000zost2e05nfxi6"},{"post_id":"cl8ruiwiv000qost2d4b65n1b","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwj10013ost2beoceib2"},{"post_id":"cl8ruiwik0009ost2h7za2lvc","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwj30016ost2dyry4aev"},{"post_id":"cl8ruiwiw000rost20urzeu01","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwj40019ost2hrt6f368"},{"post_id":"cl8ruiwiy000vost21xp54dly","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwj5001cost28disbnxm"},{"post_id":"cl8ruiwim000bost2dvuifpxq","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwj6001fost21n581vqq"},{"post_id":"cl8ruiwiz000yost2gnx24xba","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwj8001jost27gvl29lq"},{"post_id":"cl8ruiwj10012ost27tdf1m75","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwj9001lost217qj01zy"},{"post_id":"cl8ruiwio000eost2c1graty2","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwja001oost2dpz1h1vx"},{"post_id":"cl8ruiwj20015ost2ev1qabvv","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjb001qost2hm75axqb"},{"post_id":"cl8ruiwj30018ost2auhv7u6e","category_id":"cl8ruiwif0004ost2f55fb3mn","_id":"cl8ruiwjc001sost279kxb6u7"},{"post_id":"cl8ruiwip000fost20n3932fl","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjd001wost2203ngks7"},{"post_id":"cl8ruiwj5001bost27zwghyls","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwje0020ost26y0w2zbv"},{"post_id":"cl8ruiwj6001eost2fo1z11x2","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjf0024ost2eldr5k13"},{"post_id":"cl8ruiwj7001iost2ci8scpjz","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjf0025ost29bbz59o1"},{"post_id":"cl8ruiwj8001kost26m2sfabr","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjg0027ost23uepfknq"},{"post_id":"cl8ruiwj9001nost2g3exb34x","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjg0028ost2c0qehgeq"},{"post_id":"cl8ruiwja001post2ey389kf2","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjg002aost2gsso0ceg"},{"post_id":"cl8ruiwjc001vost22b0l6l23","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjh002cost21293biy5"},{"post_id":"cl8ruiwjd001zost2azacc0hm","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjh002fost20lpw12yt"},{"post_id":"cl8ruiwjf0023ost26fylbswi","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwji002host24tpm4fev"},{"post_id":"cl8ruiwjb001rost2gdnr3f2c","category_id":"cl8ruiwjd001xost2ggs40gk5","_id":"cl8ruiwji002iost23xxoe3cq"},{"post_id":"cl8ruiwjn002vost2axzdal7e","category_id":"cl8ruiwiq000gost28nxkcn1j","_id":"cl8ruiwjo002wost226gt4rse"}],"PostTag":[{"post_id":"cl8ruiwi90001ost2d0b74ovu","tag_id":"cl8ruiwih0005ost2b0a2e90b","_id":"cl8ruiwit000kost2dcbf00cq"},{"post_id":"cl8ruiwi90001ost2d0b74ovu","tag_id":"cl8ruiwin000dost2g9et9mjn","_id":"cl8ruiwiu000nost269goafye"},{"post_id":"cl8ruiwim000bost2dvuifpxq","tag_id":"cl8ruiwir000iost2do879fpu","_id":"cl8ruiwiz000xost2g9560aoj"},{"post_id":"cl8ruiwim000bost2dvuifpxq","tag_id":"cl8ruiwiv000post26ghndp7s","_id":"cl8ruiwj10011ost27q8qa537"},{"post_id":"cl8ruiwio000eost2c1graty2","tag_id":"cl8ruiwiy000uost288fmemut","_id":"cl8ruiwj5001dost2atmehirq"},{"post_id":"cl8ruiwio000eost2c1graty2","tag_id":"cl8ruiwj10014ost2elj9h8mm","_id":"cl8ruiwj6001gost25ky11z4z"},{"post_id":"cl8ruiwiv000qost2d4b65n1b","tag_id":"cl8ruiwj4001aost22z6cas7p","_id":"cl8ruiwjc001uost220ar9igh"},{"post_id":"cl8ruiwiv000qost2d4b65n1b","tag_id":"cl8ruiwj7001host26jeb5cde","_id":"cl8ruiwjd001yost2b4fc4bnf"},{"post_id":"cl8ruiwiv000qost2d4b65n1b","tag_id":"cl8ruiwj9001most2d9i38rnw","_id":"cl8ruiwje0022ost283apey6y"},{"post_id":"cl8ruiwiy000vost21xp54dly","tag_id":"cl8ruiwjc001tost25tnm07s9","_id":"cl8ruiwjh002bost26oy327iz"},{"post_id":"cl8ruiwiy000vost21xp54dly","tag_id":"cl8ruiwje0021ost2cdg4d8y8","_id":"cl8ruiwjh002dost26iz20jme"},{"post_id":"cl8ruiwiy000vost21xp54dly","tag_id":"cl8ruiwjg0026ost2hpxtfvo1","_id":"cl8ruiwji002gost2fcpl5oql"},{"post_id":"cl8ruiwiz000yost2gnx24xba","tag_id":"cl8ruiwj4001aost22z6cas7p","_id":"cl8ruiwji002kost29inw7kke"},{"post_id":"cl8ruiwiz000yost2gnx24xba","tag_id":"cl8ruiwjh002eost211i37xqy","_id":"cl8ruiwji002lost2cb3o1ytt"},{"post_id":"cl8ruiwj10012ost27tdf1m75","tag_id":"cl8ruiwji002jost28ief7xq5","_id":"cl8ruiwjl002nost20dh15c1x"},{"post_id":"cl8ruiwj8001kost26m2sfabr","tag_id":"cl8ruiwj4001aost22z6cas7p","_id":"cl8ruiwjm002qost23dka3jgl"},{"post_id":"cl8ruiwj8001kost26m2sfabr","tag_id":"cl8ruiwji002most29d5l2pae","_id":"cl8ruiwjm002rost236d8041b"},{"post_id":"cl8ruiwj8001kost26m2sfabr","tag_id":"cl8ruiwjl002oost23gl59y4i","_id":"cl8ruiwjm002sost255gl887h"},{"post_id":"cl8ruiwjc001vost22b0l6l23","tag_id":"cl8ruiwjm002post2hcq5hl03","_id":"cl8ruiwjm002tost29nhj0mm2"},{"post_id":"cl8ruiwjc001vost22b0l6l23","tag_id":"cl8ruiwj4001aost22z6cas7p","_id":"cl8ruiwjm002uost2bgzr1vmd"}],"Tag":[{"name":"node.js","_id":"cl8ruiwih0005ost2b0a2e90b"},{"name":"xml","_id":"cl8ruiwin000dost2g9et9mjn"},{"name":"axios","_id":"cl8ruiwir000iost2do879fpu"},{"name":"HTTP","_id":"cl8ruiwiv000post26ghndp7s"},{"name":"Vue路由","_id":"cl8ruiwiy000uost288fmemut"},{"name":"Vue传参","_id":"cl8ruiwj10014ost2elj9h8mm"},{"name":"JavaScript","_id":"cl8ruiwj4001aost22z6cas7p"},{"name":"图片处理","_id":"cl8ruiwj7001host26jeb5cde"},{"name":"base64","_id":"cl8ruiwj9001most2d9i38rnw"},{"name":"Nodejs","_id":"cl8ruiwjc001tost25tnm07s9"},{"name":"图片","_id":"cl8ruiwje0021ost2cdg4d8y8"},{"name":"下载","_id":"cl8ruiwjg0026ost2hpxtfvo1"},{"name":"网页滚动","_id":"cl8ruiwjh002eost211i37xqy"},{"name":"Vue","_id":"cl8ruiwji002jost28ief7xq5"},{"name":"js数组处理","_id":"cl8ruiwji002most29d5l2pae"},{"name":"数组过滤","_id":"cl8ruiwjl002oost23gl59y4i"},{"name":"异步函数","_id":"cl8ruiwjm002post2hcq5hl03"}]}}