自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(61)
  • 收藏
  • 关注

原创 深拷贝和浅拷贝

浅拷贝浅拷贝是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。浅拷贝和赋值 var obj1 = { a: 1, b: 'a', c: { a: 1, b:

2020-07-28 19:57:27 168

原创 手写防抖函数和节流函数

防抖函数function test() { console.log(1)}window.addEventListener('mousemove', debounce(test, 1000));function debounce(func, wait) { var timer; return function () { let context = this let args = arguments timer ? clearT

2020-07-28 04:31:28 611

原创 什么是Event Loop

Event LoopWikipedia这样定义:“Event Loop是一个程序结构,用于等待和发送消息和事件。(a programming construct that waits for and dispatches events or messages in a program.)”为什么出现 Event LoopJavaScript是一种单线程语言,所有任务都在一个线程上完成。一旦遇到大量任务或者遇到一个耗时的任务,比如加载一个高清图片,网页就会出现"假死",因为JavaScript停不

2020-07-25 20:22:44 5291

原创 Vue初学者看过来:一个基于Vue纯前端却可保存数据的移动端个人博客

简介参考了辣子鸡大神利用 Github Gist 进行远程数据的存储,自己也尝试用 vue 框架写了一个移动端个人博客,参考地址:https://blog.csdn.net/Dogfights/article/details/80117569?utm_source=blogxgwz5地址Demo地址:https://lkkkkkkg.github.io/lk.my-vue-blog.io/...

2019-03-08 17:24:59 1115

原创 编写一个 React 组件库(三):使用 PropTypes 进行类型检查

继上一次提取了公共 defaultProps :https://blog.csdn.net/qq593249106/article/details/85336111为了能通过类型检查错误,可以使用 React 内置的 PropTypes 来检查类型是否合法:列如 Button 组件的 props 属性:className:应该是 string 类型children:应该是任意类型的si...

2018-12-29 12:04:30 466 3

原创 编写一个 React 组件库(二):提取公用 defaultProps

上一次编写了一个简单的 Button 组件:https://blog.csdn.net/qq593249106/article/details/85319295当前目录结构|- /config //webpack配置项 |- ......|- /dist //出口文件 |- ......|- /node_modules|- /src //入口文件 |- components ...

2018-12-29 11:15:54 928

原创 编写一个 React 组件库(一):写一个简单的 Button 组件

这个项目基于webpack简单配置当前目录结构:|- /config //webpack配置项 |- webpack.common.js |- webpack.dev.js |- webpack.prod.js|- /dist //出口文件 |- ......|- /node_modules|- /src //入口文件 |- components //组件 |-...

2018-12-28 18:32:13 3631

原创 webpack学习(十七):缓存

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次使用 process.env.NODE_ENV 区别生产模式和开发模式: https://blog.csdn.net/qq593249106/article/details/84970525关于缓存我们使用 webpack 来打包我们的模块化后的应用程序,webpack 会生成一个可部署的...

2018-12-12 14:59:47 333

原创 webpack学习(十七):使用 process.env.NODE_ENV 区别生产模式和开发模式

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次分离生产模式和开发模式的配置: https://blog.csdn.net/qq593249106/article/details/84964816合并代码之前因为开发模式不需要压缩 css,将不同的压缩 rule 分别写在 webpack.prod.js 和 webpack.dev.js...

2018-12-12 11:59:09 7015

原创 webpack学习(十六):glob配置动态入口

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次分离生产模式和开发模式的配置: https://blog.csdn.net/qq593249106/article/details/84948648修改一下目录结构, 新建一个 config 文件夹 ,把 webpack 配置文件放进去方便管理:```c|- /dist |- ......

2018-12-12 09:38:34 2558

原创 webpack学习(十五):性能优化

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次完成了生产模式开发模式的分离: https://blog.csdn.net/qq593249106/article/details/84948648开发模式代码压缩开发环境下, 我们依然对代码的体积有一定的要求, 更小的体积可以让加载速度更快, 开发效率更高, 当然配置也相对简单, 只需...

2018-12-11 14:55:44 947

原创 webpack学习(十四):生产环境搭建

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完react的热替换: https://blog.csdn.net/qq593249106/article/details/84947301当前 webpack.config.js目前使用的 webpack 配置文件包含了生产模式和开发模式,webpack.config.jscon...

2018-12-11 01:40:03 378

原创 webpack学习(十三):react配置热替换

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完多页面提取公共部分js&css: https://blog.csdn.net/qq593249106/article/details/84937856使用 RectHotLoaderreact 提供了 react-hot-loader 插件来帮助 webpack 配置下 re...

2018-12-10 21:59:36 1101

原创 webpack学习(十二):多页面提取公共部分(js&css)

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完多页面 : https://blog.csdn.net/qq593249106/article/details/84933978使用SplitChunksPluginThe CommonsChunkPlugin 已经从 webpack v4 legato 中移除, webpack 4...

2018-12-10 12:13:10 6196

原创 webpack学习(十一):构建多页面应用

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完压缩分离css : https://blog.csdn.net/qq593249106/article/details/84933978先前单页面目录结构:|- /dist |- /css |- style.css //分离出来的css文件 |- bundle.js...

2018-12-10 02:04:47 474

原创 webpack学习(十):分离压缩css

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完 sass: https://blog.csdn.net/qq593249106/article/details/84933362使用ExtractTextWebpackPlugin它会将所有的入口 chunk(entry chunks)中引用的 *.css, 移动到独立分离的 CS...

2018-12-09 23:49:42 744

原创 webpack学习(九):配置sass

demo地址: https://github.com/Lkkkkkkg/webpack-demo继上一次配置完react: https://blog.csdn.net/qq593249106/article/details/84928595安装sass 是预编译语言, 浏览器无法直接识别, 需要进行编译成 css 文件, 所以编译 sass 需要安装 sass-loader , sass-l...

2018-12-09 22:40:09 1109

原创 webpack学习(八):配置react

demo地址: https://github.com/Lkkkkkkg/react-demo目前配置了 HtmlWebpackPlugin , CleanWebpackPlugin 插件, 使用了 source map 功能 , 和 webpack-dev-serve 服务器, 配置详情浏览 webpack 配置系列: https://blog.csdn.net/qq593249106/arti...

2018-12-09 17:02:32 350

原创 webpack学习(七):启用 HMR(模块热替换)

demo地址: https://github.com/Lkkkkkkg/react-demo上次使用 webpack-dev-serve : https://blog.csdn.net/qq593249106/article/details/84922572当前目录结构 :|- /dist //用于放打包后文件的文件夹 |- app.bundle.js //出口文件 |- print...

2018-12-09 15:38:56 4672

原创 webpack学习(六):使用webpack-dev-serve

demo地址: https://github.com/Lkkkkkkg/react-demo上次使用source map功能: https://blog.csdn.net/qq593249106/article/details/84921131webpack-dev-server提供了一个简单的 web 服务器, 并且能够实时重新加载(live reloading), 也就是启动了 webpa...

2018-12-09 11:29:03 2930

原创 webpack学习(五):使用source map

demo地址: https://github.com/Lkkkkkkg/react-demo上次配置HtmlWebpackPlugin: https://blog.csdn.net/qq593249106/article/details/84901089继上次配置完HtmlWebpackPlugin之后, 现在开始解决追踪警告和错误代码的原始位置问题, 先看一下当前目录结构:|- /dist...

2018-12-09 11:00:54 623

原创 webpack学习(四):配置CleanWebpackPlugin

demo地址: https://github.com/Lkkkkkkg/react-demo上次配置HtmlWebpackPlugin: https://blog.csdn.net/qq593249106/article/details/84900169继上次配置完HtmlWebpackPlugin之后, 发现 dist 目录下产生了很多个 bundle.js 文件:当前目录结构:|- /...

2018-12-09 00:34:21 2060

原创 webpack学习(三):配置HtmlWebpackPlugin

webpack初步配置参照 https://blog.csdn.net/qq593249106/article/details/84892069demo地址: https://github.com/Lkkkkkkg/react-demo当前目录结构:|- /dist //用于放打包后文件的文件夹 |- bundle.js //出口文件 |- index.html //模板文件|- ...

2018-12-08 22:38:26 664

原创 webpack学习(二):配置加载css, 图片, 字体, 数据(JSON, XML, CSV)等资源文件

webpack初步配置参照 https://blog.csdn.net/qq593249106/article/details/84892069demo地址: https://github.com/Lkkkkkkg/react-demo配置css文件webpack 视所有文件都为模块, css , 图片, 字体, 数据等静态资源都会打包进 js 文件, 所以会需要用到 loader 文件, ...

2018-12-08 17:37:13 986

原创 webpack学习(一):初步配置webpack

安装先创建一个目录demo01, 初始化npm, 再安装webpack和webpack-cli(如果使用 webpack 4+ 版本,你还需要安装 CLI)mkdir demo01 //创建一个目录demo01cd demo01 //进入demo01npm -init -y //初始化npm, -y代表参数全部默认npm install webpack webpack-cli --sav...

2018-12-08 15:33:01 777 2

原创 JavaScript、jQuery、ECMAScript、JSON面试题

第二阶段JavaScript、jQuery、ECMAScript、JSON1、jQuery this与this区别jquery的this指的是jquery对象3、请描述一下 cookies,sessionStorage 和 localStorage 的区别?https://blog.csdn.net/qq593249106/article/details/832407574、对BFC...

2018-11-08 14:51:20 523

原创 webpack面试题

了解webpack吗webpack是一个模块打包工具,使用webpack管理你的模块依赖,并编译输出她们所需要的静态文件,它能够很好地管理、打包web开发中所用到的html、css、js及各种静态文件,让开发过程更加高效。webpack优点代码分割和模块处理什么是bundle,什么是chunk,什么是module?bundle是由webpack打包出来的文件,chunk是指webpack...

2018-11-05 13:44:56 929

原创 清除浮动的方式

清除浮动的方式给父级定义height.parent { background-color: red;}.float-left { width: 200px; height: 200px; float: left;}<div class="parent"> <div class="float-left"&

2018-11-04 13:51:57 265

原创 存储结构有哪些

存储结构有哪些顺序存储把逻辑上响铃的节点存储在物理位置相邻的存储单元里,结点间的逻辑关系由存储单元的邻接关系来体现链式存储链式存储不要求逻辑上邻接点在物理位置上也相同,结点间的逻辑关系是由附加的指针字段表示的...

2018-11-02 11:28:01 1202

原创 cookies和session的区别

cookies和session的区别过程:浏览器第一次访问服务器,服务器会创建一个session对象,并返回一个sessionid放在cookies保存带回浏览器,浏览器第二次访问,服务器会从cookies拿sessionid进行跟踪,如果这个id的session已经失效,就会创建一个新的session,再把新的sessionid放进cookies里带回浏览器相同点:cookies和se...

2018-10-31 11:38:04 140

原创 HTML、CSS、HTML5、CSS3面试题

第一阶段 HTML、CSS、HTML5、CSS31、XHTML与HTML的有何异同?HTML是一种基于WEB的网络设计语言,XHTML是基于XML的置标语言,XHTML可以认为是XML版的HTML,所以它的语法比较严谨:元素必须关闭,嵌套必须正确,大小写区分,属性值必须用双引号,id属性代替name属性2、介绍一下CSS的盒子模型?弹性盒子模型是什么?3、Doctype的作用?标准模式...

2018-10-28 13:00:54 2151 2

原创 Node面试题

前端面试题之NodeNode的特点有三个:单线程、事件驱动、非阻塞I/O优点:因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。缺点:Node是一个相...

2018-10-27 12:01:04 2011

原创 Vue面试题

1. Vue中的MVVM模式即 Model-View-ViewModelModel是数据层,View是视图层,ViewModel是同步View和Model的对象。Model和View没有直接联系,而是通过ViewModel的双向数据绑定连接了起来,而View和Model同步是完全自动的,因此开发者只需要关注业务逻辑,不需要操作Dom元素(与MVC最大的区别:MVVM改变数据后不用操作DOM元...

2018-10-26 16:19:06 364

原创 虚拟DOM

前端面试题之虚拟DOM面试回答:虚拟DOM是为了解决DOM操作过多而导致性能低的问题而诞生的,虚拟DOM诞生之前,操作DOM的是直接操作的,改一次渲染一次,而虚拟DOM就是用js模拟一颗DOM树,每次修改DOM,先把虚拟DOM修改,最后再一次性把虚拟DOM更新,这样就减少了很多次DOM操作,优化了性能...

2018-10-26 15:57:02 591

原创 js垃圾回收机制

面试题之垃圾回收机制面试回答:js的垃圾回收机制就是周期性的找出不再使用的变量,然后释放其占用的内存,js的垃圾回收机制只在函数内部执行,因为全局变量的生命周期是一直到浏览器关闭才结束,在函数内部的变量,在函数结束时,如果这个变量没有被别的函数引用,就会把这个变量回收。最常用的方法是标记清除:变量在函数里被声明的时候会被标记为进入环境,函数结束时会被标记为离开环境,垃圾回收器运行的时候,会去掉函...

2018-10-26 11:33:18 458

原创 js作用域链概念

前端面试题之JS作用域链面试回答:作用域链就是用来保证执行环境里有权访问的变量和函数是有序的,变量只能向上访问,访问到window对象即被终止,不允许向下访问变量...

2018-10-26 10:39:45 420

原创 Vue生命周期及特征

面试题之Vue生命周期及特征面试回答:Vue生命周期可以分为8个阶段,分别是:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed在beforeCreate和created这个生命周期,进行初始化事件,进行数据的观测,到了created的时候,放在data里面的数据已经完成了绑...

2018-10-25 11:35:38 947

原创 jQ链式调用的原理

面试题之jQ链式调用的原理面试回答:链式调用的原理就是实例在调用内部方法的时候,返回当前调用这个方法的实例对象this就可以了,因为返回了当前的this就可以继续访问自己的原型了...

2018-10-25 10:50:40 2876

原创 详细分析闭包是什么

前端面试之JS闭包面试回答:什么是闭包 :闭包就是在函数里定义函数,而且内部函数可以引用外部函数的参数和局部变量,当外部函数返回这个内部函数时,内部函数引用的参数和局部变量保存在内部函数里为什么要用闭包:因为js的函数作用域的关系,一般情况下外部是访问不了函数内部的变量的,设计闭包结构就可以访问到函数内部的变量,还有就是闭包可以让变量长期保存在内存里,生命周期较长闭包应用:for循环异步问...

2018-10-25 10:43:06 363

原创 HTTP状态码

前端面试之HTTP状态码1开头表示客户端应该继续发送请求2开头表示成功的请求200表示OK,正常返回信息201表示请求成功且服务器创建了新的资源202表示服务器已经接受了请求,但还未处理3开头表示重定向301表示永久重定向,请求的网页已经永久移动到新位置302表示临时重定向304表示自从上一次请求以来,页面的内容没有改变过4开头表示客户端错误401表示服务器无法理解...

2018-10-24 22:10:36 1192

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除