系列文章目录（同步更新）React 源码解析系列 - React 的 render 阶段（一）：基本流程介绍React 源码解析系列 - React 的 render 阶段（二）：beginWorkReact 源码解析系列 - React 的 render 阶段（三）：completeUnitOfWorkReact 源码解析系列 - React 的 render 异常处理机制本系列文章均为讨论 React v17.0.0-alpha...

系列文章目录（同步更新）React 源码解析系列 - React 的 render 阶段（一）：基本流程介绍React 源码解析系列 - React 的 render 阶段（二）：beginWorkReact 源码解析系列 - React 的 render 阶段（三）：completeUnitOfWorkReact 源码解析系列 - React 的 render 异常处理机制本系列文章均为讨论 React v17.0.0-alpha...

系列文章目录（同步更新）React 源码解析系列 - React 的 render 阶段（一）：基本流程介绍React 源码解析系列 - React 的 render 阶段（二）：beginWorkReact 源码解析系列 - React 的 render 阶段（三）：completeUnitOfWorkReact 源码解析系列 - React 的 render 异常处理机制本系列文章均为讨论 React v17.0.0-alpha...

系列文章目录（同步更新）React 源码解析系列 - React 的 render 阶段（一）：基本流程介绍React 源码解析系列 - React 的 render 阶段（二）：beginWorkReact 源码解析系列 - React 的 render 阶段（三）：completeUnitOfWorkReact 源码解析系列 - React 的 render 异常处理机制本系列文章均为讨论 React v17.0.0-alpha...

首先，功利点来说：目前前端框架三分天下：React、Vue、Angular，而 React 自从 v16.8.0 版本正式推出 React Hooks 概念后，风势已经从原来的类组件猛地转向函数组件，这是一个在设计模式、心智模型层次，且非常近期的革新，因此只要是你谈到自己会 React ，就一定会在面试中被问到 React Hooks 的原理。

过去，React 中的函数组件都被称为无状态函数式组件(stateless functional component)，这是因为函数组件没有办法拥有自己的状态，只能根据 Props 来渲染 UI ，其性质就相当于是类组件中的 render 函数，虽然结构简单明了，但是作用有限。

XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，用户访问网站后不知不觉就执行了脚本，攻击者可获取用户的敏感信息，如 Cookie、SessionID 等。

CSRF(“跨站请求伪造”)：攻击者通过邮件、社区发帖等方式诱导受害者进入第三方网站，并且在第三方网站中向被攻击网站发送跨站请求；这主要是利用了受害者在被攻击网站已经获取的登录凭证(cookie)，且 cookie 会自动附在对特定域名的请求里的浏览器特性，达到冒充用户对被攻击的网站执行某项操作（如指定受害者的邮箱账户...

我们在工作中很多时候都要做技术选型，去找寻既能满足自己需求又靠谱的第三方库；在前端开源生态季度繁盛的现状下，只要不是太小众的需求，我们很容易就能找到一堆相关的开源库，那我们具体要怎么做决策呢？我的做法是，先阅读开源库的说明文档让自己有一个感性的认识，然后挑选出其中的两三个库来进行更深入更全面的了...

在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。

本系列文章主要介绍如何在现代前端生态下，创建一个工业级别的库。近几年来，前端工程化、模块化、组件化的大潮铺天盖地而来，在解决以往的架构痛点之余，却又产生了信息过载的问题；我希望通过分享自己的经验，帮助大家少踩坑多出活。

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault.com/blog/array_huang

近年来前端领域发展迅猛，前后端分离早已成为业界共识，各类管控系统(to B)上个SPA什么的也不值一提，但唯独偏展示类的项目，为了SEO，始终还是需要依赖于服务器端渲染html。

在各种教程资料的例子里，块作用域都是出现在for(……){……}/if(……){……}/while(……){……}这些语句里的，那你有没有想过，块作用域其实跟这些逻辑控制语句完全没有关系？

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007522378 项目Github：https://github.com/Array-Huang/canvas-learning 案例1： 井字游戏 案例1-1 简单应用了canvas的一些基础API，如绘制基本图形以及路径。 案例1-2 练习使用Path2D配合translate...

