Wang Wei's Blog

编写一个简单的Loader

参考文档

loader api: https://webpack.docschina.org/api/loaders/

resolveLoader: https://webpack.docschina.org/configuration/resolve/#resolveloader

初始化简单的项目

查看页面性能 – Performance

步骤：[F12] -> [Performance]窗口

查看文件中代码使用情况 – Coverage

步骤：[F12] -> [···] -> [More Tools] -> [Coverage]

点击加载之后可以查看加载文件使用情况，点击文件进入Sources窗口，可以查看已运行代码部分。

模块化

模块化一般指的是可以被抽象封装的最小/最优代码集合，模块化解决的是功能耦合问题。

每个模块都能拥有小于完整程序的体积，使得验证、调试及测试变得轻而易举。

用require语句（CommonJS模块）进行模块化开发了。同样，还有一个流行的JavaScript模块化标准，叫作异步模块定义（AMD）。RequireJS是AMD最流行的实现。

https://exploringjs.com/es6/ch_modules.html 摘抄如下：

JS为什么要有事件循环机制

JS被设计为单线程机制，为了避免出现竞态条件，例当线程A中正在操作DOM，但线程B中删除了此DOM，会发生错误。

所以为了避免发生竞态条件，是单线程原因之一。

主线程被长时间占用运行，渲染线程也会被锁死，目的就是避免出现竞态条件

运行时的概念

此次二次开发圈子小程序，有一个主包，三个分包，代码量一直处于快溢出阈值的程度。

二次开发通常是基于不动或尽量少的去动原代码开发逻辑，轻易去调整容易崩。

所以整理一下使用的技巧。

判断条件

多个函数执行需要新增相同的判断条件

在命令式编程中，我们按部就班地编写程序代码，详细描述要完成的事情以及完成的顺序。

函数式编程：

• 函数式编程的主要目标是描述数据，以及要对数据应用的转换。
• 在函数式编程中，程序执行顺序的重要性很低；而在命令式编程中，步骤和顺序是非常重要的。
• 函数和数据集合是函数式编程的核心。
• 在函数式编程中，我们可以使用和滥用函数和递归；而在命令式编程中，则使用循环、赋值、条件和函数。
• 在函数式编程中，要避免副作用和可变数据，意味着我们不会修改传入函数的数据。如果需要基于输入返回一个解决方案，可以制作一个副本并返回数据修改后的副本。

// 命令式编程与函数式编程区别
// 例如，迭代数组
// 命令式编程
const printArray = function(array) {
    for (var i = 0; i < array.length; i++) {
        console.log(array[i])
    }
}
printArray([1, 2, 3, 4, 5])

// 函数式编程
const forEach = function(array, action) {
    for (var i = 0; i < array.length; i++) {
        action(array[i])
    }
}
const logItem = function(item) {
    console.log(item)
}
forEach([1, 2, 3, 4, 5], logItem)

map、filter、reduce是**JavaScript函数式编程的基础**。

《学习JavaScript数据结构与算法(第3版)》

分而治之

分而治之是算法设计中的一种方法。它将一个问题分成多个和原问题相似的小问题，递归解决小问题，再将解决方式合并以解决原来的问题。

分而治之算法可以分成三个部分。

1. 分解原问题为多个子问题（原问题的多个小实例）。
2. 解决子问题，用返回解决子问题的方式的递归算法。递归算法的基本情形可以用来解决子问题。
3. 组合这些子问题的解决方式，得到原问题的解。

《学习JavaScript数据结构与算法(第3版)》

Fisher-Yates随机

迭代数组，从最后一位开始并将当前位置和一个随机位置进行交换。这个随机位置比当前位置小。这样，这个算法可以保证随机过的位置不会再被随机一次（洗扑克牌的次数越多，随机效果越差）。

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
       const randomIndex = Math.floor(Math.random() * (i + 1));
       [array[randomIndex], array[i]] = [array[i], array[randomIndex]]
    }
    return array;
}

《学习JavaScript数据结构与算法(第3版)》

顺序搜索

时间复杂度：O(n)

顺序或线性搜索是最基本的搜索算法。它的机制是，将每一个数据结构中的元素和我们要找的元素做比较。顺序搜索是最低效的一种搜索算法。

const DOSE_NOT_EXIST = -1;
function sequentialSearch(array, value, equalsFn = defaultEquals) {
    for (let i = 0; i < array.length; i++) { // 迭代整个数组
        if (enqualsFn(value, array[i])) { // 进行比较
            return i; // 找到返回索引
        }
    }
    return DOSE_NOT_EXIST; // 没有找到
}

function defaultEquals(a, b) {
    return a === b;
}

《学习JavaScript数据结构与算法(第3版)》

算法图解参考连接

算法动态排序效果： https://www.toptal.com/developers/sorting-algorithms#

冒泡排序

时间复杂度：O(n^2)