js面向对象和面向过程的区别和联系是什么_怎么通俗理解面向对象和面向过程

2024年 9月 17日下午5:26 • 激活谷笔记

这是一个真实的例子，展示了三种最常见的编程范式的差异。我将用三种不同的方式解决一个问题。

每个示例将处理表单提交、验证用户输入并将创建的用户打印到控制台。我还添加了保存错误记录器。

案例表单

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Document</title>     <!-- <script src="http://www.toutiao.com/a/procedural.js" defer></script> -->     <!-- <script src="http://www.toutiao.com/a/oop.js" defer></script> -->     <!-- <script src="http://www.toutiao.com/a/functional.js" defer></script> -->   </head>   <body>     <form id="user-form">       <div>         <label for="username">Username</label>         <input id="username" />       </div>       <div>         <label for="password">Password</label>         <input id="password" type="password" />       </div>       <button type="submit">Submit</button>     </form>   </body> </html>

简单的 HTML 登录表单，它将包含三个js不同范式的有效文件。

过程化编程

过程式编程只是一步一步地解决问题。这是完全有效的编码方式，但是当您希望应用程序扩展时它有许多缺点。

const form = document.querySelector('form') const logs = [] form.addEventListener('submit', e => {   e.preventDefault()   const username = e.target.elements.username.value   const password = e.target.elements.password.value   let error = ''   if (username.trim().length < 3)     error = 'Username must be at least 3 characters long'   else if (!password.match(/[0-9]/))     error = 'Password must contain at least one digit'   if (error) {     logs.push(error)     alert(error)     return   }   const user = {     username,     password,   }   console.log(user)   console.log(logs) })

简单一步一步解决问题。但它根本不可重用和可扩展。尽管它对于解决此类问题完全有效，并且您将看到它比其他问题要短得多。

面向对象编程

面向对象编程 ( OOP ) 是最接近现实世界的，因此很容易让您思考。我们查看将其划分为Object的代码，其中每个都只完成它的工作。在OOP 中学习的有用概念是SOLID。

// Class responsible only for logging class Logger {   static logs = []   static showAlert(message) {     this.logs.push(message)     alert(message)   } } // Class responsible only for validating input class Validator {   static flags = {     minLength: 'MIN-LENGTH',     hasDigit: 'HAS-DIGIT',   }   static validate(value, flag, validatorValue) {     if (flag === this.flags.minLength) {       return value.trim().length >= validatorValue     }     if (flag === this.flags.hasDigit) {       return value.match(/[0-9]/)     }   } } // Class responsible only for creating valid user class User {   constructor(username, password) {     if (!Validator.validate(username, Validator.flags.minLength, 3))       throw new Error('Username must be at least 3 characters long')     if (!Validator.validate(password, Validator.flags.hasDigit))       throw new Error('Password must contain at least one digit')     this.username = username     this.password = password   } } // Class responsible only for from handling class FormHandler {   constructor(formElement) {     this.form = formElement     this.form.addEventListener('submit', this.handleSubmit.bind(this))   }   handleSubmit(e) {     e.preventDefault()     const username = e.target.elements.username.value     const password = e.target.elements.password.value     try {       const user = new User(username, password)       console.log(user)       console.log(Logger.logs)     } catch (err) {       Logger.showAlert(err)     }   } } const form = document.querySelector('form') new FormHandler(form)

现在你可以明白我将问题划分为Objects 的意思了：

FormHandler是它自己的类，负责处理表单。
User是另一个负责创建用户并使用Validator类验证输入的类。
如果有错误，Logger类用于显示警报并保存日志。

正如你所看到的，有更多的代码，看起来更复杂……那么为什么有人会喜欢这个？

酷的是，现在我们可以将它用于任何类似的形式，只需调用：

new FormHandler(new_form)

因此，它可以在包含此脚本的每个文件中重复使用。而且它很容易扩展，因为一切都被分成只做一件事的块（单一责任原则）。

函数式编程

非常流行，而且非常简单。请注意，这并不意味着它无论如何都更好。尽管某些范例可能对某些问题更好，但使用哪个完全取决于您。

const FLAGS = {   minLength: 'MIN-LENGTH',   hasDigit: 'HAS-DIGIT', } // Function that handles validation const validate = (value, flag, validatorValue) => {   switch(flag){     case FLAGS.minLength:       return value.trim().length >= validatorValue     case FLAGS.hasDigit:       return !!value.match(/[0-9]/)   } } // Function that sets submit handler const setFormSubmitHandler = (formId, onSubmit) => {   const form = document.getElementById(formId)   form.addEventListener('submit', onSubmit) } // Function that returns values of required fields as object // In this case it will return {username: "<value>", password: "<value>"} // It might look scary but keep in mind that it's completely reusable const getFormValues = (e, ...fields) => {   const values = Object.entries(e.target.elements)   const filteredValues = values.filter(([key]) => fields.includes(key))   return filteredValues.reduce(     (acc, [key, { value }]) => ({ ...acc, [key]: value }),     {}   ) } // Function that creates valid user const createUser = (username, password) => {   if (!validate(username, FLAGS.minLength, 3))     throw new Error('Username must be at least 3 characters long')   if (!validate(password, FLAGS.hasDigit))     throw new Error('Password must contain at least one digit')   return { username, password } } // Function that creates logger object with *logs* and *showAlert* function const logger = (() => {   const logs = []   return {     logs,     showAlert: message => {       logs.push(message)       alert(message)     },   } })() // Main function const handleSubmit = e => {   e.preventDefault()   const { username, password } = getFormValues(e, 'username', 'password')   try {     const user = createUser(username, password)     console.log(user)     console.log(logger.logs)   } catch (error) {     logger.showAlert(error)   } } setFormSubmitHandler('user-form', handleSubmit)

正如您在函数式编程中看到的，我们希望使用小的（理想情况下是纯函数）函数来解决问题。这种方法也非常具有可扩展性，并且函数可以重用。

纯函数是一种没有难以追踪的副作用的函数。纯函数应该只依赖于给定的参数。

结论

没有更好和更坏的范式。有经验的开发人员可以看到每个的优点，并为给定的问题选择最好的。

过程式编程并不是说你不能使用函数，函数式编程也不会阻止你使用“类”。这些范式只是帮助以一种随着代码增长而有益的方式来解决问题。

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

js面向对象和面向过程的区别和联系是什么_怎么通俗理解面向对象和面向过程

相关推荐