{"id":16773194,"url":"https://github.com/javaluo/plan","last_synced_at":"2026-03-18T22:07:49.059Z","repository":{"id":91926506,"uuid":"154505527","full_name":"javaLuo/plan","owner":"javaLuo","description":"需要完成的事","archived":false,"fork":false,"pushed_at":"2024-02-08T09:16:35.000Z","size":7567,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-23T03:45:48.934Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javaLuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-24T13:24:29.000Z","updated_at":"2022-06-28T08:11:03.000Z","dependencies_parsed_at":"2023-12-25T09:40:34.553Z","dependency_job_id":"5f9a4a73-bf7c-4135-9a31-063df2075e44","html_url":"https://github.com/javaLuo/plan","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fplan","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fplan/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fplan/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fplan/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javaLuo","download_url":"https://codeload.github.com/javaLuo/plan/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243902288,"owners_count":20366260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T06:44:58.215Z","updated_at":"2026-01-03T10:15:53.688Z","avatar_url":"https://github.com/javaLuo.png","language":"HTML","readme":"\n## 文档\n\nhttps://www.css88.com/book/css/ CSS文档\u003cbr/\u003e\nhttp://616pic.com/ 图片网 可下载\u003cbr/\u003e\nhttps://developers.google.com/search/docs/guides/search-gallery?hl=zh-cn 谷歌搜索增强 \u003cbr/\u003e\nhttps://www.paperplane.app/blog/print-css-basics/ css控制打印时的一些特定样式 \u003cbr/\u003e\nhttps://neumorphism.io/ 漂亮的拟物按钮CSS\n\n## 总是记不住的东西\n\n1. a标签防钓鱼\n```html\nrel=\"noopener noreferrer nofollow  me\"\nnoopener: 在新打开的网站中window.opener将得到null, 阻止新打开的网站获取原始网站的信息\nnoreferrer: 除了使window.opener为null外，还隐藏引荐信息，谷歌搜索引擎将无法识别该网站是从其他网站跳转，而视为直接流量\nnofollow：是否阻止反向链接，这在搜索引擎SEO排名中有用，如果你链接添加了nofollow，表示主网站不认可该跳转链接的价值，搜索引擎排名算法不会为把这个跳转链接的价值计算到主网站上。一般用于高价值网站跳转到低价值网站时可以加上，防止低价值网站拉低了主网站的价值评分\nme：一般用于社交网站，比如博客网站放了一个twitter链接，加了me，表示该twitter链接就是该博客主人的其他社交媒体。这有利于搜索引擎发现博主的相关站点\n```\n2. 浏览器原生平滑滚动\n```css\nscroll-behavior: smooth; \n```\n3. 原生千分位格式化,只支持3位小数\n```js\n(123456789.123).toLocaleString('en-US'); // 第1种方法 \"123,456,789.123\"\nnew Intl.NumberFormat().format(123456789.123); // 第2种方法 \"123,456,789.123\"\n```\n4. 是否响应鼠标事件\n```css\npointer-events: none/auto;\n```\n5. 放不下显示省略号/强制不换行\n```css\nwhite-space:nowrap;\noverflow:hidden;\ntext-overflow:ellipsis;\n\n// 多行\noverflow: hidden;\ndisplay: -webkit-box;\ntext-overflow: ellipsis;\n-webkit-line-clamp: 2;  /*要显示的行数*/\n-webkit-box-orient: vertical;\n```\n6. 强制换行\n```css\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre-wrap;\n```\n7. 禁止选取\n```css\nuser-select: none;\n```\n8. 最后一行两端对齐\n```css\ntext-align-last:justify;\n```\n9. 修改placeholder的样式\n```css\n::placeholder\n```\n10. 鼠标位置相关\n```js\ne.clientX // 鼠标距离当前窗口左上角的坐标\ne.pageX   // 鼠标距离当前窗口包括滚动条已滚动距离的坐标\ne.offsetX // 鼠标距离当前所在元素左上角的坐标\n```\n11. 关闭chrome跨域限制\n```node\n/** mac 终端执行： */\nopen -n /Applications/Google\\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/admin/Documents/MyChromeDevUserData\n\n/** windows 设置chrome快捷方式链接地址 */\n--disable-web-security --user-data-dir=C:\\MyChromeDevUserData\n```\n12. 隐藏input[number]的上下选择箭头\n```css\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n}\ninput[type='number'] {\n  -moz-appearance: textfield;\n}\n```\n13. 正则解析URL参数部分\n```js\nq={};\nlocation.search.replace(/([^?\u0026=]+)=([^\u0026]+)/g,(_,k,v)=\u003eq[k]=v);\nconsole.log(q); // { key: value }\n```\n14. 数字强制等宽显示\n```css\nfont-variant-numeric: tabular-nums;\n```\n15.css文字渐变\n```css\nbackground-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); \n-webkit-background-clip:text; \n-webkit-text-fill-color:transparent; \n// https://segmentfault.com/a/1190000017015544\n```\n16.手动触发弹出安装PWA\n```javascript\n// 定义一个变量，为了保存event对象\nlet thisEvent;\n\n/**\n  监听beforeinstallprompt这个事件\n  如果网站支持PWA且用户没有安装过，则会触发此事件（Chrome地址栏右侧会出现“安装”字样）\n  若用户已安装过或已不是首次打开网页，此事件不会触发（即Chrome地址栏右侧没有出现“安装”字样）\n**/\nwindow.addEventListener(\"beforeinstallprompt\", e =\u003e {\n  // 阻止 Chrome 67 之前的版本自动显示提示\n  e.preventDefault();\n  // 保存这个特殊的e，之后要用\n  thisEvent = e;\n});\n    \n// 用户点击按钮时触发此方法\nfunction installApp() {\n  thisEvent.prompt(); // 弹出安装提示框\n  thisEvent.userChoice.then(res =\u003e {\n    console.log(res); // 用户点击安装或取消，会返回对应的信息\n  });\n}\n\n// 页面中写个按钮触发\n\u003cbutton onclick=\"installApp\"\u003e安装PWA桌面应用\u003c/button\u003e\n```\n17. 手机自带暗模式媒体查询\n```css\n@media (prefers-color-scheme: dark) {\n  body {\n    background-color: #444;\n    color: #e4e4e4;\n  }\n  img {\n    filter: grayscale(30%);\n  }\n}\n```\n\n18. github改了密码，重置sourcetree密码\n```\nWIN:\n删除 C:\\Users\\用户\\用户名\\AppData\\Local\\Atlassian\\password\nsourcetree重新提交会弹出登录框\n```\n\n19. 生成UUid\n```javascript\nfunction getUUid(){\n  const temp_url = URL.createObjectURL(new Blob());\n  const uuid = temp_url.toString();\n  URL.revokeObjectURL(temp_url);\n  return uuid.substr(uuid.lastIndexOf(\"/\") + 1);\n}\n```\n\n20. 原生CSS实现毛玻璃\n```css\nbackdrop-filter: blur(4px);\n```\n\n30. 解析URL参数\n```javascript\nObject.fromEntries(new URLSearchParams('a=123\u0026b=456\u0026c='));\n// {a:\"123\",b:\"456\",c:\"\"}\n```\n\n31. 父级`transform`会让子集的`position:fixed`失效\n\n32. 禁止ios浏览器橡皮筋效果\n```js\ndocument.body.addEventListener('touchmove', (e)=\u003e{\n  e.preventDefault();\n}, {passive: false});\n// 一定要加passive: false, 告诉浏览器我会阻止默认行为，IOS此值默认为true\n```\n\n33. file转base64, 用于前端图片回显\n```js\nasync function returnImg(file: File){\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  return new Promise((res, rej)=\u003e{\n    reader.onload = ()=\u003e{\n      res(reader.result);\n    };\n    reader.onerror = ()=\u003e{\n      res(null);\n    };\n  });\n}\n```\n\n34. sourcetree切换账号\n工具 - 选项 - 排在第一个的ssh密钥中的账号就是sourcetree使用的git账号\n要切换的时候直接切换ssh密钥即可\n\n全局配置中的账号和邮箱只是作为提交时显示用\n\n## 缓存\n```\n强缓存：\nExpires: Date; // 强缓存 http/1.0 服务器时间与本地时间\nCache-Control: max-age=12312312; // 强缓存 最大过期时间与本地时间对比\n\n协商缓存：\nLast-Modified： 最后修改时间\nETag: 文件唯一标识\n如果强缓存过期，浏览器会在Request请求头中加入两个字段：If-Moified-Since（值对应Last-Modified）和If-None-Match（值对应ETag）字段\n\n服务器自行判断，如果有新的修改，返回200和新内容\n如果没有修改，则返回304，告诉浏览器虽然过期但可以继续使用，并且重新已本次的响应头设置缓存\n\n启发缓存\n如果响应头中没有能够确定缓存的字段，浏览器会根据Date和Last-Modified的差值的10%作为缓存时间\n```\n\n## 过渡的坑\n```\n像vue-transition-group这样的列表过渡组件\n在窗口非激活状态（最小化，电脑休眠等）时，浏览器为了节约性能，会停止setTimeout/setInterval/requestAnimationFrame以及页面dom的渲染\n如果此时数据仍然在更新（比如socket不会停止），则列表中的dom会越来越多，不需要的dom不会被浏览器清除\n\n```\n\n## 安卓手机字体无法居中（往上偏）的坑\n```\n原因是font-size \u003c 12px，很多项目喜欢使用rem来做移动端网页，一些插件还能把px转换为rem\n在某些安卓手机里字体大小小于12像素时，会往上偏。解决办法一般是设置一个较大字体，然后transform:scale缩小\n```\n\n## vscode 配置\n```\n{\n  \"editor.tabSize\": 2, // tab相当于2个空格\n  /**\n   * vetur插件设置 用于vue template格式化\n   * https://github.com/vuejs/vetur\n   */\n  \"vetur.format.defaultFormatter.html\": \"js-beautify-html\",\n  \"vetur.format.defaultFormatterOptions\": {\n    \"js-beautify-html\": {\n      \"wrap_attributes\": \"force-aligned\" //属性强制折行对齐\n    }\n  },\n  /** Eslint设置 **/\n  \"eslint.validate\": [\n    // 检查以下类型的文件\n    \"javascript\",\n    \"javascriptreact\",\n    \"vue\",\n    \"html\",\n    {\n      \"language\": \"html\",\n      \"autoFix\": false\n    },\n    {\n      \"language\": \"vue\",\n      \"autoFix\": false\n    }\n  ],\n  \"eslint.autoFixOnSave\": false, //保存时自动格式化\n  \"javascript.implicitProjectConfig.experimentalDecorators\": true,\n  /**\n   * prettier设置\n   * https://prettier.io/docs/en/options.html\n   */\n  \"prettier.singleQuote\": false, //使用单引号而不是双引号\n  \"prettier.jsxBracketSameLine\": true, // 标签闭合处是否不换行\n  \"prettier.printWidth\": 400, // 多少个字符换行\n  \"prettier.tabWidth\": 2, // tab的宽度\n  \"prettier.semi\": true, // 是否自动在语句末尾加分号\n  \"prettier.trailingComma\": \"all\", // 是否自动加尾逗号（none不，es5自动加兼容es5, all尽可能都加）\n  \"prettier.bracketSpacing\": true, // 大括号之间是否有空格\n  \"prettier.arrowParens\": \"avoid\",\n  \"explorer.confirmDragAndDrop\": false,\n  \"workbench.startupEditor\": \"welcomePage\",\n  \"breadcrumbs.enabled\": true,\n  \"editor.formatOnSave\": true,\n  \"diffEditor.ignoreTrimWhitespace\": true,\n  \"diffEditor.renderSideBySide\": true,\n  \"javascript.updateImportsOnFileMove.enabled\": \"always\",\n  \"vsicons.dontShowNewVersionMessage\": true,\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": false\n  } // 箭头函数只有一个参数时是否加括号（always加，avoid不加）\n}\n```\n\n## useEffect优化\n```\n去掉不必要的依赖。\n将 Hook 拆分为更小的单元，每个 Hook 依赖于各自的依赖数组。\n通过合并相关的 state，将多个依赖值聚合为一个。\n通过 setState 回调函数获取最新的 state，以减少外部依赖。\n通过 ref 来读取可变变量的值，不过需要注意控制修改它的途径\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fplan","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavaluo%2Fplan","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fplan/lists"}