<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[zhm0303的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/zhm0303</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; zhm0303]]></copyright><item><title><![CDATA[vue3.0 使用proxy代替object.defineproperty()实现数据响应]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/113803608</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/113803608</guid><author>zhm0303</author><pubDate>Sat, 13 Feb 2021 21:32:32 +0800</pubDate><description><![CDATA[Proxy是什么？

MDN对Proxy的定义是 Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（属性查找，赋值，枚举，遍历等）

官方的介绍十分抽象，通俗的来讲，Proxy所做的事情就是，为要访问的目标对象设置一层拦截，可以对外界的操作（如属性查找，赋值，枚举等）进行过滤和改写，返回我们想要返回的数据结构，这样我们不用操作对象本身，通过操作对象的代理对象，来达到预期目的。举个例子


let obj={
    a:1
}
let proxyObj=new Proxy(obj,{
.]]></description><category></category></item><item><title><![CDATA[从输入url到页面渲染完成，发生了什么？（包括回流和重绘）]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/113575302</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/113575302</guid><author>zhm0303</author><pubDate>Tue, 02 Feb 2021 22:27:34 +0800</pubDate><description><![CDATA[一，渲染过程

1，在地址栏输入url后，浏览器会先在历史记录中进行匹配，以便用户补全地址

2，进行DNS解析，将域名解析成对应的ip地址

3，拿到ip地址后与服务器连接也就是“三次握手”

   第一次握手，浏览器向服务器发送连接请求

   第二次握手，服务器接收到浏览器的连接请求，回复ACK报文，并未本次连接分配资源

   第三次握手，浏览器接收ACK报文，并分配资源

4，浏览器解析拿到的资源

   将html解析为DOM tree

   将css解析为...]]></description><category></category></item><item><title><![CDATA[call，apply的用法以及模拟实现]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/113497941</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/113497941</guid><author>zhm0303</author><pubDate>Tue, 02 Feb 2021 17:21:26 +0800</pubDate><description><![CDATA[一，call 和apply的用法

call和apply都是为了改变函数运行时的上下文而产生的，也就是改变this的指向

js的一大特点就是存在 定义时上下文，运行时上下文，和 上下文可以改变 的概念

首先 举个例子

functionApple(){}

Apple.prototype={

color:'red',

say:function(){

console.log(`mycoloris${this.color}`)

}

}...]]></description><category></category></item><item><title><![CDATA[关于js中的this指向问题]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/83899965</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/83899965</guid><author>zhm0303</author><pubDate>Fri, 09 Nov 2018 16:51:49 +0800</pubDate><description><![CDATA[js开发中多多少少都会遇到this指向问题，多少会有些懵圈，只要记住一句核心的话，哪个对象调用函数，this就指向哪个对象

调用函数一般有以下这么多中情况：

  1，普通函数调用

   毫无疑问，此时this指向的是window对象


var username='守候'
function fn(){
    alert(this.username);//守候
}
fu();
//-----...]]></description><category></category></item><item><title><![CDATA[js 深拷贝与浅拷贝]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/83897681</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/83897681</guid><author>zhm0303</author><pubDate>Fri, 09 Nov 2018 15:11:13 +0800</pubDate><description><![CDATA[ECMA数据类型

基本类型： string, number, boolean,null,undefind,symbol

引用类型： Object,Array,Date,Function,RegExp

不同的存储方式

基本类型： 基本数据类型在内存中只占固定的大小，存放在栈内存中

引用类型：引用类型的值是对象（大小不固定），保存在堆内存中

赋值：

基本类型：基本数据类型一个值赋值给另一...]]></description><category></category></item><item><title><![CDATA[了解fetch]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/83508298</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/83508298</guid><author>zhm0303</author><pubDate>Mon, 29 Oct 2018 16:59:14 +0800</pubDate><description><![CDATA[关于fetch

简单的说 fetch是一种ajax的升级版替代方案，ajax的实现就是依赖xmlhttpRequest对象，而fetch是window对象的一个方法

并且实现了es6的promise来处理回调。

fetch的使用

 fetch目前除了老版本浏览器之外支持的还可以，查看fetch的支持情况

老版本浏览器也可以通过引入第三方的polyfill 来支持    whatwg-fe...]]></description><category></category></item><item><title><![CDATA[在现有项目中使用fetch]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/83507194</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/83507194</guid><author>zhm0303</author><pubDate>Mon, 29 Oct 2018 16:02:34 +0800</pubDate><description><![CDATA[基于做前端现在不用fetch就out的心态，我决定再现有的AngularJS项目中使用fetch代替angularJs的$http()方法

使用fetch封装成一个可以公用的js文件


import 'whatwg-fetch';
import 'es6-promise';
import 'promise-polyfill';
import 'isomorphic-fetch';

const...]]></description><category></category></item><item><title><![CDATA[在线打印图片]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/83417690</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/83417690</guid><author>zhm0303</author><pubDate>Fri, 26 Oct 2018 17:01:01 +0800</pubDate><description><![CDATA[项目中要做预览图片之后的打印，因为要打印页面的一部分，所以费了点劲

原理就是重新打开一个空的页面，把要打印的元素放进去，然后通过外部css样式设置其样式，然后调用打印的方法

 


let newWin = window.open('');
let print = document.getElementById(&quot;file&quot;);
newWin.document.write(print.oute...]]></description><category></category></item><item><title><![CDATA[从用户输入url到浏览器渲染页面，经历的过程]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/83054179</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/83054179</guid><author>zhm0303</author><pubDate>Mon, 15 Oct 2018 09:58:51 +0800</pubDate><description><![CDATA[1，用户输入url，浏览器获取到url

2，浏览器的应用层对url进行DNS解析

3，根据解析到的IP地址加端口 ，浏览器发起http请求，请求包括 header body

      header包括

     ①，请求方法（post get等）

     ②，请求协议（http,https,ftp等）

     ③ ，请求地址 url

     ④，一切必要的其他信息  缓存 c...]]></description><category></category></item><item><title><![CDATA[window.open()被浏览器拦截]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/82846101</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/82846101</guid><author>zhm0303</author><pubDate>Tue, 25 Sep 2018 22:18:22 +0800</pubDate><description><![CDATA[近来在项目中，遇到这样的操作：

  在ajax请求的回调函数中 需要使用window.open（）打开新页面，但是等ajax请求成功之后，window.open（）打开新页面总是被浏览器拦截，原因大概是，放在ajax回调函数中的操作，被浏览器认为不是用户主动触发的事件，并且延迟1000ms ，被认为有可能是广告，于是被拦截

解决的方法：

在ajax请求之前先打开一个空的页面

let tem...]]></description><category></category></item><item><title><![CDATA[阻止事件冒泡的两种方法]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/82845779</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/82845779</guid><author>zhm0303</author><pubDate>Tue, 25 Sep 2018 21:54:50 +0800</pubDate><description><![CDATA[何为冒泡：

      即事件开始是由最具体的元素接收，然后逐层向上级传播到较为不具体的元素。

加入一个button和它的父级div同时定义了onclick事件，点击button时，在触发了button的onclick事件之后，会发生事件冒泡，然后触发div的onclick事件，然而，触发button的onclick事件的同时也触发div的onclick事件显然不是我们想要的，此时，可以阻止冒...]]></description><category></category></item><item><title><![CDATA[AngularJs  组件已经加载，但是run方法中的http请求还没有执行完引发的问题]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/80890819</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/80890819</guid><author>zhm0303</author><pubDate>Mon, 02 Jul 2018 22:33:41 +0800</pubDate><description><![CDATA[项目重要实现一个功能，从后端接口中获取用户信息（userInfo）要在整个应用中保持值，在directive中使用，于是就在run方法中这样写app.run(['$rootScope', 'baseHttpService', function ($rootScope, baseHttpService) {
  //获取当前登录人用户名
  baseHttpService.doGet(null, p...]]></description><category></category></item><item><title><![CDATA[如何启动一个node服务器用来mock数据]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/80178863</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/80178863</guid><author>zhm0303</author><pubDate>Thu, 03 May 2018 14:04:54 +0800</pubDate><description><![CDATA[在现如今前后端分离的时代，前后端各自开发，难免有事出现进度不一致的情况，当前端需要数据，而后端还没写出接口的时候，无需等待，只要定义好数据结构，前端就可以启动一个node服务器，自由的玩耍啦。1，了解一下node先node是运行在服务端的javascript，说到底node.js也是js文件，只不过node帮我们搭建一个服务器，让它运行，所以是在服务端运行，安装node，无需多言，官网下载，直接安...]]></description><category></category></item><item><title><![CDATA[关于es6  import export需要注意的问题]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/80175271</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/80175271</guid><author>zhm0303</author><pubDate>Thu, 03 May 2018 09:33:47 +0800</pubDate><description><![CDATA[在使用的过程中遇到的，这里做一下总结1，import ‘’ 括号里的如果既不是相对路径也不是绝对路径，import就会默认去node_module目录下去找，例如  import angular from 'angular' 会去node_modules目录下找到angular文件夹整个加载出来    import   angular from './angular' 这种相对路径 就直接按路径查...]]></description><category></category></item><item><title><![CDATA[es5创建对象和es6的Class]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/79963204</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/79963204</guid><author>zhm0303</author><pubDate>Mon, 16 Apr 2018 17:31:06 +0800</pubDate><description><![CDATA[es5创建对象的方式  有工厂模式，构造函数模式，原型模式和  组合使用构造函数模式+原型模式最常使用的模式是 组合使用 构造函数模式+原型模式，这样的好处是，每个实例可以保持独特的实例属性，也可以共有原型方法function Person(name,age){
  this.name=name;
  this.age=age;
}

Person.prototype.sayName=functi...]]></description><category></category></item><item><title><![CDATA[封装一个原生的ajax请求]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/79879787</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/79879787</guid><author>zhm0303</author><pubDate>Fri, 13 Apr 2018 14:43:43 +0800</pubDate><description><![CDATA[现在我们使用各种框架提供的ajax请求，很方便的请求后台接口，但是原生js的http请求一定不能丢原生js中实现http主要通过XMLHttpRequest对象,关键方法是open()和send（） get请求get请求主要用途是向服务器请求我们需要的数据，如下，我们发起一个get请求，传递两个参数name和age参数直接拼接在url后面var ajax=new XMLHttpRequest();...]]></description><category></category></item><item><title><![CDATA[面试必问系列  构造函数，原型对象，实例之间的关系（二）实例属性和原型属性]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/79923654</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/79923654</guid><author>zhm0303</author><pubDate>Fri, 13 Apr 2018 11:09:04 +0800</pubDate><description><![CDATA[在学习构造函数，原型对象，实例之间的关系时，有一个特别容易混乱的点就是实例属性和原型属性创建实例之后，我们可以为实例对象继续添加属性，如果我们添加的属性和原型对象中的属性重名，那么调用的时候，就会先在实例中查找是否有这个属性，如果有就直接取实例中的属性，如果没有就去原型对象查找，如果原型对象中也没有就去构造函数查找，如果都没有就返回空如果实例属性和原型属性重名，调用的时候，实例属性就会屏蔽原型属性...]]></description><category></category></item><item><title><![CDATA[面试必问系列之 构造函数，原型对象和实例之间的关系(一)]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/79923275</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/79923275</guid><author>zhm0303</author><pubDate>Fri, 13 Apr 2018 09:39:21 +0800</pubDate><description><![CDATA[关于构造函数，原型对象，实例之间的关系  ，先来看一张图，大致了解下1，构造函数构造函数跟普通函数没什么区别，都是由function定义的，为了和普通函数做区别，一般构造函数首字母大写像这样，构造函数可以使用new操作符调用，也可以像普通函数那样调用，如果像普通函数那样调用，Person方法会自动添加到window对象中，2，原型对象我们每创建一个函数，js内部会根据特定规则（不必关心什么规则）为...]]></description><category></category></item><item><title><![CDATA[z-index不生效的原因]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/79580504</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/79580504</guid><author>zhm0303</author><pubDate>Fri, 16 Mar 2018 13:32:34 +0800</pubDate><description><![CDATA[注意！！！！z-index只在定位的元素上生效，如果发现添加了z-index不生效，要给元素添加positon:relative;或者 position:fixed;才能生效.main {
    height: 100%;
    position: relative;
    z-index: 10;
}例如这样...]]></description><category></category></item><item><title><![CDATA[关于ztree 如何实现一个界面两个ztree联动  以选中一个ztree取消选中另一个ztree为例]]></title><link>https://blog.youkuaiyun.com/zhm0303/article/details/79553285</link><guid>https://blog.youkuaiyun.com/zhm0303/article/details/79553285</guid><author>zhm0303</author><pubDate>Wed, 14 Mar 2018 13:31:33 +0800</pubDate><description><![CDATA[如何使用和配置ztree在这里就不做介绍了这里此处解决的问题是，当左边的ztree选中时，右边的ztree取消选中，实现方式特别简单，只需要在一个ztree回调函数中调用另一个ztree的方法即可 var treeObj = $.fn.zTree.getZTreeObj(&quot;organList&quot;);//获取要操作的ztree对象
  var nodes = treeObj.getCheckedNod...]]></description><category></category></item></channel></rss>