精读《React Hooks 最佳实践》React 16.8 于 2019.2 正式发布，这是一个能提升代码质量和开发效率的特性，笔者就抛砖引玉先列出一些实践点，希望得到大家进一步讨论

【1】遮罩层：承载内容，管理样式布局。 【2】内容层：控制遮罩层的显示与否。 遮罩层和内容区之间应该解耦。 遮罩层和内容区之间应该解耦。 遮罩层和内容区之间应该解耦。 遮罩层不依赖于内容区，内容是放置在遮罩层里的，至于内容区里的内容是什么，遮罩层完全不用在意。因此可以在遮罩层里采用插槽。 遮罩层的

<luo-hao @click="handleClick"></luo-hao> 复制代码 在 luo-hao 组件内部通过 console.log("listeners: ", this.$listeners) 复制代码 在控制台中可以看到 listeners: {click: ƒ} 复制代码 说明在组件上注册的自定义事件，最终都会被注册在组件实例上。在组件内部点击，不会触发

假设如今正在开发的大多数 Web 应用程序，都面临着类似的情况：前端变得越来越大，而与后端的相关性越来越小。 重新思考不同的前端框架如何共存，例如，使用 JQuery 或 AngularJS 1.x 构建的旧模块，与使用 React 或 Vue 构建的新模块联动。 整体方法不适用于普遍的 Web 应用程序。 管理十个十人的项目，要比管理

webpack配置时，为了提高解析速度，需要指定需要处理的文件。 有三种配置可以指定需要处理的文件： test include exclude test test: /.jsx?$/,复制代码 正则表达式，指定项目中所有的文件（包含node_modules）后缀名为.jsx 或者 .js的文件。 include 指定需要处理的文件。可以是具体的文件或者文件名

我们平时“搬砖”只关注业务代码，页面脚本现在都由 webpack 帮我们自动组装，可能会忽略页面 script 的一些细节。 下面列了有关 script 标签的几个小问题，可以来自测下： script 标签放在 header 和 body 的区别？ script 中的 defer、async 属性有什么作用？ 多脚本加载时间不同，会影响其执行顺序

function f1() { console.log('1') } function f2() { console.log('2') } f1() f2() 复制代码 很容易可以看出，上述代码会依次输出1，2。因为代码是从上到下，依次执行，执行完f1()，才会执行f2()。但是如果f1()中的代码执行的是读取文件或者ajax操作呢，文件的读取都需要一定时间，难道我们需要完全等到文

导语 本文通过React语法从v15自动升级为v16的方案，阐述了AST的概念及其在前端项目中的应用与探索，介绍了若干适合AST技术在前端落地的场景。 背景 通常一个中后台系统至少有三到五年的生命周期。 在立项之初一般会采用一些成熟稳健的技术，然而随着时间的流逝，原有技术栈必

1 遇到 vue 文件额外用一个 loader 解析一下，在 loader 中用 parser5 将元素对应的源码行列信息以 html 属性的方式加在标签中 2 给 document 绑定点击事件（事件代理）发送打开请求 3 webpack-dev-server 提供打开文件的服务 具体实现 github 地址 loader 实现 // open-sourceadd-element-location-loader.

1.什么是mvvm MVVM的核心是 数据驱动 即ViewModel，ViewModel是View和Model的 关系映射 。MVVM本质就是基于操作 数据 来操作 视图 进而操作 DOM ，借助于MVVM无需直接操作DOM，开发者只需编写ViewModel中有业务，使得View完全实现 自动化 。 2.什么是 SPA 单页面，它的优缺点分别是什么 SPA（ single-page a

近几日开发了一个习题渲染器（支持提交答案），内容好写，从0️建环境开发发布颇为不易:sob:，所以过后整理了一篇文章做个笔记。 本文记录了项目的搭建、开发和发布过程，项目源码地址： github 。 目前有很多可优化的地方，比如添加 eslint、测试、npm publish hooks 等等，时间有限先发文章，后期（认真脸）会逐步

基本上每个widget都有key参数，但是使用的方法确各有不同。在widget从widget树的一个地方移动到另一个地方的时候，key会保存状态。在实际使用中，Key可以用来保存用户滚动的位置或者保存集合修改的状态

