FrankKai.github.io
FrankKai.github.io copied to clipboard
FrankKai
FE blog
 通过阅读这篇文章，可以学习到如何使用webpack-chain插件使得前端项目更加工程化。vue-cli3.0的vue.config.js采用webpack-chain插件的方式进行链式配置，所以这个插件非常值得一学。 - 命令式编程->声明式编程 - 为什么要使用webpack-chain插件？ - webpack-plugin使用示例 - 一些常用的webpack-chain 缩写方法 - 引入webpack-chain后如何配置plugin? - vue-cli3.0引入webpack-chain后，如何配置最常用的DefinePlugin呢？ #### 命令式编程->声明式编程（函数式编程） 使用前的声明式编程： ```js const path = require('path'); const config = { entry: './src/index.js', output:...
- 初识sort() - sort() demo - sort() 语法 - sort() 升降序规则（重点） - 创建、展示和排序数组 - 排序non-ASCII字符 - map()结合sort()一起使用 - 对象根据value给key排序 ### 初识sort() - sort()函数会**原地(in place)**排序数组中的元素，返回排序的数组。（**原地意味着在原数组的基础上做修改，不会开辟新的空间**） - sort()函数默认的排序顺序为升序，默认排序建立在**将元素转换为字符串**的基础上，然后比较UTF-16单位的序列。 - sort()函数的时间复杂度和空间复杂度无法保证，因为依赖于实现。**在sort()函数内部，采用了插排和快排以及一系列排序优化，因此时间复杂度和空间度是跟着情况变化的。** 更多可以查看：[发现算法之美-排序](https://segmentfault.com/a/1190000022852314) 举例说明"将元素转换为字符串"：...
在css-tricks的[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background)一文中，有这样一句话： >Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts. -...
使用过mqtt的同学都知道，mqtt连接时，在Network面板中的status是101。 | Name | Status | Time | | -------- | ------ | ------ | | mqtt | 101（Switching Protocols） | Pending | 那么101（Switching Protocols）到底是什么意思呢？ 这篇文章将带你理解101交换协议是什么，以及101交换协议运用的协议升级机制。 - 101交换协议 - 协议升级机制
原文链接：[Node.js中的进程与线程](https://mp.weixin.qq.com/s/CRAptkRRCWunLgwjA6BFrQ) 原文中spawn，fork，exec，execFile的示例需要补充一下，我把目录结构和代码做了一些调整，更加易读和理解。 ```js ./sub_test sub_spawn_pipe.js sub_spawn_ipc.js sub_fork_ipc.js sub_exec.js sub_execFile.js ./test sub_process.js ``` ### spawn进程（流方式通信，on('data')） sub_spawn_pipe.js ```js let { spawn } = require("child_process"); let path = require("path"); // 通过node命令执行sub_process.js文件 let childProcess...
- useContext是什么意思？ - useMemo是什么意思？ - useCallback是什么意思？ - useEffect与useCallback(useMemo)的区别是什么？ - useRef如何解决空指针问题？ - 如何通过useReducer实现forceUpdate的效果？
一直以来都有用let和const，看似深入学习过，但其实没有真正完全理解，在模棱两可的用，之前在城西的一次面试就被问的哑口无言，所以我将通过mdn的资料针对性地学习[let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) 和 [const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)，并且会写一些易懂的例子，也会涉及到一些规范里的内容。 - block，statement和expression的区别是什么？ - 为什么选择了'let'作为block-scoped variable declaration？ - let和const不会像var一样绑定值到global 对象！ - let和const不能像var一样同一个scope下声明多次！ - let和const不会像var一样变量声明提升！ - 循环中let/var与setTimeout的羁绊！ - for循环无异步参与时，var，let效果相同 - for循环有异步参与时，var异常，let创建块作用域 - Array.prototype.forEach与setTimeout，独立作用域
项目中有用到vue-router和webpack实现异步加载组件，使用的就是import的函数语法`import()`语法 在学习webpack的代码拆分章节时，也有专门的一个章节用来讲这个，因此需要系统性学习一下import的函数语法`import()`。 - 最简单的结构 - 初识import() - 为什么要动态引入 - 动态引入使用示例 - 如何在webpack中使用import()实现动态引入 - vue-router中如何结合webpack如何动态引入 ### 最简单的结构 ```js var promise = import("module-name"); ``` ### 初识import() 标准版的import语法是static的，因此会在加载时就引入所有的代码。 但是很多情况下我们需要动态引入模块，也就是说满足特定条件才加载模块，我们可以使用动态引入去做这件事。 ### 为什么要动态引入 一共有5个原因。 -...
 今天看element-react源码的时候，又看到了这张似曾相识却又异常陌生的老面孔，那就是Function.prototype.apply()... ``` import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; export default class Component extends React.Component { classNames(...args) { return classnames(args); } className(...args) { return...
 用中文怎么叫合适？ 相等？全等？ 其实并不合适，叫double equals 或者treble equals，或者叫不懂的人觉得比较不专业的双等或者三等操作符，是更加严谨和正确的叫法。 为什么这么说？看完这篇博客你就明白了。 #### **一、入门阶段：自我经验（一脚一坑）** 我的理解是： ==是相等，值相等，返回true。 ===是全等，值相等，类型也相等，返回true。 上面的理解是错的，`[]==false`和`[1]===[1]`返回就可以推翻。`[]==false`，他们的值并不相等，但是返回true。[1]和[1]，值相等，类型也相等，返回为false。因此上面理解是错的。 正确的理解是： >**==是相等，先转换再比较，返回true。 ===是全等，不转换就比较，返回true。** `[]==false`，false是转换为0，[]强制转换成0(**解释不清楚**)，`0 == 0` ,返回为true。 `[1] === [1]`，不转换就比较，`[1]===[1]`，左右的[1]指向内存中两个独立的，地址不同的数组，故返回false。 看下最简单的例子： ①基础类型vs基础类型 `1== true //true` `1...