一个完整的网站，不可能只包含一个jQuery，或是某个MVVM框架，其中必定包含了许多解决方案，例如：如何上传？如何兼容IE？如何跨域？如何使用本地存储？如何做用户信息反馈？又或者具体到如何选择日期？等等等等……这里面必定包含了UI框架、JS框架、各种小工具库，不论是第三方的还是自己团队研发的。而以上所述的种种，...

2016年9月7日，我在segmentfault的专栏实用至上发布了《webpack多页应用架构系列》的第一篇文章——《一步一步解决架构痛点》。这篇文章只能算作是预告或是前言，并没有什么实质的内容，没想到大家的反映那么激烈，这对我来说既是鼓励也是督促，于是我抓紧时间在两天后发布了第二篇文章《webpack配置常用部分有哪些？》。

上文《webpack多页应用架构系列（十二）：利用webpack生成HTML普通网页&页面模板》我们基本上已经搞清楚如何利用html-webpack-plugin来生成HTML普通网页&页面模板，本文将以我的脚手架项目Array-Huang/webpack-seed介绍如何在这基础上搭建一套简单的模板布局系统。

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007126268如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault.com/blog/array_huang 为什么要用webpack来生成HTML页面 按照我们前面的十一篇的内容来看，自己写一个HTML页面，然后在...

上文说到我们利用webpack来打包一个可配置的bootstrap，但文末留下一个问题：由于bootstrap十分庞大，因此每次编译都要耗费大部分的时间在打包bootstrap这一块，而换来的仅仅是配置的便利，十分不划算。

本系列文章主要介绍如何用webpack这一当前流行的构建工具来设计一个多页应用的架构。请注意，本文并非新手教程，着重点更多是在于提供解决问题的思路，而非手把手带你装逼。

前提本文讨论的是两列自适应布局：左列定宽/不定宽，右列自适应。虽然分这两种情况，但实际上不定宽的方案同样适用于定宽的场景，因此不定宽的方案泛用度更高。左列定宽，右列自适应margin + float {代码...} {代码...} 这个方法其实已经是兼顾到低版本IE的完善版本了，缺点是代码冗长，而且有两个关键知识点比较难理解...

inline-block是个很特殊的属性，既有inline文本的特性，又有block布局的特性；因此，用上inline-block，既可以让div像文本一样居中（text-align: center;），又不会影响div本身的宽高。这个方案有个缺陷，就是由于在parent上设置了text-align: center，因此child里的元素都会继承这个text-align: center，需要重新设置个...

javascript的Function中有不少不那么常用，又或者用了也是知其然而不知其所以然的属性/方法，本文就来谈谈这一系列属性/方法：caller/callee/apply/call/bind。

对Null使用typeof返回object，这跟我们的认知还是有一定差距的，这是javascript的一个设计上的bug，ECMAScript 6中有提议修改此bug，但已经被否决了；不过只要加个逻辑非!运算符，就能把Null这种情况给排除了。

本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！也许你会说，left/right以父元素的width为参照物好理解，但是top/bottom为什么也是以父元素的width为参照物的呢？网上众说纷纭，关键还是看W3C的规范：

文本方面的CSS内容不少，但只要是用过一下office word来编辑过文章的童鞋都能轻易理解其中的大部分。那么，今天仅仅来谈谈其中最复杂的部分——文本格式。

Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器），就可以减少重复编码的工作（主要是懒）。我个人惯用的是sublime，因此下文介绍的语法仅在sublime测试通过，不过其它平台应该也不会有什么出入。

画布配置 虽然对于切图仔来说，一般都是直接从设计师那接过PSD图，而不会自己新建一个画布，不过为了“教育”菜鸟设计师，还是需要知道一下的，嘿嘿。 有几个要注意的点： 网页设计中通通以像素(px)为单位。 目前主流屏幕的分辨率是1920*1080，因此宽度一般设为1920像素。 由于网页可以往下滚动，因此高度一般不限，大于10...

本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工作效率。