前端

初识Redux

Redux定义

Redux is a predictable state container for JavaScript apps.
对于 JavaScript 应用而言， Redux 是一个可预测状态的“容器”.

上面的定义，是 Redux 官方给出的，你可以片面的将 Redux 理解为一个存储状态的容器（但并不仅仅是容器），但请不要忽略上面定义中的关键词：可预测状态。

Redux 是库结合模式

Redux 是一个库，这个库体积很小，并且库内的实现十分优雅。但 Redux 与传统的库不同，它在提供方法使用的同时，限制了一部分内容，在这一层面上，它又像是一种设计模式。因此，不妨将 Redux 理解成一个严格规定了使用模式的库。

查看更多

前端

一些原生小方法

  • addClass
    往node或者nodelist中添加class
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function addClass($els, classNames) {
        function addOneClass($el, classNames) {
            var resultClass = $el.className.split(" ");
            var newClassNames = classNames.split(" ");
            newClassNames.forEach(function (newClass) {
                if (resultClass.indexOf(newClass) < 0) {
                    resultClass.push(newClass);
                }
            });
            $el.className = resultClass.join(" ");
        }
        if ($els instanceof Node) {
            addOneClass($els, classNames);
        } else {
            for (var i = 0; i < $els.length; i++) {
                addOneClass($els[i], classNames);
            }
        }
    }

查看更多

前端

Webpack原理及优化

Webpack 是一个黑盒，内部有其自我的一套运行流程，开发人员无需关注其内部做了什么，仅需通过 Webpack 所暴露出的配置字段进行配置，即可达到模块打包的目的。

原理

工作原理

基本概念

  • Entry 入口， webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。

  • Module 模块，在 webpack 里一切皆模块， 一个模块对应一个文件。 Webpack 会从配置的 Entry 开始，递归找出所有依赖的模块。

  • Chunk 代码块 Chunk 由多个模块组合而成，用于代码合并与分割。

  • Loader 模块转换器，用于将模块的原内容按照需求转换成新内容。

  • Plugin 扩展插件，在 Webpack 构建流程中的特定时机会广播对应的事件，插件可以监听这些事件的发生，在特定的时机做对应的事情

查看更多

前端

React v16.3 新生命周期

React打算在 v17 版本推出新的 Async Rendering，提出一种可被打断的生命周期的形式，并在 v16 版本中为即将上线的这一功能做出兼容升级。（生命周期一旦被打断，下次恢复的时候又会再跑一次之前的生命周期，因此 componentWillMount，componentWillReceiveProps， componentWillUpdate 都不能保证只在挂载/拿到props/状态变化的时候刷新一次）

不安全的生命周期

随着 React 团队在 v17 版本推出的新功能上的实践，发现一些生命周期可能会带来一些危险性，这些生命周期方法经常被误解和巧妙地误用；此外，React 团队预计，对于异步渲染，它们潜在的误用可能会造成更多问题。v16.3版本发布后，官方文档中已经为这些容易出现问题的生命周期添加了 “UNSAFE_” 前缀。

这些生命周期是：

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

查看更多

前端

React 升级支持 Typescript

注意：本篇内容不完整，后续会不定时填充内容！

TypeScript 是 JavaScript 的超集，为泛类型的 JS 提供了类型支持。

对于 React 项目，想要改写为 TypeScript，获得 TS 提供的类型检查、代码提示等功能，是较为容易的。同时 React 文件和 TS 文件可以共存，经由 Webpack 打包后可以同时生效工作，提供了渐进的改写升级方式。

本文将介绍React 项目升级支持 TypeScript 的步骤。

安装依赖

为了支持 TS，你需要安装以下依赖：

查看更多

算法

三数相加


给定一个包含 n 个整数的数组 nums，判断 nums 中是否存在三个元素 a，b，c ，使得 a + b + c = 0 ？找出所有满足条件且不重复的三元组。

注意：答案中不可以包含重复的三元组。

例如, 给定数组 nums = [-1, 0, 1, 2, -1, -4]，

满足要求的三元组集合为：
[
[-1, 0, 1],
[-1, -1, 2]
]

来源：力扣（LeetCode）
链接：https://leetcode-cn.com/problems/3sum
著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。

标签：双指针

查看更多

算法

两数相加


给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。

你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。

示例:

给定 nums = [2, 7, 11, 15], target = 9

因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]

来源：力扣（LeetCode）
链接：https://leetcode-cn.com/problems/two-sum
著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。

标签：哈希表

查看更多

前端

JavaScript 是怎样工作的

JavaScript 是单线程的执行语言，它的 API 是由各个浏览器厂商进行实现的，所谓的兼容性问题也就是说标准的不统一，在实现上存在差异（实现的方法名、实现功能的浏览器版本）。

本文将介绍 JS 语言的执行，也就是事件循环（Event Loop）相关的内容。

V8 引擎

最具代表性的一个 JavaScript 引擎是 Chrome 的 V8 引擎，它被使用在 chrome 浏览器、NodeJS 中。如果用一个简单的模型来描述它，就是这个样子的：

查看更多