函数式编程vs面向对象编程vs过程式编程的JS演示比较

　　这是一个真实的例子，展示了三种最常见的编程范式的差异。我将用三种不同的方式解决一个问题。
　　每个示例将处理表单提交、验证用户输入并将创建的用户打印到控制台。我还添加了保存错误记录器。
　　案例表单！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitle！！！headbodybodyhtml
　　简单的HTML登录表单，它将包含三个js不同范式的有效文件。
　　过程化编程
　　过程式编程只是一步一步地解决问题。这是完全有效的编码方式，但是当您希望应用程序扩展时它有许多缺点。constformdocument。querySelector（form）constlogs〔〕form。addEventListener（submit，e｛e。preventDefault（）constusernamee。target。elements。username。valueconstpassworde。target。elements。password。valueleterrorif（username。trim（）。length3）errorUsernamemustbeatleast3characterslongelseif（！password。match（〔09〕））errorPasswordmustcontainatleastonedigitif（error）｛logs。push（error）alert（error）return｝constuser｛username，password，｝console。log（user）console。log（logs）｝）
　　简单一步一步解决问题。但它根本不可重用和可扩展。尽管它对于解决此类问题完全有效，并且您将看到它比其他问题要短得多。
　　面向对象编程
　　面向对象编程（OOP）是最接近现实世界的，因此很容易让您思考。我们查看将其划分为Object的代码，其中每个都只完成它的工作。在OOP中学习的有用概念是SOLID。ClassresponsibleonlyforloggingclassLogger｛staticlogs〔〕staticshowAlert（message）｛this。logs。push（message）alert（message）｝｝ClassresponsibleonlyforvalidatinginputclassValidator｛staticflags｛minLength：MINLENGTH，hasDigit：HASDIGIT，｝staticvalidate（value，flag，validatorValue）｛if（flagthis。flags。minLength）｛returnvalue。trim（）。lengthvalidatorValue｝if（flagthis。flags。hasDigit）｛returnvalue。match（〔09〕）｝｝｝ClassresponsibleonlyforcreatingvaliduserclassUser｛constructor（username，password）｛if（！Validator。validate（username，Validator。flags。minLength，3））thrownewError（Usernamemustbeatleast3characterslong）if（！Validator。validate（password，Validator。flags。hasDigit））thrownewError（Passwordmustcontainatleastonedigit）this。usernameusernamethis。passwordpassword｝｝ClassresponsibleonlyforfromhandlingclassFormHandler｛constructor（formElement）｛this。formformElementthis。form。addEventListener（submit，this。handleSubmit。bind（this））｝handleSubmit（e）｛e。preventDefault（）constusernamee。target。elements。username。valueconstpassworde。target。elements。password。valuetry｛constusernewUser（username，password）console。log（user）console。log（Logger。logs）｝catch（err）｛Logger。showAlert（err）｝｝｝constformdocument。querySelector（form）newFormHandler（form）
　　现在你可以明白我将问题划分为Objects的意思了：FormHandler是它自己的类，负责处理表单。User是另一个负责创建用户并使用Validator类验证输入的类。如果有错误，Logger类用于显示警报并保存日志。
　　正如你所看到的，有更多的代码，看起来更复杂那么为什么有人会喜欢这个？
　　酷的是，现在我们可以将它用于任何类似的形式，只需调用：newFormHandler（newform）
　　因此，它可以在包含此脚本的每个文件中重复使用。而且它很容易扩展，因为一切都被分成只做一件事的块（单一责任原则）。
　　函数式编程
　　非常流行，而且非常简单。请注意，这并不意味着它无论如何都更好。尽管某些范例可能对某些问题更好，但使用哪个完全取决于您。constFLAGS｛minLength：MINLENGTH，hasDigit：HASDIGIT，｝Functionthathandlesvalidationconstvalidate（value，flag，validatorValue）｛switch（flag）｛caseFLAGS。minLength：returnvalue。trim（）。lengthvalidatorValuecaseFLAGS。hasDigit：return！！value。match（〔09〕）｝｝FunctionthatsetssubmithandlerconstsetFormSubmitHandler（formId，onSubmit）｛constformdocument。getElementById（formId）form。addEventListener（submit，onSubmit）｝FunctionthatreturnsvaluesofrequiredfieldsasobjectInthiscaseitwillreturn｛username：value，password：value｝ItmightlookscarybutkeepinmindthatitscompletelyreusableconstgetFormValues（e，。。。fields）｛constvaluesObject。entries（e。target。elements）constfilteredValuesvalues。filter（（〔key〕）fields。includes（key））returnfilteredValues。reduce（（acc，〔key，｛value｝〕）（｛。。。acc，〔key〕：value｝），｛｝）｝FunctionthatcreatesvaliduserconstcreateUser（username，password）｛if（！validate（username，FLAGS。minLength，3））thrownewError（Usernamemustbeatleast3characterslong）if（！validate（password，FLAGS。hasDigit））thrownewError（Passwordmustcontainatleastonedigit）return｛username，password｝｝FunctionthatcreatesloggerobjectwithlogsandshowAlertfunctionconstlogger（（）｛constlogs〔〕return｛logs，showAlert：message｛logs。push（message）alert（message）｝，｝｝）（）MainfunctionconsthandleSubmite｛e。preventDefault（）const｛username，password｝getFormValues（e，username，password）try｛constusercreateUser（username，password）console。log（user）console。log（logger。logs）｝catch（error）｛logger。showAlert（error）｝｝setFormSubmitHandler（userform，handleSubmit）
　　正如您在函数式编程中看到的，我们希望使用小的（理想情况下是纯函数）函数来解决问题。这种方法也非常具有可扩展性，并且函数可以重用。
　　纯函数是一种没有难以追踪的副作用的函数。纯函数应该只依赖于给定的参数。
　　结论
　　没有更好和更坏的范式。有经验的开发人员可以看到每个的优点，并为给定的问题选择最好的。
　　过程式编程并不是说你不能使用函数，函数式编程也不会阻止你使用类。这些范式只是帮助以一种随着代码增长而有益的方式来解决问题。
　　函数式编程vs面向对象编程vs过程式编程的JS演示比较DEV