Resumen: La programación funcional y la orientación a objetos son muy comunes en la programación diaria. En el desarrollo de proyectos front-end, la programación orientada a objetos y la funcional a menudo se usan en combinación.Este artículo hace algunas comparaciones entre la programación funcional y la orientada a objetos. Luego introduzca los componentes funcionales desde la perspectiva de los ganchos y luego la programación funcional de vue3. También hay algo de programación funcional de lambda y stream de java.
1. Método de procesamiento de datos
1.1 El método de almacenamiento de datos determina el método de acceso.
1. Para OO, para acceder a los datos (excepto las variables globales), primero debe obtener la referencia del objeto y luego realizar operaciones (acceso directo - propiedades públicas, o llamar a funciones/métodos miembro para acceder - propiedades privadas)
2. Para el estilo funcional, el acceso a los datos es un acceso directo (a través de parámetros de entrada de función o búsqueda de cadena de alcance)
//OO
class Foo {
constructor(){
this.bar = 0
}
}
let foo = new Foo()
foo.bar ++
//函数式
let bar = 0
function foo(){
bar ++
}
foo()
Como se puede ver en el código, la programación funcional es más concisa. Al llamar datos en la programación funcional, no necesita crear un objeto primero y luego considerar la operación, pero primero considere el problema desde la perspectiva de la función.
en programación funcional. Todos los datos son inmutables. Diferentes funciones intercambian información a través de flujos de datos. Las funciones, como ciudadanos de primera clase, disfrutan del mismo estado que los datos. Se pueden pasar como parámetros a la siguiente función y también se pueden usar como valores de retorno.
2. Flexibilidad y rendimiento
2.1 Todos los datos son inmutables, por lo que todas las variables siempre existen durante la ejecución del programa, lo que consume una gran cantidad de recursos de ejecución. 2.2 La
programación funcional en proyectos a gran escala será difícil si la comprensión de la programación funcional no es profunda para comprender la situación.
2.3 La escritura funcional es más flexible y más semántica.
2.4 En la programación funcional, el enfoque principal de la programación es lo que estamos haciendo. En la programación orientada a objetos, el enfoque principal de la programación es cómo lo hacemos.
3. Aplicación en proyectos front-end
3.1 Uso de anzuelos
- Una breve introducción
al gancho 1.1 En reaccionar, los componentes de función solo pueden tener accesorios, no estado, es decir, solo se pueden implementar componentes sin estado. React no proporciona algunos métodos de operación para establecer el estado y el ciclo de vida en los componentes de funciones, por lo que en ese momento, los componentes de funciones eran adecuados para muy pocos escenarios.
1.2 El objetivo del gancho es permitirle usar el estado y otras funciones de React sin escribir una clase - El marco de significado del gancho
es servir al negocio. Un problema inevitable en el negocio es: reutilización lógica, la misma función, el mismo componente, en diferentes ocasiones, a veces tenemos que escribir 2+ veces, para evitar el acoplamiento. , los marcos principales han presentado algunas soluciones:
2.1 mixin react y vue han usado mixin (react ha sido abandonado),
2.2 HOC Higher-Order-Components (HOC) relativamente más en react , para vue, la plantilla anidada es un poco . . Incómodo,
la ranura de 2.3 ranuras se usa más en vue, y reaccionar básicamente no necesita el uso de la ranura
Estado de uso del caso del sitio web oficial de React
import React, {
useState } from 'react';
function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {
count} times</p>
<button onClick={
() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Resumen
1. El componente de función será una dirección para el desarrollo de los principales marcos en el futuro. La simpatía natural de la función para TS también es una influencia importante; 2.
El costo de comenzar con el gancho de reacción será más difícil que el de vue , que naturalmente evita que algunos reaccionen 3.
El gancho debe ser una tendencia del gran front-end.
Esta parte es para referencia: https://blog.csdn.net/weixin_33929309/article/details/93164243
3.2 Programación funcional de vue3
Vue2 exporta métodos como montados, datos, calculados y observados como propiedades de un objeto.
Vue3 ha agregado una función de entrada llamada configuración, y los métodos como valor, computado, reloj, montado, todos deben importarse desde el exterior.
En vue3, podemos escribir la parte lógica JS de este componente como un método y usar import para introducirlo a pedido. Los beneficios de esto son obvios. Primero, necesitamos escribir menos código. Segundo, podemos encapsular más subfunciones y hacer referencia a más funciones públicas para mantener nuestro código. Tercero, la legibilidad del código se vuelve más alta. . (Por supuesto, el tamaño de nuestro paquete también será más pequeño)
La estructura de organización del código de vue2
<script>
import ueditor from 'ueditor'
export default {
data () {
return {
ue: null,
ueId: `J_ueditorBox_${
new Date().getTime()}`,
ueContent: '',
dialogVisible: false
}
},
mounted () {
this.ue = ueditor.getEditor(this.ueId, {
// serverUrl: '', // 服务器统一请求接口路径
zIndex: 3000
})
},
methods: {
getContent () {
this.dialogVisible = true
this.ue.ready(() => {
this.ueContent = this.ue.getContent()
})
}
}
}
</script>
Programación funcional de vue3
<script>
import {
value, computed, watch, onMounted } from 'vue'
export default {
setup() {
// reactive state
const count = value(0)
// computed state
const plusOne = computed(() => count.value + 1)
// method
const increment = () => {
count.value++ }
// watch
watch(() => count.value * 2, val => {
console.log(`count * 2 is ${
val}`)
})
// lifecycle
onMounted(() => {
console.log(`mounted`)
})
// expose bindings on render context
return {
count,
plusOne,
increment
}
}
}
</script>
4. Programación funcional en proyectos java
El uso de la programación funcional en proyectos java es muy diferente al de los proyectos front-end. El uso de la programación funcional en Java puede reducir en gran medida la cantidad de código, pero en el análisis final, la estructura sigue sirviendo a algunas propiedades o métodos del objeto.
4.1 El siguiente es un ejemplo simple de un caso clásico simple de hilos. Tome prestada la expresión lambda, omita el proceso de new Runnable() y reescriba directamente el método de ejecución de la clase principal, sin @Override
public static void main(String[] args) {
// Java7
new Thread(new Runnable() {
@Override
public void run() {
for (int i = 0; i < 100; i++) {
System.out.println(i);
}
}
}).start();
// Java8
new Thread(() -> {
for (int i = 0; i < 100; i++) {
System.out.println(i);
}
}).start();
}
4.2 También se utiliza en muchos escenarios, como la conversión de flujo de datos
// 2.查询所有属性
List<AttrGroupEntity> attrGroupEntities = this.getData();
List<AttrGroupWithAttrsVo> collect = attrGroupEntities.stream().map((item) -> {
// 对原有对象 AttrGroupEntity 处理封装出新的对象 AttrGroupWithAttrsVo
AttrGroupWithAttrsVo attrGroupWithAttrsVo = new AttrGroupWithAttrsVo();
BeanUtils.copyProperties(item,attrGroupWithAttrsVo);
// 查询出属性分组的id然后赋值
List<AttrEntity> relationAttr = attrService.getRelationAttr(item.getAttrGroupId());
attrGroupWithAttrsVo.setAttrs(relationAttr);
return attrGroupWithAttrsVo;
}).collect(Collectors.toList());
V. Resumen
1. En el proyecto actual, hay más programación funcional incorporada en el front-end y más ideas OOP en el back-end.
2. En proyectos orientados a la ingeniería a gran escala, el método orientado a objetos se utiliza para facilitar la expansión y la escritura. Algunos módulos organizacionales pequeños en el proyecto pueden usar la programación funcional para mejorar la eficiencia.