hadry123的博客

原创 私有仓库搭建

创建私有 NPM 库

原创 输入url到页面呈现过程

所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使 用本地的缓存，以最大程度的减少因网络请求而产生的资源浪费。浏览器缓存是浏览器在本地磁盘对用户最近请求过的特定资源进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载资源，用来减少发送不必要的网络请求，加快页面的加载速度，提高用户的使用体验。协商缓存就是浏览器向服务器发送一个请求，服务器会检查该资源是否有更新，如果有更新，就返回最新的资源，状态码200，如果没有更新，状态码304，不返回资源，浏览器从缓存中读取资源。

原创 登录的两种方式

上面的过程结束后，第三方网站服务器（或者客户端也会，客户端使用不安全，会泄漏token，这样做Authorization code的环节失去了作用 ）就可以使用access token作为用户授权令牌，向授权网站发送请求来获取用户信息或操作用户账户。服务器在收到用户信息后，在自己的数据库中为用户创建一个账户，并使用从微信服务器拿来的用户信息填入自己的数据库，以及将用户的ID和用户的微信ID做关联。授权方网站根据client ID，将第三方网站的信息和第三方需要的用户权限展示给用户，并询问是否同意授权。

原创 http/https

不是发送finished这几个字母，而是把前面几条信息综合在一起，就是握手相关的消息结合在一起，密钥不会再重新发，把他们用加密密钥进行加密，然后再做一个HMAC，对方服务器收到后会进行验证，从这一步之后，客户端就可以发送它正式发送的应用层信息了。【客户端】【服务器】Master Secret生成客户端加密密钥，服务端加密密钥，客户端MAC secret，服务端MAC secret，由这四个可以实现对称加密通信。：是HMAC的secret，带密钥的hash，可以验证数据的完整性，也可以验证身份。

原创 TCP/IP协议族

因为移动网络并不在Internet中，而是在运营商的内网，因此并不具备真正的公网IP，因此当某个TCP连接在一段时间不通信之后，网关会处于网络性能考虑而关闭这条TCP连接和公网的连接通道，导致这个TCP端口不再能收到外部通信消息，即TCP连接被动关闭。TCP拥塞控制默认认为网络丢包是由于网络拥塞导致的，所以一般的TCP拥塞控制算法以丢包为网络进入拥塞状态的信号。因为在客户端停止向服务器发送消息时，也许服务器还有消息需要向客户端发送，在稍后服务器的消息发送完毕之后，才需要向客户端发送通知。

原创 对称加密/非对称加密

使用非对称加密通信，可以在不可信网络上将双方的公钥传给对方，然后在发消息前分别对消息使用对方的公钥来加密和使用自己的私钥来签名，做到不可信网络上的可靠密钥传播即加密通信。所以非对称加密的关键在于，如何找到一个正确的私钥，可以解密所有经过公钥加密过的密文，找到这样的私钥即为破解。和对称加密的不同之处在于，非对称加密的公钥很容易获得，因此制造「原文-密文」对没有什么困难的事。通信双方使用同一个密钥，使用加密算法配合密钥来加密，解密时使用加密过程的完全逆过程来进行解密。使用公钥对数据进行加密得到密文；

原创 一文了解异步编程

promise是异步编程的一种解决方案，从语法上来说，Promise是一个对象，从它可以获取异步操作的消息ES6规定，Promise对象是一个构造函数，接受一个函数作为参数，这个函数会立即执行，该函数的两个参数分别是resolve和reject，它们是两个函数。resolve函数的作用是将Promise对象的状态从Pending变成Resolved，在异步操作成功时调用并将异步操作结果作为参数传递出去；

原创 前端模块化

事实上模块化开发最终目的是将程序划分成一个个小的结构在这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构这个结构可以将自己希望暴露的变量、函数、对象等导出给其他结构使用。可以通过某种方式，导入另外结构中的变量、函数、对象等；

原创 原型/原型链/构造函数/类

构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数。在其他面向对象语言里面，构造函数是存在于类中的的一个方法，称之为构造方法。在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写。

原创 函数式编程

