关于前端:一个小故事引起的讨论JavaScript中使用函数式编程

21次阅读

共计 2313 个字符,预计需要花费 6 分钟才能阅读完成。

前言

昨天的文章中提到了一个小插曲, 故事的由来是我微信中的一个 ” 小老板 ” 忽然来了个不可言喻的表情(Little (small) boss “SB…”??? 哈哈 还是简称小吧)。而后开始了上面的对话:

  • 小: 最近 TM 的好烦
  • 我: 怎么了 boss
  • 小: 我写的代码最近新增了业务 改变起来 牵一发而动全身。心态有点小炸裂。
  • 我: 具体怎么个状况? 让小老弟帮你排排忧。
  • 小: 之前不是刚独立负责我的项目吗,从 0 到 1 实现起来感觉也没啥太大的艰难。然而呢 最近在原来的根底上新增了点新业务需要须要改变之前的代码。就总遇到一些问题 一个函数内的全局变量改变而后性能很多都生效了 导致须要始终 debug 追踪到底在哪里应用了。。。
  • 我: 我个别拿到我的项目 / 产品需要之后在写代码前会花大量事件思考设计 可能比例 7:3 甚至 8:2; 教训是一方面。思考还是很重要的。回到你的问题 就说你后期没做好一些工作例如:编码设计 ; 整体模块划分 ; 工程类框架 (做一些 单元测试, 覆盖率测试 ..) 等等措施, 明天给你聊一下具体如何解决这些 小问题!!

我开展了一系列装逼和舔的操作 ….

回到明天文章的主题介绍一下编程范式, 以及如何在 JavaScript 中应用起来。

什么是编程范式 ?

编程范式 (Programming paradigm) 是指计算机中编程的榜样模式或办法。

编程范式次要蕴含:命令式编程 (Imperative)、申明式编程(Declarative) 和函数式编程(Functional)…

命令式编程:

命令式编程的次要思维是关注计算机执行的步骤,即一步一步通知计算机先做什么再做什么。

比方:如果你想进行一个变量与变量组合的输入,你须要这样通知计算机:

  1. 第一步: 创立一个变量(名字) name;
  2. 第二步: 创立一个变量(问候语) greeting;
  3. 第三步: console.log 输入
   var name = "wlove"; // 申明
   var greeting = "hello, I'm ";// 申明
   console.log(greeting + name);// 输入 hello, I'm wolove

申明式编程:

申明式编程是以 数据结构 的模式来表白程序执行的逻辑。它的次要思维是通知计算机应该做什么,但不指定具体要怎么做。日程最靠近的就说网页编程中用到的 HTML 和 CSS 都属于申明式编程。(解释一下:HTML/CSS 它们的编写其实就是结构化的 不会具体通知计算机做什么细节内容。所以属于申明式编程Declarative programming; 其实和很多配置文件很类似。)

最间接举例就是SQL

SELECT * FROM table WHERE num < 5

通过观察申明式编程的代码咱们能够发现它有一个特点是它不须要创立变量用来存储数据。
另一个特点是它不蕴含循环管制的代码如 for,while。

函数式编程:

函数式编程和申明式编程是有所关联的,因为他们思维是统一的:即只关注做什么而不是怎么做。但函数式编程不仅仅局限于申明式编程。

函数式编程最重要的特点是”函数第一位 ”,即函数能够呈现在任何中央,比方你能够把函数作为参数传递给另一个函数,不仅如此你还能够将函数作为返回值。很重要一点; 如果你应用切当这种编程只须要思考输入输出的一个流。什么对象 (原型) 以及其的副作用 (相互作用影响) 都不须要思考。

说起函数式编程 可能接触别的语言的敌人 一下就会回忆起 Haskell,Clojure这些语言。其实大部分常见的编程语言都曾经提供了对这种编程形式的反对; 比方明天的配角JavaScript

相比于以前的命令式编程; 申明式编程, 我更偏差于应用函数式编程。首先我试验过面向对象 (原型) 的形式来进行编程。很困惑或者说很苦楚; 每一次的 debug 相当的提神醒脑; 其次函数式编程能够让代码的逻辑更清晰更优雅; 更平安。(总之集体用起来就说很爽)

JavaScript 的函数式编程几个介绍:

说起函数式编程最根本须要思考 side effect(无副作用) 和pure(纯); 如果按这样去实现就能正当的解决小老板的一个很重要的问题 debug一个变量始终跟踪哪里批改了 …;

// 例子 1 纯函数
function greet(name){return "hello I'm " + name;}
greet("wlove") // hello I'm wlove


// 例子 2 非纯函数  用到了内部的变量
var name = "wlove"
function _fn(name){return pre + str}
greet(name)// hello I'm wlove 

函数式编程还有一个特点高阶函数(也是晋升的一个重要知识点); 函数能够作为一个函数的返回。

// 高阶函数:
function greet(greeting){return function(name){return greeting + " " + name};
}
var GREETING = greet("hello I' m");
GREETING("wlove"); // "hello I' m  wlove"

函数式编程还有一个须要思考的问题; 如果说每次都从新生成一个 Copy 对象(举个例子 如果输出的参数是array); 每次扭转从新生成一个。那样会减少空间的应用。如何解决这个问题? 大家能够思考一下或者查阅一些材料。留言讨论一下。

最初

间隔上一篇文章的生存日记: 20210524 日常生活的反复。散会; 学习; 写代码; 跑步; 写文章; 录视频; 逛社区 … 开心就完事了。

本篇文章次要是因为我特地想帮忙 (tian) 小老板 哈哈; 也算是随想随写; 欢送大家留言探讨。前面评论会补充介绍如何无效解决空间问题。

聊完天之后我的小老板就是一顿夸, 然而也不晓得实际没实际。我得多被动跟人家聊聊天 嘿嘿

下一篇 JS 引擎, 作为前端到底须要意识到什么境地, 以及如何学习。

正文完
 0