HzDoctor-CSDN博客

原创引入iconfont无法显示的问题

引入iconfont的时候顺序至关重要，老夫刚开始没有在意顺序，排查了半天，引入的icon就是显示不出，头发掉了一大把

2020-09-29 18:14:40 4262 1

原创理解并区别Object.create()、new Object()和{}

多的就不扯了，先来个例子，看看new Object()和{} let objB = {}; // let objB = new Object(); objB.name = 'b'; objB.sayName = function () { console.log(`My name is ${this.name} !`); } console.log(objB) console.log(objB.__proto__ === Object.p

2020-09-03 17:24:42 513

原创谁先执行？props还是data或是其他？ vue组件初始化的执行顺序详解

初入vue的朋友可能会疑惑，组件初始化的时候,created，props，data到底谁先执行？今天，我就带大家从源码的角度看看到底谁先执行？我们知道,vue是个实例那我们就从new Vue()开始，看看到底做了什么，首先是_init方法，初始化，我们点进去继续看看可以看到首先是进行初始化生命周期，初始化事件中心，初始化渲染等操作，在created之前，这也就说明了为什么在created的时候无法进行dom操作好了，这里主要的是initState函数，我们继续点进去好了

2020-07-02 16:26:24 7502 3

原创 vue核心之vdom由浅入深的理解

一：为什么要用vdom(虚拟dom)？传统的jq是直接操作dom,但由于计算量较小，问题不大。现在随着前端的业务逻辑越来越复杂，vue的兴起，由原来的直接操作dom转变为数据驱动视图,所以dom的计算量是非常大的,而我们知道，操作dom是非常耗费性能的，那怎么办呢？因为浏览器js的执行速度是远远大于操作dom的,所以我们想到用js模拟dom，计算出最小的变更，来操作dom，那js怎么模拟dom呢？比如： <div id="main" class="contain...

2020-07-01 17:13:55 785

原创你可能不知道的vue父子组件生命周期

关于vue组件的生命周期，相比各位同学都已经滚瓜烂熟。但是父子组件的生命周期呢？例如 <template> <div class="home"> <HelloWorld/> 我是父亲 </div> </template> export default { name: 'Home', components: { Hello.

2020-06-19 15:53:57 179

原创 CommonJS和ES6模块化的区别以及如何解决让CommonJS导出的模块也能改变其内部变量

ES6 模块化1.exportexport可以输出变量、函数和类，切记不可直接输出值，否则会报错2.export default一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令3.importimport命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里...

2020-03-10 22:10:18 2959

原创详细说明 Event loop

众所周知 JS 是门非阻塞单线程语言，JS 在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入到 Task（有多种 task）队列中。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说 JS 中的异步还是同步行为。举个例子console.log('script start');...

2019-10-30 16:04:38 150

原创 vue项目的一些小技巧

1.require.context()场景:如页面需要导入多个组件,原始写法:import titleCom from '@/components/home/titleCom'import bannerCom from '@/components/home/bannerCom'import cellCom from '@/components/home/cellCom'component...

2019-10-17 17:39:39 243

原创浅谈ts的基本理解，并比较flow的异同

先来个简单的例子function square(n) { return n * n;}square("oops");毫无疑问会打印NaN，可是这不是我们想要的结果。所以这个时候ts和flow就登场了，我们需要类型检查器来限定参数的类型先来说说ts怎么搞先创建一个后缀名为ts的文件我们就取ts-1.ts好了输入function square(n: number): num...

2019-10-14 17:17:54 1878

原创轻松处理url的URLSearchParams

let url = '?wd=蔡徐坤&skill=篮球&year=2019';let searchParams = new URLSearchParams(url);for (let p of searchParams) { console.log(p);}// ["wd", "蔡徐坤"]// ["skill", "篮球"]// ["year", "2019"]...

2019-09-10 10:34:28 419

原创结合node学习http相关知识（响应头和请求头，强缓存，协商缓存应用等）

作为一个前端，经常会看到请求，今天稍微了解一下。以如图所示的请求为例，点击每一部分旁边的 view source 或 view parsed 链接，能够以源格式或者解析格式查看响应标头、请求标头或者查询字符串参数，获取到更多的信息。我们从中可以获得很多信息，例如http版本，web服务器软件名称等等，这里就不多做追述详细可以点击 ——> HTTP响应头和请求头信息对照表...

2019-09-06 14:13:12 814 1

原创手写call，apply，bind

为了更好的理解call，apply，bind，研究了一下怎么手写这些方法1.手写call Function.prototype.Call = function (content = window) { content.fn = this; //this指向调用它的对象即bar方法 let args = [...arguments].slice(1);/...

2019-08-23 16:47:47 88

原创关于js函数防抖和回流的一些思考（闭包和定时器）

前言：为啥要函数防抖和节流呢，因为像onmousemove ，或者按钮等等被用户频繁移动，点击等情况，造成代码一直在执行导致性能降低，所以用函数防抖和节流来限制在一定时间内函数所能执行的次数举例<body> <div id="content" style="height:150px;line-height:150px;text-align:center; color: ...

2019-08-19 16:01:18 1055

原创关于this判断，如何改变，以及call，apply，bind

this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象1.举个简单的例子 const a = { str: '我爱工作', fn: function () { console.log(this.str); } } console.log(this);//window a.fn();//我爱工作2.再来个例子 cons...

2019-08-08 21:26:59 155

原创 css中一些莫名的元素间距

开发中会碰到类似的这样的问题 <body> <div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div> <div c...

2019-07-30 20:24:49 364

原创 display: table-cell的一些用法

一个用的不多的css水平垂直居中方法 <style> .wp { width: 500px; height: 500px; background-color: blue; display: table-cell; text-align: center; ...

2019-07-29 20:52:52 801

原创 js数组对象的深拷贝

js数组对象的深拷贝普通的数组，slice，concat或者es6的扩展运算符都可以实现深拷贝，但是如果是数组对象却不可以例如：[ {name: 'A', count: 1}, {name: 'B', count: 2}, {name: 'C', count: 3}, {name: 'D', count: 4}, {name: 'E', count: ...

2019-07-29 20:42:07 403

转载 css加载是否会造成阻塞

css加载会阻塞阻塞DOM树解析和渲染吗？举例<html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...

2019-07-25 21:10:21 248

qq_37918241的博客