7 小敏哥

尚未进行身份认证

暂无相关描述

等级
TA的排名 6w+

JavaScript函数传参原理详解——值传递还是引用传递

讨论JavaScript的传参原理之前,我们先来看一段曾经让笔者困惑了一段时间的代码vartestA=1;vartestB={};functiontestNumber(example){example=2;}functiontestObj(example){example.test=1;}testNumber(testA);testObj(te...

2019-07-28 11:58:59

nodejs模块查找策略

我们都知道,nodejs目前支持es6模块和commonjs模块,在这个万物皆可为模块的世界里,这篇文章来探讨一下当我们引用一个模块时,nodejs是已一种什么样的策略来查找到对应的模块的模块分类nodejs中的模块主要分为两大类,一类是nodejs提供的模块,称为核心模块,另一类是用户编写的模块,称为文件模块,他们的关系如下图所示文件模块文件模块根据引用的方式不同,又分为自定...

2019-07-21 10:46:21

字体图标科普——从字体图标原理到制作

什么是字体图标对于前端的小伙伴来说,字体应该是再熟悉不过的东西了,对于文字我们可以通过css指定文字对应的字体,字号大小,颜色。得益于css3,我们还可以在css中引入服务端字体来实现自定义字体。而字体图标,顾名思义则是把图标当做字体来使用,通过使用字体图标,我们可以动态改变图标的大小、颜色等一系列字体属性。而且相对于一般的图片,字体图标的大小改变并不会使图像变的模糊。接触过bootstra...

2019-07-06 16:19:04

深入理解JavaScript的原型链——关于prototype,__proto__,constructor那些你可能没有彻底搞懂的关系

说起原型链,戳进来看这篇博客的同学必然不会陌生,这是JavaScript中最核心的特性之一。那么,原型链到底是一个什么东西,它的工作原理是什么?这是本篇文章探讨的内容对于原型链,我们可以这么理解,每一个JavaScript对象中,都存在一个内部属性,我们称之为[[prototype]](注意,此处的[[prototype]]属性并不是prototype属性,对于prototype属性,我们之后...

2019-06-16 14:57:08

javascript中bind多次绑定无效——从源码角度看看bind到底做了什么

我们都知道,js中的函数提供了一个bind方法用来绑定this,该方法会返回一个新的函数,在调用返回的函数时会设置this关键字为第一个参数的值。并在调用新函数时,将给定参数列表除第一个参数之外的其他参数作为原函数的参数序列的前若干项。有了bind函数,我们可以很方便的绑定函数的this,但是偶尔我们也会遇到类似下面代码展示的困惑functiontestBind(){con...

2019-06-10 20:01:55

javascript中的变量和函数提升

提到代码的执行顺序,在不考虑异步回调的情况下,有些开发者可能会认为,同步的js代码的执行顺序跟代码编写的顺序是一致的,即从上往下一行一行的执行。这种想法,严格上只能说是大致正确。从编译器的角度来说,js引擎在解析我们代码的时候,首先会找到所有的变量声明,并且把他们关联到对应的作用域上。简单来说,编译器会首先处理所有的声明,包括函数和变量,这个过程被称为提升。变量提升首先,我们通过下面的...

2019-06-02 15:25:20

js中setTimeout,requestAnimationFrame,requestIdleCallback的区别和应用

前言:本文中提及的关于标题中三个api的回调函数的调用,都是指回调函数被压入调用队列中等待被调用,如对js中的异步调用和任务调度机制尚不太理解,建议先阅读作者的另一篇文章,异步调度机制——Javascript事件循环(EventLoop)机制解析。正文:本文的主要内容是理清setTimeout,requestAnimationFrame,requestIdleCallback这三个函...

2019-04-06 21:25:19

正则表达式中问号(?)的用法详解

正则表达式中“?”的用法大概有以下几种1、直接跟随在子表达式后面这种方式是最常用的用法,具体表示匹配前面的一次或者0次,类似于{0,1},如:abc(d)?可匹配abc和abcd2、非贪婪匹配关于贪婪和非贪婪,贪婪匹配的意思是,在同一个匹配项中,尽量匹配更多所搜索的字符,非贪婪则相反。正则匹配的默认模式是贪婪模式,当?号跟在如下限制符后面时,使用非贪婪模式(*,+,?,{n},{n...

2019-03-23 15:51:39

异步调度机制——Javascript事件循环(Event Loop)机制解析

我们都知道,javascript是一个单线程的语言,这就意味着,js在同一个时间片上,只能执行一个任务。只有当前一个任务执行完成之后,才能执行下一个任务。那么当出现网络请求,IO操作这类耗时操作时,由于当前任务什么时候完成我们是不知道的,这时候如果选择等待当前任务完成之后再进行下一步很明显是不明智的,这样会导致性能的严重下降,于是,js的任务类型分为同步和异步两种。同步任务就不需要多说了,按顺...

2019-02-23 22:40:33

React中key属性的作用及原理解析

Warning:Eachchildinanarrayoriteratorshouldhaveaunique"key"prop.Checktherendermethodof`Test`.Seehttps://fb.me/react-warning-keysformoreinformation.相信在react的使用过程中,大家或多或少都会遇到过这样...

2019-01-20 14:58:10

React中setState的怪异行为 ——setState没有即时生效

setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方法来重新渲染UI但实际使用的时候,我们会发现,有时候我们setState之后,并没有立刻生效,例如我们看一下以下的示例代码classTestextendsComponent{c...

2019-01-12 14:41:45

React事务机制解析

对react有一定了解的开发人员应该都听说过react的事务机制,这个机制几乎贯穿于react所有提供的方法,包括react中最常使用的setState函数那么,react的事务机制到底是一种什么样的机制呢,为了解释事务机制的实现原理,react源码中用注释画出了这样一幅图根据这幅图,我们可以这样理解事务,react中用事务执行方法,就是用wrapper(称之为套套吧)把方法包裹起来,...

2019-01-11 23:20:19

react生命周期原理解析

这篇文章是对之前的一片文章react生命周期整理提到的生命周期的解析,本文会从源码的角度,对react的各个生命周期的实现原理进行不太详细的分析getDefaultProps与getInitialState首先我们来看一下以下两个代码片段,第一个是用es5创建组件的方法,需要调用react的createClasss方法,第二个是es6创建组件的方法,定义一个类继承react.compone...

2019-01-06 22:24:18

react生命周期整理

react中的生命周期可以分为四大类,分别为定义时触发,渲染时触发,更新时触发以及卸载时触发。本文章会对所有生命周期进行归纳并从源码的角度解析其实现原理(写到一半发现文章已经有点长了,决定新开一片文章来解析实现原理,传送门)定义时触发(createClass)getDefaultProps该生命周期是在定义组件的时候触发,其返回的对象可以用于设置默认的props,由于这个方法是在构造...

2019-01-06 15:28:34

React的跨级组件通信

我们知道,react中父子组件之间的通信,父组件和子组件通信,可以通过props向子组件传递参数,子组件和父组件通信,则可以通过调用props传入的回调函数来向父组件传递参数那么问题来了,如果是跨级组件之间的通信,如果通过props一层一层往下传,不仅逻辑会变得很不清晰,代码也会变得不好维护,这个时候,我们需要使用到react中的context来解决这个问题首先我们来看一段代码cla...

2018-12-28 23:08:52

javascript绑定this的几种方法

首先,理清一下js中的this,js中的this对象指向调用当前方法的对象,这个指向是在执行的时候才确定下来的,跟函数在何时何处声明是无关的。但是,在实际使用过程中,我们经常会遇到要改变当前this指向的需求,一下的对绑定this方法的归纳1、call和apply这里把call和apply放在一起讲,是因为这两个方法及其相似,其作用都是直接调用一个函数,并使其具有一个指定的this,...

2018-11-28 17:20:52

css文字换行总结

web前端布局中有时候在有限的空间中会出现很长的文字,由于对布局的要求有时候我们需要改变默认的换行方式,以自定义的方式控制换行,以下是使用css控制换行的相关总结1、overflow-wrap,word-wrap 这两个属性效果其实是一样的,word-wrap是早期微软定义的属性,overflow-wrap是css3标准化的定义,为了兼容们目前word-wrap已经被作为overflow-...

2018-10-06 22:28:38

如何防止页面被调试

由于web前端项目的特殊性,所有的前端代码基本上是开源的,这就意味着,访问者可以无条件的查看所有的代码,甚至进行调试,弄清项目的业务逻辑,这样,漏洞挖掘者就可以很方便的找出网站的漏洞进行攻击。出于安全的目的,前端会对代码进行各种压缩打包,混淆等,增加阅读代码的难度,但对于调试,似乎很多人并没有引起应有的重视,下面会介绍一种比较基础的方法,用于阻止网站访问者对项目进行调试。我们都知道,在js...

2018-08-26 16:54:51

zepto源码分析之form表单处理

本篇是zepto源码分析系列第二篇,这里依旧有一份包含详细中文注释的zepto源代码,有需要的可以下载下来学习,觉得有帮助的话戳一颗星那就更好了本篇会解析zepto源码中的form表单处理部分,这部分相对来说比较简单,仅包含三个方法:serialize,serializeArray,submit,依次分析如下serializeArray$.fn.serializeArray=fu...

2018-08-19 16:20:53

zepto源码分析之ajax

首先,放github链接,这里有一份包含详细中文注释的zepto源代码,有需要的可以下载下来学习,觉得有帮助的话戳一颗星那就更好了这篇博文会先解析ajax实现的部分,zepto对于ajax的实现包含两个部分,普通的xhr请求和jsonp请求,对外暴露了以下几个方法:$.ajax,$.ajaxJSONP,$.ajaxSettings,$.get,$.getJSON,$.param,$.pos...

2018-08-14 22:16:42

查看更多

勋章 我的勋章
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。