水火土要努力-CSDN博客

原创 vue3.0 使用proxy代替object.defineproperty()实现数据响应

Proxy是什么？MDN对Proxy的定义是 Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（属性查找，赋值，枚举，遍历等）官方的介绍十分抽象，通俗的来讲，Proxy所做的事情就是，为要访问的目标对象设置一层拦截，可以对外界的操作（如属性查找，赋值，枚举等）进行过滤和改写，返回我们想要返回的数据结构，这样我们不用操作对象本身，通过操作对象的代理对象，来达到预期目的。举个例子let obj={ a:1}let proxyObj=new Proxy(obj,{.

2021-02-13 21:32:32 780

原创从输入url到页面渲染完成，发生了什么？（包括回流和重绘）

一，渲染过程1，在地址栏输入url后，浏览器会先在历史记录中进行匹配，以便用户补全地址2，进行DNS解析，将域名解析成对应的ip地址3，拿到ip地址后与服务器连接也就是“三次握手” 第一次握手，浏览器向服务器发送连接请求第二次握手，服务器接收到浏览器的连接请求，回复ACK报文，并未本次连接分配资源第三次握手，浏览器接收ACK报文，并分配资源4，浏览器解析拿到的资源将html解析为DOM tree 将css解析为...

2021-02-02 22:27:34 402

原创 call，apply的用法以及模拟实现

一，call 和apply的用法call和apply都是为了改变函数运行时的上下文而产生的，也就是改变this的指向js的一大特点就是存在定义时上下文，运行时上下文，和上下文可以改变的概念首先举个例子functionApple(){}Apple.prototype={color:'red',say:function(){console.log(`mycoloris${this.color}`)}}...

2021-02-02 17:21:26 282

原创关于js中的this指向问题

js开发中多多少少都会遇到this指向问题，多少会有些懵圈，只要记住一句核心的话，哪个对象调用函数，this就指向哪个对象调用函数一般有以下这么多中情况： 1，普通函数调用毫无疑问，此时this指向的是window对象var username='守候'function fn(){ alert(this.username);//守候}fu();//-----...

2018-11-09 16:51:49 165

原创 js 深拷贝与浅拷贝

ECMA数据类型基本类型： string, number, boolean,null,undefind,symbol引用类型： Object,Array,Date,Function,RegExp不同的存储方式基本类型：基本数据类型在内存中只占固定的大小，存放在栈内存中引用类型：引用类型的值是对象（大小不固定），保存在堆内存中赋值：基本类型：基本数据类型一个值赋值给另一...

2018-11-09 15:11:13 136

原创了解fetch

关于fetch简单的说 fetch是一种ajax的升级版替代方案，ajax的实现就是依赖xmlhttpRequest对象，而fetch是window对象的一个方法并且实现了es6的promise来处理回调。fetch的使用 fetch目前除了老版本浏览器之外支持的还可以，查看fetch的支持情况老版本浏览器也可以通过引入第三方的polyfill 来支持 whatwg-fe...

2018-10-29 16:59:14 271

原创在现有项目中使用fetch

基于做前端现在不用fetch就out的心态，我决定再现有的AngularJS项目中使用fetch代替angularJs的$http()方法使用fetch封装成一个可以公用的js文件import 'whatwg-fetch';import 'es6-promise';import 'promise-polyfill';import 'isomorphic-fetch';const...

2018-10-29 16:02:34 814

原创在线打印图片

项目中要做预览图片之后的打印，因为要打印页面的一部分，所以费了点劲原理就是重新打开一个空的页面，把要打印的元素放进去，然后通过外部css样式设置其样式，然后调用打印的方法 let newWin = window.open('');let print = document.getElementById("file");newWin.document.write(print.oute...

2018-10-26 17:01:01 893

原创从用户输入url到浏览器渲染页面，经历的过程

1，用户输入url，浏览器获取到url2，浏览器的应用层对url进行DNS解析3，根据解析到的IP地址加端口，浏览器发起http请求，请求包括 header body header包括 ①，请求方法（post get等） ②，请求协议（http,https,ftp等） ③ ，请求地址 url ④，一切必要的其他信息缓存 c...

2018-10-15 09:58:51 1745

原创 window.open()被浏览器拦截

近来在项目中，遇到这样的操作：在ajax请求的回调函数中需要使用window.open（）打开新页面，但是等ajax请求成功之后，window.open（）打开新页面总是被浏览器拦截，原因大概是，放在ajax回调函数中的操作，被浏览器认为不是用户主动触发的事件，并且延迟1000ms ，被认为有可能是广告，于是被拦截解决的方法：在ajax请求之前先打开一个空的页面let tem...

2018-09-25 22:18:22 309

原创阻止事件冒泡的两种方法

何为冒泡：即事件开始是由最具体的元素接收，然后逐层向上级传播到较为不具体的元素。加入一个button和它的父级div同时定义了onclick事件，点击button时，在触发了button的onclick事件之后，会发生事件冒泡，然后触发div的onclick事件，然而，触发button的onclick事件的同时也触发div的onclick事件显然不是我们想要的，此时，可以阻止冒...

2018-09-25 21:54:50 16737

原创 AngularJs 组件已经加载，但是run方法中的http请求还没有执行完引发的问题

项目重要实现一个功能，从后端接口中获取用户信息（userInfo）要在整个应用中保持值，在directive中使用，于是就在run方法中这样写app.run(['$rootScope', 'baseHttpService', function ($rootScope, baseHttpService) { //获取当前登录人用户名 baseHttpService.doGet(null, p...

2018-07-02 22:33:41 1299

原创如何启动一个node服务器用来mock数据

在现如今前后端分离的时代，前后端各自开发，难免有事出现进度不一致的情况，当前端需要数据，而后端还没写出接口的时候，无需等待，只要定义好数据结构，前端就可以启动一个node服务器，自由的玩耍啦。1，了解一下node先node是运行在服务端的javascript，说到底node.js也是js文件，只不过node帮我们搭建一个服务器，让它运行，所以是在服务端运行，安装node，无需多言，官网下载，直接安...

2018-05-03 14:04:54 3656

原创关于es6 import export需要注意的问题

在使用的过程中遇到的，这里做一下总结1，import ‘’ 括号里的如果既不是相对路径也不是绝对路径，import就会默认去node_module目录下去找，例如 import angular from 'angular' 会去node_modules目录下找到angular文件夹整个加载出来 import angular from './angular' 这种相对路径就直接按路径查...

2018-05-03 09:33:47 885

原创 es5创建对象和es6的Class

es5创建对象的方式有工厂模式，构造函数模式，原型模式和组合使用构造函数模式+原型模式最常使用的模式是组合使用构造函数模式+原型模式，这样的好处是，每个实例可以保持独特的实例属性，也可以共有原型方法function Person(name,age){ this.name=name; this.age=age;}Person.prototype.sayName=functi...

2018-04-16 17:31:06 1714

原创封装一个原生的ajax请求

现在我们使用各种框架提供的ajax请求，很方便的请求后台接口，但是原生js的http请求一定不能丢原生js中实现http主要通过XMLHttpRequest对象,关键方法是open()和send（） get请求get请求主要用途是向服务器请求我们需要的数据，如下，我们发起一个get请求，传递两个参数name和age参数直接拼接在url后面var ajax=new XMLHttpRequest();...

2018-04-13 14:43:43 869

原创面试必问系列构造函数，原型对象，实例之间的关系（二）实例属性和原型属性

在学习构造函数，原型对象，实例之间的关系时，有一个特别容易混乱的点就是实例属性和原型属性创建实例之后，我们可以为实例对象继续添加属性，如果我们添加的属性和原型对象中的属性重名，那么调用的时候，就会先在实例中查找是否有这个属性，如果有就直接取实例中的属性，如果没有就去原型对象查找，如果原型对象中也没有就去构造函数查找，如果都没有就返回空如果实例属性和原型属性重名，调用的时候，实例属性就会屏蔽原型属性...

2018-04-13 11:09:04 409

原创面试必问系列之构造函数，原型对象和实例之间的关系(一)

关于构造函数，原型对象，实例之间的关系，先来看一张图，大致了解下1，构造函数构造函数跟普通函数没什么区别，都是由function定义的，为了和普通函数做区别，一般构造函数首字母大写像这样，构造函数可以使用new操作符调用，也可以像普通函数那样调用，如果像普通函数那样调用，Person方法会自动添加到window对象中，2，原型对象我们每创建一个函数，js内部会根据特定规则（不必关心什么规则）为...

2018-04-13 09:39:21 963

原创 z-index不生效的原因

注意！！！！z-index只在定位的元素上生效，如果发现添加了z-index不生效，要给元素添加positon:relative;或者 position:fixed;才能生效.main { height: 100%; position: relative; z-index: 10;}例如这样...

2018-03-16 13:32:34 3585 1

原创关于ztree 如何实现一个界面两个ztree联动以选中一个ztree取消选中另一个ztree为例

如何使用和配置ztree在这里就不做介绍了这里此处解决的问题是，当左边的ztree选中时，右边的ztree取消选中，实现方式特别简单，只需要在一个ztree回调函数中调用另一个ztree的方法即可 var treeObj = $.fn.zTree.getZTreeObj("organList");//获取要操作的ztree对象 var nodes = treeObj.getCheckedNod...

2018-03-14 13:31:33 1522

原创 angular.js将ztree封装成组件使用

项目用的angular.js的框架，最近要做组织结构树的展示，决定使用ztree插件，下面是步骤1，下载方式①，可以再官网下载 http://www.treejs.cn/v3/api.php②，也可以使用npm的包管理工具下载 npm install ztree --save-dev2,引用css和js文件要引用，js也可以直接引用最全的那个文件3，封装组件html部分 ul作为ztree的容器...

2018-03-09 13:01:34 1783

原创 angular.js input type=date时间类型的输入框实现数据回显

场景描述：后台返回一组数据，其中包括13位的时间戳，将时间戳进行转换，然后回显到 type=date的input中。具体操作：先将13位的时间戳转换为input可用的形式，注意，要想成功回显，必须将时间戳转换为‘2018-03-03’这种形式月份和日期小于10的要补零。下面是时间戳转换函数vm.transform = function (transTime) { let date = ne...

2018-03-07 16:05:28 5514

原创 es6 Promise对象

promise 是什么？？所谓Promise就是一个容器，里面保存着某个未来才会结束的事件的结果从语法上讲，promise是一个对象，可以获取异步操作的消息promise对象的特点一，对象的状态不受外界影响promise对象的3种状态1，pending（进行中）2，fulfiled(已完成)3，rejected（已失败）二，状态一旦改变就不会再发生变化，任何时

2018-01-05 13:09:12 214

原创 js定时器的设置和清除 setTimeOut()和setInterval()

超时调用和间歇调用：二者接受的参数相同，区别只在于:setTimeOut(function(){},1000); 在特定时间之后调用函数，只调用一次setInterval(function(){},1000)；每隔特定的时间调用一次函数，调用n多次,最好不要经常使用tips:递归的方式使用setTimeOut()，效果相当于使用setInterval()function showTime() {

2018-01-02 15:31:12 70531

原创 JSON对象和javascript对象的相互转换

一，关于json对象与javascript对象的区别//javascript对象：var param={name:'张三',age:18,address:'锦绣路'} ;//JSON对象：{"name":"张三"，"age":"18","address":"锦绣路"}区别：JSON对象没有变量的概念，末尾也不加分号，无论key还是value都用双引号括起来二，JSON对象和javascript对象

2018-01-02 14:19:10 3626

原创 webpack 入门

一，初始化和安装webpacknpm init -ynpm install --save-dev webpack二，创建 webpack.config.js文件对webpack.config文件进行配置module.exports = { entry: './src/index.js', output: { filename: '[name].[chunkh

2017-12-11 09:53:02 288

原创字体图标从下载到使用

字体图标的使用越来越频繁，作为一个前端需要全掌握一，字体图标在哪找 https://icomoon.io/#home首推icomoon，一个国外网站，丰富免费的字体图标，选中即可打包下载二，字体图标怎么用（含兼容问题）先引入字体图标文件，引用的时候注意路径@font-face { font-family: icomoon; src:url(../fo

2017-10-20 15:49:17 1758

原创 js常见笔试题之字母去重和统计某个出现次数最多的字母

去面试，公司的笔试题总是少不了这样的小算法1，使用js代码统计一个字符串中出现次数最多的字母 var str="abcadba"; var obj={}; var maxn=-1;//统计次数 var letter; //临时变量，记录字母到底是哪一个 for(var i=0;i<str.length;i++){ if(!obj[s[i]]){ obj

2017-03-26 11:21:50 2740

原创 js中的变量提升和函数提升

一，变量提升顾名思义，变量提升就是函数在执行时，会把在下面的变量提升到函数的top位置，来看栗子： var scope="hello"; function t(){ console.log(scope); var scope="nihao"; console.log(scope); } t();此时输出的结果是：第一个输出undef

2017-03-20 21:05:34 669

原创 DOM事件处理程序

一，事件处理程序事件，就是用户或者浏览器执行的某些动作，比如click mouseover等事件处理程序就是响应这些事件的函数，事件处理程序的名字都已on开头比如onclick onmouseover,为事件指定事件处理程序的方式有好多种 ①HTML事件处理程序举个栗子：为button按钮添加一个click事件，调用showMsg()这

2017-03-20 15:52:18 228

转载关于css中的伪类和伪元素

前端经常接触到的伪类比如：link, :visit, :hover, :focus，经常接触到的伪元素比如：before, ：after，之前对于伪类和伪元素之间的区别了解的并不多首先来看伪类：css2 对伪类的定义，伪类用于向某些浏览器添加特殊的效果，css3对伪类的定义,伪类存在的意义在于通过选择器找到那些不存在于DOM树中的信息，以及被常规选择器无法选择到的信息css3的定

2017-03-19 22:43:42 646

原创 js 的map方法

在原生js中，map()方法属于数组array的迭代方法，map()方法返回一个数组，而这个数组的每一项都是在原始数组中对应项运行传入函数的结果var num=[1,2,3,4,5];var mapResult=num.map(function(item,index,array){ return item*2;});alert(mapResult);数组Array的其他迭代方

2017-03-19 18:15:45 832

原创 js如何截取字符串

如何截取一个长短没有规律的字符串的一部分呢var txt="我,爱,我,家"; var arr=txt.split(",");//将字符串以，为分割变成一个数组 var txt1=arr.slice(0,1);//使用数组的方法金星截取 console.log(txt1);

2017-03-18 12:20:43 655

原创 js为动态创建的元素添加事件

html中直接生成的元素，添加事件，我们都知道，但是如何为一个动态生成的元素添加事件呢，jquery中的live方法可以做到这一点具体实现可以在demo中看到添加事件 // js原生实现// var btn=document.getElementById("btn");// btn.onclick=function(){/

2017-03-18 12:11:09 5377

原创百度地图api点聚合简单demo实例

关于百度地图点聚合的demo示例，如果直接复制代码到项目的话，需要把v2.0改成V1.4,因为v2.0需要添加密钥v1.4不用 hello 点聚合 body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #container{width:100%;height:500px;}

2017-03-14 22:18:58 1891 1

原创关于px, em, rem的区别

一，区别:px是相对于显示器屏幕分辨率而言的.em是相对于父元素的属性来计算的.rem是相对于html根元素字体的大小来计算的.二，特点：px:IE无法调整那些使用px作为单位的字体大小em:值不是固定的，会继承父元素的字体大小rem:值也不是固定的，会根据根元素的字体大小进行计算三，注意任何浏览器的默认字体大小都是16px,

2017-01-13 14:20:56 293

原创为什么border-width不支持百分比

border-width不支持百分比的原因大概是，边框一般不会根据比例进行缩放，就像手机的边框和电脑的边框其实差不了多少border-width不支持百分比，但是支持关键字，thin（1px），medium（默认3px） ,thick(5px).

2017-01-03 10:59:03 2243

zhm0303的博客