㈠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原文地址：5 CSS Practices To Avoid as a Web Developer 原文作者：Alexey Shepelev 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：霜羽 Hoarfroster 校对者：KimYang、Chorer 有人认为 CSS 很难学习，觉得 CSS 有很多的坑，甚至还有一点儿魔幻，难以理解，很容易会搬起石头砸自己的脚。对此我感到难过，毕竟，我可不这么认为。 在考虑了可以做什么之后，我提出了五个我挺讨厌的 CSS 的做法，希望帮助大家避免这些习惯。 1. 设置内外边距，然后将其重置 我经常看到人们为所有元素设置内外边距，然后为第一个元素或者最后一个元素清除刚刚写的边距。我不知道为什么你非要在一条规则就可以解决问题的情况下写两条规则。一次为所有必需的元素设置边距明显容易得多！ 为简化 CSS，你可以选用以下几种选择器：nth-child 或 nth-of-type 选择器，还有 :not() 伪类或相邻元素组合器（即 +）。 不要这么写：
|
1 2 3 4 5 6 7 |
.item { margin-right: 1.6rem; } .item:last-child { margin-right: 0; } |
你可以这么写：
|
1 2 3 |
.item:not(:last-child) { margin-right: 1.6rem; } |
或这样写：
|
1 2 3 |
.item:nth-child(n+2) { margin-left: 1.6rem; } |
或者用：
|
1 2 3 |
.item + .item { margin-left: 1.6rem; } |
2. 为 position 为 fixed 或 absolute 的元素添加 display:block 你知道吗？其实你无需为 position 为 fixed 或 absolute 的元素添加 display:block，因为这是默认发生的。 另外，如果你在这些元素上使用 inline-* 值，它们将按以下方式更改： inline、inline-block -> block inline-flex -> flex inline-grid -> grid inline-table -> table 因此，对于 position 为 fixed 或 absolute 的元素，你只需在要使用 flex 布局或者 grid 布局的时候设置 […]
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