{"id":13754526,"url":"https://wang1212.github.io/awesome-code-snippets/","last_synced_at":"2025-05-10T00:31:01.306Z","repository":{"id":76785729,"uuid":"204377596","full_name":"wang1212/awesome-code-snippets","owner":"wang1212","description":":clipboard: Some great code snippets that are very useful and reusable. | 一些非常棒、可重用的代码片段。","archived":false,"fork":false,"pushed_at":"2020-08-05T03:32:33.000Z","size":689,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-07T11:03:05.467Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://wang1212.github.io/awesome-code-snippets","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wang1212.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-08-26T02:08:51.000Z","updated_at":"2023-03-07T10:56:30.000Z","dependencies_parsed_at":"2024-01-13T01:27:10.732Z","dependency_job_id":"0992aade-fb18-4680-bfc6-ca031d9c2560","html_url":"https://github.com/wang1212/awesome-code-snippets","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/wang1212%2Fawesome-code-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wang1212%2Fawesome-code-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wang1212%2Fawesome-code-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wang1212%2Fawesome-code-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wang1212","download_url":"https://codeload.github.com/wang1212/awesome-code-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253346355,"owners_count":21894263,"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-08-03T10:00:26.947Z","updated_at":"2025-05-10T00:31:00.967Z","avatar_url":"https://github.com/wang1212.png","language":"HTML","funding_links":[],"categories":["目录"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eAwesome-Code-Snippets\u003c/h1\u003e\n  \n  \u003cp\u003e:heart: 很棒的且可重用的代码片段。\u003c/p\u003e\n \u003c/div\u003e\n\n## 目录\n\n*Content.*\n\n- [HTML Template](https://wang1212.github.io/awesome-code-snippets)\n- [Leaflet-With-Plugins](https://wang1212.github.io/awesome-code-snippets/leaflet-with-plugins.html)\n- [Cesium.js](cesiumjs.md)\n\n## 代码片段\n\n*Code Snippets.*\n\n### JavaScript\n\n- [ESRI Shapefile][2] 文件中 [dbf][1] 文件的属性字段类型\n\n*[Field data type][0] mapping in the [dbf][1] file of [ESRI Shapefile][2].*\n\n[0]: http://www.dbase.com/Knowledgebase/INT/db7_file_fmt.htm \"Data File Header Structure for the dBASE Version 7 Table File\"\n[1]: https://www.loc.gov/preservation/digital/formats/fdd/fdd000326.shtml \"dBASE Table for ESRI Shapefile (DBF)\"\n[2]: https://www.esri.com/library/whitepapers/pdfs/shapefile.pdf\n\n```javascript\n{\n\tB: 'Binary',\n\tC: 'Character',\n\tD: 'Date',\n\tN: 'Numeric',\n\tL: 'Logical',\n\tM: 'Memo',\n\t'@': 'Timestamp',\n\tI: 'Long',\n\t'+': 'Autoincrement',\n\tF: 'Float',\n\tO: 'Double',\n\tG: 'OLE'\n}\n```\n\n### HTML\n\n- `MediaDevices.getUserMedia()` vs `\u003cinput type=\"file\" capture /\u003e`\n\n为了使用 JavaScript 在移动终端上调用媒体设备（相机/麦克风等），H5 API 提供了 [`MediaDevices.getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)，但是存在许多兼容性问题；然而，你可以使用 `input` 标签的 [`capture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture) 属性作为备选方案。\n\n```\n// `accept` attribute can restrict media type.\n// no accept - When the accept attribute does not exist, it will include the camera / camcorder / recorder / file system.\n// accept=image/* - camera only.\n// accept=video/* - camcorder only.\n// accept=audio/* - recorder only.\n\u003cinput type=\"file\" capture /\u003e\n```\n\n### CSS\n\n- 使用 [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) 隐藏不需要打印的 DOM 元素\n\n```css\n@media print {\n  .not-print {\n    display: none;\n  }\n}\n```\n\n标记不需要打印的 DOM 元素：\n\n```html\n\u003cdiv class=\"not-print\"\u003e\u003c/div\u003e\n```\n\n- 使用 CSS 规则 [`break-before`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before) 和` break-after` 在打印时强制分页：\n\n```css\n.page {\n  break-before: auto;\n  break-after: always;\n}\n```\n\n然后:\n\n```html\n\u003csection class=\"page\"\u003ePage One\u003c/section\u003e\n\u003csection class=\"page\"\u003ePage Two\u003c/section\u003e\n```\n\n- 使用 [`CSS contain`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) 优化性能\n\n```css\ncontain: strict;\n```\n\n### Node.js\n\n- 在 Node.js 中用 **POST** 请求提交 `multipart/form-data` 表单数据\n\nNode.js 默认对 `multipart/form-data` 数据在请求时不进行编码，[form-data](https://github.com/form-data/form-data) 模块提供了解决方案：\n\n```javascript\nimport FormData from 'form-data'\nimport axios from 'axios'\n\nconst formData = new FormData()\nformData.append('username', username)\nformData.append('password', password)\n\n// `headers` are very important\naxios.post(api, formData, { headers: formData.getHeaders() })\n```\n\n- `npm link`\n\n在 Node.js 模块/包开发中，`npm link` 命令可以在本地进行发布前调试，但会造成一点的问题和文件夹污染，下面提供一个更干净的方式：\n\n```json\n\"dependencies\": {\n  \"my-dev-module\": \"file:../my-dev-module/index.min.js\"\n}\n```\n\n- 移除 *node_modules* 文件夹\n\n*node_modules* 文件夹通常包含大量文件，要在 **Windows** 系统上删除该文件夹需要耗费很长时间，提供一个有用的命令来快速删除该文件夹：\n\n```cmd\nrmdir \"node_modules\\\" /S /Q\n```\n\n- 安装 `node-sass`\n\n安装 `node-sass` 的过程中总会出现网络错误，可以使用国内镜像源进行安装：\n\n*It is easy to **fail** to install in **China** in the normal way. Can be installed in the following ways:*\n\n```shell\nnpm i -D node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/\n```\n\n现在，推荐使用 [`sass`](https://www.npmjs.com/package/sass) 作为替代。\n\n## 其它\n\n*Other.*\n\nThe reason this repository exists is because gistub's gist cannot be accessed in the normal way.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/wang1212.github.io%2Fawesome-code-snippets%2F","html_url":"https://awesome.ecosyste.ms/projects/wang1212.github.io%2Fawesome-code-snippets%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/wang1212.github.io%2Fawesome-code-snippets%2F/lists"}