发表于 | 分类于 | 阅读次数:
字数统计: 1k字

webpack版本：4.43.0

  1. 手动配置DllPlugin

DllPlugin是webapck内置的一款可以加快构建速度的插件，其主要优化思想就是用空间换取时间，对于某些不常更新依赖内容，如:vue、vuex、vue-router，UI库等，可以提前打包好，取名为’dll.js’为后缀的打包文件，后面再打包的时候就跳过原来的未打包代码，直接使用之前打包好的文件，依次减少构建速度。

首先要写一个dll的webpack配置文件，放在根目录或者自己新建一个build文件夹都行。

阅读全文 »

发表于 | 分类于 | 阅读次数:
字数统计: 10.6k字

1、写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

自答：

要明白key的作用，首先我们要知道列表组件带key与不带key会有什么区别。

前提我们需要知道vue如何更新列表组件的。

在vue的diff函数中。经过交叉对比后，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。

阅读全文 »

发表于 | 分类于 | 阅读次数:
字数统计: 1.6k字
  1. 数组中的第K个最大元素 https://leetcode-cn.com/problems/kth-largest-element-in-an-array

选择最大数排序，选到下标为k-1的元素时，就可以返回了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var findKthLargest = function(nums, k) {
    let maxInd, tmp;
    let len = nums.length;
    for (let i = 0 ; i < len; i++) {
        maxInd = i;
        for (let j = i+1; j < len; j++) {
            if (nums[j] > nums[maxInd]) {
                maxInd = j;
            }
        }
        tmp = nums[i];
        nums[i] = nums[maxInd];
        nums[maxInd] = tmp;
        if (i === k -1) return nums[i];
    }
};
阅读全文 »

发表于 | 分类于 | 阅读次数:
字数统计: 2.4k字

缩小文件搜索范围

  1. 优化loader配置。

由于Loader对文件的转化操作很耗时，需要让尽可能少的文件被Loader处理。为了尽可能少的让文件被 Loader 处理，可以通过 include 去命中只有哪些文件需要被处理。

阅读全文 »

发表于 | 分类于 | 阅读次数:
字数统计: 4.9k字

作为一名日常使用Vue开发的前端开发，Vue的源码是有意义去了解的。今天的分享主要是Vue2.x源码的部分概念，包括以下三个内容：Vue的初始化、挂载与渲染流程、响应式系统的构建。

1. Vue的初始化

在所有以Vue为开发框架的项目里，都必定会执行new Vue语句来形成Vue的根实例。那么在源码里都干了些什么事呢？

在源码里，Vue是一个非常简单的以Function实现的类。在src/core/instance/index.js里定义了它。并且在这里执行了初始化所需要的所有方法函数。

阅读全文 »

发表于 | 阅读次数:
字数统计: 10.3k字

学一门前端工具，几年就过时了。学正则表达式，受用一辈子。

正则表达式，英文简称:RegExp，全称:Regular Expression。关于正则表达式的由来和介绍就不多说了，大家只要记住正则是匹配模式，要么匹配字符，要么匹配位置。

我们系统的学习知识和打游戏是一样的，初期只能挑战一些小喽啰，涨涨经验值，等级和装备齐全后就可以逐一去挑战boss们。所以我们先来看下正则世界里都有哪些小怪物。

友情提示：学习正则表达式对新手来说并不是很友好，一些基础的知识需要通过死记硬背来学习，你得先记住它，才能灵活运用它。

阅读全文 »

发表于 | 分类于 | 阅读次数:
字数统计: 2.6k字

秀米集成到UEditor的配置过程

虽然秀米官方有提供文档说明如何将秀米插件集成至UEditor里(秀米官方文档)，但是该文档说明模糊不清，关键配置一句话带过，即使配置成功后还有坑留在里面。所以我重新整理了这个配置过程，回顾一下过程的同时也给以后需要用到的小伙伴提供便利。

阅读全文 »

发表于 | 分类于 | 阅读次数:
字数统计: 79字 
1
2
3
4
5
6
[].__proto__ === Array.prototype
Array.__proto__ === Function.prototype
Array.prototype.__proto__ === Object.prototype
Function.__proto__ === Function.prototype // Function.prototype 是个方法，是通过继承Object.prototype而产生的,
Function.__proto__.__proto__ === Object.prototype // Object.prototype 原型链顶端，是对象，但它不是通过Object函数创建的。是浏览器引擎按照ECMAScript规范创造的一个对象
Object.prototype.__proto__ === null

发表于 | 分类于 | 阅读次数:
字数统计: 1.6k字

最近真的陷入了TypeScript无法自拔，我甚至有一种感觉ts可能会成为前端必须要掌握的一项技术(就像现在前端从业者必须得掌握三大框架之一一样)。

但现在使用vue+TypeScript来开发项目的其实还是比较少的，Vue的作者尤雨溪在知乎上回答过这么一个问题TypeScript 不适合在 vue 业务开发中使用吗？,根据他本人的回答，现在的vue2.x版本对TS的支持是远不如React和Angular的，所以在即将发布的vue3.0要加强这一块。

但是因为vue-class-component与vue-property-decorator(前者的升级版本，加入了Vue，Watch，Emit等功能)的存在，现在使用TS+vue来写项目也不是什么问题，虽然还有些稍许的bug，不过无伤大雅

在前面的博客里我介绍过如何使用TypeScript如何搭建store文件夹，所以这篇博文主要做一个用JS与TS编写vue文件的区别。(引入的是vue-property-decorator，全部介绍完基本上是不可能的，这里结束的是平时用的多的)

阅读全文 »