2021年05月_IT 哈

转载 path.resolve和path.join是干什么的？

前言vue 项目配置中经常能见到的 path.resolve() 、path.join()、__dirname，他们到底是个啥？官方的表述是：__dirname 表示当前模块的目录名（即运行的js文件所在的目录）。在 Node.js 模块系统中，每个文件都被视为一个独立的模块path.resolve() 将路径或路径片段的序列解析为绝对路径。path.join() 将所有给定的 path 片段连接到一起（使用平台特定的分隔符作为定界符），然后规范化生成的路径嗯，有点抽象。为了更好的弄明白

2021-05-31 22:12:05 484

转载抄得走, 用得到的 Koa 实践总结

为什么选择 Koa小王：为什么选择Koa?老王：因为 Koa 比较轻量，几乎没有内置任何的额外功能。也是因为这个原因，Koa 的灵活度是很高的，喜欢折腾的人可以尝试下小王：又轻量又几乎没有任何额外功能？那为什么不用原生Node？那个不是更轻？老王：这个。。。。我还是先说说怎么用吧有点长，心急的可以查看完整代码 https://github.com/JustGreenHand/koa-app搭建项目并启动服务经过一系列基操之后，生成如下所示的目录结构：接下来我们在启动文件...

2021-05-31 20:41:14 517 1

转载 HTTP 方法：GET 对比 POST

两种最常用的 HTTP 方法是：GET 和 POST。什么是 HTTP ？超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。HTTP 的工作方式是客户端与服务器之间的请求-应答协议。web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。两种 HTTP 请求方法：GET 和 POST在客户机和服务器之间进行请求-响应时，两种

2021-05-31 09:47:03 122

转载傻傻分不清之 Cookie、Session、Token、JWT

什么是认证（Authentication）通俗地讲就是验证当前用户的身份，证明“你是你自己”（比如：你每天上下班打卡，都需要通过指纹打卡，当你的指纹和系统里录入的指纹相匹配时，就打卡成功）互联网中的认证：用户名密码登录邮箱发送登录链接手机号接收验证码只要你能收到邮箱/验证码，就默认你是账号的主人什么是授权（Authorization）用户授予第三方应用访问该用户某些资源的权限你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）

2021-05-31 05:47:08 466

转载跨域资源共享 CORS 详解

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。（图片说明：摄于阿联酋艾因（Al Ain）的绿洲公园）一、简介CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS

2021-05-31 05:32:19 276

转载浏览器同源政策及其规避方法

浏览器安全的基石是"同源政策"（same-origin policy）。很多开发者都知道这一点，但了解得不全面。本文详细介绍"同源政策"的各个方面，以及如何规避它。一、概述1.1 含义1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。协议相同域名相同端口相同举例来说，http://www.example.c

2021-05-31 05:29:05 499

转载 jsonp原理详解——终于搞清楚jsonp是啥了

什么是JSONP？#先说说JSONP是怎么产生的：其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，着用自己的方式来阐释一下这个问题，看看是否有帮助。1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如&

2021-05-31 04:43:25 598

转载 bootstrap role属性

1、用于表示一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别。比如：<div role="button"></div>，也即是将div元素转换为button按钮功能进行使用；<div role="navigation"></div>，把div元素转换为navigation导航功能使用；<div role="checkbox" aria-checked="checked"></div>，把div元素转换为checkb.

2021-05-31 02:53:21 1187

转载 Bootstrap 中的 aria-label 和 aria-labelledby

aira-label正常情况下，form 表单的 input 组件都有对应的 label 。<form role="form"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div></fo.

2021-05-31 02:41:30 3413

转载 VUE--mixins的一些理解。

概念：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。用法：　　1、创建混入对象：在src文件夹创建mixins文件夹，再在mixins文件夹下创建一个index.js文件复制代码// 创建一个需要混入的对象 export const mixinstest = { data(){ return { testMix: '.

2021-05-31 02:30:29 378

转载 vue组件name的作用小结

我们在写vue项目的时候会遇到给组件命名这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的 1 2 3 export default { name:'xxx' } 1.当项目使用keep-alive时，可搭配组件name进行缓存过滤举个例子：我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载 1 2 3 4 ...

2021-05-28 21:19:33 336

转载 TortoiseSVN解决代码冲突

如果commit时出现“You have to update your work copy first.”红色警告，说明版本库中的此文件已经被其他人修改了。请先点“ok”按钮退出。执行update,然后再commit。如果修改与update得到的代码不冲突，则自动合并。如果冲突（比如对同一行代码进行了修改），则出现”One or more files are in a conflicted state.“红色警告，并产生几个文件记录冲突。一般情况下，我们不要直接编辑冲突文件。而按照以下操作手工解决冲突。

2021-05-27 03:26:25 1754 1

转载 cookie是指web浏览器存储的少量数据，该数据会在每次请求一个相关的URL时自动传到服务器中（转）

　　基本概念：cookie是指web浏览器存储的少量数据，该数据会在每次请求一个相关的URL时自动传到服务器中。　　以博客园为例，我们看看cookie有哪些属性：　 1、Name:cookie的名称；　　2、Value：cookie名称对应的值；　　3、Domain:设置cookie作用域。默认是当前web服务器的主机名。设置该属性可使大型网站子域之间共享cookie，不过只能设置为当前服务器的域。举个栗子：order.example.com域下的服务器想读取catalog/exam