上一篇整理了webpack配置的四大配置概念。这篇来整理loader的使用。 loader 因为我的项目是基于Vue全家桶及sass的，所以 loader 部分会有偏向这方面的介绍，使用TS，React全家桶及less的可以找一下相应的 loader 。 webpack打包模块时，会把模块拿到 module 这里的 rules 中做匹配，如果匹配到，则使用对应的l

之前我们实现了 redux 的功能，这次我们来实现一下配合 redux 开发中经常会用到的一个库—— react-redux。本文不会详细介绍 react-redux 的使用，另外需要了解 Context API， 再看此文就很容易理解了。可以看看我

上一篇整理了loader的使用，这篇整理一下 babel 跟 postcss-loader 的配置。 .babelrc 插件跟预设 其实， .babelrc 配置文件是用来支持我们在使用babel解析编译代码时，使用一些插件来处理高版本语法或者提案语法。插件跟预设的区别在于，预设其实是一些插件的组合，它方便我们处理一类语法的打包编译问题

最近在思否看到一个文章36个工作中常用的JavaScript函数片段。 身为坑爹面试官（▄█▀█●），怎么能只有一个答案呢？ 数组 Array 数组去重 方案一：Set + ... {代码...} 方案二：Set + Array.from {代码...} 方案三

module.exports = { entry: { index: "./src/index.js", // 指定打包输出的chunk名为index foo: "./src/foo.js" // 指定打包输出的chunk名为foo }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", // 要打包输出哪

由于Git是一门工具，合理的学习过程，应该是先知道怎么用，再去理解仓库、分支、冲突等等概念。因此本文把各种操作按照新手的学习曲线进行编排，方便初学者循序渐进

继承主要有两种方式，接口继承和实现继承。接口继承只继承方法签名；实现继承则继承实际的方法。ECMAScript只支持实现继承。而且其实现继承主要是依靠原型链来实现的。原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系，每个构造函数都有一个原型对象

本文专门介绍 闭包 ，但事实上，闭包的难点并不在概念，而是在 词法环境的嵌套 上。只要将词法环境的嵌套关系整理清楚，闭包就瞬间被克服了。（或是去看看Python……） 总之，先不废话了，正文开始。 闭包 如果一个函数在定义的词法环境外运行并记住了定义时的词法环境，这样的现象就可以称作 函数闭包 （Function

首先是这周下载github的一个项目，包错如上图所示。错误的大致意思是：需要读取的数据还没有完成，但是传输数据的连接被关闭了。通过网上试了无数种方法得出。原因1：缓存区溢出解决办法：命令行输

昨天有眼尖的同学找我，说明明 Vue（下文用 Vue 指代 Vue.js） 的示例就在 React 下面，你怎么不介绍？ 冤枉我了，介绍这就来了。 开始浅出 老规矩，首先，安装 Midway FaaS 的 @midwayjs/faas-cli 工具（上次装过的就可以跳过啦）。 $ npm i @midwayjs/faas-cli -g 复制代码 我们将脚手架和示例都

"不畏惧，不讲究，未来的日子好好努力"——大家好！我是小芝麻:smile: 在默默的更新了一段时间的文章后，小芝麻决定励志成为一个标题党:smile: 别走，别走，别走啊:sob:..... 搞错了，下面我们正式开始； 本篇内容适用于：初学前端；及工作时间不久想回顾基础的各位伙伴； 文章主要由图片组

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（

最近想做一个 Node.js 的应用，以把自己学到的 Node.js 技能初步落实一下，思前想后还是做一个小型聊天应用吧，博客之类的恐怕后期精力不够，（之前做phper的时候做博客就因为越想越多的功能半途放弃了:sweat_smile:），因为之前没有做过 WebSocket 相关的业务，所以也想在这方面实践一下，预想的是做一个具备单聊和群聊

加入极市专业CV交流群，与  1 0000+来自港科大、北大、清华、中科院、CMU、腾讯、百度  等名校名企视觉开发者互动交流！ 同时提供每月大咖直播分享、真实项目需求对接、干货资讯汇总，行业技术交流。关注  极市平台  公众号  ， 回复  加群， 立刻申请入群~ 来源｜GiantPandaCV

你是否经常在文章中见到 “你还没有用TypeScript么，都2020年了！” 这样的标语？今天我们就来探究一下TypeScript的优缺点。 此篇文章适用于没接触过TypeScript的人、仅读过文档但无实际项目操作的人，笔者希望借此文章可以给大家提供一个思路，便于以上两种类型的读者做出选择。如果你是TypeScript老鸟，这

增强版的 swr