毋庸置疑：善用在线资源和工具可以加速开发，提高质量、让生活更 Chill 😎~ 本篇为前端工友们带来 10 个棒棒哒免费的 Web 资源，收藏⭐等于学会 (๑•̀ㅂ•́)و✧ 1. Undraw 如果你的网站需要免费的 SVG 插图，一定不要错过 Undraw 这个网站！ SVG 插图资源是海量的，本瓜下拉了十几、二十次都拉不完（当然，搜索功能也是有的）；并且，你还可以自定义插图的配色，简直不要太 NICE~ 海量资源，支持搜索🔍 随意更改配色🌈 2. Error 404 不知道你一般会去哪找 404 页面素材~ 现在你又多了一个选项：Error 404 酷酷酷~ 把本瓜一个切图仔的审美都拉上来了👆 3. Squoosh 压缩图片！! 对比 tinypng 有【更好的】压缩效果： tinypng 压缩 Squoosh 压缩 压缩效果：前者是 80%，后者是 95%；最终效果也不错~👍 Why not try ? 4. DevDocs DevDocs 见名思意，是 Web 开发技术文档，是非常不错的学习手册！ 别的不说，就这 UI 本瓜就挺喜欢！还支持添加常用技术文档、更换主题等~ 5. iHateRegex 如果你讨厌正则，那么一定不要错过这个网站？(ˉ▽ˉ；)… 不仅如此，还有细节图示！可恶，做的真好啊 ╮(╯▽╰)╭ 6. Carbon 经常有人问，“这种好看的代码片段如何生成”，答案就在 Carbon！ 你可以生成各种主题、各种语言的代码片段，并导出为图片或复制到其它平台，真滴好用👌 舒服了~~ 7. Dribbble 寻找网页设计灵感，认准 Dribbble!!! 看到人家的管理后台设计，就想马上回去把自家的管理后台“撕”了🐶 8. Animista Css 动画，复制代码就能用！免安装，它不香嘛？ 9. Shape […]
View Details㈠fetch的简单介绍 fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。 fetch不是ajax的进一步封装，而是原生js。 Fetch函数就是原生js，没有使用XMLHttpRequest对象。 ㈡XMLHttpRequest API 的缺点 ⑴ 不符合关注分离（Separation of Concerns）的原则 ⑵ 配置和调用方式非常混乱 ⑶ 基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。 ⑷具体示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var xhr = new XMLHttpRequest(); xhr.open('GET',url); xhr.responseType = 'json'; xhr.onload = function(){ console.log(xhr.response); } xhr.onerror = function(){ console.log('xhr error'); } xhr.send(); |
㈢Fetch 的出现就是为了解决 XHR 的问题 ⑴使用fetch做请求后：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
fetch(url).then(function(response){ return response.json(); }).then(function(data){ console.log(data); }).catch(function(e){ console.log('error' + e); }); |
⑵es6写法：
|
1 2 3 4 5 |
fetch(url).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e)); |
⑶处理text/html响应：
|
1 2 3 4 5 |
fetch(url).then(response=>response.text()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e)); |
⑷获取头信息：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
fetch(url).then((response)=>{ console.log(response.status); console.log(response.statusText); console.log(response.headers.get('Content-Type')); console.log(response.headers.get('Date')); return response.json(); }).then(data=>console.log(data)) .catch(e=>console.log('error' + e); |
⑸设置头信息
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
fetch(url,{ headers:{ 'Accept': 'application/json', 'Content-Type': 'application/json' } }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e); |
⑹提交表单
|
1 2 3 4 5 6 7 8 9 10 11 |
fetch(url,{ method: 'post', body: new FormData(document.getElementById('form')) }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e); |
⑺提交json数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
fetch(url,{ method: 'post', body: JSON.stringify({ username: document.getElementById('username').value, password: document.getElementById('password').value }) }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e); |
⑻fetch跨域的处理 fetch中可以设置mode为"no-cors"（不跨域）
|
1 2 3 4 5 |
fetch('/users.json', { method: 'post', mode: 'no-cors', data: {} }).then(function() { /* handle response */ }); |
这样之后我们会得到一个type为“opaque”的返回。 需要指出的是，这个请求是真正抵达过后台的， 所以我们可以使用这种方法来进行信息上报，在我们之前的image.src方法中多出了一种选择， 另外，我们在network中可以看到这个请求后台设置跨域头之后的实际返回，有助于我们提前调试接口（当然，通过chrome插件我们也可以做的到）。 ㈣Fetch 优点 ⑴语法简洁，更加语义化 ⑵基于标准 Promise 实现，支持 async/await ⑶同构方便，使用 isomorphic-fetch ㈤Fetch 的兼容问题： ⒈fetch原生支持性不高，引入下面这些 polyfill 后可以完美支持 IE8+ ： ⑴由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham […]
View Details错误的原因，npm版本问题； 解决办法： 1》更新到最新版本：npm install npm -g 要记住全局更新 2》回退版本：npm install -g npm@5.4.0 用cnpm 会快一些 from:https://www.cnblogs.com/hou-yuan-zhen/p/11703722.html
View Details原因是https页面去发送http请求报错(浏览器阻止https发送http请求) 解决方法：页面中的http换成https from:https://www.cnblogs.com/nonsec/p/13177387.html
View Details最近写小程序，new Date(‘2018-12-17 13:12’)在电脑上显示正常,用开发者工具进行真机调试的时候也正常,放到手机上就报错,开始还以为是时分秒都必须有. 过了一会才想起来ios的时间格式必须为 2018/12/17 ios不支持2018-12-17的写法,所以-必须都替换为/
|
1 2 3 |
var date = '2018-12-17 13:33' Date.parse(new Date(date.replace(/-/g, '/'))); |
这个问题隔一段时间都会遇到一次,每次自己都忘了这个点…. ———————————————— 版权声明：本文为CSDN博主「__朝朝」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_37514029/article/details/85052064
View Details俗话说得好，工欲善其事必先利其器。本文阿宝哥将介绍一些优秀的开源项目，利用这些开源项目，你将能能轻松应对以下十个工作场景：文件上传、图片处理、文档处理、网络请求、数据存储、微前端、表单设计器、H5 页面设计器、文档管理和 API 管理。 阅读阿宝哥近期热门文章（感谢掘友的鼓励与支持🌹🌹🌹）： 77.9K Star 的 Axios 项目有哪些值得借鉴的地方（1018+ 个👍） 使用这些思路与技巧，我读懂了多个优秀的开源项目（724+ 个👍） 这些高阶的函数技术，你掌握了么 （629+ 个👍） 文件上传 uppy The next open source file uploader for web browsers 🐶 github.com/transloadit… uppy 是一个体验顺滑、模块化的 JavaScript 文件上传器，可以无缝地与任何应用程序集成。它速度快，使用方便，可以让你专注比构建文件上传器更重要的问题。该库拥有以下特性： 支持 I18n 及可访问性； 轻量，基于模块化的插件架构，可按需加载； 通过开放的 tus 标准，可恢复文件上传，可以解决上传过程中网络故障的问题。 filepond 🌊 A flexible and fun JavaScript file upload library github.com/pqina/filep… filepond 是一个 JavaScript 库，可以上传你扔给它的任何内容，优化图像以加快上传速度，并提供出色的，可访问的，柔滑的用户体验。该库拥有以下特性： 接受目录，文件，Blobs，本地 URL，远程 URL 和 Data URIs； 图像优化，自动调整图像大小，支持裁剪，过滤和修复 EXIF 方向； 支持拖拽文件，从文件系统选择文件，复制和粘贴文件或使用 API 添加文件； 使用 AJAX 进行异步上传，支持分块上传，可以将文件编码为 base64 数据，并可以通过表单提交。 ✨ 扩展阅读 ✨ 玩转前端文件上传 大规格文件的上传优化 关注「全栈修仙之路」阅读阿宝哥原创的 3 本免费电子书（累计下载近2万）及 50 几篇 “重学TS” 教程。 图片处理 tui.image-editor 🍞🎨 Full-featured […]
View Details阿宝哥第一次使用 TypeScript 是在 Angular 2.x 项目中，那时候 TypeScript 还没有进入大众的视野。然而现在学习 TypeScript 的小伙伴越来越多了，本文阿宝哥将从 16 个方面入手，带你一步步学习 TypeScript，感兴趣的小伙伴不要错过。 一、TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系： 1.1 TypeScript 与 JavaScript 的区别 TypeScript JavaScript JavaScript 的超集用于解决大型项目的代码复杂性 一种脚本语言，用于创建动态网页 可以在编译期间发现并纠正错误 作为一种解释型语言，只能在运行时发现错误 强类型，支持静态和动态类型 弱类型，没有静态类型选项 最终被编译成 JavaScript 代码，使浏览器可以理解 可以直接在浏览器中使用 支持模块、泛型和接口 不支持模块，泛型或接口 社区的支持仍在增长，而且还不是很大 大量的社区支持以及大量文档和解决问题的支持 1.2 获取 TypeScript 命令行的 TypeScript 编译器可以使用 npm 包管理器来安装。 1.安装 TypeScript
|
1 |
$ npm install -g typescript |
2.验证 TypeScript
|
1 2 |
$ tsc -v # Version 4.0.2 |
3.编译 TypeScript 文件
|
1 2 |
$ tsc helloworld.ts # helloworld.ts => helloworld.js |
当然，对刚入门 TypeScript 的小伙伴来说，也可以不用安装 typescript，而是直接使用线上的 TypeScript Playground 来学习新的语法或新特性。通过配置 TS Config 的 Target，可以设置不同的编译目标，从而编译生成不同的目标代码。 […]
View DetailsDate.parse() 方法解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数，如果该字符串无法识别，或者一些情况下，包含了不合法的日期数值（如：2015-02-31），则返回值为NaN。 不推荐在ES5之前使用Date.parse方法，因为字符串的解析完全取决于实现。直到至今，不同宿主在如何解析日期字符串上仍存在许多差异，因此最好还是手动解析日期字符串（在需要适应不同格式时库能起到很大帮助）。
|
1 2 3 4 5 6 7 8 |
const unixTimeZero = Date.parse('01 Jan 1970 00:00:00 GMT'); const javaScriptRelease = Date.parse('04 Dec 1995 00:12:00 GMT'); console.log(unixTimeZero); // expected output: 0 console.log(javaScriptRelease); // expected output: 818035920000 |
语法 显式调用：
|
1 |
Date.parse(dateString) |
隐式调用：
|
1 |
new Date(dateString).getTime() |
参数 dateString 一个符合 RFC2822 或 ISO 8601 日期格式的字符串（其他格式也许也支持，但结果可能与预期不符）。 返回值 一个表示从1970-1-1 00:00:00 UTC到给定日期字符串所表示时间的毫秒数的数值。如果参数不能解析为一个有效的日期，则返回NaN。 描述 parse 方法接受一个日期字符串（例如 "Dec 25, 1995"），并返回从1970-1-1 00:00:00 UTC到该日期字符串所表示日期的毫秒数。该方法在基于字符串值设置日期值时很有用，例如结合使用setTime() 方法和 Date() 构造函数。 parse 方法接受一个表示时间的字符串，返回相应的时间值。该方法可以接受符合 RFC2822 / IETF 日期语法 (RFC2822 Section 3.3) 的字符串，如 "Mon, 25 Dec 1995 13:30:00 GMT"。该方法能够理解美国大陆时区的缩写，但是为了更通用，应该使用时区偏移，如 "Mon, 25 Dec 1995 13:30:00 +0430" （格林威治的子午线向东偏移4小时30分钟）。如果没有指定时区，默认使用本地时区。 GMT 和 UTC 被看作相等。 如果 RFC2822 Section 3.3 格式中不包含时区信息时，会以本地时区来解析日期字符串。 由于在解析日期字符串时存在偏差会导致结果不一致，因此推荐始终手动解析日期字符串，特别是不同的ECMAScript实现会把诸如“2015-10-12 12:00:00”的字符串解析为NaN，UTC或者本地时间。 ECMAScript 5 ISO-8601 日期格式支持 另外，日期时间字符串也可以使用 ISO 8601 格式。例如，"2011-10-10" （仅日期）或 "2011-10-10T14:48:00" （日期和时间）能够作为参数被传递和解析。 如果参数字符串只包含日期格式，那么将会使用UTC时区来解析该参数。而如果是ISO 8601 格式中规定的时间加日期的格式，则将会被作为本地时区处理。 虽然在日期字符串解析过程中会使用时区修饰符，但返回值总会是从由NaN表示的1970-1-1 00:00:00 UTC到该日期字符串所表示日期的毫秒数。 由于 parse() 是 Date 的一个静态方法 , 所以应该使用 Date.parse() 来调用，而不是作为 Date 的实例方法。 默认时区的区别 当输入为 "March 7, 2014" 时， parse() 将默认使用本地时区。但如果使用 ISO 格式如 "2014-03-07" ，则会被默认为 […]
View Details备注：<=> 意为等价于； 1、npm install <=> npm i --save <=> -S --save-dev <=> -D npm run start <=> npm start // 对应"scripts"里的"start"命令 少敲几下键盘，何乐而不为 2、npm i --save-dev <packname> 工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader… 3、npm i --save <packname> 项目（运行时、发布到生产环境时）依赖；例：antd , element,react… 4、对应关系如下（至于我们啥时候用--save、啥时候用--save-dev 感觉是个规范问题，用反了项目一样可以跑起来（对于安装依赖正确时），但会给其他看你项目的人带来误解、可能会导致一些bug的出现，还有一些配置的错乱等） 5、使用 npm i 安装package.json里的依赖时，两部分的包都会pull下来 5-1、使用 --prod、 npm i --prod <=> npm i --production // 仅会拉取dependencies中的依赖 5-2、设置NODE_DEV=production时 // 效果同上，仅会拉取dependencies中的依赖 (注意等号两边没空格) 5-2-1、命令行设置（注意不同环境时的"分割符"） window => cmd ：set NODE_ENV=production && xxxx mac => shell : NODE_ENV=production 空格 xxxx 5-2-2、package.json=>script命令中设置 彩蛋：在新建package.json文件时，我们可以使用npm init -y 快速创建（yes 表示一路默认创建，还有 -f 表示 force） from:https://blog.csdn.net/jwl_willon/article/details/81054978
View Details解决方案： npm config set user 0 npm config set unsafe-perm true 报错： Unable to save binary /var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor/linux-x64-64 : { Error: EACCES: permission denied, mkdir '/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor' at Object.mkdirSync (fs.js:753:3) at sync (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/mkdirp/index.js:71:13) at Function.sync (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/mkdirp/index.js:77:24) at checkAndDownloadBinary (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/scripts/install.js:114:11) at Object.<anonymous> (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/scripts/install.js:157:1) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) errno: -13, syscall: 'mkdir', code: 'EACCES', path: '/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor' } > node-sass@4.11.0 postinstall /var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass > node scripts/build.js ———————————————— 版权声明：本文为CSDN博主「T&K」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/sinat_41780498/article/details/88737365
View Details