学习笔记:前端工程化

malagufan
117 阅读2分钟

Based by 云隐

前端工程化：

  1. 什么是前端工程化？

< = > 从手动到自动挡的进化

  1. 为什么要前端工程化？< = > 手写代码与实际浏览器运行之

间的距离

  1. 前端工程化 === webpack？< = > 前端工程化组成 与

webpack 定位

前端工程化：

a. 技术选型

b. 规范统一

c. 测试 + 部署 + 监控

d. 性能优化

e. 模块化重构

webpack 一、静态文件模块打包工具

、webpack 组成与使用

  1. 初始化 webpack 配置

  2. 运行流程与模块功能

  3. 相关中电模块常见面试题

函数式编程

  1. 概念

  2. 高阶函数

  3. 纯函数

  4. 科里化

  5. 函子

webpack 相关再开发

  1. Loader

  2. Plugin

常见面试疑问？

l Webpack + 整体模块化分析

l Webpack + 性能优化

l 微内核实际应用

JS函数式编程

特点
  1. Vue3 React16.8 全面化函数式的推动
  2. 函数式编程可以使得代码单元相对更加独立 - tree shaking过程更顺畅，更方便做UT
  3. 减少了对this的依赖，减轻了开发人员对于指向问题的困惑
  4. js天生友好函数式：ramda、loadsh

概念

  1. 一种抽象运算过程
  1. 函数式的函数并非对于过程运算，函数的映射
  2. 幂等 - 相同的输入始终得到相同的输出
纯函数
let arr = [1, 2, 3, 4, 5];

arr.slice(0, 3); // [1, 2, 3]
arr.slice(0, 3); // [1, 2, 3]

arr.splice(0, 3); // [1, 2, 3]
arr.splice(0, 3); // [4, 5]

对于系统的改造

// 不纯的
let min = 18;
let limit = age => age > min;

// 纯纯的
let limit = age => age > 18;

对于大型系统来说，对于外部状态的依赖，会大大的提高系统复杂性

  • 问题： 18被硬编码到了函数内部的，造成了功能拓展的局限

高阶函数HOC

定义：

  1. 函数作为参数被传递到另一个函数中
  1. 函数作为返回值被另外一个函数返回
    let fn = arg => {
        let outer = "outer";
        let innerFn = () => {
            console.log(outer);
            console.log(arg);
        }
        return innerFn;
    }

    let closure = fn(18);
    // 闭包

函数柯里化

传递给函数一部分参数用于功能调用，让他返回一个函数去处理剩下的参数

    let add = (x, y) => x + y;

    // 柯里化后
    let add = x => (y => x + y);

    let add2 = add(2);
    let add200 = add(200);

    add2(2); // 2 + 2 add(2)(2)
    add200(50); // 200 + 50

    // 回到上面的limit， 纯函数化
    let limit = min => (age => age > min);
    let limit18 = limit(18);
    limit18(20); // true

是一种预加载方式

  • 问题 包心菜代码的产生h(g(f(x)));

组合

通过更优雅的方式实现纯函数的解耦

let compose = (f, g) => (x => f(g(x)));

let add1 = x => x + 1;
let mul5 = x => x * 5;

compose(mul5, add1)(2); // 15

// 面试题 - 数组长度未知的情况下，拿到最后一项
let first = arr => arr[0];
let reverse = arr => arr.reverse();

let last = compose(first, reverse);

last([1, 2, 3, 4, 5]); // 5
avatar
文章
阅读
粉丝