函数式编程是一种编程范式。

原创 跨域解决方案

换句话说，表单的提交动作不受浏览器的同源策略限制，即使目标 URL 与当前页面的域名、协议或端口号不同，也可以成功发送表单请求。具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。需要注意的是，即使表单可以跨域提交，服务器仍然需要正确处理跨域请求，并在响应中设置适当的 CORS 响应头，以允许或限制跨域请求的访问。

原创 事件循环Event Loop

主线程不断的从消息队列中获取消息，执行消息，这个过程被称为事件循环，在javaScript中就是采用事件循环来解决单线程带来的问题这个阶段执行timer（setTimeout、setInterval）的回调timers是事件循环的第一个阶段，当我们使用setTimeOut或者是setInterval时，node会检查timers堆中有无过期的timer，如果有则依次执行。

原创 DOM事件模型与事件委托

如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。但是如果要实现先冒泡后捕获的效果，对 于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂 缓执行，直到冒泡事件被捕获后再执行捕获之间。事件委托还有一个名字叫事件代理，javaScript高级程序设计上讲：事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件。DOM事件分为三个级别：DOM 0级事件处理，DOM 2级事件处理、DOM 3级事件处理。

原创 var、let、const和执行上下文

ES6新增了let命令，用于声明变量，其语法类似于var，但是所声明的变量只在let命令所在的代码块内有效。

原创 创建对象的方式和对属性的操作

Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象name: {},age: {},})

原创 JS函数this指向

函数在调用时，javaScript会默认给this绑定一个值,this的绑定和调用方式以及调用的位置有关系，this是在运行时被绑定的。在全局作用域下this指向在Node环境中this指向的是空对象（内部源码通过call绑定的exports， exports ={}）在浏览器之中指向的是windowthis的绑定规则1. 默认绑定独立函数调用属于默认绑定，独立函数调用是指函数调用无任何前缀的情景。默认绑定时，在非严格模式下this指向全局对象，再严格模式中，this指向undefin

原创 js内存管理和闭包

JS的内存管理javaScript会在定义变量时为我们分配内存JS对于基本数据类型内存的分配会在执行时，直接在栈空间进行分配JS对于复杂数据类型内存的分配会在堆内存中开辟一块空间，并且将这块空间的指针返回值变量引用；JS的垃圾回收因为内存的大小是有限的，所以当内存不再需要的时候，我们需要对其进行释放，以便腾出更多的内存空间,大部分现代的编程语言都是有自己的垃圾回收机制.垃圾回收的英文是Garbage Collection，简称GC；对于那些不再使用的对象，我们都称之为是垃圾，它需要被回收

原创 浏览器工作原理

原创 js中null和undifined区别

变量声明不开辟内存，只是告诉编译器，要声明的部分存在，要预留部分的空间。变量定义开辟内存null表示“没有对象”，即该处不应该有值。典型用法是：作为参数，表示该函数的参数不是对象作为对象原型链的终点undefined表示“缺少值”，就是此处应该有一个值，但是还没有定义，典型用法是变量被声明了，但是没有赋值，就等于undefined。调用函数时，应该提供数据没有提供，改参数等于undefined对象没有赋值的属性，该属性值为undefined。函数没有返回值时，默认返回undefin

原创 keep-alive

keep-alive是vue的一个内置组件1. 官方介绍及其用法Props：include - string | RegExp | Array。只有名称匹配的组件会被缓存。exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。max - number | string。最多可以缓存多少组件实例用法： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的

原创 arcgis缓冲区及遇到的坑