2021-05-27 01:41:54 779

转载大公司里怎样开发和部署前端代码？

前百度工程师，曾负责百度前端集成解决方案的核心设计与开发工作。我现在称这个领域为【前端工程】。没错，这是我最爱唠叨的问题域。这是一个非常有趣的非主流前端领域，这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题，入行到现在一直在学习和实践中。在我的印象中，facebook是这个领域的鼻祖，有兴趣、有梯子的同学可以去看看facebook的页面源代码，体会一下什么叫工程化。接下来，我想从原理展开讲述，多图，较长，希望能有耐心看完。------------------...

2021-05-27 00:06:37 119

转载 http协商缓存VS强缓存

http协商缓存VS强缓存之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来；终于在前端的两次面试过程中被问倒下，为了泄恨，查阅一些资料最终对其有了一个更深入的理解，废话不多说，赶紧来看看浏览器缓存的那些事吧，有不对的地方，请各位不吝赐教啊。本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要.

2021-05-26 20:56:26 83

转载 ES6 import()

简介前面介绍过，import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行（import命令叫做“连接” binding 其实更合适）。所以，下面的代码会报错。// 报错if (x === 2) { import MyModual from './myModual';}上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和expo

2021-05-26 02:50:28 1528 2

转载深入koa-router源码理解allowedMethods中间件作用

在使用koa koa-router mock接口时，我们会看到 app.use(router.routes()).use(router.allowedMethods())，使用 router中间件后，又链式调用了router.allowedMethods()这个中间件，那为什么要加router.allowedMethods()中间件呢？他有什么作用？我们写个demo来测试下先下结论：router.allowedMethods()中间件，主要用于 405 Method Not Allowed 这个状.

2021-05-26 02:20:54 2884

转载 HTTP缓存机制

HTTP缓存机制Web 缓存大致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN 缓存）、浏览器缓存。浏览器缓存也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。在具体了解 HTTP 缓存之前先来明确几个术语：缓存命中率：从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。过期内容：超过设置的有效时间，被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求，必须重新向源服务器

2021-05-25 03:10:45 651

转载一张图理解Http缓存

参阅了一些浏览器缓存的资料，本文通过一张图来归纳总结其过程。浏览器第一次向一个web服务器发起http请求后，服务器会返回请求的资源，并且在响应头中添加一些有关缓存的字段如：Cache-Control、Expires、Last-Modified、ETag、Date等等。之后浏览器再向该服务器请求该资源就可以视情况使用强缓存和协商缓存。强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存。联系与区别：两种缓存方式最终使用的都

2021-05-25 02:53:00 138

转载 getClientRects() 和 getBoundingClientRect() 的用法和区别

getClientRects()getClientRects()的作用是获取元素占据页面的所有矩形区域：var rectCollection = object.getClientRects();getClientRects()返回一个TextRectangle集合，就是TextRectangleList对象。TextRectangle对象包含了,top,left,bottom,right,width,height六个属性。对于文本对象，W3C提供了一个TextRectangle对...

2021-05-25 01:26:18 3656

转载使用Typescript重构axios(一)——写在最前面

1.使用Typescript重构axios(一)——写在最前面2.使用Typescript重构axios(二)——项目起手，跑通流程3.使用Typescript重构axios(三)——实现基础功能：处理get请求url参数4.使用Typescript重构axios(四)——实现基础功能：处理post请求参数5.使用Typescript重构axios(五)——实现基础功能：处理请求的header6.使用Typescript重构axios(六)——实现基础功能：获取响应数据7.使用Typescript重构axi

2021-05-25 00:40:57 211

转载 axios封装并携带自定义请求头（笔记）

import axios from 'axios'// 创建axios实例const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间})axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'service.interceptors.request.

2021-05-24 23:11:16 1860

转载 JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageXoffsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）clientHeight ...

2021-05-24 22:34:29 270

转载 vue-router深度解析，全方位搞定路由！

SPA单页应用传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候受网络、性能影响，浏览器会出现不定时间的空白界面，用户体验不好。现在的应用都流行SPA应用（single page application），单页面应用就是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好。Vue中会使用官方提供的vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装）。简单路由的实现

2021-05-24 20:51:38 649 1

转载快速搭建一个代码在线编辑预览工具

快速搭建一个代码在线编辑预览工具简介大家好，我是一个闲着没事热衷于重复造轮子的不知名前端，今天给大家带来的是一个代码在线编辑预览工具的实现介绍，目前这类工具使用很广泛，常见于各种文档网站及代码分享场景，相关工具也比较多，如codepen、jsrun、codesandbox、jsbin、plnkr、jsfiddle等，这些工具大体分两类，一类可以自由添加多个文件，比较像我们平常使用的编辑器，另一类固定只能单独编辑html、js、css，第二类比较常见，对于demo场景来说其实已经够用，当然，说的只是表

2021-05-24 19:49:27 796

空空如也

空空如也