- 博客(41)
- 收藏
- 关注
RSS订阅
原创 webpack扫盲——如何编写一个loader
目录前言一、关于loader二、确认需求三、loader编写1.初始化2.loader编写3.增加可配置化代码四、代码调试前言本文默认读者对前端工程化有一定的认识，对webpack有一定的裂解并且知道怎么使用webpack，本文会一步一步带领读者手动编写一个webpack的loader，以此加深对webpack的理解一、关于loaderloader是webpack里面一个相当重要的一个组成部分，用于将现有的代码转化成目标代码，最为人所知的就是babel，他能够
2020-12-05 16:22:06
878
原创 保姆级教程——逐步剖析前端脚手架工具cli的基本原理
前言本文默认读者已安装了node，npm等工具，并了解其基本用法，涉及到此类内容将不会深入讲解，此类基础环境的安装过程将会略去开篇相信写过react和vue的小伙伴们都会用到create-react-app和vue-cli这类脚手架工具，那么有没有想过，这类工具是怎么做出来的呢？cli是command-line interface（命令行界面）的缩写，本篇文章的目标是通过动手写一个cli工具，来剖析vue-cli这类脚手架工具的基本原理动手首先我们新建一个test-cli文件夹，里面只有
2020-09-01 21:10:08
979
原创 React中setState的怪异行为 ——setState没有即时生效
setState可以说是React中使用频率最高的一个函数了，我们都知道，React是通过管理状态来实现对组件的管理的，当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI但实际使用的时候，我们会发现，有时候我们setState之后，并没有立刻生效，例如我们看一下以下的示例代码class Test extends Component { c...
2019-01-12 14:41:45
22915
2
原创 React事务机制解析
对react有一定了解的开发人员应该都听说过react的事务机制，这个机制几乎贯穿于react所有提供的方法，包括react中最常使用的setState函数那么，react的事务机制到底是一种什么样的机制呢，为了解释事务机制的实现原理，react源码中用注释画出了这样一幅图根据这幅图，我们可以这样理解事务，react中用事务执行方法，就是用wrapper（称之为套套吧）把方法包裹起来，...
2019-01-11 23:20:19
52510
1
原创 react生命周期原理解析
这篇文章是对之前的一片文章react生命周期整理提到的生命周期的解析，本文会从源码的角度，对react的各个生命周期的实现原理进行不太详细的分析getDefaultProps与getInitialState首先我们来看一下以下两个代码片段，第一个是用es5创建组件的方法，需要调用react的createClasss方法，第二个是es6创建组件的方法，定义一个类继承react.compone...
2019-01-06 22:24:18
2500
原创 zepto源码分析之form表单处理
本篇是zepto源码分析系列第二篇，这里依旧有一份包含详细中文注释的zepto源代码，有需要的可以下载下来学习，觉得有帮助的话戳一颗星那就更好了本篇会解析zepto源码中的form表单处理部分，这部分相对来说比较简单，仅包含三个方法：serialize，serializeArray，submit，依次分析如下serializeArray$.fn.serializeArray = fu...
2018-08-19 16:20:53
1009
原创 zepto源码分析之ajax
首先，放github链接，这里有一份包含详细中文注释的zepto源代码，有需要的可以下载下来学习，觉得有帮助的话戳一颗星那就更好了这篇博文会先解析ajax实现的部分，zepto对于ajax的实现包含两个部分，普通的xhr请求和jsonp请求，对外暴露了以下几个方法：$.ajax，$.ajaxJSONP，$.ajaxSettings，$.get，$.getJSON，$.param，$.pos...
2018-08-14 22:16:42
748
原创 https加密机制解析
https是目前最流行运用最广泛的安全http形式，早年由netscape首创，目前所有的浏览器均支持此技术，这篇博文主要简单的解析https的加密机制从下图可以了看出，https和http最主要的区别在于，https比http多了一层加密层SSL/TLS，接下来会简单解释https相关的加密原理理解https的加密原理，首先要了解一下以下概念数字加密数字加密由明文，密钥，密文...
2018-07-25 23:06:44
3610
原创 js如何判断当前文本的输入状态——中文输入法的那些坑
相信各位在平时接需求的时候肯定会遇到这样的一些需求，例如，要求输入框限制输入长度，限制输入类型，限制只能英文输入，限制只能输入大写字母等等，这时候我们一般的思路无非两种，一种是弹出特定的键盘，第二种是在输入的过程中对输入内容进行正则匹配，然后根据自己的需求对input框进行赋值。弹出特定键盘可以通过对input框的type属性进行赋值，但由于不同的浏览器对弹出的输入框都有比较严格的限制，并且弹出之...
2018-07-09 22:44:43
24534
1
原创 拦截浏览器后退的两种方式
在平时开发的过程中，经常会遇到类似这样的需求：用户点击后退时，弹出提示框提示用户是否退出，或者需要阻止用户后退，用户点击后退之后重定向到其他页面，这一类的需求，都需要我们能够在用户点击后退时捕获到相应的事件并进行拦截。以下是两种拦截方式的总结：1：利用popstate事件和pushState方法，popstate是html5新增的一个事件，它会在浏览器历史发生变化时触发，对于这个事件的描述...
2018-06-23 09:27:29
29613
4
原创 浏览器缓存机制分析及前端缓存清理
本文主题：理清浏览器的缓存机制的内部逻辑，并给出避免浏览器缓存的相关解决方案相信很多新手前端发布页面的时候都会遇到一个问题，就是明明页面已经更新了，但是浏览器浏览页面并没有变化，那么如何解决这个问题呢？事实上，这个问题各种搜索引擎搜索之后会发现有很多的方案，但不一定有效，一般的解决方案有以下的两种：1：添加时间戳；2：cache-control。首先第一种，就是在你的所有静态资源文件后面添加随机时...
2018-06-03 16:56:33
18386
2
原创 FastClick源码分析
玩过移动端web开发的同学应该都了解过，移动端上的click事件都会有300毫秒的延迟，这300毫秒主要是浏览器为了判断你当前的点击时单击还是双击，但有时候为了更快的对用户的操作做出更快的响应，越过这个300毫秒的延迟是有点必要的，faskclick做的就是这件事，这篇文章会理清faskclick的整体思路，分析主要的代码，但不会贴出所有的代码，仅分析主干，由于历史原因，faskclick对旧版本...
2018-06-03 11:12:28
1374
原创 Web Components入门不完全指北
目前流行的各类前端框架，不管是react, angular还是vue，都有一个共同点，那就是支持组件化开发，但事实上随着浏览器的发展，现在浏览器也原生支持组件式开发，本文将通过介绍Web Components 的三个主要概念，带读者无障碍入门Web Components
2023-12-24 21:27:13
1135
原创 前端devops——利用gitlab实现CI/CD自动化部署
Git是一个用于代码的存储和版本控制开源的分布式版本控制系统。GitLab 则是一个用于仓库管理系统的开源项目。本篇文章将讲解如何用gitlab搭建一个私有化的代码管理平台，并实现CI/CD自动化部署。由于条件限制，本篇的所有操作都在windows下执行，并使用docker进行操作。
2022-12-30 17:25:13
5272
原创 同步还是异步？console.log的怪异现象解析
在开始正式装逼之前，我们先来看几句简单的代码，并试图预测它的输出结果 var a=[{index:1},{index:1}]; console.log('==============修改前==========='); console.log(a); for(var i=0;i<a.length;i++){ a[i].index=2; ...
2020-01-18 14:11:59
737
原创 JavaScript函数传参原理详解——值传递还是引用传递
讨论JavaScript的传参原理之前，我们先来看一段曾经让笔者困惑了一段时间的代码var testA=1;var testB={};function testNumber(example){ example=2;}function testObj(example) { example.test=1;}testNumber(testA);testObj(te......
2019-07-28 11:58:59
6172
10
原创 nodejs模块查找策略
我们都知道，nodejs目前支持es6模块和commonjs模块，在这个万物皆可为模块的世界里，这篇文章来探讨一下当我们引用一个模块时，nodejs是已一种什么样的策略来查找到对应的模块的模块分类nodejs中的模块主要分为两大类，一类是nodejs提供的模块，称为核心模块，另一类是用户编写的模块，称为文件模块，他们的关系如下图所示文件模块文件模块根据引用的方式不同，又分为自定...
2019-07-21 10:46:21
2071
原创 字体图标科普——从字体图标原理到制作
什么是字体图标对于前端的小伙伴来说，字体应该是再熟悉不过的东西了，对于文字我们可以通过css指定文字对应的字体，字号大小，颜色。得益于css3，我们还可以在css中引入服务端字体来实现自定义字体。而字体图标，顾名思义则是把图标当做字体来使用，通过使用字体图标，我们可以动态改变图标的大小、颜色等一系列字体属性。而且相对于一般的图片，字体图标的大小改变并不会使图像变的模糊。接触过bootstra...
2019-07-06 16:19:04
5612
1
原创 深入理解JavaScript的原型链——关于prototype，__proto__，constructor那些你可能没有彻底搞懂的关系
说起原型链，戳进来看这篇博客的同学必然不会陌生，这是JavaScript中最核心的特性之一。那么，原型链到底是一个什么东西，它的工作原理是什么？这是本篇文章探讨的内容对于原型链，我们可以这么理解，每一个JavaScript对象中，都存在一个内部属性，我们称之为[[prototype]]（注意，此处的[[prototype]]属性并不是prototype属性，对于prototype属性，我们之后...
2019-06-16 14:57:08
951
1
原创 javascript中bind多次绑定无效——从源码角度看看bind到底做了什么
我们都知道，js中的函数提供了一个bind方法用来绑定this，该方法会返回一个新的函数，在调用返回的函数时会设置this关键字为第一个参数的值。并在调用新函数时，将给定参数列表除第一个参数之外的其他参数作为原函数的参数序列的前若干项。有了bind函数，我们可以很方便的绑定函数的this，但是偶尔我们也会遇到类似下面代码展示的困惑function testBind() { con...
2019-06-10 20:01:55
3557
4
原创 javascript中的变量和函数提升
提到代码的执行顺序，在不考虑异步回调的情况下，有些开发者可能会认为，同步的js代码的执行顺序跟代码编写的顺序是一致的，即从上往下一行一行的执行。这种想法，严格上只能说是大致正确。从编译器的角度来说，js引擎在解析我们代码的时候，首先会找到所有的变量声明，并且把他们关联到对应的作用域上。简单来说，编译器会首先处理所有的声明，包括函数和变量，这个过程被称为提升。变量提升首先，我们通过下面的...
2019-06-02 15:25:20
175
原创 js中setTimeout，requestAnimationFrame，requestIdleCallback的区别和应用
前言：本文中提及的关于标题中三个api的回调函数的调用，都是指回调函数被压入调用队列中等待被调用，如对js中的异步调用和任务调度机制尚不太理解，建议先阅读作者的另一篇文章，异步调度机制——Javascript事件循环（Event Loop）机制解析。正文：本文的主要内容是理清setTimeout，requestAnimationFrame，requestIdleCallback这三个函...
2019-04-06 21:25:19
3820
原创 正则表达式中问号（?）的用法详解
正则表达式中“?”的用法大概有以下几种1、直接跟随在子表达式后面这种方式是最常用的用法，具体表示匹配前面的一次或者0次，类似于{0,1}，如：abc(d)?可匹配abc和abcd2、非贪婪匹配关于贪婪和非贪婪，贪婪匹配的意思是，在同一个匹配项中，尽量匹配更多所搜索的字符，非贪婪则相反。正则匹配的默认模式是贪婪模式，当?号跟在如下限制符后面时，使用非贪婪模式（*,+,?，{n}，{n...
2019-03-23 15:51:39
66758
1
原创 异步调度机制——Javascript事件循环（Event Loop）机制解析
我们都知道，javascript是一个单线程的语言，这就意味着，js在同一个时间片上，只能执行一个任务。只有当前一个任务执行完成之后，才能执行下一个任务。那么当出现网络请求，IO操作这类耗时操作时，由于当前任务什么时候完成我们是不知道的，这时候如果选择等待当前任务完成之后再进行下一步很明显是不明智的，这样会导致性能的严重下降，于是，js的任务类型分为同步和异步两种。同步任务就不需要多说了，按顺...
2019-02-23 22:40:33
1592
原创 React中key属性的作用及原理解析
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Test`. See https://fb.me/react-warning-keys for more information.相信在react的使用过程中，大家或多或少都会遇到过这样...
2019-01-20 14:58:10
16379
1
原创 react生命周期整理
react中的生命周期可以分为四大类，分别为定义时触发，渲染时触发，更新时触发以及卸载时触发。本文章会对所有生命周期进行归纳并从源码的角度解析其实现原理（写到一半发现文章已经有点长了，决定新开一片文章来解析实现原理，传送门）定义时触发（createClass）getDefaultProps该生命周期是在定义组件的时候触发，其返回的对象可以用于设置默认的 props，由于这个方法是在构造...
2019-01-06 15:28:34
951
原创 React的跨级组件通信
我们知道，react中父子组件之间的通信，父组件和子组件通信，可以通过props向子组件传递参数，子组件和父组件通信，则可以通过调用props传入的回调函数来向父组件传递参数那么问题来了，如果是跨级组件之间的通信，如果通过props一层一层往下传，不仅逻辑会变得很不清晰，代码也会变得不好维护，这个时候，我们需要使用到react中的context来解决这个问题首先我们来看一段代码cla...
2018-12-28 23:08:52
4225
原创 javascript绑定this的几种方法
首先 ，理清一下js中的this，js中的this对象指向调用当前方法的对象，这个指向是在执行的时候才确定下来的，跟函数在何时何处声明是无关的。但是，在实际使用过程中，我们经常会遇到要改变当前this指向的需求，一下的对绑定this方法的归纳1、call和apply这里把call和apply放在一起讲，是因为这两个方法及其相似，其作用都是直接调用一个函数，并使其具有一个指定的this，...
2018-11-28 17:20:52
1400
原创 css文字换行总结
web前端布局中有时候在有限的空间中会出现很长的文字，由于对布局的要求有时候我们需要改变默认的换行方式，以自定义的方式控制换行，以下是使用css控制换行的相关总结1、overflow-wrap，word-wrap 这两个属性效果其实是一样的，word-wrap是早期微软定义的属性，overflow-wrap是css3标准化的定义，为了兼容们目前word-wrap已经被作为overflow-...
2018-10-06 22:28:38
2860
原创 如何防止页面被调试
由于web前端项目的特殊性，所有的前端代码基本上是开源的，这就意味着，访问者可以无条件的查看所有的代码，甚至进行调试，弄清项目的业务逻辑，这样，漏洞挖掘者就可以很方便的找出网站的漏洞进行攻击。出于安全的目的，前端会对代码进行各种压缩打包，混淆等，增加阅读代码的难度，但对于调试，似乎很多人并没有引起应有的重视，下面会介绍一种比较基础的方法，用于阻止网站访问者对项目进行调试。我们都知道，在js...
2018-08-26 16:54:51
8916
4
原创 关于类库的模块化实现
相信很多人都有过自己写个类库的想法，对于一个类库，如何模块化是首先需要考虑的问题，目前js有多种模块化的规范，常见的有CMD，AMD以及ES6自身实现的模块化方案，前两种是社区早期指定的规范，最后一种则是w3c的规范，那么如何让我们自己编写的代码能兼容到这么多种规范呢，或者说，知名的类库都是怎么实现的呢，接下来我们分析一下underscore.js中的实现 if (typeof exp...
2018-05-20 22:13:29
502
原创 undercore中链式操作的实现
首先，大致说一下什么事链式操作，链式操作是利用运算符进行的连续运算（操作），它的特点是在一条语句中出现两个或者两个以上相同的操作符，用过jquery的同学大概都知道，jquery中支持下面这种写法$('test').test1().test2()，这种类型的操作就是典型的链式操作，他的优点是代码会更加的简洁，更加的优雅，如果不支持链式操作，上面的操作大概就要写成$(test).test1();$(...
2018-05-20 21:32:21
318
原创 js+css3实现一个环形进度条插件
进度条用多了，有没有想过环形的呢，例如这样子的说实在的，虽然css3提供了很强大的动画功能，包括各种旋转，直线运动，然而，并没有曲线运动，那么只好综合运用已有的功能进行实现，这里用到的比较多的就是旋转，先看下面的这几段代码，这是网上一个哥们写的，先用来理解一下实现的原理，虽然有一堆的兼容性问题，只能在pc版的chome上面使用，但是用来学习已经足够了，后面再奉上修改后的源码。html:
2016-06-09 18:23:14
6870
原创 winform防止界面卡死的三种方法
在编程过程中经常会遇到耗时操作，这个时候如果不采取一些必要的异步操作，就会导致界面的卡死，这里以winform为例子，介绍三种方法防止界面卡死，对这几个方法稍加修改同样适用于wpf,silverlight等程序首先给出一个函数模拟耗时操作1使用委托+QueueUserWorkItemdelegate void ChangeInvoke(int num) ;private void Ch
2015-01-12 22:55:01
34623
4
原创 使用反射的四种方法
反射是.net提供的用来访问类或者类里面的内容的一项技术，它允许你在编译时对一个类基本上一无所知的情况下对一个类进行访问，支持利用一个字符串对类进行发现、访问、调用等，以下利用实例介绍四种使用反射的方法。首先观察一下这四个方法传入的参数，都有一个type类型的参数，这个参数获取的是利用反射想要访问的类的类型，这个先搁着，先介绍获得这个类型之后如何对这个类型的类进行访问。方法1，利用最直接的方式，但是反射是一种比较消耗性能的调用方式，方法1每调用一次方法或属性都会进行一次绑定，对性能的消耗比较大，速度也比
2015-01-08 22:06:40
4872
原创 关于c#中的Func<>和Action<>
Func其实本人自己基本上也没怎么用过，之所以会写出来主要是因为在一本书的示例代码中看到了这两个东西的使用，发现其实还是挺好用的，所以就写下来，有需要的阿猿们可以参考一下。首先说一下，个人感觉就是使用起来比较方便，代码也简洁好看一点，它们的作用就是引用一个方法，或者说封装一个方法，说白了它们就是.net提供的默认泛型委托，.net里面提供了17个Action委托和17个func委托，Actio
2015-01-07 22:45:02
1785
原创 c#多线程之Task
上一篇文章写了通过QueueUserWorkItem进行异步操作，但是通过ThreadPool的QueueUserWorkItem进行异步操作有一个缺点，我们无法知道异步操作何时结束，并且无法获取返回值，这些都可以利用Task来获得解决。首先，还是来一段示例代码Task task = new Task(n=>TaskTest2(10),0); task.Start(
2014-12-30 22:18:22
3219
原创 c#多线程之QueueUserWorkItem
编写代码的过程中经常会遇到需要并行操作的时候，此时就需要使用到多线程操作，.net中提供了多种操作多线程的方法，这里介绍最简单的一种----通过ThreadPool.QueueUserWorkItem。首先看实例代码ThreadPool.QueueUserWorkItem(DoSomeThing);private void DoSomeThing(object state)
2014-12-30 22:02:00
13274
1
原创 c#操作word图表（二）
c#操作word图表（excel）这一篇是对上一篇操作word类文章的补充，上一篇是通过Microsoft.Office.Interop.Graph插入图表，但样式稍差，这次是通过调用excel来插入图表，所以运行过程中在在进程管理中会发现出现excel进程，由于代码量较多，这次只贴出关键代码，具体的其他代码请查看上一篇首先引入Microsoft.Office.Interop.Word
2013-12-08 10:14:13
3626
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人