Implementar un patrón MVVM

Lógica de implementación

• 1. Vincular el parámetro de opciones a este
• 2, antes del ciclo de vida creado: si hay un método de beforeCreateejecuciónbeforeCreate
• 3. Proxy de datos: use Object.definePrototype para representar los atributos en los datos y métodos para esto, y use this.key para acceder a los atributos en los objetos de datos y métodos.
• 4. Secuestro de datos (núcleo): recorra los atributos de los datos, use Object.definePrototype para agregarles métodos get y set y active el método get cuando se adquiere. Si es un desencadenante de la etapa de compilación, suscríbase a esta información (la fuente de la información está en la compilación La etapa se almacena en la variable global window.target), si es para modificar los datos en los datos, active el método set y llame al método de liberación de la clase Dep. Hay una matriz en la clase Dep para almacenar información de dependencia, un método on para enviar a la matriz para implementar la suscripción y un método de emisión para atravesar los datos en la matriz y activar el método de nodo de actualización correspondiente.
• 5. El ciclo de vida creado: si se createdejecuta el método creado
• 6. Compilar: Obtenga todos los nodos DOM, convierta el DOM real en fragmentos de documentos y guárdelos en la memoria para mejorar el rendimiento. Atraviesa los nodos DOM en la memoria. Si el nodeType es 1 (elemento) o 3 (nodo de texto) y las llaves dobles coinciden, el método de actualización del nodo se almacena en la variable global window.target, y el método node.textContent se usa para lograr el doble Compile el contenido de las llaves y luego borre las variables globales; si se detecta que nodeType es 1 (nodo de elemento)
  , atraviese todos los atributos del nodo de elemento, si el nombre de atributo tiene @, use el addEventListenerevento de enlace correspondiente y enlace el método correspondiente en métodos Establezca el segundo parámetro; si es así v-model, use addEventListener para vincular el evento de entrada y asigne un valor al atributo de datos correspondiente en el segundo método de parámetro; otra lógica de compilación es aproximadamente la misma
• 7, ciclo de vida montado: si hay un atributo creado, ejecute el método creado

Código

import Compile from "./compile.js";
import Observe from "./observe.js";
import Proxy from "./proxy.js";
export default class Jddk {
    
    
	constructor(options) {
    
    
		if (typeof options.data === "function") {
    
    
			this.$data = options.data();
		} else {
    
    
			this.$data = options.data;
		}
		this.$el = options.el;
		this.$methods = options.methods;
		this.$beforeCreate = options.beforeCreate;
		this.$created = options.created;
		this.$mounted = options.mounted;

		// beforeCreate生命周期：此时实例刚开始初始化，还没有将data中的数据进行代理，无法使用this.xx获取到data中的数据
		if (this.$beforeCreate) {
    
    
			this.$beforeCreate();
		}
		// 数据代理：将data的数据代理到this上
		new Proxy(this);

		// 数据劫持：检测data中的数据改变
		new Observe(this);

		// created生命周期：此时data中的数据已经全部绑定到了this上，但是HTML还没有开始编译
		if (this.$created) {
    
    
			this.$created();
		}

		// 编译器
		new Compile(this);

		// mounted生命周期：此时HTML已经编译完
		if (this.$mounted()) {
    
    
			this.$mounted();
		}
	}
}

Dirección de código completo

https://github.com/jddk/jddk