- 博客(20)
- 收藏
- 关注
RSS订阅转载 显微镜下的webpack4：灵魂tapable，终于搞懂钩子系列！
简介大家在看webpack源码的时候，有没有感觉像再看天书，似乎没有办法一个文件比如webpack.js从头看到尾。感觉webpack的跳跃性很强，完全不知道程序在运行的时候，发生了什么。完全不清楚这个事件是什么时候发生的，比如loader是什么时候执行的，plugin又是什么时候出现的。webpack的程序错综复杂，完全迷失在程序之中。这究竟是为什么呢？其实很简单！因为webpack...
2018-11-12 10:49:00
118
转载 显微镜下的webpack4：路径操作
对于打包工具来说，最简单也是最复杂的操作莫过于路径的安排了，原本都在src下的资源，想要打包到dist目录下，但是打包出来的文件路径甚不如人意。明明想要分门别类地放置文件文件，然后却像大杂烩一样js,html，css甚至图片都混在了一起。虽然打包之后运行没什么问题，但是这是要逼死强迫症患者啊。所以这篇文章就是讲解如何明明白白安排各资源的路径，无关webpack性能，无关各类骚操作，只是...
2018-10-26 10:47:00
113
转载 显微镜下的webpack4的新特性：mode详解
webpack4支持的一个新特性就是zero配置，不需要config，也可以打包，这对于懒癌患者很有诱惑力，但是这也意味着我们不清楚零配置发生了写什么，也不知道打包出来的文件是否符合我们的心意，全部都是佛系打包。不过作为项目的亲爹亲妈，还是要对自己的孩子负责，每个打包过程都是要可控的。本文就是详解不同mode下，webpack打包都发生了些什么事。我们来看一下MODE这个参数，他有三个...
2018-10-18 07:51:00
450
转载 显微镜下的webpack4入门
前端的构建打包工具很多，比如grunt，gulp。相信这两者大家应该是耳熟能详的，上手相对简单，而且所需手敲的代码都是比较简单的。然后webpack的出现，让这两者打包工具都有点失宠了。webpack比起前两者打包工具，对于前端程序员JS编程能力的要求还是挺高的。不过需要兼容ie8及以下的小伙伴们，就不要考虑webpack了，他很傲娇地不兼容！webpack 前期准备webpack，...
2018-10-12 14:33:00
77
转载 读懂CommonJS的模块加载
叨叨一会CommonJSCommon这个英文单词的意思，相信大家都认识，我记得有一个词组common knowledge是常识的意思，那么CommonJS是不是也是类似于常识性的，大家都理解的意思呢？很明显不是，这个常识一点都不常识。我最初认为commonJS是一个开源的JS库，就是那种非常方便用的库，里面都是一些常用的前端方法，然而我错得离谱，CommonJS不仅不是一个库，还是一个...
2018-09-29 10:26:00
120
转载 Redux的中间件Middleware不难，我信了^_^
Redux的action和reducer已经足够复杂了，现在还需要理解Redux的中间件。为什么Redux的存在有何意义？为什么Redux的中间件有这么多层的函数返回？Redux的中间件究竟是如何工作的？本文来给你解惑，Redux中间件从零到“放弃”。本文的参考网站只有二个，首当其冲的就是Redux的官方网站，本文的思考过程大多参考官方给出的例子。还有一个就是Redux的经典中间件，可...
2018-09-21 10:10:00
88
转载 通俗易懂的Redux了解下
Redux真的让我脑仁疼，感觉有点搞不定他，因为对我而言太抽象了。所以我用通俗易懂地方法去思考Redux，感觉能够理解了。本文要点：action配置行为store.dispatch(action)reducer纯函数返回新的statecreateStore(reducer)storegetStoredispatchsubscribecombineR...
2018-09-13 10:15:00
77
转载 React Components之间的通信方式了解下
先来几个术语：官方我的说法对应代码React elementReact元素let element=<span>A爆了</span>Component组件class App extends React.Component {}无App为父元素，App1为子元素<App><App1></App...
2018-09-07 10:03:00
123
转载 学习React从接受JSX开始
详情参考官方JSX规范虽然JSX是扩展到ECMAScript的类XML语法，但是它本身并没有定义任何语义。也就是说它本身不在ECMAScript标准范围之内。它也不会被引擎或者浏览器直接执行。通常会利用很编译器预处理器来将这些JSX转化为标准的ECMAScript。吐槽：虽然JSX出发点是好的，而且写起来也很简单，但是对于要在JS中写类HTML格式的内容，我的内心是排斥的，感觉非...
2018-09-05 10:25:00
97
转载 如何手写一款KOA的中间件来实现断点续传
本文实现的断点续传只是我对断点续传的一个理解。其中有很多不完善的地方，仅仅是记录了一个我对断点续传一个实现过程。大家应该也会发现我用的都是一些H5的api，老得浏览器不会支持，以及我并未将跨域考虑入内，还有一些可能出现的一场等～巴啦啦。（怎么感觉这么多问题？？？笑～）本文参考仓库：点我这几天在认认真真地学习KOA框架，了解它的原理以及KOA中间件的实现方法。在研究KOA如何处理...
2018-09-03 10:35:00
168
转载 KOA的简易模板引擎实现方式
上上一期链接——也就是本文的基础，参考KOA，5步手写一款粗糙的web框架上一期链接——有关Router的实现思路，这份Koa的简易Router手敲指南请收下本文参考仓库：点我上一期科普了Router，我们可以为每一张页面配置一个路由，但是我们不可能每个router.get(path,(ctx,next)=>{ctx.body=...})都直接写html，这样代码也太难维护了...
2018-08-30 10:19:00
87
转载 迭代器,生成器(generator)和Promise的“微妙”关系
需要Promise源码版的朋友：传送链接本文主要讲述（iterator）和生成器*/yield之间的联系和各自的用法，以及生成器的高配版本aysnc/await的使用。大纲：迭代器（iterator）生成器 */yield异步版生成器 aysnc/await迭代器（iterator）先瞅瞅“迭代”，这个词是什么意思呢？每一次“过程”的重复，称之为迭代。不过迭代是会保留结...
2018-08-29 10:00:00
163
转载 这份Koa的简易Router手敲指南请收下
上一期链接——也就是本文的基础，参考KOA，5步手写一款粗糙的web框架本文参考仓库：点我Router其实就是路径匹配，通过匹配路径，返回给用户相应的网站内容。以下方例子为例，主要通过提取req中的path信息，来匹配当前路径，并给ctx.body赋值，返回相应的界面。这个过程不复杂，就是一个匹配路径的过程。但是这种会不会太臃肿了呢，而且很有可能路径一多，就要被if...else....
2018-08-27 16:19:00
224
转载 参考KOA，5步手写一款粗糙的web框架
我经常在网上看到类似于KOA VS express的文章，大家都在讨论哪一个好，哪一个更好。作为小白，我真心看不出他两who更胜一筹。我只知道，我只会跟着官方文档的start做一个DEMO，然后我就会宣称我会用KOA或者express框架了。但是几个礼拜后，我就全忘了。web框架就相当于一个工具，要使用起来，那是分分钟的事。毕竟人家写这个框架就是为了方便大家上手使用。但是这种生硬的照搬模...
2018-08-23 23:16:00
78
转载 通过HTTP的HEADER完成各种骚操作
作为一名专业的切图工程师，我从来不care网页的header，最多关心Status Code是不是200。但是HEADER真的很重要啊，客户端从服务器端获取内容，首先就是通过HEADER进行各种沟通！HEADER可以帮助我们完成许多骚操作，提高网站的性能，用户的体验。好了让我们来feel一下。初级骚操作多语言（Accept-Language）防盗链（Referer、Referer...
2018-08-20 10:25:00
389
转载 我已经迷失在事件环(event-loop)中了【Nodejs篇】
我第一次看到他事件环（event-loop）的时候，我是一脸懵，这是什么鬼，是什么循环吗，为什么event还要loop，不是都是一次性的吗？浏览器中和nodejs环境中的事件环是有一些区别的，这里我只研究了nodejs环境，小黑框情况下的事件环。这里的事件环并不是指单独一件事件的循环，而是我们写的很多很多的事件按照一定地规则排着队去执行，然后队列清空后继续排队，就是事件环。事件环很...
2018-08-15 17:58:00
77
转载 扒一扒PROMISE的原理，大家不要怕！
在前端的日常工作中，回调函数（callback）应该是见怪不怪了，但是当回调函数遇上了异步（async），这就令人发指了。那么异步是什么意思呢，简单地说就是不等你执行完，就先执行下方的代码了。举个????：我们最常用的异步操作应该是ajax了（想当初我第一次用ajax的时候，简直就是灾难。明明资源加载成功了，怎么就是没有调到资源中的数据呢？真令人头大啊。），只能等待加载完毕，再执行相关操作...
2018-08-06 12:59:00
92
转载 canvas练手项目（三）——Canvas中的Text文本
Canvas中的Text文本也是一个知识点~，我们需要掌握一下几个基本的Text操作方法首先是重要参数textAlign和textBaseline：textAlignleftcenterrightstart (default)endtextBaselinealphabetic (default)【适合Latin文字类，“abc”】hanging【适合一些印地语，...
2018-04-17 18:05:00
724
转载 canvas练手项目（二）——各种操作基础
想想应该在canvas上面作画了，那么就不得不提到事件了。（打着canvas的旗号，写着mouse事件。挂羊头卖狗肉！哈哈哈哈哈~）先来看一看HTML事件属性，我们要用的就是Mouse事件，就先研究下mouse事件的特性。onmousedownonmousemoveonmouseoutonmouseoveronmouseleaveonmouseenter...
2018-03-13 11:06:00
219
转载 canvas练手项目（一）——选取图片
今天无事可做，在春意盎然的下午突发奇想想做一个关于图片处理的在线网页应用。不要问我为什么做这个，因为我想做！关于这个项目，我想基于canvas来实现，canvas是个好东西，我一直很喜欢，就是我没有做过什么成型的项目。为了挑战自己，或者说熟悉下原生的canvas，我决定不借助任何现有的框架，比如phraser.js或者createjs，这两个都是超级好用的框架，用了之后完全忘记canva...
2018-03-11 22:25:00
292
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人