缓冲区最近要做一个搜索周边的功能，为了让用户看到范围，我想到了缓冲区，首先我们先了解一下几何图形几何图形几何图形中中常用的就是 点，我们这里说两种【“esri/geometry/Point”】和【“esri/Graphic”】 var pt=new Point({ longitude:longitude, latitude:latitude, z:z,

原创 前端登录

常见的几种登录方式cookie+SessionCookie + Session 实现流程用户首次登录时：用户访问 a.com/pageA，并输入密码登录。服务器验证密码无误后，会创建 SessionId，并将它保存起来服务器端响应这个 HTTP 请求，并通过 Set-Cookie 头信息，将 SessionId 写入 Cookie 中服务器端的 SessionId 可能存放在很多地方，例如：内存、文件、数据库等。第一次登录完成之后，后续的访问就可以直接使用 Cookie

原创 JS语言通识 | 泛用语言分类方法 和 JavaScript类型

语言的分类形式语言—用途数据描述语言 （例 ：JSON ， HTML，XHTML，SQL）编程语言（例：C，C++， Java）形式语言—表达方式声明式语言（只告诉你他的结果是怎么样的，例：JSON）命令型语言（会告诉你达成这个结果他的每个步骤是怎么样的，例C++、C、Java、C#、Python、Ruby、Perl、T-SQL、JavaScript）语言按语法分类非形式语言形式语言（乔姆斯基谱系）说明：0123属于包含关系0型 无限制文法1型 上下文相关文法2型

原创 svg全局组件

全局注册组件安装npm install svg-sprite-loader -D配置build/webpack.base.conf.js创建svg组件代码文件创建index.vue文件将以下内容写入iconName是svg文件的名字， svgClass是自己定义的类名<template> <svg :class="svgClass" aria-hidden=...

原创 前端文件下载

文件下载a标签下载 <a href="文件链接" download='下载文件名'></a>axios axios({ methods: "GET", url: url, responseType: "blob"//设置为blod流 ...

原创 css元素鼠标事件不生效

pointer-events语法：pointer-events：auto| none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all默认值：auto适用于：所有元素继承性：有动画性：否计算值：指定值取值：auto：与pointer-events属性未...

原创 promise 实现红绿灯

使用promise 实现红绿灯颜色的跳转红灯执行1秒绿灯执行2秒后黄灯执行3秒后<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css...

原创 vue-calendar-component vue日历组件

**Github地址：https://github.com/zwhGithub/vue-calendar**Installnpm i vue-calendar-component --savecnpm i vue-calendar-component --save //国内镜像Usage//vue文件中引入import Calendar from 'vue-calendar-c...

原创 videojs 销毁重新初始化问题及其他使用

1.videojs 销毁this.myvideo = videojs('myvideo', { bigPlayButton: false, textTrackDisplay: false, posterImage: true, error...

原创 document元素还未加载好进行操作所导致的问题解决

在video元素还没有加载好，就开始初始化，报错The element or ID supplied is not valid. (videojs)解决方法：this.$nextTick(() => { })

原创 vue关于videojs一个页面多个视频且一个播放器多个视频源的写法（播放m3u8视频格式的视频监控）

前言突然接到一个任务是需要做一个视频回放，而且是监控视频那种。1、首先需要能播m3u8视频npm install --save video.jsnpm install --save videojs-contrib-hlsimport videojs from ‘video.js’import ‘videojs-contrib-hls’2、一个页面一个视频<video id="...

原创 echart报错: Component series.map3D not exists. Load it first和Cannot read property 'features' of null

这个问题让我崩溃了一会儿，在百度上查的问题几乎和这个没有关系，最后还是解决了1.Component series.map3D not exists. Load it first这个问题我出错的原因是没有安装echarts-glnpm install echarts-gl然后在main.js中引入import echartsGL from ‘echarts-gl’ // 引入echarts...

原创 判断复选框是否被选中

判断复选框是否被选中if ($("#" + arr_set[i]).is(’:checked’) === true) {console.log(“被选中”)} else{console.log(“没被选中”)}

转载 js中(function(){}()),(function(){})(),$(function(){});之间的区别

js中(function(){}()),(function(){})(),$(function(){});之间的区别TOC](这里写自定义目录标题)https://blog.csdn.net/stpice/article/details/80586444

原创 selectpick 清空

（1） $(’.selectpicker’).selectpicker(‘val’,[‘noneSelectedText’])//回到初始状态（2） $(".selectpicker").selectpicker(‘refresh’);//刷新

原创 jQuery 效果 - toggle() 方法

toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。语法$(selector).toggle()