学会使用 Fetch API
介绍Fetch 是一个用来获取网络资源的 API,与 XMLHttpRequest 功能基本相同,但 Fetch 使用 Promise 处理响应,而不是回调函数。
语法1Promise<Response> fetch(input:string|Request[, options:object]);
当接收到一个代表错误的 HTTP 响应状态码时,从 fetch() 返回的 Promise 不会被标记为 reject,即使是 404 或 500 状态,也都会将 Promise 状态标记为 resolve(如果响应的 HTTP 状态码不在 200 - 299 的范围内,则设置 resolve 返回值的 ok 属性为 false)。只有当网络故障时或请求被阻止时,才会被标记为 reject。
options
method: 请求使用的方法,如 GET、POST。
headers: 请求的头信息,可以为 Headers 对象或包含 Headers 属性和值的对象字面量。
body: 请求的 body 信息:Blob、FormData、URLSearchParams 对象或者 ...
如何使用 meta 标签
介绍<meta> 元素用来表示不能由其它 HTML 元相关(meta-related)元素((<base>、<link>、<script>、<style> 或 <title>)之一表示的数据信息,元素标签内不包含任何内容。
具有不同属性的多个 <meta> 元素可以在同一页面上使用。<meta> 元素内容不会显示在页面上,但是对于机器是可读的,可用于模拟 HTTP 响应头字段的使用,页面描述、关键字用于搜索引擎优化,或其他 web 服务。
属性<meta> 标签的属性定义了与文档相关联的名称/值对,元数据总是以名称/值的形式被成对传递的。
对于 HTML 4.01 和 XHTML 1.0,有四个有效的属性:content、http-equiv、name 和 scheme。在 HTML 5 下,现在有五个有效的属性,添加了 charset。http-equiv 用于模拟 HTTP 标题,并用 name 来嵌入元数据。无论哪种情况,语句的值都包含在 content ...
结构化克隆、序列化、可传输对象
结构化克隆
结构化克隆是由 HTML5 规范定义的用于复制复杂 JavaScript 对象的算法,例如 structuredClone() 函数的调用,Workers 的 postMessage() 方法或使用 IndexedDB 存储对象时在内部的调用。
DOM 节点, Function 对象不能被结构化克隆算法复制,否则会抛出 DATA_CLONE_ERR 的异常。
RegExp 对象的 lastIndex 字段,原形链上的属性(例如,一个类的实例会被复制为一个普通对象),属性描述符(例如,如果一个对象用属性描述符标记为 read-only,它将会被复制为 read-write,因为这是默认的情况。),getters 和 setters 以及其他类似元数据的功能不会被保留。
支持的类型:
symbols 除外的所有原始类型。
Boolean String 原始类型包装对象。
Array Map Set Date RegExp 内置对象。
Blob File FileList 文件类型对象。
ArrayBuffer TypedArray DataView Buffer 类型对象。
I ...
如何使用严格模式
介绍$\color{lime}{ECMAScript 5}$ 开始添加了严格模式,在多个方面改变了 JavaScript 的语义,使 Javascript 在更严格的条件下运行,浏览器能更容易的解析代码,现在已经被大多浏览器实现(包括 IE10)。
它的产生是为了形成与正常代码不同的语义,而不仅仅是 JavaScript 的一个子集,主要目的是:
消除 Javascript 语法的一些不合理、不严谨之处,减少一些怪异行为;
消除代码运行的一些不安全之处,保证代码运行的安全;
修复了一些导致 JavaScript 引擎难以执行优化的缺陷,相同的代码,严格模式可以比非严格模式下运行得更快。
为新版本的 Javascript 做好铺垫。
使用严格模式可以应用到整个脚本或个别函数中。在 eval 、Function 、内联事件处理属性、WindowTimers.setTimeout() 方法中传入的脚本字符串,其行为类似于开启了严格模式的一个单独脚本,它们会如预期一样工作。在单独的封闭大括弧 {} 内声明是没有效果的。
整个脚本文件为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语 ...
axios 上传下载进度显示和取消请求
介绍Axios 是一个基于 promise 网络请求库,可用于 node.js 和浏览器中。它是 isomorphic 的(同构,即同一套代码可以运行在浏览器和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
特性
从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
上传和下载进度显示由于 Axios 是基于 XMLHttpRequests 的,所以可以使用 XMLHttpRequests 接口的 ProgressEvent 事件监听下载或上传进度。代码如下:
123456789101112131415161718192021222324252627axios('https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg', ...
mouseenter mouseleave mouseover mouseout mousemove 鼠标事件冒泡对比
介绍
mouseenter当使用定点设备(例如鼠标或触控板)将光标移动到元素上时,会触发 mouseenter 事件。
mouseleave当使用定点设备(例如鼠标或触控板)将光标移出某个元素时,会触发 mouseleave 事件。
mouseover当使用定点设备(例如鼠标或触控板)将光标移动到元素或其子元素之一上时,会在元素上触发 mouseover 事件。
mouseout当使用定点设备(例如鼠标或触控板)将光标移出元素或其子元素之一上时,会在元素上触发 mouseout 事件。
mousemove当使用定点设备(例如鼠标或触控板)将光标在元素上移动时,mousemove 事件被触发(事件冒泡)。
冒泡事件冒泡指将事件定向到其预期的目标的过程:
单击按钮并将事件定向到该按钮;
如果为该对象设置了事件处理程序,则触发该事件;
如果没有为该对象设置事件处理程序,则事件会向上冒泡(就像水中的气泡)到对象的父级;
事件从父级冒泡到父级的父级,直到它被处理,或者直到它到达 document 对象为止。
事件是否为冒泡事件可由 event.bubbles 事件属性返回。
true - ...
学会使用 requestAnimationFrame
介绍大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是1000ms/60,约等于16.7ms。
setTimeout 和 setInterval 的问题是,它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务,那动画代码就要等前面的任务完成后再执行。
requestAnimationFrame 是由浏览器专门为动画提供的API,用法类似于 setTimeout,但是不需要设置时间间隔。
当 requestAnimationFrame() 运行在后台标签页或者隐藏的 <iframe> 里时,requestAnimationFrame() 会被暂停调用,从而就提升性能和电池寿命。
语法12requestID: int = window.requestAnimationFrame(callback);window.cancel ...
CSS flex 属性的几种写法
介绍2009年,W3C 提出了一种新的方案—-Flex 布局,定义了一种针对用户界面设计而优化的 CSS 盒子模型。目前,它已经得到了所有浏览器的支持。如果学会使用它写 CSS 布局,简直太方便了。
容器的属性Flex 容器存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),主轴由 flex-direction 定义。以下6个属性设置在容器上。
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <’flex-direction’> || <’flex-wrap’>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
...
学会 curl 几个常用命令,可以代替 POSTMAN,apipost 等工具
介绍URL 命令行工具,cmd 和 powershell 中都可用。支持多种通信协议,包括 DICT, FILE, FTP, FTPS, GOPHER, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, POP3S, RTMP, RTMPS, RTSP, SCP, SFTP, SMB, SBMS, SMTP, SMTPS, TELNET 和 TFTP。
查看网页源码123curl https://www.baidu.com保存到文件curl https://www.baidu.com -o 1.html
获取头信息12curl https://www.baidu.com -icurl https://www.baidu.com -I
显示通信过程1234curl https://www.baidu.com -v保存到文件curl https://www.baidu.com --trace 1.txtcurl https://www.baidu.com --trace-ascii 1.txt
HTTP动词(必须大写)1curl http:// ...
偶感
一个不会追求宁静的人不会体会到当夜深人静时,一个人思索,一个人体会,一个人思想超越自我,超越精神的极限,神游天地,独享孤独,独享凄清,甚至独享眼泪的惬意。独营造了一个完全属于自我的世界,在这里你没有了喧嚣有的只是宁静。我喜欢在宁静中思考,思考周围的人,周围的事,思考前路,和走过的路。独是我无法或不愿面对时的一种反应,既然我的世界不该有的就让我简单些把。即使是一个人,即使是别人都不认可的一种状态,但对我而言那是一种境界,别人不可企及。