前端工程化及函数式编程

前端工程化

1、技术选型

vue、react、element、ant

2、统一规范

eslint、husky

3、测试、布署、监控

ut、e2e、mock

4、性能优化

lazy、module

a、视图渲染

b、代码 | 结构

tree shaking

import { select, button, tip } from elementUI
Vue.use(select)
Vue.use(button)
Vue.use(tip)

模块懒加载

vue-router + trunk

noParse
webpack 升级

c、网络

5、模块化重构

SPA、多页、多 trunk

函数式编程

JS 函数式编程

特点

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

概念

一种抽象运算过程

函数式的函数并非对于过程运算，函数的映射

幂等 - 相同的输入始终得到相同的输出

纯函数

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

定义：

函数作为参数被传递到另一个函数中

函数作为返回值被另外一个函数返回

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

前端工程化及函数式编程相关推荐

前端开发之函数式编程
通用的函数式编程语言,是Haskell,被函数式原教旨主义者认为是纯函数式语言.函数式编程的思想也不断影响着传统编程语言,比如Java 8开始支持lambda表达式,而函数式编程的大厦最初就是基于la ...
promise 浏览器实现的源码_【大前端01-01】函数式编程与JS异步编程、手写Promise...
[简答题]一.谈谈你是如何理解JS异步编程的,EventLoop.消息队列都是做什么的,什么是宏任务.什么是微任务? 如何理解JS异步编程众所周知JavaScript语言执行环境是"单线程 ...
（送书和红包）快人一步，掌握前端函数式编程
大家好,我是若川.上周末送出了3本新书和若干红包,抽奖名单已公布.本周又争取到了4本<前端函数式编程>书籍包邮送给大家,抽奖规则见文末,与以往不同的是除了关键词.留言.在看抽奖外,还有最早 ...
JS函数式编程概念理解：函子（Functor）
标签(空格分隔): 函数式编程函子 functor 很多前端在学习函数式编程之前,都会被各种概念折磨的死去活来,本文的重点算是函数式编程之前的一个甜品,重点在如何切入. 函子即Functor是FP( ...
函数式编程的Java编码实践：利用惰性写出高性能且抽象的代码
简介: 本文会以惰性加载为例一步步介绍函数式编程中各种概念,所以读者不需要任何函数式编程的基础,只需要对 Java 8 有些许了解即可. 作者 | 悬衡来源 | 阿里技术公众号本文会以惰性加载为例 ...
关于函数式编程的思考（1）
作者:李英杰,美团金融前端团队成员.欢迎大家一起来探讨FP 题外话:只是单纯地谈谈个人对函数式编程的理解,欢迎大家来一起探讨.也不会提及高阶函数与范畴学的内容,只聊一些很入门的问题.函数式编程的优点这 ...
【Web技术】1008- coding优雅指南：函数式编程
函数式编程是一种编程范式,主要思想是把程序用一系列计算的形式来表达,主要关心数据到数据之间的映射关系.同时在react hook中,其实存在了大量的函数式编程的思想.所以作为一个前端,对于函数式编程的 ...
前端基础进阶（七）：函数与函数式编程
纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学的时候最容易忽视的一个知识点.在学习的过程中,可能会有很多人.很多文章告诉你面向对象很重要,原型很重要,可是却很少有人告诉你,面 ...
前端进击的巨人（四）：略知函数式编程
系列更文前三篇文章,围绕了一个重要的知识点:"函数". 函数调用栈.函数执行上下文.函数作用域到闭包.可见不理解函数式编程,代码都撸不好. 函数是一等公民函数与其它数据类型一样, ...

前端工程化及函数式编程

前端工程化

1、技术选型

2、统一规范

3、测试、布署、监控

4、性能优化

a、视图渲染

b、代码 | 结构

c、网络

5、模块化重构

函数式编程

JS 函数式编程

特点

概念

纯函数

高阶函数 HOC

函数柯里化

组合

前端工程化及函数式编程相关推荐

最新文章

热门文章